{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["lucide-react","motion"],"description":"Premium header block with gradient logo and smooth animations","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\";\nimport { getAllPeople, getAvatarUrl, getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { ArrowDownRight, Star } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"@/components/smoothui/shared\";\n\ninterface HeroShowcaseProps {\n  buttons?: {\n    primary?: {\n      text: string;\n      url: string;\n    };\n    secondary?: {\n      text: string;\n      url: string;\n    };\n  };\n  description?: string;\n  heading?: string;\n  reviews?: {\n    count: number;\n    avatars: {\n      src: string;\n      alt: string;\n    }[];\n    rating?: number;\n  };\n}\n\nexport function HeroShowcase({\n  heading = \"Build beautiful UIs, effortlessly.\",\n  description = \"Smoothui gives you the building blocks to create stunning, animated interfaces in minutes.\",\n  buttons = {\n    primary: {\n      text: \"Get Started\",\n      url: \"#link\",\n    },\n    secondary: {\n      text: \"Watch demo\",\n      url: \"#link\",\n    },\n  },\n  reviews = {\n    avatars: getAllPeople()\n      .slice(0, 5)\n      .map((person) => ({\n        alt: `${person.name} avatar`,\n        src: getAvatarUrl(person.avatar, 90),\n      })),\n    count: 200,\n    rating: 5.0,\n  },\n}: HeroShowcaseProps) {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <>\n      <HeroHeader />\n      <main>\n        <motion.section\n          animate={\n            shouldReduceMotion\n              ? { opacity: 1 }\n              : { filter: \"blur(0px)\", opacity: 1, scale: 1 }\n          }\n          className=\"relative overflow-hidden bg-gradient-to-b from-background to-muted\"\n          initial={\n            shouldReduceMotion\n              ? { opacity: 1 }\n              : { filter: \"blur(12px)\", opacity: 0, scale: 1.04 }\n          }\n          transition={\n            shouldReduceMotion\n              ? { duration: 0 }\n              : { bounce: 0.32, duration: 0.9, type: \"spring\" as const }\n          }\n        >\n          <div className=\"mx-auto grid max-w-5xl items-center gap-10 px-6 py-24 lg:grid-cols-2 lg:gap-20\">\n            <AnimatedGroup\n              className=\"mx-auto flex flex-col items-center text-center md:ml-auto lg:max-w-3xl lg:items-start lg:text-left\"\n              preset=\"blur-slide\"\n            >\n              <AnimatedText\n                as=\"h1\"\n                className=\"my-6 text-pretty font-bold text-4xl lg:text-6xl xl:text-7xl\"\n              >\n                {heading}\n              </AnimatedText>\n              <AnimatedText\n                as=\"p\"\n                className=\"mb-8 max-w-xl text-foreground/70 lg:text-xl\"\n                delay={0.12}\n              >\n                {description}\n              </AnimatedText>\n              <AnimatedGroup\n                className=\"mb-12 flex w-fit flex-col items-center gap-4 sm:flex-row\"\n                preset=\"slide\"\n              >\n                <span className=\"inline-flex items-center -space-x-4\">\n                  {reviews.avatars.map((avatar, index) => (\n                    <motion.div\n                      key={`${avatar.src}-${index}`}\n                      style={{ display: \"inline-block\" }}\n                      transition={{\n                        damping: 20,\n                        stiffness: 300,\n                        type: \"spring\" as const,\n                      }}\n                      whileHover={shouldReduceMotion ? {} : { y: -8 }}\n                    >\n                      <Avatar className=\"size-12 border\">\n                        <AvatarImage alt={avatar.alt} src={avatar.src} />\n                      </Avatar>\n                    </motion.div>\n                  ))}\n                </span>\n                <div>\n                  <div className=\"flex items-center gap-1\">\n                    {[1, 2, 3, 4, 5].map((starNumber) => (\n                      <Star\n                        className=\"size-5 fill-yellow-400 text-yellow-400\"\n                        key={`star-${starNumber}`}\n                      />\n                    ))}\n                    <span className=\"mr-1 font-semibold\">\n                      {reviews.rating?.toFixed(1)}\n                    </span>\n                  </div>\n                  <p className=\"text-left font-medium text-foreground/70\">\n                    from {reviews.count}+ reviews\n                  </p>\n                </div>\n              </AnimatedGroup>\n              <AnimatedGroup\n                className=\"flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start\"\n                preset=\"slide\"\n              >\n                {buttons.primary ? (\n                  <Button asChild className=\"w-full sm:w-auto\" variant=\"candy\">\n                    <a href={buttons.primary.url}>{buttons.primary.text}</a>\n                  </Button>\n                ) : null}\n                {buttons.secondary ? (\n                  <Button asChild variant=\"outline\">\n                    <a href={buttons.secondary.url}>\n                      {buttons.secondary.text}\n                      <ArrowDownRight className=\"size-4\" />\n                    </a>\n                  </Button>\n                ) : null}\n              </AnimatedGroup>\n            </AnimatedGroup>\n            {/* Imagen completamente estática para que el blend mode funcione perfecto */}\n            <div className=\"flex\">\n              <img\n                alt=\"app screen\"\n                className=\"h-full w-full rounded-md object-cover\"\n                draggable={false}\n                height={1842}\n                src={getImageKitUrl(\"/images/hero-example_xertaz.png\", {\n                  format: \"auto\",\n                  quality: 85,\n                  width: 1200,\n                })}\n                width={2880}\n              />\n            </div>\n          </div>\n        </motion.section>\n      </main>\n    </>\n  );\n}\nexport default HeroShowcase;\n","path":"index.tsx","target":"components/smoothui/header-3/index.tsx","type":"registry:block"}],"name":"header-3","registryDependencies":["avatar","https://smoothui.dev/r/shared.json","https://smoothui.dev/r/data.json"],"title":"Header 3","type":"registry:block"}