{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-carousel-hero",
  "type": "registry:ui",
  "title": "Card Carousel Hero",
  "description": "An interactive hero section featuring a card carousel with smooth animations",
  "dependencies": [
    "motion",
    "gsap"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/ruixenui/card-carousel-hero.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useEffect, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport Image from \"next/image\";\nimport gsap from \"gsap\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface CardItem {\n  src?: string;\n  alt?: string;\n}\n\nexport interface CardCarouselHeroProps {\n  category?: string;\n  title?: string;\n  subtitle?: string;\n  cards?: CardItem[];\n}\n\nexport default function CardCarouselHero({\n  category = \"Innovation Meets Simplicity\",\n  title = \"Build Exceptional Interfaces\",\n  subtitle = \"Use our component library powered by Shadcn UI & Tailwind CSS to craft beautiful, fast, and accessible UIs.\",\n  cards = [],\n}: CardCarouselHeroProps) {\n  const totalCards = cards.length || 5;\n  const placeholders = Array.from({ length: totalCards }).map(() => ({\n    src: undefined,\n    alt: \"\",\n  }));\n  const data = cards.length > 0 ? cards : placeholders;\n\n  const cardRefs = useRef<HTMLDivElement[]>([]);\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const animateCards = () => {\n    const middleIndex = Math.floor(data.length / 2);\n\n    gsap.set(cardRefs.current, {\n      x: 0,\n      scale: 0.5,\n      opacity: 0,\n      transformOrigin: \"center bottom\",\n    });\n\n    const tl = gsap.timeline({\n      defaults: { duration: 0.6, ease: \"power3.out\" },\n    });\n\n    tl.to(cardRefs.current[middleIndex], { x: 0, scale: 1, opacity: 1 });\n\n    for (let offset = 1; offset <= middleIndex; offset++) {\n      const leftIndex = middleIndex - offset;\n      const rightIndex = middleIndex + offset;\n\n      const animations: gsap.TweenTarget[] = [];\n      if (leftIndex >= 0) animations.push(cardRefs.current[leftIndex]);\n      if (rightIndex < data.length)\n        animations.push(cardRefs.current[rightIndex]);\n\n      tl.to(\n        animations,\n        {\n          x: (i, target) => {\n            const idx = cardRefs.current.indexOf(target as HTMLDivElement);\n            return (idx - middleIndex) * 120;\n          },\n          scale: (i, target) => {\n            const idx = cardRefs.current.indexOf(target as HTMLDivElement);\n            return 1 - Math.abs(idx - middleIndex) * 0.1;\n          },\n          opacity: 1,\n        },\n        \"+=0.1\",\n      );\n    }\n  };\n\n  useEffect(() => {\n    animateCards();\n  }, [activeIndex]);\n\n  return (\n    <section className=\"py-20 px-4 bg-white dark:bg-black transition-colors duration-300\">\n      <div className=\"max-w-6xl mx-auto flex flex-col items-center text-center space-y-5\">\n        {/* Category */}\n        <Button className=\"text-sm font-medium shadow-none text-white dark:text-white transition-colors duration-300 group relative inline-flex h-9 animate-rainbow cursor-pointer items-center justify-center rounded-3xl px-4\">\n          {category}\n        </Button>\n\n        {/* Title */}\n        <h1 className=\"text-3xl md:text-5xl font-bold text-gray-900 dark:text-white transition-colors duration-300\">\n          {title}\n        </h1>\n\n        {/* Subtitle */}\n        <p className=\"text-gray-600 dark:text-gray-300 max-w-2xl mx-auto transition-colors duration-300\">\n          {subtitle}\n        </p>\n\n        {/* Card Carousel */}\n        <div className=\"flex justify-center items-center relative h-[30vw] min-h-[15rem]\">\n          {data.map((card, idx) => {\n            const middleIndex = Math.floor(data.length / 2);\n            const distance = Math.abs(idx - middleIndex);\n\n            return (\n              <div\n                key={idx}\n                ref={(el) => {\n                  if (el) cardRefs.current[idx] = el;\n                }}\n                className=\"absolute\"\n                style={{ zIndex: data.length - distance }}\n              >\n                <Card className=\"w-[90vw] sm:w-80 md:w-[50vw] h-60 sm:h-64 md:h-[30vw] bg-white dark:bg-black overflow-hidden transition-colors duration-300 border-4 dark:border-gray-700\">\n                  <CardContent className=\"flex items-center justify-center p-0 h-full\">\n                    {card.src && (\n                      <Image\n                        src={card.src}\n                        alt={card.alt || `Card ${idx + 1}`}\n                        fill\n                        className=\"object-cover\"\n                      />\n                    )}\n                  </CardContent>\n                </Card>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/card-carousel-hero.tsx"
    }
  ]
}