{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-marketing-01","type":"registry:component","title":"Header Marketing 01","description":"A clean, modern header with sticky navigation and responsive design. Features FlowApp branding with zap icon, left-aligned navigation menu, right-aligned action buttons, and mobile-friendly sheet drawer. Perfect for SaaS applications and modern web platforms requiring professional navigation.","dependencies":["lucide-react"],"registryDependencies":["button","sheet","navigation-menu"],"files":[{"path":"src/registry/blocks/marketing/layout/headers/header-marketing-01.tsx","content":"\"use client\";\n\nimport { Menu, Zap } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/ui/navigation-menu\";\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/ui/sheet\";\n\nexport function HeaderMarketing01() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const navigation = [\n    { name: \"Features\", href: \"#\" },\n    { name: \"Pricing\", href: \"#\" },\n    { name: \"About\", href: \"#\" },\n    { name: \"Contact\", href: \"#\" },\n  ];\n\n  return (\n    <header className=\"sticky top-0 z-50 w-full h-16 bg-background border-b\">\n      <div className=\"container px-4 mx-auto max-w-7xl\">\n        <div className=\"flex h-16 items-center\">\n          {/* Logo - Left */}\n          <div className=\"flex items-center space-x-3 mr-8\">\n            <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-primary\">\n              <Zap className=\"h-4 w-4 text-primary-foreground\" />\n            </div>\n            <span className=\"text-xl font-bold\">FlowApp</span>\n          </div>\n\n          {/* Desktop Navigation - Left Aligned */}\n          <NavigationMenu className=\"hidden lg:flex mr-8\">\n            <NavigationMenuList>\n              {navigation.map((item) => (\n                <NavigationMenuItem key={item.name}>\n                  <NavigationMenuLink\n                    href={item.href}\n                    className={cn(\n                      \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\",\n                    )}\n                  >\n                    {item.name}\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              ))}\n            </NavigationMenuList>\n          </NavigationMenu>\n\n          {/* Spacer */}\n          <div className=\"flex-1\" />\n\n          {/* Desktop Actions - Right */}\n          <div className=\"hidden lg:flex items-center space-x-4\">\n            <Button variant=\"ghost\">Sign In</Button>\n            <Button>Get Started</Button>\n          </div>\n\n          {/* Mobile Menu */}\n          <Sheet open={isOpen} onOpenChange={setIsOpen}>\n            <SheetTrigger asChild className=\"lg:hidden\">\n              <Button variant=\"ghost\" size=\"sm\">\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"right\" className=\"w-[300px] sm:w-[400px]\">\n              <div className=\"flex flex-col space-y-4 mt-6\">\n                <div className=\"flex items-center space-x-3 pb-4 border-b\">\n                  <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-primary\">\n                    <Zap className=\"h-4 w-4 text-primary-foreground\" />\n                  </div>\n                  <span className=\"text-xl font-bold\">FlowApp</span>\n                </div>\n                <nav className=\"flex flex-col space-y-4\">\n                  {navigation.map((item) => (\n                    <a\n                      key={item.name}\n                      href={item.href}\n                      className=\"text-lg font-medium text-muted-foreground transition-colors hover:text-foreground\"\n                      onClick={() => setIsOpen(false)}\n                    >\n                      {item.name}\n                    </a>\n                  ))}\n                </nav>\n                <div className=\"flex flex-col space-y-3 pt-4 border-t\">\n                  <Button variant=\"ghost\" className=\"justify-start\">\n                    Sign In\n                  </Button>\n                  <Button className=\"justify-start\">Get Started</Button>\n                </div>\n              </div>\n            </SheetContent>\n          </Sheet>\n        </div>\n      </div>\n    </header>\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"}]}