Components
Loading preview...
Here is Testimonials component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/testimonialsimport { cn } from '@/lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Star } from 'lucide-react'
export default function TestimonialSection() {
const testimonials = [
{
name: 'Méschac Irung',
role: 'Creator',
stars: 5,
avatar: 'https://avatars.githubusercontent.com/u/47919550?v=4',
content:
"Using Tailark has been like unlocking a secret design superpower. It's the perfect fusion of simplicity.",
},
{
name: 'Théo Balick',
role: 'Frontend Dev',
stars: 4,
avatar: 'https://avatars.githubusercontent.com/u/68236786?v=4',
content:
'Tailark has transformed the way I develop web applications. The flexibility to customize every aspect is amazing.',
},
{
name: 'Glodie Lukose',
role: 'Frontend Dev',
stars: 5,
avatar: 'https://avatars.githubusercontent.com/u/99137927?v=4',
content:
'The extensive collection of UI components has significantly accelerated my workflow.',
},
]
return (
<section>
<div className="py-24">
<div className="mx-auto w-full max-w-5xl px-6">
{/* 1 col (xs) → 2 cols (sm ≥640px) → 3 cols (lg ≥1024px) */}
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{testimonials.map((t, index) => (
<div key={index} className="bg-background ring-foreground/10 rounded-2xl border border-transparent p-4 ring-1">
<div className="flex gap-1" aria-label={`${t.stars} out of 5 stars`}>
{Array.from({ length: 5 }).map((_, i) => (
<Star
key={i}
className={cn(
'size-4',
i < t.stars
? 'fill-primary stroke-primary'
: 'fill-foreground/15 stroke-transparent'
)}
/>
))}
</div>
<p className="text-foreground my-4">{t.content}</p>
<div className="flex items-center gap-2">
<Avatar className="ring-foreground/10 size-8 border border-transparent shadow ring-1">
<AvatarImage src={t.avatar} alt={t.name} />
<AvatarFallback>{t.name.charAt(0)}</AvatarFallback>
</Avatar>
<div className="text-foreground text-sm font-medium">{t.name}</div>
<span aria-hidden className="bg-foreground/25 size-1 rounded-full" />
<span className="text-muted-foreground text-sm">{t.role}</span>
</div>
</div>
))}
</div>
</div>
</div>
</section>
)
}