first commit
This commit is contained in:
189
app/page.tsx
Executable file
189
app/page.tsx
Executable file
@@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="hero">
|
||||
<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>
|
||||
<div className="hero-buttons">
|
||||
<Link href="/quereinsteiger" className="btn btn-primary">
|
||||
Jetzt durchstarten
|
||||
</Link>
|
||||
<Link href="/unternehmen" className="btn btn-secondary">
|
||||
IT-Analyse anfordern
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Features 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>Warum doing-it?</h2>
|
||||
<p>Individuell, niveaubasiert, zertifiziert – mit Experten-Support</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"
|
||||
>
|
||||
<div className="feature-icon">🎯</div>
|
||||
<h3>Individuell</h3>
|
||||
<p>Maßgeschneiderte Schulungen auf Ihre Bedürfnisse zugeschnitten</p>
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon">📚</div>
|
||||
<h3>Stufenweise</h3>
|
||||
<p>Niveaubasierte Freischaltung von Inhalten für optimalen Lernerfolg</p>
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon">💼</div>
|
||||
<h3>Zertifiziert</h3>
|
||||
<p>Anerkannte Zertifizierungen für Ihre Karriere</p>
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon">👥</div>
|
||||
<h3>Experten-Support</h3>
|
||||
<p>Livetrainings und Chats mit IT-Experten bei Fragen</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="cta-hero">
|
||||
<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>Bereit für den nächsten Schritt?</h2>
|
||||
<p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
|
||||
<div className="hero-buttons">
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Kontakt aufnehmen
|
||||
</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>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user