// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 05 * @description A journey-style value proposition showing a step-by-step * transformation story. Perfect for onboarding flows and process explanations. * * @slots value-prop, value-prop-container, value-prop-content, value-prop-header, * value-prop-heading, value-prop-description, value-prop-journey, * value-prop-step, value-prop-step-number, value-prop-step-content, * value-prop-step-title, value-prop-step-description, value-prop-step-arrow, * value-prop-step-connector, value-prop-cta-wrapper, value-prop-cta * @variant journey * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, ChevronRight } 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 JourneyStepConfig { /** Unique identifier for list key */ id: string /** Step title */ title: string /** Step description */ description: string } interface ValueProp05Props { /** Main section heading */ heading?: string /** Section description */ description?: string /** Array of journey steps */ steps?: JourneyStepConfig[] /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STEPS: JourneyStepConfig[] = [ { id: "step-signup", title: "Sign Up", description: "Create your account in under 60 seconds", }, { id: "step-connect", title: "Connect", description: "Link your existing tools and data sources", }, { id: "step-automate", title: "Automate", description: "Set up workflows that run on autopilot", }, { id: "step-grow", title: "Grow", description: "Scale your operations without the overhead", }, ] const DEFAULT_CTA: CtaConfig = { text: "Get Started Now", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp05({ heading = "Your path to success", description = "Four simple steps to transform how you work", steps = DEFAULT_STEPS, primaryCta = DEFAULT_CTA, className, idBase, }: ValueProp05Props) { const headingId = `${idBase ?? "value-prop-05"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Journey Steps */}

{/* Desktop layout */}

{steps.map((step, index) => (

{index + 1}

{step.title}

{step.description}

{index < steps.length - 1 && (

)} ))}

{/* Mobile layout */}

{steps.map((step, index) => (

{index + 1}

{index < steps.length - 1 && (

{step.title}

{step.description}

))}

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

{primaryCta.text}

)}

) } export default ValueProp05 export { ValueProp05, type ValueProp05Props, type JourneyStepConfig, type CtaConfig }