{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-sections-03",
  "type": "registry:component",
  "title": "Hero Sections",
  "author": "Toby Belhome",
  "description": "Explore beautifully crafted Tailwind CSS hero sections designed to deliver a powerful first impression with clarity and purpose. These layouts blend minimalist design, strong visual hierarchy, and persuasive calls-to-action to communicate your product’s value from the very first glance. Ideal for landing pages, SaaS platforms, and marketing websites seeking a refined, modern, and conversion-ready above-the-fold experience.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "popover"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/hero-sections/03/page.tsx",
      "content": "import Link from \"next/link\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList\n} from \"@/components/ui/navigation-menu\";\n\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\", active: true },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" }\n];\n\nconst Logo = () => {\n  return (\n    <Link href=\"#\" className=\"flex items-center space-x-2\">\n      <img src=\"/logo.svg\" className=\"size-8 dark:invert\" alt=\"bundui logo\" />\n      <span className=\"text-2xl font-bold\">Bundui</span>\n    </Link>\n  );\n};\n\nexport default function HeroSection() {\n  return (\n    <>\n      <header className=\"border-b px-4 md:px-6\">\n        <div className=\"flex h-16 items-center justify-between gap-4\">\n          {/* Left side */}\n          <div className=\"flex items-center gap-2\">\n            {/* Mobile menu trigger */}\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button className=\"group size-8 md:hidden\" variant=\"ghost\" size=\"icon\">\n                  <svg\n                    className=\"pointer-events-none\"\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M4 12L20 12\"\n                      className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                    />\n                    <path\n                      d=\"M4 12H20\"\n                      className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    />\n                    <path\n                      d=\"M4 12H20\"\n                      className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                    />\n                  </svg>\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n                <NavigationMenu className=\"max-w-none *:w-full\">\n                  <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                    {navigationLinks.map((link, index) => (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink\n                          href={link.href}\n                          className=\"py-1.5\"\n                          active={link.active}>\n                          {link.label}\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    ))}\n                  </NavigationMenuList>\n                </NavigationMenu>\n              </PopoverContent>\n            </Popover>\n            {/* Main nav */}\n            <div className=\"flex items-center gap-6\">\n              <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n                <Logo />\n              </a>\n              {/* Navigation menu */}\n              <NavigationMenu className=\"max-md:hidden\">\n                <NavigationMenuList className=\"gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem key={index}>\n                      <NavigationMenuLink\n                        active={link.active}\n                        href={link.href}\n                        className=\"text-muted-foreground hover:text-primary py-1.5 font-medium\">\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </div>\n          </div>\n          {/* Right side */}\n          <div className=\"flex items-center gap-2\">\n            <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n              <a href=\"#\">Sign In</a>\n            </Button>\n            <Button asChild size=\"sm\" className=\"text-sm\">\n              <a href=\"#\">Get Started</a>\n            </Button>\n          </div>\n        </div>\n      </header>\n      <section className=\"py-10 lg:py-16\">\n        <div className=\"mx-auto max-w-7xl px-4\">\n          <div className=\"grid items-center gap-8 lg:grid-cols-2\">\n            <header className=\"flex flex-col items-center text-center lg:items-start lg:text-left\">\n              <Badge variant=\"outline\">\n                🚀 Launch Faster\n                <ArrowUpRight />\n              </Badge>\n              <h1 className=\"font-heading my-4 text-4xl text-balance md:text-5xl lg:leading-14\">\n                All-in-One Platform for Managing Your SaaS\n              </h1>\n              <p className=\"text-muted-foreground mb-8 text-balance lg:text-lg\">\n                Streamline operations, track metrics, and scale your SaaS business with ease.\n                Everything you need, in one powerful dashboard.\n              </p>\n              <div className=\"flex justify-center gap-2\">\n                <Button asChild>\n                  <Link href=\"https://app.yoursaas.com/signup\">Start Free Trial</Link>\n                </Button>\n                <Button asChild variant=\"outline\">\n                  <Link href=\"https://app.yoursaas.com/demo\">Request a Demo</Link>\n                </Button>\n              </div>\n            </header>\n            <img\n              src=\"https://images.unsplash.com/photo-1748723594319-142e211b46a9?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n              alt=\"Dashboard interface of the SaaS platform\"\n              className=\"aspect-square w-full rounded-md object-cover\"\n            />\n          </div>\n        </div>\n      </section>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/hero-sections-03.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}