// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 07 * @description A comparison grid layout showing features with before/after * or comparison states. Perfect for showcasing transformations or tiers. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-comparison-grid, * features-comparison-card, features-comparison-header, features-comparison-label, * features-comparison-title, features-comparison-list, features-comparison-item, * features-comparison-icon, features-comparison-text * @variant comparison * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { CheckCircle, XCircle, ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface ComparisonItemConfig { /** Unique identifier for list key */ id: string /** Item text */ text: string /** Whether this item is included/positive */ included: boolean } interface ComparisonColumnConfig { /** Unique identifier for list key */ id: string /** Column label (e.g., "Before", "After", "Basic", "Pro") */ label: string /** Column title */ title: string /** Whether this is the highlighted/preferred option */ highlighted?: boolean /** List of comparison items */ items: ComparisonItemConfig[] } interface Features07Props { /** Badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Comparison columns */ columns?: ComparisonColumnConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_COLUMNS: ComparisonColumnConfig[] = [ { id: "column-before", label: "Before", title: "Traditional Approach", highlighted: false, items: [ { id: "before-1", text: "Manual deployments taking hours", included: false }, { id: "before-2", text: "Limited visibility into performance", included: false }, { id: "before-3", text: "Siloed team communication", included: false }, { id: "before-4", text: "Complex infrastructure management", included: false }, { id: "before-5", text: "Inconsistent development environments", included: false }, ], }, { id: "column-after", label: "After", title: "With Our Platform", highlighted: true, items: [ { id: "after-1", text: "One-click deployments in seconds", included: true }, { id: "after-2", text: "Real-time analytics dashboard", included: true }, { id: "after-3", text: "Integrated team collaboration", included: true }, { id: "after-4", text: "Managed infrastructure at scale", included: true }, { id: "after-5", text: "Consistent dev environments", included: true }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features07({ badge = "Why Choose Us", heading = "See the difference", description = "Compare the traditional approach with our modern solution. The choice is clear.", columns = DEFAULT_COLUMNS, className, idBase, }: Features07Props) { const headingId = `${idBase ?? "features-07"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Comparison Grid */}

{columns.map((column) => (

{/* Column Header */}

{column.label}

{column.title}

{/* Comparison List */}

{item.included ? (

))}

{/* Arrow between cards (desktop only) */}

) } export default Features07 export { Features07, type Features07Props, type ComparisonColumnConfig, type ComparisonItemConfig, }