// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Social Proof 02 * @description A social proof section with avatar stack, customer count, and testimonial snippet. * Great for showing real customer adoption and trust. * * @slots social-proof, social-proof-container, social-proof-card, social-proof-left, * social-proof-avatars, social-proof-avatar, social-proof-stats, * social-proof-customer-count, social-proof-rating, social-proof-badges, * social-proof-badge, social-proof-right, social-proof-quote, * social-proof-author * @variant card * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Star, CheckCircle2 } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface Avatar { /** Unique identifier */ id: string /** Avatar initials */ initials: string } interface SocialProof02Props { /** Customer count text */ customerCount?: string /** Rating value (out of 5) */ rating?: number /** Number of reviews */ reviewCount?: string /** Featured testimonial quote */ testimonialQuote?: string /** Featured testimonial author */ testimonialAuthor?: string /** Trust badges/features */ trustBadges?: string[] /** Avatar stack */ avatars?: Avatar[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultAvatars: Avatar[] = [ { id: "avatar-1", initials: "JD" }, { id: "avatar-2", initials: "SK" }, { id: "avatar-3", initials: "AM" }, { id: "avatar-4", initials: "RW" }, { id: "avatar-5", initials: "EL" }, ] const defaultTrustBadges = [ "SOC 2 Compliant", "GDPR Ready", "99.9% Uptime", ] // ============================================================================ // COMPONENT // ============================================================================ function SocialProof02({ customerCount = "Join 10,000+ companies", rating = 4.9, reviewCount = "2,847 reviews", testimonialQuote = "This product has transformed how our team works. We've seen incredible results.", testimonialAuthor = "Sarah Chen, VP Engineering at TechCorp", trustBadges = defaultTrustBadges, avatars = defaultAvatars, className, }: SocialProof02Props) { return (

{/* Left: Customer Count & Avatars */}

{/* Avatar Stack */}

{avatars.map((avatar) => (

{avatar.initials}

))}

{customerCount}

{[...Array(5)].map((_, i) => (

{rating} ({reviewCount})

{/* Trust Badges */}

{trustBadges.map((badge) => ( ))}

{/* Right: Testimonial Snippet */}

“{testimonialQuote}”

— {testimonialAuthor}

) } export default SocialProof02 export { SocialProof02, type SocialProof02Props, type Avatar }