// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 01 * @description A grid-based value proposition section showcasing key benefits * with icons, titles, and descriptions. Ideal for onboarding flows. * * @slots value-prop, value-prop-container, value-prop-header, value-prop-heading, * value-prop-description, value-prop-grid, value-prop-item, value-prop-icon, * value-prop-item-title, value-prop-item-description, value-prop-cta-group, * value-prop-primary-cta, value-prop-secondary-cta * @variant grid * * @registryDependencies button-link button card * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Zap, Shield, Clock, Star } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" import { Card, CardContent } from "@/registry/ui/card" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface ValueItem { /** Unique identifier for list key */ id: string /** Icon component */ icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; focusable?: "true" | "false" }> /** Benefit title */ title: string /** Benefit description */ description: string } interface ValueProp01Props { /** Section heading */ heading?: string /** Section subheading */ subheading?: string /** Value items to display */ items?: ValueItem[] /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: ValueItem[] = [ { id: "fast", icon: Zap, title: "Lightning Fast", description: "Get things done 10x faster with our intuitive interface.", }, { id: "secure", icon: Shield, title: "Secure by Default", description: "Enterprise-grade security to protect your data.", }, { id: "time", icon: Clock, title: "Save Time", description: "Automate repetitive tasks and focus on what matters.", }, { id: "best", icon: Star, title: "Best in Class", description: "Rated #1 by customers for ease of use and support.", }, ] const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { id: "secondary", text: "Learn More", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp01({ heading = "Why choose us?", subheading = "Here's what makes our platform special", items = defaultItems, primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, className, idBase, }: ValueProp01Props) { const headingId = `${idBase ?? "value-prop-01"}-heading` return (

{/* Header */}

{heading}

{subheading && (

{subheading}

)}

{/* Grid */}

{items.map((item) => (

{item.title}

{item.description}

))}

{/* CTA Group */}

{primaryCta.text} {secondaryCta.text}

) } export default ValueProp01 export { ValueProp01, type ValueProp01Props, type ValueItem, type CtaConfig }