Initial commit for Greenlens

greenlns-landing/components/Testimonials.tsx

@@ -0,0 +1,56 @@
+const testimonials = [
+    {
+        stars: '★★★★★',
+        text: '"Ich kann meine Monstera endlich richtig pflegen! Die App hat sofort erkannt was ihr gefehlt hat und mir einen tagesgenauen Gießplan erstellt."',
+        name: 'Lena M.',
+        role: 'Urban Jungle Enthusiastin',
+        emoji: '🌿',
+    },
+    {
+        stars: '★★★★★',
+        text: '"Endlich eine App die wirklich funktioniert. In 2 Sekunden wusste ich wie meine unbekannte Pflanze heißt und was sie braucht."',
+        name: 'Tobias K.',
+        role: 'Balkonpflanzen-Fan',
+        emoji: '🌱',
+    },
+    {
+        stars: '★★★★★',
+        text: '"Das Design ist wunderschön und die KI unglaublich präzise. Meine Pflanzensammlung wächst seitdem doppelt so schnell!"',
+        name: 'Sarah R.',
+        role: 'Pflanzen-Influencerin',
+        emoji: '🪴',
+    },
+]
+
+export default function Testimonials() {
+    return (
+        <section className="testimonials" id="testimonials" aria-labelledby="testi-heading">
+            <div className="container">
+
+                <header className="testimonials-header reveal">
+                    <p className="tag">Bewertungen</p>
+                    <h2 id="testi-heading">
+                        Geliebt von<br />Pflanzenfreund:innen.
+                    </h2>
+                </header>
+
+                <div className="testimonials-grid">
+                    {testimonials.map((t, i) => (
+                        <div className={`testi-card reveal delay-${i + 1}`} key={t.name}>
+                            <div className="testi-stars">{t.stars}</div>
+                            <p className="testi-text">{t.text}</p>
+                            <div className="testi-author">
+                                <div className="testi-avatar">{t.emoji}</div>
+                                <div>
+                                    <div className="testi-name">{t.name}</div>
+                                    <div className="testi-role">{t.role}</div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    )
+}