"use client" import { useCallback, useEffect, useState } from "react" // shadcn import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel" import { Progress, ProgressLabel, ProgressValue, } from "@/components/ui/progress" // third-party import { cn } from "cn" // assets import { Activity, Flame, Sparkles, TrendingUp, Trophy } from "lucide-react" const animatedSlides = [ { title: "Fluid Transitions", subtitle: "Spring-based motion and active slide scaling.", tag: "Motion", icon: Sparkles, gradient: "from-primary/25 via-primary/10 to-background", }, { title: "High Performance", subtitle: "Hardware-accelerated CSS transforms and zero reflows.", tag: "Speed", icon: Flame, gradient: "from-amber-500/25 via-amber-500/10 to-background", }, { title: "Realtime Analytics", subtitle: "Interactive state tracking and dynamic progress indicators.", tag: "Metrics", icon: TrendingUp, gradient: "from-green-500/25 via-green-500/10 to-background", }, { title: "Peak Engagement", subtitle: "Designed to capture attention with modern visual depth.", tag: "Impact", icon: Trophy, gradient: "from-cyan-500/25 via-cyan-500/10 to-background", }, { title: "Live Activity", subtitle: "Responsive layouts that adapt effortlessly to any device.", tag: "System", icon: Activity, gradient: "from-red-500/25 via-red-500/10 to-background", }, ] // ------------------------------ | CAROUSEL - ANIMATED | ------------------------------ // export default function CarouselAnimated() { const [api, setApi] = useState() const [selectedIndex, setSelectedIndex] = useState(0) const onSlideClick = useCallback( (index: number) => { if (!api) return if (index === selectedIndex) return if (selectedIndex === animatedSlides.length - 1 && index === 0) { api.scrollNext() } else if (selectedIndex === 0 && index === animatedSlides.length - 1) { api.scrollPrev() } else { api.scrollTo(index) } }, [api, selectedIndex] ) useEffect(() => { if (!api) return const timeoutId = setTimeout(() => { setSelectedIndex(api.selectedScrollSnap()) }, 0) api.on("select", () => { setSelectedIndex(api.selectedScrollSnap()) }) api.on("reInit", () => { setSelectedIndex(api.selectedScrollSnap()) }) return () => clearTimeout(timeoutId) }, [api]) return (

{animatedSlides.map((slide, index) => { const Icon = slide.icon const isActive = index === selectedIndex return ( onSlideClick(index)} className="basis-4/5 cursor-pointer pl-3 sm:basis-3/4" >

{slide.tag}

{slide.title}

{slide.subtitle}

Slide {index + 1} / {animatedSlides.length}

) })} {/* Animated Progress Tracker */}

Progress

) }