// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 03 * @description A comparison-style value proposition section showing before/after * or with/without scenarios. Effective for highlighting transformation. * * @slots value-prop, value-prop-container, value-prop-header, value-prop-heading, * value-prop-description, value-prop-comparison, value-prop-without-card, * value-prop-without-header, value-prop-without-list, value-prop-without-item, * value-prop-with-card, value-prop-with-header, value-prop-with-list, * value-prop-with-item, value-prop-cta * @variant comparison * * @registryDependencies button-link button card * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, X, Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/ui/card" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface ComparisonItem { /** Unique identifier for list key */ id: string /** Item text */ text: string } interface ValueProp03Props { /** Section heading */ heading?: string /** Section subheading */ subheading?: string /** Items for the "without" column */ withoutItems?: ComparisonItem[] /** Items for the "with" column */ withItems?: ComparisonItem[] /** Title for "without" column */ withoutTitle?: string /** Title for "with" column */ withTitle?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultWithoutItems: ComparisonItem[] = [ { id: "manual", text: "Manual data entry and updates" }, { id: "scattered", text: "Scattered information across tools" }, { id: "reporting", text: "Time-consuming reporting" }, { id: "limited", text: "Limited collaboration options" }, ] const defaultWithItems: ComparisonItem[] = [ { id: "automated", text: "Automated workflows and sync" }, { id: "centralized", text: "Centralized data dashboard" }, { id: "oneclick", text: "One-click report generation" }, { id: "realtime", text: "Real-time team collaboration" }, ] const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Make the Switch", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function ValueProp03({ heading = "See the difference", subheading = "Compare how your workflow transforms with our platform", withoutItems = defaultWithoutItems, withItems = defaultWithItems, withoutTitle = "Without Us", withTitle = "With Us", primaryCta = DEFAULT_PRIMARY_CTA, className, idBase, }: ValueProp03Props) { const headingId = `${idBase ?? "value-prop-03"}-heading` return (

{/* Header */}

{heading}

{subheading && (

{subheading}

)}

{/* Comparison Cards */}

{/* Without Card */}

{/* With Card */}

{/* CTA */}

{primaryCta.text}

) } export default ValueProp03 export { ValueProp03, type ValueProp03Props, type ComparisonItem, type CtaConfig }