"use client" /** * @name Carousel 05 * @description A stacked card carousel with 3D-like perspective effect * for showcasing features or services. * * @slots carousel, carousel-container, carousel-header, carousel-badge, * carousel-heading, carousel-description, carousel-content, * carousel-stack, carousel-card, carousel-card-icon, carousel-card-title, * carousel-card-description, carousel-card-link, carousel-nav, * carousel-prev, carousel-counter, carousel-next * @variant stacked * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight, Rocket, ShieldCheck, Zap, TrendingUp, Users, Globe, ArrowRight, } from "lucide-react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FeatureCard { id: string icon: "rocket" | "shield" | "lightning" | "chart" | "users" | "globe" title: string description: string href?: string color: string } interface Carousel05Props { badge?: string heading?: string description?: string features?: FeatureCard[] className?: string idBase?: string } // ============================================================================ // ICON MAP // ============================================================================ const iconMap = { rocket: Rocket, shield: ShieldCheck, lightning: Zap, chart: TrendingUp, users: Users, globe: Globe, } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: FeatureCard[] = [ { id: "feat-1", icon: "rocket", title: "Blazing Fast Performance", description: "Experience lightning-fast load times with our optimized infrastructure and global CDN network.", href: "#", color: "bg-blue-500", }, { id: "feat-2", icon: "shield", title: "Enterprise Security", description: "Bank-level security with end-to-end encryption, SOC2 compliance, and advanced threat protection.", href: "#", color: "bg-green-500", }, { id: "feat-3", icon: "lightning", title: "Real-time Sync", description: "Instant synchronization across all devices and team members with zero latency.", href: "#", color: "bg-yellow-500", }, { id: "feat-4", icon: "chart", title: "Advanced Analytics", description: "Gain deep insights with comprehensive dashboards, custom reports, and AI-powered predictions.", href: "#", color: "bg-purple-500", }, { id: "feat-5", icon: "users", title: "Team Collaboration", description: "Work together seamlessly with shared workspaces, comments, and real-time editing.", href: "#", color: "bg-pink-500", }, { id: "feat-6", icon: "globe", title: "Global Scale", description: "Deploy worldwide with automatic scaling to handle millions of requests effortlessly.", href: "#", color: "bg-orange-500", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Carousel05({ badge = "Features", heading = "Everything you need to succeed", description = "Powerful features designed to help your team work smarter and faster.", features = defaultFeatures, className, idBase = "carousel-05", }: Carousel05Props) { const [activeIndex, setActiveIndex] = React.useState(0) const headingId = `${idBase}-heading` const goToNext = () => { setActiveIndex((prev) => (prev + 1) % features.length) } const goToPrev = () => { setActiveIndex((prev) => (prev - 1 + features.length) % features.length) } // Calculate positions for stacked effect const getCardStyle = (index: number) => { const diff = index - activeIndex const normalizedDiff = ((diff + features.length) % features.length) - (features.length > 3 ? (diff > features.length / 2 ? features.length : 0) : 0) const isVisible = Math.abs(normalizedDiff) <= 2 if (!isVisible) { return { opacity: 0, transform: `translateX(${normalizedDiff * 100}%) scale(0.8)`, zIndex: 0, } } return { opacity: normalizedDiff === 0 ? 1 : 0.5 - Math.abs(normalizedDiff) * 0.15, transform: `translateX(${normalizedDiff * 60}%) scale(${1 - Math.abs(normalizedDiff) * 0.1})`, zIndex: 10 - Math.abs(normalizedDiff), } } return (

{/* Header */}

{badge}

{heading}

{description}

{/* Stacked Cards */}

{features.map((feature, index) => { const FeatureIcon = iconMap[feature.icon] const style = getCardStyle(index) return (

{feature.title}

{feature.description}

{feature.href && ( Learn more )}

) })}

{/* Navigation */}

{activeIndex + 1} / {features.length}

) } export default Carousel05 export { Carousel05, type Carousel05Props }