{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-carousel-demo",
  "type": "registry:component",
  "registryDependencies": [
    "feature-carousel"
  ],
  "files": [
    {
      "path": "registry/default/example/feature-carousel-demo.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FeatureCarousel } from \"../ui/feature-carousel\"\n\nexport default function FeatureCarouselDemo() {\n  return (\n    <div className=\"mx-auto w-full max-w-5xl\">\n      <div className=\"rounded-[34px] bg-neutral-700 p-2\">\n        <div className=\"relative z-10 grid w-full gap-8 rounded-[28px] bg-neutral-950 p-2\">\n          <FeatureCarousel\n            title=\"Interactive Feature Demo\"\n            description=\"Showcase your features with smooth animations and transitions\"\n            // Example classes for responsive layout\n            step1img1Class={cn(\n              \"pointer-events-none w-[50%] border border-stone-100/10 transition-all duration-500 dark:border-stone-700/50\",\n              \"top-[57%] left-[25%] rounded-[24px] max-md:scale-[160%] max-md:rounded-[24px] md:top-[29%] md:left-[35px]\",\n              \"md:group-hover:translate-y-2\"\n            )}\n            step1img2Class={cn(\n              \"pointer-events-none w-[60%] overflow-hidden border border-stone-100/10 transition-all duration-500 dark:border-stone-700/50\",\n              \"top-[53%] left-[69%] rounded-2xl max-md:scale-[160%] max-md:rounded-[24px] md:top-[21%] md:left-[calc(50%+35px+1rem)]\",\n              \"md:group-hover:-translate-y-6\"\n            )}\n            step2img1Class={cn(\n              \"pointer-events-none w-[50%] overflow-hidden rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700\",\n              \"top-[69%] left-[25%] max-md:scale-[160%] md:top-[30%] md:left-[35px]\",\n              \"md:group-hover:translate-y-2\"\n            )}\n            step2img2Class={cn(\n              \"pointer-events-none w-[40%] overflow-hidden rounded-2xl rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700\",\n              \"top-[53%] left-[70%] max-md:scale-[140%] md:top-[25%] md:left-[calc(50%+27px+1rem)]\",\n              \"md:group-hover:-translate-y-6\"\n            )}\n            step3imgClass={cn(\n              \"pointer-events-none w-[90%] overflow-hidden rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700\",\n              \"top-[50%] left-[5%] md:top-[30%] md:left-[68px]\"\n            )}\n            step4imgClass={cn(\n              \"pointer-events-none w-[90%] overflow-hidden rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700\",\n              \"top-[50%] left-[5%] md:top-[30%] md:left-[68px]\"\n            )}\n            // Example images\n            image={{\n              step1light1: \"/feature-1.png\",\n              step1light2: \"/feature-2.png\",\n              step2light1: \"/feature-3.png\",\n              step2light2: \"/feature-4.png\",\n              step3light: \"/feature-2.png\",\n              step4light: \"/feature-5.png\",\n              alt: \"Feature demonstration\",\n            }}\n            // Card styling\n            bgClass=\"bg-gradient-to-tr from-neutral-900/90 to-neutral-800/90\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// Add metadata for the registry\n// export const metadata = {\n//   title: \"Feature Carousel\",\n//   description:\n//     \"An animated carousel component that showcases features with smooth transitions and interactive elements.\",\n//   component: FeatureCarouselDemo,\n//   source: \"https://github.com/your-repo/components/animate/feature-card.tsx\",\n// }\n",
      "type": "registry:component"
    }
  ]
}