{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["lucide-react","motion"],"description":"Star testimonials block with grid layout","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { getAvatarUrl, getTestimonials } from \"@/lib/smoothui-data\";\nimport { Star } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst testimonials = getTestimonials(4);\n\nexport function TestimonialsStars() {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <section>\n      <div className=\"py-24\">\n        <div className=\"container mx-auto w-full max-w-5xl px-6\">\n          <motion.div\n            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}\n            className=\"mb-12\"\n            initial={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : { duration: 0.6, ease: [0.22, 1, 0.36, 1] }\n            }\n          >\n            <h2 className=\"font-semibold text-4xl text-foreground\">\n              Developer Reviews\n            </h2>\n            <p className=\"my-4 text-balance text-lg text-muted-foreground\">\n              See what the community is saying about SmoothUI. Real feedback\n              from developers building amazing user experiences.\n            </p>\n          </motion.div>\n\n          <motion.div\n            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}\n            className=\"grid 3xl:grid-cols-3 3xl:gap-12 gap-6 lg:grid-cols-2\"\n            initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : { delay: 0.2, duration: 0.6, ease: [0.22, 1, 0.36, 1] }\n            }\n          >\n            {testimonials.map((testimonial, index) => (\n              <motion.div\n                animate={\n                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }\n                }\n                className=\"group rounded-2xl border border-transparent px-4 py-3 duration-200 hover:border-border hover:bg-background/50\"\n                initial={\n                  shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }\n                }\n                key={testimonial.name}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : {\n                        delay: index * 0.15,\n                        duration: 0.5,\n                        ease: [0.22, 1, 0.36, 1],\n                      }\n                }\n                whileHover={\n                  shouldReduceMotion\n                    ? {}\n                    : {\n                        transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n                        y: -4,\n                      }\n                }\n              >\n                <motion.div\n                  animate={\n                    shouldReduceMotion\n                      ? { opacity: 1 }\n                      : { opacity: 1, scale: 1 }\n                  }\n                  className=\"flex gap-1\"\n                  initial={\n                    shouldReduceMotion\n                      ? { opacity: 1 }\n                      : { opacity: 0, scale: 0.8 }\n                  }\n                  transition={\n                    shouldReduceMotion\n                      ? { duration: 0 }\n                      : {\n                          delay: index * 0.15 + 0.2,\n                          duration: 0.4,\n                          ease: [0.22, 1, 0.36, 1],\n                        }\n                  }\n                >\n                  {Array.from({ length: 5 }).map((_, i) => (\n                    <motion.div\n                      animate={\n                        shouldReduceMotion\n                          ? { opacity: 1 }\n                          : { opacity: 1, scale: 1 }\n                      }\n                      initial={\n                        shouldReduceMotion\n                          ? { opacity: 1 }\n                          : { opacity: 0, scale: 0 }\n                      }\n                      key={`${testimonial.name}-star-${i}`}\n                      transition={\n                        shouldReduceMotion\n                          ? { duration: 0 }\n                          : {\n                              delay: index * 0.15 + 0.2 + i * 0.05,\n                              duration: 0.3,\n                              ease: [0.68, -0.55, 0.265, 1.55],\n                            }\n                      }\n                    >\n                      <Star\n                        className={cn(\n                          \"size-4 transition-colors duration-200\",\n                          i < (testimonial.stars || 0)\n                            ? \"fill-accent stroke-accent\"\n                            : \"fill-primary stroke-border\"\n                        )}\n                      />\n                    </motion.div>\n                  ))}\n                </motion.div>\n\n                <motion.p\n                  animate={\n                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }\n                  }\n                  className=\"my-4 text-foreground\"\n                  initial={\n                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 10 }\n                  }\n                  transition={\n                    shouldReduceMotion\n                      ? { duration: 0 }\n                      : {\n                          delay: index * 0.15 + 0.4,\n                          duration: 0.4,\n                          ease: [0.22, 1, 0.36, 1],\n                        }\n                  }\n                >\n                  {testimonial.content}\n                </motion.p>\n\n                <motion.div\n                  animate={\n                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }\n                  }\n                  className=\"flex items-center gap-2\"\n                  initial={\n                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -10 }\n                  }\n                  transition={\n                    shouldReduceMotion\n                      ? { duration: 0 }\n                      : {\n                          delay: index * 0.15 + 0.5,\n                          duration: 0.3,\n                          ease: [0.22, 1, 0.36, 1],\n                        }\n                  }\n                >\n                  <Avatar className=\"size-6 border border-transparent shadow ring-1 ring-foreground/10\">\n                    <AvatarImage\n                      alt={testimonial.name}\n                      src={getAvatarUrl(testimonial.avatar, 48)}\n                    />\n                    <AvatarFallback>\n                      {testimonial.name.charAt(0)}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div className=\"font-medium text-foreground text-sm\">\n                    {testimonial.name}\n                  </div>\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"size-1 rounded-full bg-foreground/25\"\n                  />\n                  <span className=\"text-muted-foreground text-sm\">\n                    {testimonial.role}\n                  </span>\n                </motion.div>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default TestimonialsStars;\n","path":"index.tsx","target":"components/smoothui/testimonials-3/index.tsx","type":"registry:block"}],"name":"testimonials-3","registryDependencies":["avatar","https://smoothui.dev/r/data.json"],"title":"Testimonials 3","type":"registry:block"}