first commit

app/testimonials/page.tsx

@@ -0,0 +1,125 @@
+'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 Testimonials() {
+  const testimonials = [
+    {
+      type: 'unternehmen',
+      quote: 'Die IT-Analyse von doing-it.de hat uns geholfen, Schwachstellen zu identifizieren, die wir vorher nicht gesehen haben. Die Schulungen waren praxisnah und unsere Mitarbeiter konnten das Gelernte sofort anwenden.',
+      author: 'Max Mustermann',
+      position: 'IT-Leiter',
+      company: 'Musterfirma GmbH',
+      image: '👨‍💼',
+    },
+    {
+      type: 'unternehmen',
+      quote: 'Durch die maßgeschneiderten Schulungen haben wir interne Experten aufgebaut und konnten unsere externen IT-Kosten um 40% reduzieren. Eine lohnende Investition!',
+      author: 'Anna Schmidt',
+      position: 'Geschäftsführerin',
+      company: 'TechSolutions AG',
+      image: '👩‍💼',
+    },
+    {
+      type: 'quereinsteiger',
+      quote: 'Ohne Vorkenntnisse habe ich mit doing-it.de meinen Einstieg in die IT geschafft. Das niveaubasierte System hat mich nicht überfordert und die Experten waren immer da, wenn ich Fragen hatte.',
+      author: 'Thomas Weber',
+      position: 'Junior IT-Support',
+      company: 'Digital Solutions',
+      image: '👨‍💻',
+    },
+    {
+      type: 'quereinsteiger',
+      quote: 'Die Zertifizierung hat mir den Karriere-Boost gegeben, den ich brauchte. Heute arbeite ich als IT-Sicherheitsspezialist – etwas, das vor einem Jahr noch unvorstellbar war.',
+      author: 'Lisa Müller',
+      position: 'IT-Sicherheitsspezialistin',
+      company: 'SecureIT GmbH',
+      image: '👩‍💻',
+    },
+  ]
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Kundenstimmen</h1>
+            <p className="page-hero-subtitle">
+              Was unsere Kunden über uns sagen
+            </p>
+          </motion.div>
+        </section>
+
+        <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>Erfolgreiche Projekte, zufriedene Kunden</h2>
+              <p>
+                Unsere Kunden sind unser größter Erfolg. Lesen Sie, was Unternehmen und 
+                Quereinsteiger über ihre Erfahrungen mit doing-it.de berichten.
+              </p>
+            </motion.div>
+
+            <div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px', marginTop: '60px' }}>
+              {testimonials.map((testimonial, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  className="feature-card-large"
+                  style={{ textAlign: 'left' }}
+                >
+                  <div style={{ fontSize: '48px', marginBottom: '20px' }}>
+                    {testimonial.image}
+                  </div>
+                  <p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '30px', fontStyle: 'italic' }}>
+                    &ldquo;{testimonial.quote}&rdquo;
+                  </p>
+                  <div>
+                    <h3 style={{ marginBottom: '5px' }}>{testimonial.author}</h3>
+                    <p style={{ color: 'var(--color-text-secondary)', fontSize: '17px' }}>
+                      {testimonial.position} bei {testimonial.company}
+                    </p>
+                  </div>
+                </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>Werden Sie Teil unserer Erfolgsgeschichte</h2>
+              <p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
+              <Link href="/kontakt" className="btn btn-primary">
+                Jetzt Kontakt aufnehmen
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+