doing-it-website/app/ueber-uns/page.tsx

'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 UeberUns() {
  return (
    <>
      <Navigation />
      <main>
        {/* Hero Section */}
        <section className="page-hero">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="container"
          >
            <h1>Über uns</h1>
            <p className="page-hero-subtitle">
              Ihre Experten für IT-Weiterbildung
            </p>
          </motion.div>
        </section>

        {/* Main Content */}
        <section className="page-content">
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
            >
              <h2>Unsere Mission</h2>
              <p>
                doing-it.de wurde mit dem Ziel gegründet, IT-Weiterbildung für jeden zugänglich zu machen. 
                Wir glauben daran, dass jeder – unabhängig von Vorkenntnissen – die Möglichkeit haben sollte, 
                sich in der IT weiterzubilden und neue Karrierewege einzuschlagen.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
            >
              <h2>Was uns auszeichnet</h2>
              <p>
                Unser Ansatz ist individuell, praxisnah und ergebnisorientiert. Wir schulen nicht nur 
                theoretisch, sondern direkt an der realen IT-Infrastruktur. So wird Wissen sofort 
                anwendbar und nachhaltig verankert.
              </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>Jede Schulung wird auf Ihre spezifischen 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>Praxisnah</h3>
                <p>Lernen direkt an Ihrer eigenen IT-Infrastruktur</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>Experten-Team</h3>
                <p>Erfahrene IT-Profis mit jahrelanger Branchenerfahrung</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>Niveaubasiert</h3>
                <p>Stufenweise Freischaltung für optimalen Lernerfolg</p>
              </motion.div>
            </div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
              style={{ marginTop: '80px' }}
            >
              <h2>Unser Team</h2>
              <p>
                Unsere Dozenten, Trainer und Experten bringen jahrelange Erfahrung in der IT-Branche mit. 
                Lernen Sie die Menschen kennen, die Sie auf Ihrem Weg begleiten.
              </p>
            </motion.div>

            <div className="features-grid" style={{ marginTop: '60px' }}>
              <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" style={{ fontSize: '64px' }}>👨‍💼</div>
                <h3>Dr. Michael Schneider</h3>
                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
                  IT-Sicherheitsexperte
                </p>
                <p>
                  15+ Jahre Erfahrung in IT-Sicherheit und Compliance. Zertifizierter CISSP und 
                  Experte für DSGVO-Implementierung.
                </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" style={{ fontSize: '64px' }}>👩‍💻</div>
                <h3>Sarah Müller</h3>
                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
                  Cloud-Architektin
                </p>
                <p>
                  Spezialistin für Cloud-Migration und moderne IT-Infrastrukturen. AWS und Azure 
                  zertifiziert mit 10+ Jahren Projekterfahrung.
                </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" style={{ fontSize: '64px' }}>👨‍💻</div>
                <h3>Thomas Weber</h3>
                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
                  Systemadministrator & Trainer
                </p>
                <p>
                  Experte für Linux, Windows-Server und Netzwerktechnik. Bringt komplexe Themen 
                  verständlich und praxisnah rüber.
                </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" style={{ fontSize: '64px' }}>👩‍🏫</div>
                <h3>Lisa Schmidt</h3>
                <p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
                  Pädagogin & IT-Trainerin
                </p>
                <p>
                  Spezialisiert auf die Schulung von Quereinsteigern. Entwickelt Lernkonzepte, die 
                  auch ohne Vorkenntnisse zum Erfolg führen.
                </p>
              </motion.div>
            </div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-section"
            >
              <h2>Lernen Sie uns kennen</h2>
              <p>Kontaktieren Sie uns und erfahren Sie mehr über unsere Angebote</p>
              <Link href="/kontakt" className="btn btn-primary">
                Jetzt Kontakt aufnehmen
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}