// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 02 * @description A split-layout value proposition section with an image on one * side and a benefits checklist on the other. Great for showcasing product features. * * @slots value-prop, value-prop-container, value-prop-content, value-prop-heading, * value-prop-description, value-prop-benefits, value-prop-benefit-item, * value-prop-benefit-icon, value-prop-primary-cta, value-prop-image-wrapper, * value-prop-image * @variant split * * @registryDependencies button-link button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface ImageConfig { /** Image source URL */ src: string /** Image alt text */ alt: string } interface BenefitItem { /** Unique identifier for list key */ id: string /** Benefit text */ text: string } interface ValueProp02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** List of benefits */ benefits?: BenefitItem[] /** Featured image */ image?: ImageConfig /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultBenefits: BenefitItem[] = [ { id: "unlimited", text: "Unlimited projects and collaborators" }, { id: "realtime", text: "Real-time collaboration features" }, { id: "analytics", text: "Advanced analytics and reporting" }, { id: "support", text: "Priority customer support" }, { id: "integrations", text: "Custom integrations available" }, { id: "uptime", text: "99.9% uptime guarantee" }, ] const defaultImage: ImageConfig = { src: "/assets/placeholders/placeholder-3x2.svg", alt: "Product preview", } const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Start Free Trial", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp02({ heading = "Everything you need to succeed", description = "Our platform provides all the tools and features you need to take your business to the next level.", benefits = defaultBenefits, image = defaultImage, primaryCta = DEFAULT_PRIMARY_CTA, className, idBase, }: ValueProp02Props) { const headingId = `${idBase ?? "value-prop-02"}-heading` return (

{/* Content */}

{heading}

{description && (

{description}

)}

{benefit.text}

{primaryCta.text}

{/* Image */}

) } export default ValueProp02 export { ValueProp02, type ValueProp02Props, type BenefitItem, type CtaConfig, type ImageConfig }