{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-section-shadcnui",
  "type": "registry:page",
  "title": "Testimonial Section",
  "description": "Carousel-style testimonial section with smooth transitions",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/testimonial-section.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n} from \"@/components/ui/card\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight, Quote, Star } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst testimonials = [\n  {\n    id: 1,\n    name: \"Sarah Johnson\",\n    role: \"CEO, TechCorp\",\n    content:\n      \"This library has transformed how we build user interfaces. The animations are smooth, professional, and easy to implement.\",\n    rating: 5,\n  },\n  {\n    id: 2,\n    name: \"Michael Chen\",\n    role: \"Lead Developer, StartupXYZ\",\n    content:\n      \"Best animation library we've used. The components are production-ready and the documentation is excellent.\",\n    rating: 5,\n  },\n  {\n    id: 3,\n    name: \"Emily Rodriguez\",\n    role: \"Designer, Creative Studio\",\n    content:\n      \"Beautiful animations that bring our designs to life. Highly recommended for any modern web project.\",\n    rating: 5,\n  },\n];\n\nexport function TestimonialSection() {\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const nextTestimonial = () => {\n    setCurrentIndex((prev) => (prev + 1) % testimonials.length);\n  };\n\n  const prevTestimonial = () => {\n    setCurrentIndex(\n      (prev) => (prev - 1 + testimonials.length) % testimonials.length\n    );\n  };\n\n  return (\n    <div className=\"w-full px-4 py-16\">\n      <div className=\"mx-auto max-w-4xl\">\n        <motion.div\n          initial={{ opacity: 0, y: 30 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center\"\n        >\n          <h2 className=\"mb-4 text-3xl font-bold sm:text-4xl\">\n            What Our Users Say\n          </h2>\n          <p className=\"text-sm text-[var(--foreground)]/70 sm:text-base md:text-lg\">\n            Don&apos;t just take our word for it - hear from our community\n          </p>\n        </motion.div>\n\n        <div className=\"relative\">\n          <AnimatePresence mode=\"wait\">\n            <motion.div\n              key={currentIndex}\n              initial={{ opacity: 0, x: 50 }}\n              animate={{ opacity: 1, x: 0 }}\n              exit={{ opacity: 0, x: -50 }}\n              transition={{ duration: 0.3 }}\n            >\n              <Card className=\" bg-[var(--card-bg)]\">\n                <CardHeader>\n                  <div className=\"mb-4 flex items-center gap-2\">\n                    {[...Array(testimonials[currentIndex].rating)].map(\n                      (_, i) => (\n                        <motion.div\n                          key={i}\n                          initial={{ scale: 0, rotate: -180 }}\n                          animate={{ scale: 1, rotate: 0 }}\n                          transition={{ delay: i * 0.1, type: \"spring\" }}\n                        >\n                          <Star className=\"h-5 w-5 fill-yellow-400 text-yellow-400\" />\n                        </motion.div>\n                      )\n                    )}\n                  </div>\n                  <motion.div\n                    initial={{ scale: 0 }}\n                    animate={{ scale: 1 }}\n                    transition={{ delay: 0.2, type: \"spring\" }}\n                    className=\"mb-2 inline-flex\"\n                  >\n                    <Quote className=\"h-6 w-6 text-[var(--muted-foreground)]\" />\n                  </motion.div>\n                </CardHeader>\n                <CardContent>\n                  <CardDescription className=\"mb-6 text-base leading-relaxed sm:text-lg\">\n                    {testimonials[currentIndex].content}\n                  </CardDescription>\n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <p className=\"font-semibold\">\n                        {testimonials[currentIndex].name}\n                      </p>\n                      <p className=\"text-sm text-[var(--foreground)]/60\">\n                        {testimonials[currentIndex].role}\n                      </p>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </motion.div>\n          </AnimatePresence>\n\n          <div className=\"mt-8 flex items-center justify-center gap-4\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              onClick={prevTestimonial}\n              className=\"rounded-full\"\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n\n            <div className=\"flex gap-2\">\n              {testimonials.map((_, index) => (\n                <motion.button\n                  key={index}\n                  onClick={() => setCurrentIndex(index)}\n                  className=\"h-2 rounded-full\"\n                  whileHover={{ scale: 1.2 }}\n                  whileTap={{ scale: 0.9 }}\n                  initial={{ width: 8 }}\n                  animate={{ width: index === currentIndex ? 24 : 8 }}\n                  style={{\n                    backgroundColor:\n                      index === currentIndex\n                        ? \"rgb(var(--accent))\"\n                        : \"rgb(var(--border))\",\n                  }}\n                />\n              ))}\n            </div>\n\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              onClick={nextTestimonial}\n              className=\"rounded-full\"\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/testimonial-section-shadcnui.tsx"
    }
  ]
}