{"$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 { getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"@/components/smoothui/shared\";\n\ninterface HeroProductProps {\n  badgeText?: string;\n  description?: string;\n  heading?: string;\n  imageAlt?: string;\n  imageSrc?: string;\n  primaryButton?: {\n    text: string;\n    url: string;\n  };\n  secondaryButton?: {\n    text: string;\n    url: string;\n  };\n}\n\nexport function HeroProduct({\n  badgeText = \"New animation library\",\n  heading = \"Build Beautiful UIs, Effortlessly\",\n  description = \"Craft. Build. Ship Modern Websites With Smooth Animations.\",\n  primaryButton = {\n    text: \"Start Building\",\n    url: \"#link\",\n  },\n  secondaryButton = {\n    text: \"Watch Video\",\n    url: \"#link\",\n  },\n  imageSrc = getImageKitUrl(\"/images/hero-smoothui.png\", {\n    format: \"auto\",\n    quality: 85,\n    width: 1200,\n  }),\n  imageAlt = \"SmoothUI desktop application interface\",\n}: HeroProductProps) {\n  const shouldReduceMotion = useReducedMotion();\n  return (\n    <div className=\"relative\">\n      <HeroHeader />\n      <main>\n        <motion.section\n          animate={\n            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }\n          }\n          className=\"relative overflow-hidden\"\n          initial={\n            shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 1.02 }\n          }\n          transition={\n            shouldReduceMotion\n              ? { duration: 0 }\n              : {\n                  duration: 0.8,\n                  ease: [0.25, 0.46, 0.45, 0.94], // ease-out-quad\n                }\n          }\n        >\n          <div className=\"py-20 md:py-36\">\n            <div className=\"relative z-10 mx-auto max-w-5xl px-6 text-center\">\n              <AnimatedGroup className=\"space-y-8\" preset=\"blur-slide\">\n                {/* Badge with animated sparkle */}\n                <motion.div\n                  animate={\n                    shouldReduceMotion\n                      ? { opacity: 1 }\n                      : { opacity: 1, scale: 1, y: 0 }\n                  }\n                  initial={\n                    shouldReduceMotion\n                      ? { opacity: 1 }\n                      : { opacity: 0, scale: 0.9, y: 20 }\n                  }\n                  transition={\n                    shouldReduceMotion\n                      ? { duration: 0 }\n                      : {\n                          delay: 0.1,\n                          duration: 0.6,\n                          ease: [0.25, 0.46, 0.45, 0.94],\n                        }\n                  }\n                >\n                  <a\n                    className=\"mx-auto flex w-fit items-center justify-center gap-2 rounded-md py-0.5 pr-3 pl-1 transition-colors duration-200 ease-out hover:bg-foreground/5\"\n                    href=\"/\"\n                  >\n                    <svg\n                      aria-hidden=\"true\"\n                      className=\"h-4 w-auto\"\n                      fill=\"none\"\n                      viewBox=\"0 0 82 30\"\n                      width=\"200\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M23.81 14.013v.013l-1.075 4.665c-.058.264-.322.458-.626.458H20.81a.218.218 0 0 0-.208.155c-1.198 4.064-2.82 6.858-4.962 8.535-1.822 1.428-4.068 2.093-7.069 2.093-2.696 0-4.514-.867-6.056-2.578C.478 25.09-.364 21.388.146 16.926 1.065 8.549 5.41.096 13.776.096c2.545-.023 4.543.762 5.933 2.33 1.47 1.657 2.216 4.154 2.22 7.421a.55.55 0 0 1-.549.536h-6.13a.42.42 0 0 1-.407-.41c-.05-2.259-.72-3.36-2.052-3.36-2.35 0-3.736 3.19-4.471 4.959-1.027 2.47-1.55 5.152-1.447 7.824.049 1.244.249 2.994 1.43 3.718 1.047.643 2.541.217 3.446-.495.904-.711 1.632-1.942 1.938-3.065.043-.156.046-.277.005-.332-.043-.055-.162-.068-.253-.068h-1.574a.572.572 0 0 1-.438-.202.42.42 0 0 1-.087-.362l1.076-4.674c.053-.24.27-.42.537-.453v-.011h10.33c.024 0 .049 0 .072.005.268.034.457.284.452.556h.002Z\"\n                        fill=\"#0ae448\"\n                      />\n                      <path\n                        d=\"M41.594 8.65a.548.548 0 0 1-.548.531H35.4c-.37 0-.679-.3-.679-.665 0-1.648-.57-2.45-1.736-2.45s-1.918.717-1.94 1.968c-.025 1.395.764 2.662 3.01 4.84 2.957 2.774 4.142 5.232 4.085 8.48C38.047 26.605 34.476 30 29.042 30c-2.775 0-4.895-.743-6.305-2.207-1.431-1.486-2.087-3.668-1.95-6.485a.548.548 0 0 1 .549-.53h5.84a.55.55 0 0 1 .422.209.48.48 0 0 1 .106.384c-.065 1.016.112 1.775.512 2.195.256.272.613.41 1.058.41 1.079 0 1.711-.763 1.735-2.09.02-1.148-.343-2.155-2.321-4.19-2.555-2.496-4.846-5.075-4.775-9.13.042-2.351.976-4.502 2.631-6.056C28.294.868 30.687 0 33.465 0c2.783.02 4.892.813 6.269 2.359 1.304 1.466 1.932 3.582 1.862 6.29h-.002Z\"\n                        fill=\"#0ae448\"\n                      />\n                      <path\n                        d=\"m59.096 29.012.037-27.932a.525.525 0 0 0-.529-.533h-8.738c-.294 0-.423.252-.507.42L36.707 28.842v.005l-.005.006c-.14.343.126.71.497.71h6.108c.33 0 .548-.1.656-.308l1.213-2.915c.149-.388.177-.424.601-.424h5.836c.406 0 .415.008.408.405l-.131 2.71a.525.525 0 0 0 .529.532h6.17a.522.522 0 0 0 .403-.182.458.458 0 0 0 .104-.369Zm-10.81-9.326c-.057 0-.102-.001-.138-.005a.146.146 0 0 1-.13-.183c.012-.041.029-.095.053-.163l4.377-10.827c.038-.107.086-.212.136-.314.071-.145.157-.155.184-.047.023.09-.502 11.118-.502 11.118-.041.413-.06.43-.467.464l-3.509-.041h-.008l.003-.002Z\"\n                        fill=\"#0ae448\"\n                      />\n                      <path\n                        d=\"M71.545.547h-4.639c-.245 0-.52.13-.585.422l-6.455 28.029a.423.423 0 0 0 .088.364.572.572 0 0 0 .437.202h5.798c.311 0 .525-.153.583-.418 0 0 .703-3.168.704-3.178.05-.247-.036-.439-.258-.555-.105-.054-.209-.108-.312-.163l-1.005-.522-1-.522-.387-.201a.186.186 0 0 1-.102-.17.199.199 0 0 1 .198-.194l3.178.014c.95.005 1.901-.062 2.836-.234 6.58-1.215 10.95-6.485 11.076-13.656.107-6.12-3.309-9.221-10.15-9.221l-.005.003Zm-1.579 16.68h-.124c-.278 0-.328-.03-.337-.04-.004-.007 1.833-8.073 1.834-8.084.047-.233.045-.367-.099-.446-.184-.102-2.866-1.516-2.866-1.516a.188.188 0 0 1-.101-.172.197.197 0 0 1 .197-.192h4.241c1.32.04 2.056 1.221 2.021 3.237-.061 3.492-1.721 7.09-4.766 7.214Z\"\n                        fill=\"#0ae448\"\n                      />\n                    </svg>\n\n                    <span className=\"font-medium\">{badgeText}</span>\n                  </a>\n                </motion.div>\n\n                {/* Main heading with staggered animation */}\n                <AnimatedText\n                  as=\"h1\"\n                  className=\"mx-auto mt-8 max-w-3xl text-balance font-bold text-4xl tracking-tight sm:text-5xl\"\n                  delay={0.2}\n                >\n                  {heading}\n                </AnimatedText>\n\n                {/* Description */}\n                <AnimatedText\n                  as=\"p\"\n                  className=\"mx-auto my-6 max-w-xl text-balance text-muted-foreground text-xl\"\n                  delay={0.3}\n                >\n                  {description}\n                </AnimatedText>\n\n                {/* CTA buttons with staggered animation */}\n                <motion.div\n                  animate={\n                    shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }\n                  }\n                  className=\"flex items-center justify-center gap-3\"\n                  initial={\n                    shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }\n                  }\n                  transition={\n                    shouldReduceMotion\n                      ? { duration: 0 }\n                      : {\n                          delay: 0.4,\n                          duration: 0.6,\n                          ease: [0.25, 0.46, 0.45, 0.94],\n                        }\n                  }\n                >\n                  <motion.div\n                    transition={{\n                      damping: 10,\n                      stiffness: 400,\n                      type: \"spring\" as const,\n                    }}\n                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}\n                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}\n                  >\n                    <Button asChild size=\"lg\" variant=\"candy\">\n                      <a href={primaryButton.url}>\n                        <span className=\"text-nowrap\">\n                          {primaryButton.text}\n                        </span>\n                      </a>\n                    </Button>\n                  </motion.div>\n\n                  <motion.div\n                    transition={{\n                      damping: 10,\n                      stiffness: 400,\n                      type: \"spring\" as const,\n                    }}\n                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}\n                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}\n                  >\n                    <Button asChild size=\"lg\" variant=\"outline\">\n                      <a href={secondaryButton.url}>\n                        <span className=\"text-nowrap\">\n                          {secondaryButton.text}\n                        </span>\n                      </a>\n                    </Button>\n                  </motion.div>\n                </motion.div>\n              </AnimatedGroup>\n            </div>\n\n            {/* Image section with parallax-like animation */}\n            <motion.div\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              className=\"relative\"\n              initial={{ opacity: 0, scale: 0.95, y: 40 }}\n              transition={{\n                delay: 0.6,\n                duration: 0.8,\n                ease: [0.25, 0.46, 0.45, 0.94],\n              }}\n            >\n              <div className=\"relative z-10 mx-auto max-w-5xl px-6\">\n                <motion.div\n                  className=\"mt-12 md:mt-16\"\n                  transition={{\n                    damping: 20,\n                    stiffness: 300,\n                    type: \"spring\" as const,\n                  }}\n                  whileHover={\n                    shouldReduceMotion\n                      ? {}\n                      : {\n                          rotateY: 2,\n                          scale: 1.02,\n                        }\n                  }\n                >\n                  <motion.div\n                    className=\"relative mx-auto overflow-hidden rounded-(--radius) border border-transparent bg-background shadow-black/10 shadow-lg ring-1 ring-black/10\"\n                    initial={{\n                      boxShadow:\n                        \"0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1)\",\n                    }}\n                    transition={{\n                      duration: 0.3,\n                      ease: [0.25, 0.46, 0.45, 0.94],\n                    }}\n                    whileHover={\n                      shouldReduceMotion\n                        ? {}\n                        : {\n                            boxShadow:\n                              \"0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1)\",\n                          }\n                    }\n                  >\n                    <motion.div\n                      animate={{ scale: 1 }}\n                      initial={\n                        shouldReduceMotion ? { scale: 1 } : { scale: 1.05 }\n                      }\n                      transition={\n                        shouldReduceMotion\n                          ? { duration: 0 }\n                          : {\n                              delay: 0.8,\n                              duration: 1.2,\n                              ease: [0.25, 0.46, 0.45, 0.94],\n                            }\n                      }\n                    >\n                      <img\n                        alt={imageAlt}\n                        className=\"h-auto w-full\"\n                        draggable={false}\n                        height=\"1842\"\n                        src={imageSrc}\n                        width=\"2880\"\n                      />\n                    </motion.div>\n                  </motion.div>\n                </motion.div>\n              </div>\n            </motion.div>\n          </div>\n        </motion.section>\n      </main>\n    </div>\n  );\n}\n\nexport default HeroProduct;\n","path":"index.tsx","target":"components/smoothui/header-2/index.tsx","type":"registry:block"}],"name":"header-2","registryDependencies":["https://smoothui.dev/r/shared.json","https://smoothui.dev/r/data.json"],"title":"Header 2","type":"registry:block"}