Greenlens/greenlns-landing/components/Testimonials.tsx

57 lines
2.2 KiB
TypeScript

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>
)
}