// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 06 * @description A split layout with a large highlighted feature on the left * and a stacked list of supporting features on the right. Great for * emphasizing a primary feature while showcasing secondary capabilities. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-grid, * features-highlight, features-highlight-icon, features-highlight-title, * features-highlight-description, features-highlight-image, * features-list, features-item, features-item-icon, features-item-content, * features-item-title, features-item-description * @variant split-highlight * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Rocket, Zap, ShieldCheck, TrendingUp, Cloud } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface HighlightFeatureConfig { /** Feature title */ title: string /** Feature description */ description: string /** Icon component */ icon: React.ReactNode /** Optional image URL */ image?: string } interface SupportingFeatureConfig { /** Unique identifier for list key */ id: string /** Feature title */ title: string /** Feature description */ description: string /** Icon component */ icon: React.ReactNode } interface Features06Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Primary highlighted feature */ highlight?: HighlightFeatureConfig /** Supporting features list */ features?: SupportingFeatureConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_HIGHLIGHT: HighlightFeatureConfig = { title: "Lightning Fast Performance", description: "Experience blazing fast load times with our optimized infrastructure. Built on edge computing technology, your applications are served from the nearest location to your users, ensuring sub-100ms response times globally.", icon: , image: "/assets/placeholders/placeholder-4x3.svg", } const DEFAULT_FEATURES: SupportingFeatureConfig[] = [ { id: "feature-deploy", title: "Instant Deployments", description: "Push to deploy in seconds with zero-downtime releases.", icon: , }, { id: "feature-security", title: "Enterprise Security", description: "SOC 2 compliant with end-to-end encryption.", icon: , }, { id: "feature-analytics", title: "Real-time Analytics", description: "Monitor performance with live dashboards and alerts.", icon: , }, { id: "feature-scaling", title: "Auto Scaling", description: "Scale automatically based on traffic demands.", icon: , }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features06({ badge = "Features", heading = "Built for scale", description = "Everything you need to build and deploy modern applications with confidence.", highlight = DEFAULT_HIGHLIGHT, features = DEFAULT_FEATURES, className, idBase, }: Features06Props) { const headingId = `${idBase ?? "features-06"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Grid */}

{/* Highlight Feature */}

{highlight.icon}

{highlight.title}

{highlight.description}

{highlight.image && (

)}

{/* Supporting Features */}

{features.slice(0, 4).map((feature) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } export default Features06 export { Features06, type Features06Props, type HighlightFeatureConfig, type SupportingFeatureConfig, }