"use client" // required for: useState (accordion state) /** * @name Value Prop 07 * @description An accordion-style value proposition with expandable sections. * Each value point can be expanded to reveal more details, keeping the UI clean. * * @slots value-prop, value-prop-container, value-prop-header, value-prop-heading, * value-prop-description, value-prop-content, value-prop-image-wrapper, * value-prop-image, value-prop-accordion, value-prop-item, * value-prop-item-trigger, value-prop-item-icon, value-prop-item-title, * value-prop-item-chevron, value-prop-item-content, value-prop-item-text, * value-prop-cta-wrapper, value-prop-cta * @variant accordion * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, ChevronDown, Zap, Shield, Rocket, TrendingUp } 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 ImageConfig { /** Image source URL */ src: string /** Alt text for accessibility */ alt: string } interface AccordionItemConfig { /** Unique identifier for list key and accessibility */ id: string /** Icon component */ icon: React.ReactNode /** Item title */ title: string /** Expanded content */ content: string } interface ValueProp07Props { /** Main section heading */ heading?: string /** Section description */ description?: string /** Featured image */ image?: ImageConfig /** Accordion items */ items?: AccordionItemConfig[] /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_IMAGE: ImageConfig = { src: "/assets/placeholders/placeholder-1x1.svg", alt: "Platform features illustration", } const DEFAULT_ITEMS: AccordionItemConfig[] = [ { id: "performance", icon: , title: "Blazing Fast Performance", content: "Our platform is optimized for speed at every level. From sub-50ms API responses to instant UI updates, you'll never wait for your tools to catch up with your ideas. We use edge computing and smart caching to ensure lightning-fast experiences globally.", }, { id: "security", icon: , title: "Enterprise-Grade Security", content: "Security isn't an afterthought—it's built into our DNA. SOC 2 Type II certified, GDPR compliant, with end-to-end encryption and advanced threat protection. Your data is protected by the same standards used by Fortune 500 companies.", }, { id: "scale", icon: , title: "Infinite Scalability", content: "Start with a team of 5 or 5,000—our infrastructure scales automatically. No performance degradation, no manual upgrades, no limits. We've handled traffic spikes of 100x without breaking a sweat.", }, { id: "analytics", icon: , title: "Actionable Insights", content: "Transform raw data into strategic decisions with our advanced analytics suite. Real-time dashboards, custom reports, and AI-powered recommendations help you understand what's working and what needs attention.", }, ] const DEFAULT_CTA: CtaConfig = { text: "Get Started", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp07({ heading = "Everything you need to succeed", description = "Discover the features that set us apart from the competition.", image = DEFAULT_IMAGE, items = DEFAULT_ITEMS, primaryCta = DEFAULT_CTA, className, idBase, }: ValueProp07Props) { const [openItem, setOpenItem] = React.useState(items[0]?.id || null) const headingId = `${idBase ?? "value-prop-07"}-heading` const toggleItem = (id: string) => { setOpenItem(openItem === id ? null : id) } return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Content Grid */}

{/* Image */}

{/* Accordion */}

{items.map((item) => { const isOpen = openItem === item.id return (

{item.content}

) })}

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

{primaryCta.text}

)}

) } export default ValueProp07 export { ValueProp07, type ValueProp07Props, type AccordionItemConfig, type ImageConfig, type CtaConfig, }