{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"hero-01","type":"registry:component","title":"Hero 01","description":"A modern hero section with gradient background, animated elements, and call-to-action buttons. Features customizable title with gradient text effect, announcement badge, dual CTA buttons with hover animations, and framework logos showcase. Includes animated background gradient, responsive design, and comprehensive customization options for all text, links, and visual elements. Perfect for landing pages, product launches, and marketing sites requiring impactful hero presentation with professional polish.","dependencies":["lucide-react"],"registryDependencies":["badge","button"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/hero-sections/hero-01.tsx","content":"\"use client\";\n\nimport { ArrowRight } from \"lucide-react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\n\nexport interface Framework {\n  name: string;\n  href: string;\n  logo: string;\n  alt: string;\n  width?: number;\n  height?: number;\n}\n\nexport interface Hero01Props {\n  className?: string;\n}\n\nconst frameworks: Framework[] = [\n  {\n    name: \"Tailwind CSS\",\n    href: \"https://tailwindcss.com/\",\n    logo: \"/tailwindcss.svg\",\n    alt: \"Tailwind CSS logo\",\n    width: 100,\n    height: 40,\n  },\n  {\n    name: \"Shadcn/ui\",\n    href: \"https://ui.shadcn.com/\",\n    logo: \"/shadcn-ui-dark.svg\",\n    alt: \"Shadcn/ui logo\",\n    width: 100,\n    height: 40,\n  },\n  {\n    name: \"TypeScript\",\n    href: \"https://www.typescriptlang.org/\",\n    logo: \"/typescript.svg\",\n    alt: \"TypeScript logo\",\n    width: 64,\n    height: 40,\n  },\n  {\n    name: \"React\",\n    href: \"https://react.dev/\",\n    logo: \"/react.svg\",\n    alt: \"React logo\",\n    width: 28,\n    height: 28,\n  },\n];\n\nconst content = {\n  title: \"Building blocks for your\",\n  subtitle: \"next project\",\n  description:\n    \"Featuring hundreds of high quality UI blocks built with shadcn/ui, Tailwind CSS, and React. Plug them into your next project with our CLI.\",\n  badge: {\n    text: \"New blocks added regularly!\",\n    icon: \"✨\",\n  },\n};\n\nconst buttons = {\n  primary: {\n    text: \"See our blocks\",\n    href: \"/blocks\",\n  },\n  secondary: {\n    text: \"View pricing\",\n    href: \"/pricing\",\n  },\n};\n\nconst frameworksSection = {\n  title: \"Built with these amazing frameworks\",\n  show: true,\n};\n\nexport function Hero01({ className }: Hero01Props) {\n  const handlePrimaryClick = () => {\n    console.log(\"Primary button clicked\");\n  };\n\n  const handleSecondaryClick = () => {\n    console.log(\"Secondary button clicked\");\n  };\n\n  return (\n    <main\n      className={cn(\n        \"flex flex-col items-center isolate relative justify-center px-4 py-16 md:py-24 lg:py-32 pt-24\",\n        className,\n      )}\n    >\n      {/* Background gradient */}\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl opacity-50\"\n      >\n        <div\n          style={{\n            clipPath:\n              \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n          }}\n          className=\"mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30\"\n        />\n      </div>\n\n      {/* Badge */}\n      <Badge variant=\"outline\" className=\"rounded-full mb-2 h-8\">\n        <span className=\"text-md py-2 px-2 border-r\">{content.badge.icon}</span>\n        <span className=\"text-xs py-2 px-3\">\n          <span>{content.badge.text}</span>\n        </span>\n      </Badge>\n\n      {/* Hero Content */}\n      <div className=\"text-center max-w-6xl mx-auto\">\n        <h1 className=\"text-4xl md:text-5xl lg:text-7xl font-extrabold text-foreground leading-tight mb-6 animate-fade-in-up\">\n          {content.title}\n          <br />\n          <span className=\"bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent animate-gradient-x\">\n            {content.subtitle}\n          </span>\n        </h1>\n\n        <p className=\"text-lg md:text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed animate-fade-in-up animation-delay-200\">\n          {content.description}\n        </p>\n\n        {/* CTA Buttons */}\n        <div className=\"flex flex-col sm:flex-row items-center justify-center gap-4 mb-20 animate-fade-in-up animation-delay-400\">\n          <Button\n            size=\"lg\"\n            className=\"bg-black dark:bg-white hover:bg-gray-800 dark:hover:bg-gray-100 text-white dark:text-black px-8 py-6 rounded-full text-base font-medium transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95 group\"\n            asChild\n          >\n            <Link href={buttons.primary.href} onClick={handlePrimaryClick}>\n              <span>{buttons.primary.text}</span>\n            </Link>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"lg\"\n            className=\"px-8 py-6 rounded-full text-base font-medium group transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800\"\n            asChild\n          >\n            <Link\n              href={buttons.secondary.href}\n              onClick={handleSecondaryClick}\n              className=\"flex items-center justify-center text-muted-foreground\"\n            >\n              {buttons.secondary.text}{\" \"}\n              <ArrowRight className=\"ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200\" />\n            </Link>\n          </Button>\n        </div>\n      </div>\n\n      {/* Frameworks Section */}\n      {frameworksSection.show && frameworks.length > 0 && (\n        <div className=\"w-full max-w-7xl mx-auto animate-fade-in-up animation-delay-600\">\n          <p className=\"text-center text-sm mb-2 text-muted-foreground/80\">\n            {frameworksSection.title}\n          </p>\n\n          <div className=\"flex flex-wrap items-center justify-center gap-8 md:gap-12\">\n            {frameworks.map((framework, index) => (\n              <div\n                key={framework.name}\n                className=\"hover:opacity-100 transition-all duration-300 hover:scale-110 cursor-pointer\"\n                style={{ animationDelay: `${index * 100}ms` }}\n              >\n                <a\n                  href={framework.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  <Image\n                    src={framework.logo}\n                    alt={framework.alt}\n                    width={framework.width || 64}\n                    height={framework.height || 40}\n                    className=\"transition-colors duration-300\"\n                  />\n                </a>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </main>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}