{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-block-shadcnui",
  "type": "registry:block",
  "title": "Testimonials Block",
  "description": "Animated testimonials grid with staggered cards, star ratings, and hover effects",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/testimonials-block.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport { motion } from \"framer-motion\";\nimport { Quote, Star } from \"lucide-react\";\n\nconst testimonials = [\n  {\n    name: \"Sarah Johnson\",\n    role: \"CEO at TechStart\",\n    content:\n      \"Outstanding work! The project was delivered on time and exceeded our expectations. The attention to detail and code quality is exceptional.\",\n    rating: 5,\n    avatar: \"SJ\",\n  },\n  {\n    name: \"Michael Chen\",\n    role: \"Product Manager at Innovate\",\n    content:\n      \"A true professional who understands both the technical and business aspects. Communication was excellent throughout the entire project.\",\n    rating: 5,\n    avatar: \"MC\",\n  },\n  {\n    name: \"Emily Rodriguez\",\n    role: \"Founder of DesignHub\",\n    content:\n      \"Incredible problem-solving skills and creativity. Turned our vision into reality with a beautiful, functional application.\",\n    rating: 5,\n    avatar: \"ER\",\n  },\n  {\n    name: \"David Kim\",\n    role: \"CTO at DataFlow\",\n    content:\n      \"Expert-level knowledge across the full stack. The scalable architecture delivered will serve our company for years to come.\",\n    rating: 5,\n    avatar: \"DK\",\n  },\n];\n\nconst container = {\n  hidden: { opacity: 0 },\n  show: {\n    opacity: 1,\n    transition: { staggerChildren: 0.15 },\n  },\n};\n\nconst item = {\n  hidden: { opacity: 0, y: 30 },\n  show: { opacity: 1, y: 0, transition: { duration: 0.5 } },\n};\n\nexport function TestimonialsBlock() {\n  return (\n    <section className=\"w-full\">\n      <div className=\"mx-auto\">\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-8 text-center sm:mb-12 lg:mb-16\"\n        >\n          <h2 className=\"mb-3 text-2xl font-bold text-foreground sm:mb-4 sm:text-3xl md:text-4xl lg:text-5xl\">\n            Client Testimonials\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-sm text-muted-foreground sm:text-base md:text-lg\">\n            Trusted by businesses and startups to deliver exceptional results\n          </p>\n        </motion.div>\n\n        <motion.div\n          variants={container}\n          initial=\"hidden\"\n          whileInView=\"show\"\n          viewport={{ once: true }}\n          className=\"grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2\"\n        >\n          {testimonials.map((testimonial, index) => (\n            <motion.div key={index} variants={item}>\n              <Card className=\"group relative h-full overflow-hidden border-border bg-card p-4 transition-all duration-300 sm:p-6 hover:border-primary/50\">\n                <Quote className=\"absolute top-3 right-3 h-8 w-8 text-muted/10 transition-colors sm:top-4 sm:right-4 sm:h-12 sm:w-12 group-hover:text-primary/10\" />\n\n                <div className=\"relative z-10\">\n                  <div className=\"mb-3 flex items-center gap-3 sm:mb-4 sm:gap-4\">\n                    <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground sm:h-12 sm:w-12 sm:text-base\">\n                      {testimonial.avatar}\n                    </div>\n                    <div className=\"flex-1 min-w-0\">\n                      <h4 className=\"truncate text-sm font-semibold text-foreground sm:text-base\">\n                        {testimonial.name}\n                      </h4>\n                      <p className=\"truncate text-xs text-muted-foreground sm:text-sm\">\n                        {testimonial.role}\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"mb-3 flex gap-1 sm:mb-4\">\n                    {Array.from({ length: testimonial.rating }).map((_, i) => (\n                      <motion.div\n                        key={i}\n                        initial={{ opacity: 0, scale: 0 }}\n                        whileInView={{ opacity: 1, scale: 1 }}\n                        viewport={{ once: true }}\n                        transition={{\n                          delay: index * 0.15 + i * 0.1,\n                          duration: 0.3,\n                        }}\n                      >\n                        <Star className=\"h-3 w-3 fill-primary text-primary sm:h-4 sm:w-4\" />\n                      </motion.div>\n                    ))}\n                  </div>\n\n                  <p className=\"text-sm leading-relaxed text-muted-foreground sm:text-base\">\n                    &quot;{testimonial.content}&quot;\n                  </p>\n                </div>\n              </Card>\n            </motion.div>\n          ))}\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/testimonials-block-shadcnui.tsx"
    }
  ]
}