// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Welcome 05 * @description Feature showcase welcome with animated cards. * Highlights key features with visual demonstration. * * @slots welcome, welcome-container, welcome-header, welcome-badge, * welcome-heading, welcome-description, welcome-features, * welcome-feature, welcome-feature-icon, welcome-feature-title, * welcome-feature-description, welcome-cta, welcome-primary-cta, * welcome-secondary-cta * @variant feature-showcase * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Zap, ShieldCheck, TrendingUp, Users, ArrowRight, } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Feature { id: string /** Feature icon */ icon: React.ReactNode /** Feature title */ title: string /** Feature description */ description: string } interface Welcome05Props { /** Section badge */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Features list */ features?: Feature[] /** Primary CTA text */ primaryCtaText?: string /** Secondary CTA text */ secondaryCtaText?: string /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: Feature[] = [ { id: "feat-1", icon: , title: "Lightning Fast", description: "Experience blazing speed with our optimized infrastructure.", }, { id: "feat-2", icon: , title: "Enterprise Security", description: "Bank-level security to protect your sensitive data.", }, { id: "feat-3", icon: , title: "Advanced Analytics", description: "Gain insights with powerful reporting and dashboards.", }, { id: "feat-4", icon: , title: "Team Collaboration", description: "Work together seamlessly with built-in collaboration tools.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Welcome05({ badge = "Welcome", heading = "Everything you need to succeed", description = "Our platform provides all the tools and features you need to build amazing products.", features = defaultFeatures, primaryCtaText = "Get Started", secondaryCtaText = "Learn More", className, idBase = "welcome-05", }: Welcome05Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Features Grid */}

{features.map((feature) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* CTA */}

) } export default Welcome05 export { Welcome05, type Welcome05Props }