// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Social Proof 06 * @description Case study cards with metric improvements and customer quotes. * Perfect for showcasing specific results and ROI from real customers. * * @slots social-proof, social-proof-container, social-proof-header, * social-proof-badge, social-proof-heading, social-proof-description, * social-proof-grid, social-proof-case-study, social-proof-case-study-header, * social-proof-case-study-logo, social-proof-case-study-company, * social-proof-case-study-metrics, social-proof-case-study-metric, * social-proof-case-study-metric-value, social-proof-case-study-metric-label, * social-proof-case-study-quote, social-proof-case-study-cta * @variant case-studies * * @registryDependencies badge button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface MetricConfig { /** Unique identifier for list key */ id: string /** Metric value (e.g., "40%", "3x", "$2M") */ value: string /** Metric label */ label: string } interface CaseStudyItemConfig { /** Unique identifier for list key */ id: string /** Company name */ company: string /** Company industry/description */ industry?: string /** Key metrics achieved */ metrics: MetricConfig[] /** Customer quote */ quote?: string /** Link to full case study */ ctaHref?: string /** CTA text */ ctaText?: string } interface SocialProof06Props { /** Badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Case studies to display */ caseStudies?: CaseStudyItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_CASE_STUDIES: CaseStudyItemConfig[] = [ { id: "case-techcorp", company: "TechCorp", industry: "SaaS", metrics: [ { id: "metric-deploy", value: "40%", label: "Faster deployment" }, { id: "metric-productivity", value: "3x", label: "Team productivity" }, { id: "metric-cost", value: "60%", label: "Cost reduction" }, ], quote: "We transformed our entire development workflow in just 3 months.", ctaHref: "#", ctaText: "Read case study", }, { id: "case-growthco", company: "GrowthCo", industry: "E-commerce", metrics: [ { id: "metric-revenue", value: "$2M", label: "Revenue increase" }, { id: "metric-retention", value: "85%", label: "Customer retention" }, { id: "metric-support", value: "50%", label: "Support tickets reduced" }, ], quote: "The ROI was evident within the first quarter of implementation.", ctaHref: "#", ctaText: "Read case study", }, { id: "case-scaleup", company: "ScaleUp Inc", industry: "FinTech", metrics: [ { id: "metric-uptime", value: "99.9%", label: "Uptime achieved" }, { id: "metric-speed", value: "10x", label: "Processing speed" }, { id: "metric-security", value: "Zero", label: "Security incidents" }, ], quote: "Enterprise-grade reliability that exceeded our expectations.", ctaHref: "#", ctaText: "Read case study", }, ] // ============================================================================ // COMPONENT // ============================================================================ function SocialProof06({ badge = "Case Studies", heading = "Real results from real customers", description = "See how leading companies achieved measurable success with our platform.", caseStudies = DEFAULT_CASE_STUDIES, className, idBase, }: SocialProof06Props) { const headingId = `${idBase ?? "social-proof-06"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Case Studies Grid */}

{caseStudies.map((caseStudy) => (

{/* Header */}

{caseStudy.company.substring(0, 2).toUpperCase()}

{caseStudy.company}

{caseStudy.industry && (

{caseStudy.industry}

)}

{/* Metrics */}

{caseStudy.metrics.map((metric) => (

{metric.value}

{metric.label}

))}

{/* Quote */} {caseStudy.quote && (

“{caseStudy.quote}”

)} {/* CTA */} {caseStudy.ctaHref && ( {caseStudy.ctaText || "Read case study"} )}

))}

) } export default SocialProof06 export { SocialProof06, type SocialProof06Props, type CaseStudyItemConfig, type MetricConfig }