// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 05 * @description Bento grid layout with varied card sizes. * Great for showcasing features with visual hierarchy. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-grid, features-card, * features-card-content, features-card-icon, features-card-title, * features-card-description * @variant bento-grid * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Rocket, ShieldCheck, TrendingUp, Users, Cloud, Lock, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface FeatureCardConfig { /** Unique identifier for list key */ id: string /** Feature title */ title: string /** Feature description */ description: string /** Icon component */ icon: React.ReactNode /** Card size variant */ size?: "small" | "large" } interface Features05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Feature cards */ features?: FeatureCardConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_FEATURES: FeatureCardConfig[] = [ { id: "feature-deploy", title: "Blazing Fast Deployment", description: "Deploy your applications in seconds with our optimized CI/CD pipeline. Zero downtime deployments with automatic rollbacks.", icon: , size: "large", }, { id: "feature-security", title: "Enterprise Security", description: "SOC 2 compliant with end-to-end encryption and advanced threat protection.", icon: , size: "small", }, { id: "feature-analytics", title: "Real-time Analytics", description: "Track performance metrics and user behavior with live dashboards.", icon: , size: "small", }, { id: "feature-collab", title: "Team Collaboration", description: "Work together seamlessly with real-time editing, comments, and version history.", icon: , size: "small", }, { id: "feature-storage", title: "Cloud Storage", description: "Unlimited storage with automatic backups and disaster recovery. Your data is safe with 99.99% durability.", icon: , size: "large", }, { id: "feature-access", title: "Access Control", description: "Fine-grained permissions with role-based access control and SSO.", icon: , size: "small", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features05({ heading = "Everything you need to scale", description = "Powerful features designed for teams of all sizes. Built for reliability, security, and performance.", features = DEFAULT_FEATURES, className, idBase, }: Features05Props) { const headingId = `${idBase ?? "features-05"}-heading` return (

Features

{heading}

{description}

{features.map((feature) => (

))}

) } export default Features05 export { Features05, type Features05Props, type FeatureCardConfig }