// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Value Prop 08 * @description Value proposition cards where each card has its own CTA. * Great for presenting different product tiers, use cases, or pathways. * * @slots value-prop, value-prop-container, value-prop-header, value-prop-badge, * value-prop-heading, value-prop-description, value-prop-grid, * value-prop-card, value-prop-card-icon, value-prop-card-content, * value-prop-card-title, value-prop-card-description, value-prop-card-features, * value-prop-card-feature, value-prop-card-cta * @variant cards-with-cta * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, User, Users, Building, Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface ValueCardItemConfig { /** Unique identifier for list key */ id: string /** Icon component */ icon: React.ReactNode /** Card title */ title: string /** Card description */ description: string /** List of features/benefits */ features: string[] /** Card-specific CTA */ cta: CtaConfig /** Whether this card is highlighted/featured */ highlighted?: boolean } interface ValueProp08Props { /** Badge text */ badge?: string /** Main section heading */ heading?: string /** Section description */ description?: string /** Array of value cards */ cards?: ValueCardItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_CARDS: ValueCardItemConfig[] = [ { id: "card-individuals", icon: , title: "For Individuals", description: "Perfect for freelancers and solo creators who want to level up.", features: [ "Personal workspace", "5 active projects", "Basic integrations", "Email support", ], cta: { text: "Start Free", href: "#" }, }, { id: "card-teams", icon: , title: "For Teams", description: "Built for growing teams who need to collaborate seamlessly.", features: [ "Shared workspaces", "Unlimited projects", "Advanced integrations", "Priority support", "Team analytics", ], cta: { text: "Start Trial", href: "#" }, highlighted: true, }, { id: "card-enterprise", icon: , title: "For Enterprise", description: "Tailored solutions for large organizations with complex needs.", features: [ "Custom deployment", "Dedicated success manager", "SLA guarantee", "Advanced security", "Custom contracts", ], cta: { text: "Contact Sales", href: "#" }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function ValueProp08({ badge = "Choose Your Path", heading = "A solution for every stage", description = "Whether you're just starting out or scaling to enterprise, we've got you covered.", cards = DEFAULT_CARDS, className, idBase, }: ValueProp08Props) { const headingId = `${idBase ?? "value-prop-08"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Cards Grid */}

{cards.map((card) => (

{/* Icon */}

{card.icon}

{/* Content */}

{card.title}

{card.description}

{/* Features */} {card.features && card.features.length > 0 && (

)}

{/* CTA */} {card.cta.text}

))}

) } export default ValueProp08 export { ValueProp08, type ValueProp08Props, type ValueCardItemConfig, type CtaConfig }