doing-it-website/app/quereinsteiger/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 Quereinsteiger() {
  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>IT-Weiterbildung für Quereinsteiger</h1>
            <p className="page-hero-subtitle">
              Starten Sie Ihre Karriere in der IT – auch ohne Vorkenntnisse
            </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>Keine Vorkenntnisse nötig – Starten Sie jetzt!</h2>
              <p>
                Sie haben noch keine Ahnung von IT? Kein Problem! Unsere Schulungsplattform 
                ist speziell für komplette Neulinge entwickelt. Wir begleiten Sie Schritt 
                für Schritt auf Ihrem Weg in die IT-Welt. Stück für Stück zum Ziel – mit 
                unserem niveaubasierten Lernsystem.
              </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-large"
              >
                <div className="feature-number">01</div>
                <h3>Stufenweise Freischaltung</h3>
                <p>
                  Alle Inhalte werden niveaubasiert freigeschaltet. Sie lernen in Ihrem 
                  eigenen Tempo und werden nicht überfordert. Jeder Schritt baut auf dem 
                  vorherigen auf. Unser System passt sich Ihrem Lernfortschritt an und 
                  führt Sie sicher zum Ziel.
                </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-large"
              >
                <div className="feature-number">02</div>
                <h3>Anschließende Zertifizierung</h3>
                <p>
                  Nach erfolgreichem Abschluss erhalten Sie eine anerkannte Zertifizierung, 
                  die Ihre neuen Fähigkeiten dokumentiert und Ihre Karrierechancen erhöht. 
                  Diese Zertifizierungen sind Ihr Karriere-Boost und öffnen Türen in der IT-Branche.
                </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-large"
              >
                <div className="feature-number">03</div>
                <h3>Livetrainings mit Experten</h3>
                <p>
                  Bei Fragen stehen Ihnen unsere IT-Experten in Livetrainings zur Verfügung. 
                  Lernen Sie nicht nur aus Materialien, sondern auch durch direkten Austausch 
                  mit Profis. Diese interaktiven Sessions machen den Unterschied und helfen 
                  Ihnen, komplexe Themen zu verstehen.
                </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-large"
              >
                <div className="feature-number">04</div>
                <h3>Chat-Support</h3>
                <p>
                  Haben Sie eine Frage? Nutzen Sie unseren Chat-Support und erhalten Sie 
                  schnell Antworten von unseren Experten. Lernen Sie nie allein. Unser 
                  umfassender Support durch Livetrainings und Experten-Chats begleitet Sie 
                  auf jedem Schritt Ihrer Lernreise.
                </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>Finden Sie Ihren Weg</h2>
              <p>
                Nutzen Sie unseren interaktiven Lernpfad-Finder, um den passenden Kurs für Ihren Einstieg zu finden.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="feature-card-large"
              style={{ maxWidth: '600px', margin: '40px auto', textAlign: 'center' }}
            >
              <div className="feature-icon" style={{ fontSize: '64px' }}>🎯</div>
              <h3>Lernpfad-Finder</h3>
              <p style={{ marginBottom: '30px' }}>
                Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs für Ihren Einstieg in die IT.
              </p>
              <Link href="/quereinsteiger/lernpfad-finder" className="btn btn-primary">
                Lernpfad finden
              </Link>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-section"
            >
              <h2>Bereit für den Start?</h2>
              <p>Kontaktieren Sie uns und beginnen Sie Ihre IT-Karriere noch heute</p>
              <div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
                <a href="/kontakt" className="btn btn-primary">
                  Jetzt durchstarten
                </a>
                <Link href="/quereinsteiger/kurse" className="btn btn-secondary">
                  Kurskatalog ansehen
                </Link>
              </div>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}