// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 04 * @description A minimal features section with generous whitespace and clean typography. * Simple icon-text pairs in a spacious single-column layout. * * @slots features, features-container, features-header, features-badge, features-heading, * features-description, features-list, features-item, features-item-icon, * features-item-title, features-item-description * @variant minimal * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface FeatureItem { /** Unique identifier for list key */ id: string /** Feature title */ title: string /** Feature description */ description: string } interface Features04Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** List of features */ features?: FeatureItem[] /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_FEATURES: FeatureItem[] = [ { id: "simple", title: "Simple by design", description: "No clutter, no distractions. Just the essentials you need to get things done.", }, { id: "fast", title: "Blazingly fast", description: "Optimized performance that keeps up with your workflow, not the other way around.", }, { id: "secure", title: "Secure by default", description: "Enterprise-grade security without the complexity. Your data stays yours.", }, { id: "flexible", title: "Endlessly flexible", description: "Adapt it to your needs. Customize everything without writing a single line of code.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features04({ badge = "Features", heading = "Less is more", description = "We stripped away the unnecessary to focus on what truly matters. The result is a product that feels effortless.", features = DEFAULT_FEATURES, className, idBase, }: Features04Props) { const headingId = `${idBase ?? "features-04"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Features List */}

{features.map((feature) => (

{feature.title}

{feature.description}

))}

) } export default Features04 export { Features04, type Features04Props, type FeatureItem }