Loading...
Loading...
> Social proof components with customer quotes, avatars, and grid layouts.
> Early access customer feedback
"[EXAMPLE] Your customer quote here with specific results."
"[EXAMPLE] Another testimonial highlighting benefits."
"[EXAMPLE] Include metrics when possible."
1import { TestimonialsSection } from "@/components/marketing/testimonials-section";23export default function LandingPage() {4 return (5 <main>6 <HeroSection />7 <FeaturesSection />8 <PricingSection />9 <TestimonialsSection />10 {/* Other sections */}11 </main>12 );13}
"[EXAMPLE] Your customer quote here. Include specific results or metrics."
1<Card className="p-6">2 <p className="text-muted-foreground mb-4">3 "Great product, highly recommend!"4 </p>5 <div className="flex items-center gap-4">6 <Avatar>7 <AvatarFallback>JD</AvatarFallback>8 </Avatar>9 <div>10 <p className="font-semibold">John Doe</p>11 <p className="text-sm text-muted-foreground">CEO @ Company</p>12 </div>13 </div>14</Card>
1<div className="flex items-center gap-4">2 <div className="flex -space-x-2">3 {users.map((user) => (4 <Avatar key={user.id} className="border-2 border-background">5 <AvatarImage src={user.avatar} />6 <AvatarFallback>{user.initials}</AvatarFallback>7 </Avatar>8 ))}9 <div className="flex items-center justify-center bg-muted">10 +{remainingCount}11 </div>12 </div>13 <span>Trusted by 500+ developers</span>14</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonials | { quote: string; author: string; role: string; avatar?: string }[] | - | Array of testimonials to display |
| columns | 2 | 3 | 3 | Number of columns in the grid |