416 lines
17 KiB
TypeScript
416 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
import { FaInstagram, FaYoutube, FaTiktok, FaGraduationCap, FaBuilding, FaSearch, FaGlobe, FaCheckCircle, FaCalculator } from 'react-icons/fa'
|
||
import AnimatedIcon from '@/components/AnimatedIcon'
|
||
import Navigation from '@/components/Navigation'
|
||
import Footer from '@/components/Footer'
|
||
|
||
export default function Home() {
|
||
return (
|
||
<>
|
||
<Navigation />
|
||
<main>
|
||
{/* Hero Section */}
|
||
<section className="hero hero-with-background">
|
||
<div className="hero-background-image"></div>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="hero-content"
|
||
>
|
||
<h1 className="hero-title">Doing-IT</h1>
|
||
<p className="hero-subtitle">
|
||
IT Weiterbildung und Schulungen<br />
|
||
für Quereinsteiger und Unternehmen
|
||
</p>
|
||
<p style={{ fontSize: '19px', color: 'var(--color-text-secondary)', marginTop: '20px', maxWidth: '700px', marginLeft: 'auto', marginRight: 'auto', lineHeight: '1.7' }}>
|
||
Doing-IT unterstützt Quereinsteiger und Unternehmen dabei, IT-Kompetenzen aufzubauen, Prozesse zu optimieren und digitale Sicherheit zu verbessern. Durch Schulungen, IT-Analysen, Webseiten-Checks und Social-Media-Analysen helfen wir dabei, digitale Herausforderungen einfach und verständlich zu meistern.
|
||
</p>
|
||
<div className="hero-buttons" style={{ marginTop: '40px' }}>
|
||
<Link href="/quereinsteiger" className="btn btn-primary btn-large">
|
||
Für Quereinsteiger
|
||
</Link>
|
||
<Link href="/unternehmen" className="btn btn-secondary btn-large">
|
||
Für Unternehmen
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Social Media Icons */}
|
||
<div className="social-icons">
|
||
<a
|
||
href="https://www.instagram.com/doing_it_de"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="social-icon-link"
|
||
aria-label="Instagram"
|
||
>
|
||
<FaInstagram />
|
||
</a>
|
||
<a
|
||
href="https://www.youtube.com/@doing-IT-de"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="social-icon-link"
|
||
aria-label="YouTube"
|
||
>
|
||
<FaYoutube />
|
||
</a>
|
||
<a
|
||
href="https://www.tiktok.com/@doing_it_de"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="social-icon-link"
|
||
aria-label="TikTok"
|
||
>
|
||
<FaTiktok />
|
||
</a>
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* About Section */}
|
||
<section className="features">
|
||
<div className="container">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="section-header"
|
||
>
|
||
<h2>Was ist Doing-IT?</h2>
|
||
<p>Ein Unternehmen und Social Media Kanal rund um die Informatik</p>
|
||
</motion.div>
|
||
|
||
<div className="features-grid">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
className="feature-card"
|
||
>
|
||
<AnimatedIcon delay={0.1}>
|
||
<FaGraduationCap size={32} color="var(--color-red)" />
|
||
</AnimatedIcon>
|
||
<h3>Schulungen für Quereinsteiger</h3>
|
||
<p>Speziell konzipierte Schulungen für den Einstieg in die Informatik. Von den Grundlagen bis zu fortgeschrittenen Themen – wir begleiten Sie auf Ihrem Weg.</p>
|
||
<Link href="/quereinsteiger/lernpfad-finder" className="btn btn-primary">
|
||
Lernpfadfinder
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="feature-card"
|
||
>
|
||
<AnimatedIcon delay={0.2}>
|
||
<FaBuilding size={32} color="var(--color-red)" />
|
||
</AnimatedIcon>
|
||
<h3>Optimierte Schulungen für Unternehmen</h3>
|
||
<p>Maßgeschneiderte Schulungen angepasst an Ihre Anforderungen. Ob TISAX oder ISO Zertifizierung – wir schulen Ihre Mitarbeiter auf sensible IT-Themen.</p>
|
||
<Link href="/unternehmen" className="btn btn-primary">
|
||
Mehr erfahren
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
className="feature-card"
|
||
>
|
||
<AnimatedIcon delay={0.3}>
|
||
<FaSearch size={32} color="var(--color-red)" />
|
||
</AnimatedIcon>
|
||
<h3>IT-Analyse</h3>
|
||
<p>Umfassende Analyse Ihrer IT-Infrastruktur: Bedarf, Sicherheit, Kostenersparnis und Optimierungspotenziale. Wir identifizieren Schwachstellen und Verbesserungsmöglichkeiten.</p>
|
||
<Link href="/unternehmen/it-infrastrukturanalyse" className="btn btn-primary">
|
||
IT-Analyse anfordern
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="feature-card"
|
||
>
|
||
<AnimatedIcon delay={0.4}>
|
||
<FaGlobe size={32} color="var(--color-red)" />
|
||
</AnimatedIcon>
|
||
<h3>Webseiten & Social Media Analysen</h3>
|
||
<p>Professionelle Analysen Ihrer Webseite und Social Media Präsenz. Wir zeigen Ihnen Optimierungspotenziale und helfen bei der digitalen Strategie.</p>
|
||
<Link href="/kontakt" className="btn btn-primary">
|
||
Analyse anfragen
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Tools Section */}
|
||
<section className="features" style={{ background: 'transparent' }}>
|
||
<div className="container">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="section-header"
|
||
>
|
||
<h2>Unsere Tools</h2>
|
||
<p>Praktische Hilfsmittel für Ihre IT-Planung</p>
|
||
</motion.div>
|
||
|
||
<div className="features-grid">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
className="feature-card"
|
||
>
|
||
<AnimatedIcon delay={0.1}>
|
||
<FaCheckCircle size={32} color="var(--color-red)" />
|
||
</AnimatedIcon>
|
||
<h3>IT-Checkliste</h3>
|
||
<p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit und identifizieren Sie Optimierungspotenziale in Ihrer IT-Infrastruktur.</p>
|
||
<Link href="/unternehmen/tools/it-checkliste" className="btn btn-primary">
|
||
Checkliste starten
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="feature-card"
|
||
>
|
||
<AnimatedIcon delay={0.2}>
|
||
<FaCalculator size={32} color="var(--color-red)" />
|
||
</AnimatedIcon>
|
||
<h3>Schulungsbedarfs-Rechner</h3>
|
||
<p>Ermitteln Sie den Umfang Ihrer IT-Schulung basierend auf Mitarbeiteranzahl, Abteilungen und gewünschten Themen.</p>
|
||
<Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-primary">
|
||
Bedarf berechnen
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* YouTube Videos Section */}
|
||
<section className="features" style={{ background: 'transparent' }}>
|
||
<div className="container">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="section-header"
|
||
>
|
||
<h2>Aus unserem YouTube Kanal</h2>
|
||
<p>Lernen Sie mehr über IT-Themen in unseren Videos</p>
|
||
</motion.div>
|
||
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '1fr',
|
||
gap: '40px',
|
||
maxWidth: '1200px',
|
||
margin: '0 auto'
|
||
}}>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
style={{
|
||
position: 'relative',
|
||
paddingBottom: '56.25%',
|
||
height: 0,
|
||
overflow: 'hidden',
|
||
borderRadius: '20px',
|
||
background: 'var(--color-card)',
|
||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||
}}
|
||
>
|
||
<iframe
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
border: 'none'
|
||
}}
|
||
src="https://www.youtube.com/embed/TSJUu4729RE"
|
||
title="YouTube video player"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
/>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
style={{
|
||
position: 'relative',
|
||
paddingBottom: '56.25%',
|
||
height: 0,
|
||
overflow: 'hidden',
|
||
borderRadius: '20px',
|
||
background: 'var(--color-card)',
|
||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||
}}
|
||
>
|
||
<iframe
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
border: 'none'
|
||
}}
|
||
src="https://www.youtube.com/embed/nMREjJ6UbHY"
|
||
title="YouTube video player"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Wiki & Resources Section */}
|
||
<section className="cta-hero" style={{ background: 'var(--color-card)' }}>
|
||
<div className="container">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="cta-hero-content"
|
||
>
|
||
<h2>Weitere Ressourcen</h2>
|
||
<p style={{ marginBottom: '40px' }}>
|
||
Entdecken Sie unser Wiki mit umfassenden IT-Ressourcen und Lernmaterialien
|
||
</p>
|
||
<div style={{ display: 'flex', gap: '20px', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||
<a
|
||
href="https://wiki.doing-it.de"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="btn btn-primary btn-large"
|
||
>
|
||
Zum Wiki
|
||
</a>
|
||
<Link href="/quereinsteiger/lernpfad-finder" className="btn btn-secondary btn-large">
|
||
Lernpfadfinder
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Partners Section */}
|
||
<section className="partners-section">
|
||
<div className="container">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="partners-content"
|
||
>
|
||
<p style={{ fontSize: '15px', color: 'var(--color-text-secondary)', marginBottom: '20px', textTransform: 'uppercase', letterSpacing: '1px' }}>
|
||
Partner-Projekt
|
||
</p>
|
||
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)', marginBottom: '30px', maxWidth: '600px', margin: '0 auto 30px' }}>
|
||
doing-it.de ist ein gemeinsames Projekt von{' '}
|
||
<a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
|
||
hoerter-tech.de
|
||
</a>
|
||
{' '}und{' '}
|
||
<a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
|
||
matzefixit.de
|
||
</a>
|
||
.
|
||
</p>
|
||
<div style={{ display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
|
||
<a
|
||
href="https://hoerter-tech.de"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{
|
||
color: 'var(--color-text-secondary)',
|
||
fontSize: '17px',
|
||
transition: 'color 0.3s ease',
|
||
textDecoration: 'none'
|
||
}}
|
||
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
|
||
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
|
||
>
|
||
hoerter-tech.de
|
||
</a>
|
||
<span style={{ color: 'var(--color-text-secondary)', fontSize: '20px' }}>×</span>
|
||
<a
|
||
href="https://matzefixit.de"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{
|
||
color: 'var(--color-text-secondary)',
|
||
fontSize: '17px',
|
||
transition: 'color 0.3s ease',
|
||
textDecoration: 'none'
|
||
}}
|
||
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
|
||
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
|
||
>
|
||
matzefixit.de
|
||
</a>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Über uns Section */}
|
||
<section className="cta-hero" style={{ background: 'var(--color-card)', marginTop: '0' }}>
|
||
<div className="container">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="cta-hero-content"
|
||
>
|
||
<h2>Über uns</h2>
|
||
<p style={{ marginBottom: '40px' }}>
|
||
Erfahren Sie mehr über Doing-IT und unsere Mission
|
||
</p>
|
||
<Link href="/ueber-uns" className="btn btn-primary btn-large">
|
||
Mehr erfahren
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
)
|
||
}
|