feature-carousel

1"use client"
2 
3import { cn } from "@/lib/utils"
4 
5import { FeatureCarousel } from "../ui/feature-carousel"
6 
7export function FeatureCarouselDemo() {
8  return (
9    <div className="w-full max-w-5xl mx-auto">
10      <div className="rounded-[34px] bg-neutral-700 p-2">
11        <div className="relative z-10 grid w-full gap-8 rounded-[28px] bg-neutral-950 p-2">
12          <FeatureCarousel
13            title="Interactive Feature Demo"
14            description="Showcase your features with smooth animations and transitions"
15            // Example classes for responsive layout
16            step1img1Class={cn(
17              "pointer-events-none w-[50%] border border-stone-100/10 transition-all duration-500 dark:border-stone-700/50",
18              "max-md:scale-[160%] max-md:rounded-[24px] rounded-[24px] left-[25%] top-[57%] md:left-[35px] md:top-[29%]",
19              "md:group-hover:translate-y-2"
20            )}
21            step1img2Class={cn(
22              "pointer-events-none w-[60%] border border-stone-100/10 dark:border-stone-700/50 transition-all duration-500 overflow-hidden",
23              "max-md:scale-[160%] rounded-2xl max-md:rounded-[24px] left-[69%] top-[53%] md:top-[21%] md:left-[calc(50%+35px+1rem)]",
24              "md:group-hover:-translate-y-6"
25            )}
26            step2img1Class={cn(
27              "pointer-events-none w-[50%] rounded-t-[24px] overflow-hidden border border-stone-100/10 transition-all duration-500 dark:border-stone-700",
28              "max-md:scale-[160%] left-[25%] top-[69%] md:left-[35px] md:top-[30%]",
29              "md:group-hover:translate-y-2"
30            )}
31            step2img2Class={cn(
32              "pointer-events-none w-[40%] rounded-t-[24px] border border-stone-100/10 dark:border-stone-700 transition-all duration-500 rounded-2xl overflow-hidden",
33              "max-md:scale-[140%] left-[70%] top-[53%] md:top-[25%] md:left-[calc(50%+27px+1rem)]",
34              "md:group-hover:-translate-y-6"
35            )}
36            step3imgClass={cn(
37              "pointer-events-none w-[90%] border border-stone-100/10 dark:border-stone-700 rounded-t-[24px] transition-all duration-500 overflow-hidden",
38              "left-[5%] top-[50%] md:top-[30%] md:left-[68px]"
39            )}
40            step4imgClass={cn(
41              "pointer-events-none w-[90%] border border-stone-100/10 dark:border-stone-700 rounded-t-[24px] transition-all duration-500 overflow-hidden",
42              "left-[5%] top-[50%] md:top-[30%] md:left-[68px]"
43            )}
44            // Example images
45            image={{
46              step1light1: "/feature-1.png",
47              step1light2: "/feature-2.png",
48              step2light1: "/feature-3.png",
49              step2light2: "/feature-4.png",
50              step3light: "/feature-2.png",
51              step4light: "/feature-5.png",
52              alt: "Feature demonstration",
53            }}
54            // Card styling
55            bgClass="bg-gradient-to-tr from-neutral-900/90 to-neutral-800/90"
56          />
57        </div>
58      </div>
59    </div>
60  )
61}
62 
63// Add metadata for the registry
64// export const metadata = {
65//   title: "Feature Carousel",
66//   description:
67//     "An animated carousel component that showcases features with smooth transitions and interactive elements.",
68//   component: FeatureCarouselDemo,
69//   source: "https://github.com/your-repo/components/animate/feature-card.tsx",
70// }