{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-testimonials",
  "title": "Animated Testimonials",
  "description": "component for the Animated Testimonials",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "app/registry/demousages.tsx",
      "content": "\"use client\";\nimport { Button } from \"@/components/ui/button\";\n\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\ntype Testimonial = {\n  quote: string;\n  name: string;\n  designation: string;\n  src: string;\n};\n\nconst AnimatedTestimonialsDemo = () => {\n  const [active, setActive] = useState(testimonials[0]);\n  const handleprev = () => {\n    const currentIndex = testimonials.indexOf(active);\n    const length = testimonials.length;\n    const prevIndex = (currentIndex - 1 + length) % length;\n    setActive(testimonials[prevIndex]);\n  };\n  const handlenext = () => {\n    const currentIndex = testimonials.indexOf(active);\n    const length = testimonials.length;\n    const nextIndex = (currentIndex + 1) % length;\n    setActive(testimonials[nextIndex]);\n  };\n  const isActive = (index: number) => {\n    return testimonials[index] === active;\n  };\n\n  const randomRotateY = () => {\n    return Math.floor(Math.random() * 21) - 10;\n  };\n\n  return (\n    <>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-12 max-w-4xl mx-auto\">\n        <div className=\"relative h-80 w-full\">\n          <AnimatePresence>\n            {testimonials.map((testimonial, index) => (\n              <motion.div\n                initial={{\n                  opacity: 0,\n                  scale: 0.9,\n                  z: -100,\n                  rotateY: randomRotateY(),\n                }}\n                animate={{\n                  opacity: isActive(index) ? 1 : 0.7,\n                  scale: isActive(index) ? 1 : 0.95,\n                  z: isActive(index) ? 0 : -100,\n                  rotate: isActive(index) ? 0 : randomRotateY(),\n                  zIndex: isActive(index)\n                    ? 999\n                    : testimonials.length + 2 - index,\n                  y: isActive(index) ? [0, -80, 0] : 0,\n                }}\n                exit={{\n                  opacity: 0,\n                  scale: 0.9,\n                  z: 100,\n                  rotate: randomRotateY(),\n                }}\n                transition={{\n                  duration: 0.4,\n                  ease: \"easeInOut\",\n                }}\n                className=\"absolute inset-0 origin-bottom\"\n                key={active.name}\n              >\n                <Image\n                  src={testimonial.src}\n                  alt={testimonial.name}\n                  width={400}\n                  height={400}\n                  draggable={false}\n                  className=\"rounded-3xl h-full w-full  object-cover object-center\"\n                />\n              </motion.div>\n            ))}\n          </AnimatePresence>\n        </div>\n        <div>\n          <div className=\"flex justify-between flex-col py-4\">\n            <motion.div\n              key={active.name}\n              initial={{\n                y: 20,\n                opacity: 0,\n              }}\n              animate={{\n                y: 0,\n                opacity: 1,\n              }}\n              exit={{\n                y: -20,\n                opacity: 0,\n              }}\n              transition={{\n                duration: 0.2,\n                ease: \"easeInOut\",\n              }}\n            >\n              <h3 className=\"text-2xl font-bold dark:text-white text-black\">\n                {active.name}\n              </h3>\n              <p className=\"text-sm text-gray-500 dark:text-neutral-500\">\n                {active.designation}\n              </p>\n              <motion.p className=\"text-lg text-gray-500 mt-8 dark:text-neutral-300\">\n                {active.quote.split(\" \").map((word, index) => (\n                  <motion.span\n                    key={index}\n                    initial={{\n                      filter: \"blur(10px)\",\n                      opacity: 0,\n                      y: 5,\n                    }}\n                    animate={{\n                      filter: \"blur(0px)\",\n                      opacity: 1,\n                      y: 0,\n                    }}\n                    transition={{\n                      duration: 0.2,\n                      ease: \"easeInOut\",\n                      delay: 0.02 * index,\n                    }}\n                    className=\"inline-block\"\n                  >\n                    {word}&nbsp;\n                  </motion.span>\n                ))}\n              </motion.p>\n            </motion.div>\n          </div>\n          <div className=\"flex gap-6 pt-5\">\n            <Button className=\"h-8  rounded\" onClick={handleprev}>\n              <ArrowLeft />\n            </Button>\n            <Button className=\"h-8 rounded \" onClick={handlenext}>\n              <ArrowRight />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default AnimatedTestimonialsDemo;\n\nconst testimonials = [\n  {\n    quote:\n      \"Spectrum UI is a game-changer! Its components are so well-designed and customizable that it made our app look polished and professional in no time.\",\n    name: \"Ananya Gupta\",\n    designation: \"Frontend Engineer, NovaTech\",\n    src: \"https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb\",\n  },\n\n  {\n    quote:\n      \"I love the simplicity and minimalism of Spectrum UI. The components are intuitive and fit seamlessly into our existing projects.\",\n    name: \"Sophia Allen\",\n    designation: \"UI/UX Designer, Creatify\",\n    src: \"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb\",\n  },\n  {\n    quote:\n      \"As a junior developer, Spectrum UI has been a lifesaver. The documentation is straightforward, and the components work flawlessly with Tailwind CSS.\",\n    name: \"Ethan Rodriguez\",\n    designation: \"Software Engineer, CodeWorks\",\n    src: \"https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb\",\n  },\n  {\n    quote:\n      \"The integration with Shadcn made it super easy to customize the components. Spectrum UI is now a must-have in our tech stack.\",\n    name: \"Priya Sharma\",\n    designation: \"Full Stack Developer, Innovate Labs\",\n    src: \"https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg?auto=compress&cs=tinysrgb\",\n  },\n];\n",
      "type": "registry:component",
      "target": "components/spectrumui/animated_testimonials.tsx"
    }
  ],
  "type": "registry:component"
}