v1 production
This commit is contained in:
604
app/page.tsx
Executable file → Normal file
604
app/page.tsx
Executable file → Normal file
@@ -1,189 +1,415 @@
|
||||
'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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
'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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user