{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-section-baseui",
  "type": "registry:page",
  "title": "Testimonial Section",
  "description": "Carousel-style testimonial section with smooth transitions (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/testimonial-section-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\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 TestimonialSectionBaseui() {\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-foreground/70 sm:text-base md:text-lg\">\n            Don'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              <div className=\"rounded-lg border border-border bg-card text-card-foreground shadow-sm\">\n                <div className=\"flex flex-col space-y-1.5 p-6\">\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-muted-foreground\" />\n                  </motion.div>\n                </div>\n                <div className=\"p-6 pt-0\">\n                  <p className=\"mb-6 text-base leading-relaxed text-muted-foreground sm:text-lg\">\n                    {testimonials[currentIndex].content}\n                  </p>\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-foreground/60\">\n                        {testimonials[currentIndex].role}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </motion.div>\n          </AnimatePresence>\n\n          <div className=\"mt-8 flex items-center justify-center gap-4\">\n            <Button\n              onClick={prevTestimonial}\n              className=\"inline-flex h-10 w-10 items-center justify-center rounded-full border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground\"\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                        ? \"hsl(var(--accent))\"\n                        : \"hsl(var(--border))\",\n                  }}\n                />\n              ))}\n            </div>\n\n            <Button\n              onClick={nextTestimonial}\n              className=\"inline-flex h-10 w-10 items-center justify-center rounded-full border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground\"\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-baseui.tsx"
    }
  ]
}