// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 06 * @description A testimonial-driven value proposition where each value point * is backed by a customer quote. Combines social proof with feature highlights. * * @slots value-prop, value-prop-container, value-prop-header, value-prop-heading, * value-prop-description, value-prop-grid, value-prop-item, value-prop-quote, * value-prop-quote-text, value-prop-quote-author, value-prop-author-avatar, * value-prop-author-info, value-prop-author-name, value-prop-author-role, * value-prop-item-title, value-prop-item-description, * value-prop-cta-wrapper, value-prop-cta * @variant testimonial-driven * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface AuthorConfig { /** Author name */ name: string /** Author role/title */ role: string /** Author avatar URL */ avatar?: string } interface TestimonialValueItemConfig { /** Unique identifier for list key */ id: string /** Value point title */ title: string /** Value point description */ description: string /** Customer quote supporting this value */ quote: string /** Quote author */ author: AuthorConfig } interface ValueProp06Props { /** Main section heading */ heading?: string /** Section description */ description?: string /** Array of testimonial-backed value items */ items?: TestimonialValueItemConfig[] /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_ITEMS: TestimonialValueItemConfig[] = [ { id: "item-productivity", title: "Increased Productivity", description: "Streamline your workflow and get more done in less time.", quote: "We've cut our project delivery time by 40% since switching. The automation features alone have saved us countless hours.", author: { name: "Sarah Chen", role: "VP of Engineering, TechCorp", avatar: "/assets/placeholders/avatar-placeholder.svg", }, }, { id: "item-collaboration", title: "Better Collaboration", description: "Keep your team aligned with real-time updates and shared workspaces.", quote: "Finally, a tool that our entire team actually enjoys using. Communication has never been smoother.", author: { name: "Marcus Johnson", role: "Product Manager, StartupXYZ", avatar: "/assets/placeholders/avatar-placeholder.svg", }, }, { id: "item-growth", title: "Scalable Growth", description: "Built to grow with you from startup to enterprise.", quote: "We started with 5 users and now have 500. The platform scaled seamlessly without any hiccups.", author: { name: "Emily Rodriguez", role: "CTO, ScaleUp Inc", avatar: "/assets/placeholders/avatar-placeholder.svg", }, }, ] const DEFAULT_CTA: CtaConfig = { text: "Start Your Journey", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp06({ heading = "Don't just take our word for it", description = "See how real customers are achieving real results with our platform.", items = DEFAULT_ITEMS, primaryCta = DEFAULT_CTA, className, idBase, }: ValueProp06Props) { const headingId = `${idBase ?? "value-prop-06"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Testimonial Items */}

{items.map((item, index) => (

{/* Quote */}

“{item.quote}”

{item.author.avatar && (

)}

{item.author.name}

{item.author.role}

{/* Value Point */}

{item.title}

{item.description}

))}

{/* CTA */} {primaryCta && (

{primaryCta.text}

)}

) } export default ValueProp06 export { ValueProp06, type ValueProp06Props, type TestimonialValueItemConfig, type AuthorConfig, type CtaConfig, }