{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-accordion",
  "type": "registry:block",
  "title": "Animated accordion",
  "description": "Animated accordion",
  "files": [
    {
      "path": "components/usages/animatedaccordionusage.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nimport { AnimatePresence, motion, useAnimation } from \"framer-motion\";\n\n// data\nconst accordionData = [\n\t{\n\t\tid: 1,\n\t\ttitle: \"Mountain Retreat\",\n\t\tdescription:\n\t\t\t\"Escape to the serene mountain landscapes with breathtaking views and adventure trails.\",\n\t\tlongDescription:\n\t\t\t\"Discover hidden valleys, pristine lakes, and breathtaking peaks. Our mountain retreats offer the perfect balance of adventure and relaxation in nature embrace.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/small-house-built-peaceful-green-hill-high-up-mountains_181624-8241.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-blue-500\",\n\t\taccentColor: \"#3B82F6\",\n\t},\n\t{\n\t\tid: 2,\n\t\ttitle: \"Beach Paradise\",\n\t\tdescription:\n\t\t\t\"Relax on pristine beaches with crystal clear waters and golden sands.\",\n\t\tlongDescription:\n\t\t\t\"White sand beaches stretch as far as the eye can see, with turquoise waters and spectacular sunsets. An ideal destination for both relaxation and water sports.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/sea-beach_1203-3728.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-yellow-500\",\n\t\taccentColor: \"#EAB308\",\n\t},\n\t{\n\t\tid: 3,\n\t\ttitle: \"Forest Adventure\",\n\t\tdescription:\n\t\t\t\"Explore dense forests with diverse wildlife and lush greenery.\",\n\t\tlongDescription:\n\t\t\t\"Ancient trees form a canopy overhead as you walk through dappled sunlight. The forest is alive with birdsong and the rustle of wildlife in this untouched natural haven.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/wide-shot-person-walking-around-narrow-pathway-middle-trees-plants-forest_181624-5497.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-green-500\",\n\t\taccentColor: \"#22C55E\",\n\t},\n\t{\n\t\tid: 4,\n\t\ttitle: \"Desert Expedition\",\n\t\tdescription:\n\t\t\t\"Experience the vast expanse of sand dunes and stunning sunsets.\",\n\t\tlongDescription:\n\t\t\t\"Marvel at the ever-changing landscape of golden dunes sculpted by the wind. By night, the desert transforms into one of the world best locations for stargazing.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/woman-wearing-hijab-desert_23-2149197951.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-orange-500\",\n\t\taccentColor: \"#F97316\",\n\t},\n];\n\nexport default function Usage() {\n\tconst [expandedIndex, setExpandedIndex] = useState(0);\n\tconst controls = useAnimation();\n\n\tuseEffect(() => {\n\t\tcontrols.start(\"visible\");\n\t}, [expandedIndex, controls]);\n\treturn (\n\t\t<div className=\"relative w-full flex items-center justify-center\">\n\t\t\t<div className=\"flex flex-col w-full rounded-xl overflow-hidden\">\n\t\t\t\t{accordionData.map((item, index) => {\n\t\t\t\t\tconst isExpanded = index === expandedIndex;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tclassName=\"relative cursor-pointer overflow-hidden\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"80px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ height: index === 0 ? \"300px\" : \"80px\" }}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.6,\n\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\tstiffness: 70,\n\t\t\t\t\t\t\t\tdamping: 15,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => setExpandedIndex(index)}\n\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"100px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\t\tsrc={item.imageUrl}\n\t\t\t\t\t\t\t\talt={item.title}\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 w-full h-full object-cover\"\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\tscale: isExpanded ? 1 : 1.1,\n\t\t\t\t\t\t\t\t\topacity: isExpanded ? 1 : 0.8,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\tduration: 0.8,\n\t\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\tbackground: isExpanded\n\t\t\t\t\t\t\t\t\t\t? `linear-gradient(to top, rgba(0,0,0,0.8), transparent)`\n\t\t\t\t\t\t\t\t\t\t: `linear-gradient(to top, ${item.accentColor}CC, ${item.accentColor}99)`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttransition={{ duration: 0.6 }}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<div className=\"absolute inset-0 flex flex-col justify-end p-6 text-secondary\">\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\tanimate={controls}\n\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\tvisible: { transition: { staggerChildren: 0.1 } },\n\t\t\t\t\t\t\t\t\t\thidden: { transition: { staggerChildren: 0.05 } },\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<motion.h3\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-xl font-bold\"\n\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\thidden: { y: -20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4 }}\n\t\t\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: isExpanded ? \"1.875rem\" : \"1.25rem\",\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isExpanded ? \"0.75rem\" : \"0\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t</motion.h3>\n\n\t\t\t\t\t\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t\t\t\t\t\t{isExpanded && (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: \"auto\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twhen: \"beforeChildren\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\thidden: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twhen: \"afterChildren\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.05,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\t\t\texit=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"overflow-hidden\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.p\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-base mb-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{item.longDescription}\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.p>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex space-x-2\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.button className=\"px-4 py-2 bg-background text-secondary rounded-md font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLearn More\n\t\t\t\t\t\t\t\t\t\t\t\t\t</motion.button>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"px-4 py-2 border border-white text-secondary rounded-md font-medium\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"rgba(255,255,255,0.1)\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tBook Now\n\t\t\t\t\t\t\t\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/animatedaccordionusage.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nimport { AnimatePresence, motion, useAnimation } from \"framer-motion\";\n\n// data\nconst accordionData = [\n\t{\n\t\tid: 1,\n\t\ttitle: \"Mountain Retreat\",\n\t\tdescription:\n\t\t\t\"Escape to the serene mountain landscapes with breathtaking views and adventure trails.\",\n\t\tlongDescription:\n\t\t\t\"Discover hidden valleys, pristine lakes, and breathtaking peaks. Our mountain retreats offer the perfect balance of adventure and relaxation in nature embrace.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/small-house-built-peaceful-green-hill-high-up-mountains_181624-8241.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-blue-500\",\n\t\taccentColor: \"#3B82F6\",\n\t},\n\t{\n\t\tid: 2,\n\t\ttitle: \"Beach Paradise\",\n\t\tdescription:\n\t\t\t\"Relax on pristine beaches with crystal clear waters and golden sands.\",\n\t\tlongDescription:\n\t\t\t\"White sand beaches stretch as far as the eye can see, with turquoise waters and spectacular sunsets. An ideal destination for both relaxation and water sports.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/sea-beach_1203-3728.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-yellow-500\",\n\t\taccentColor: \"#EAB308\",\n\t},\n\t{\n\t\tid: 3,\n\t\ttitle: \"Forest Adventure\",\n\t\tdescription:\n\t\t\t\"Explore dense forests with diverse wildlife and lush greenery.\",\n\t\tlongDescription:\n\t\t\t\"Ancient trees form a canopy overhead as you walk through dappled sunlight. The forest is alive with birdsong and the rustle of wildlife in this untouched natural haven.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/wide-shot-person-walking-around-narrow-pathway-middle-trees-plants-forest_181624-5497.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-green-500\",\n\t\taccentColor: \"#22C55E\",\n\t},\n\t{\n\t\tid: 4,\n\t\ttitle: \"Desert Expedition\",\n\t\tdescription:\n\t\t\t\"Experience the vast expanse of sand dunes and stunning sunsets.\",\n\t\tlongDescription:\n\t\t\t\"Marvel at the ever-changing landscape of golden dunes sculpted by the wind. By night, the desert transforms into one of the world best locations for stargazing.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/woman-wearing-hijab-desert_23-2149197951.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-orange-500\",\n\t\taccentColor: \"#F97316\",\n\t},\n];\n\nexport default function Usage() {\n\tconst [expandedIndex, setExpandedIndex] = useState(0);\n\tconst controls = useAnimation();\n\n\tuseEffect(() => {\n\t\tcontrols.start(\"visible\");\n\t}, [expandedIndex, controls]);\n\treturn (\n\t\t<div className=\"relative w-full flex items-center justify-center\">\n\t\t\t<div className=\"flex flex-col w-full rounded-xl overflow-hidden\">\n\t\t\t\t{accordionData.map((item, index) => {\n\t\t\t\t\tconst isExpanded = index === expandedIndex;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tclassName=\"relative cursor-pointer overflow-hidden\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"80px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ height: index === 0 ? \"300px\" : \"80px\" }}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.6,\n\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\tstiffness: 70,\n\t\t\t\t\t\t\t\tdamping: 15,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => setExpandedIndex(index)}\n\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"100px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\t\tsrc={item.imageUrl}\n\t\t\t\t\t\t\t\talt={item.title}\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 w-full h-full object-cover\"\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\tscale: isExpanded ? 1 : 1.1,\n\t\t\t\t\t\t\t\t\topacity: isExpanded ? 1 : 0.8,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\tduration: 0.8,\n\t\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\tbackground: isExpanded\n\t\t\t\t\t\t\t\t\t\t? `linear-gradient(to top, rgba(0,0,0,0.8), transparent)`\n\t\t\t\t\t\t\t\t\t\t: `linear-gradient(to top, ${item.accentColor}CC, ${item.accentColor}99)`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttransition={{ duration: 0.6 }}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<div className=\"absolute inset-0 flex flex-col justify-end p-6 text-secondary\">\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\tanimate={controls}\n\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\tvisible: { transition: { staggerChildren: 0.1 } },\n\t\t\t\t\t\t\t\t\t\thidden: { transition: { staggerChildren: 0.05 } },\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<motion.h3\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-xl font-bold\"\n\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\thidden: { y: -20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4 }}\n\t\t\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: isExpanded ? \"1.875rem\" : \"1.25rem\",\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isExpanded ? \"0.75rem\" : \"0\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t</motion.h3>\n\n\t\t\t\t\t\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t\t\t\t\t\t{isExpanded && (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: \"auto\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twhen: \"beforeChildren\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\thidden: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twhen: \"afterChildren\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.05,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\t\t\texit=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"overflow-hidden\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.p\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-base mb-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{item.longDescription}\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.p>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex space-x-2\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.button className=\"px-4 py-2 bg-background text-secondary rounded-md font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLearn More\n\t\t\t\t\t\t\t\t\t\t\t\t\t</motion.button>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"px-4 py-2 border border-white text-secondary rounded-md font-medium\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"rgba(255,255,255,0.1)\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tBook Now\n\t\t\t\t\t\t\t\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/animated-accordion.tsx",
      "content": "import React, { useEffect, useState } from \"react\";\n\nimport { AnimatePresence, motion, useAnimation } from \"motion/react\";\n\n// Credit:\n// https://zenui.net/animations/animated-accordion\n\n// data\nconst accordionData = [\n\t{\n\t\tid: 1,\n\t\ttitle: \"Mountain Retreat\",\n\t\tdescription:\n\t\t\t\"Escape to the serene mountain landscapes with breathtaking views and adventure trails.\",\n\t\tlongDescription:\n\t\t\t\"Discover hidden valleys, pristine lakes, and breathtaking peaks. Our mountain retreats offer the perfect balance of adventure and relaxation in nature embrace.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/small-house-built-peaceful-green-hill-high-up-mountains_181624-8241.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-blue-500\",\n\t\taccentColor: \"#3B82F6\",\n\t},\n\t{\n\t\tid: 2,\n\t\ttitle: \"Beach Paradise\",\n\t\tdescription:\n\t\t\t\"Relax on pristine beaches with crystal clear waters and golden sands.\",\n\t\tlongDescription:\n\t\t\t\"White sand beaches stretch as far as the eye can see, with turquoise waters and spectacular sunsets. An ideal destination for both relaxation and water sports.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/sea-beach_1203-3728.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-yellow-500\",\n\t\taccentColor: \"#EAB308\",\n\t},\n\t{\n\t\tid: 3,\n\t\ttitle: \"Forest Adventure\",\n\t\tdescription:\n\t\t\t\"Explore dense forests with diverse wildlife and lush greenery.\",\n\t\tlongDescription:\n\t\t\t\"Ancient trees form a canopy overhead as you walk through dappled sunlight. The forest is alive with birdsong and the rustle of wildlife in this untouched natural haven.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/wide-shot-person-walking-around-narrow-pathway-middle-trees-plants-forest_181624-5497.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-green-500\",\n\t\taccentColor: \"#22C55E\",\n\t},\n\t{\n\t\tid: 4,\n\t\ttitle: \"Desert Expedition\",\n\t\tdescription:\n\t\t\t\"Experience the vast expanse of sand dunes and stunning sunsets.\",\n\t\tlongDescription:\n\t\t\t\"Marvel at the ever-changing landscape of golden dunes sculpted by the wind. By night, the desert transforms into one of the world best locations for stargazing.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/woman-wearing-hijab-desert_23-2149197951.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-orange-500\",\n\t\taccentColor: \"#F97316\",\n\t},\n];\n\nconst VerticalExpanable = () => {\n\tconst [expandedIndex, setExpandedIndex] = useState(0);\n\tconst controls = useAnimation();\n\n\tuseEffect(() => {\n\t\tcontrols.start(\"visible\");\n\t}, [expandedIndex, controls]);\n\n\treturn (\n\t\t<div className=\"flex flex-col w-full rounded-xl overflow-hidden\">\n\t\t\t{accordionData.map((item, index) => {\n\t\t\t\tconst isExpanded = index === expandedIndex;\n\n\t\t\t\treturn (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tclassName=\"relative cursor-pointer overflow-hidden\"\n\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"80px\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tinitial={{ height: index === 0 ? \"300px\" : \"80px\" }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.6,\n\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\tstiffness: 70,\n\t\t\t\t\t\t\tdamping: 15,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setExpandedIndex(index)}\n\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"100px\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tlayout\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={item.imageUrl}\n\t\t\t\t\t\t\talt={item.title}\n\t\t\t\t\t\t\tclassName=\"absolute inset-0 w-full h-full object-cover\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: isExpanded ? 1 : 1.1,\n\t\t\t\t\t\t\t\topacity: isExpanded ? 1 : 0.8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.8,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tlayout\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tbackground: isExpanded\n\t\t\t\t\t\t\t\t\t? `linear-gradient(to top, rgba(0,0,0,0.8), transparent)`\n\t\t\t\t\t\t\t\t\t: `linear-gradient(to top, ${item.accentColor}CC, ${item.accentColor}99)`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{ duration: 0.6 }}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<div className=\"absolute inset-0 flex flex-col justify-end p-6 text-foreground\">\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\tanimate={controls}\n\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\tvisible: { transition: { staggerChildren: 0.1 } },\n\t\t\t\t\t\t\t\t\thidden: { transition: { staggerChildren: 0.05 } },\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.h3\n\t\t\t\t\t\t\t\t\tclassName=\"text-xl font-bold\"\n\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\thidden: { y: -20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4 }}\n\t\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\t\tfontSize: isExpanded ? \"1.875rem\" : \"1.25rem\",\n\t\t\t\t\t\t\t\t\t\tmarginBottom: isExpanded ? \"0.75rem\" : \"0\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t</motion.h3>\n\n\t\t\t\t\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t\t\t\t\t{isExpanded && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\tvisible: {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: \"auto\",\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twhen: \"beforeChildren\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\thidden: {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twhen: \"afterChildren\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.05,\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\t\texit=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"overflow-hidden\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<motion.p\n\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-base mb-4\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{item.longDescription}\n\t\t\t\t\t\t\t\t\t\t\t</motion.p>\n\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex space-x-2\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.button className=\"px-4 py-2 bg-background text-foreground rounded-md font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tLearn More\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.button>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"px-4 py-2 border border-white text-foreground rounded-md font-medium\"\n\t\t\t\t\t\t\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"rgba(255,255,255,0.1)\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tBook Now\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport default VerticalExpanable;\n",
      "type": "registry:ui"
    }
  ]
}