{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-card-carousel-simple-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/animated-card-carousel"
  ],
  "files": [
    {
      "path": "registry/example/animated-card-carousel-simple-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport AnimatedCard from \"@/components/animated-card-carousel\"\n\nexport default function SimpleAnimatedCardDemo() {\n  const cards = [\n    {\n      title: \"Portfolio Builder\",\n      description:\n        \"Create stunning professional portfolios with our intuitive drag-and-drop interface. Showcase your work with beautiful layouts and responsive designs.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#3b82f6\",\n      href: \"#\",\n    },\n    {\n      title: \"Health Tracker\",\n      description:\n        \"Monitor your fitness journey with comprehensive health analytics. Track workouts, nutrition, and wellness metrics all in one secure application.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#10b981\",\n      href: \"#\",\n    },\n    {\n      title: \"Learning Platform\",\n      description:\n        \"Access world-class educational content with our interactive learning platform. Master new skills with personalized courses and expert-led tutorials.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#8b5cf6\",\n      href: \"#\",\n    },\n    {\n      title: \"E-Commerce Solution\",\n      description:\n        \"Launch your online store with our comprehensive e-commerce platform. Manage inventory, process payments, and grow your business with powerful analytics.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#f43f5e\",\n      href: \"#\",\n    },\n  ]\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [isHovering, setIsHovering] = useState(false)\n\n  const rotationSpeed = 3000\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout\n\n    if (!isHovering) {\n      interval = setInterval(() => {\n        setActiveIndex((prevIndex) => (prevIndex + 1) % cards.length)\n      }, rotationSpeed)\n    }\n\n    return () => clearInterval(interval)\n  }, [isHovering, cards.length, rotationSpeed])\n\n  const handleMouseEnter = (index: number) => {\n    setIsHovering(true)\n    setActiveIndex(index)\n  }\n\n  const handleMouseLeave = () => {\n    setIsHovering(false)\n  }\n\n  return (\n    <div className=\"space-y-8 py-8 md:px-5 md:py-0\">\n      <div\n        className=\"mx-auto grid max-w-5xl gap-3 md:grid-cols-1 lg:grid-cols-2\"\n        role=\"region\"\n        aria-label=\"Project showcase\"\n      >\n        {cards.map((card, index) => (\n          <AnimatedCard\n            key={index}\n            title={card.title}\n            description={card.description}\n            imgSrc={card.imgSrc}\n            color={card.color}\n            href={card.href}\n            isActive={index === activeIndex}\n            onMouseEnter={() => handleMouseEnter(index)}\n            onMouseLeave={handleMouseLeave}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/animated-card-carousel-simple-demo.tsx"
    }
  ],
  "type": "registry:example"
}