"use client" import { useEffect, useState } from "react" // shadcn import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel" // third-party import { cn } from "cn" // assets import { Layers, Rocket, Shield, Sparkles, Zap } from "lucide-react" const items = [ { title: "Dynamic Animations", description: "Smooth physics and fluid transitions across every slide.", icon: Sparkles, }, { title: "Lightning Fast", description: "Optimized touch gestures and zero visual lag.", icon: Zap, }, { title: "Modular Layouts", description: "Completely customizable styling powered by Tailwind CSS.", icon: Layers, }, { title: "Accessible Design", description: "Full keyboard navigation and ARIA screen reader support.", icon: Shield, }, { title: "Ready to Launch", description: "Copy, paste, and extend directly inside your codebase.", icon: Rocket, }, ] // ------------------------------ | CAROUSEL - DOTS | ------------------------------ // export default function CarouselDots() { const [api, setApi] = useState() const [selectedIndex, setSelectedIndex] = useState(0) const [scrollSnaps, setScrollSnaps] = useState([]) useEffect(() => { if (!api) return const timeoutId = setTimeout(() => { setScrollSnaps(api.scrollSnapList()) setSelectedIndex(api.selectedScrollSnap()) }, 0) api.on("select", () => { setSelectedIndex(api.selectedScrollSnap()) }) api.on("reInit", () => { setScrollSnaps(api.scrollSnapList()) setSelectedIndex(api.selectedScrollSnap()) }) return () => clearTimeout(timeoutId) }, [api]) return (

{items.map((item, index) => { const Icon = item.icon return (

{item.title}

{item.description}

) })}

{scrollSnaps.map((_, index) => (

) }