{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-3",
  "description": "Feature-rich responsive header with scroll blur, animated mobile drawer, and nested navigation menus.",
  "registryDependencies": [
    "button",
    "navigation-menu"
  ],
  "files": [
    {
      "path": "registry/blocks/header/3/header.tsx",
      "content": "\"use client\";\nimport {\n  BarChart,\n  CodeIcon,\n  FileText,\n  GlobeIcon,\n  Handshake,\n  HelpCircle,\n  LayersIcon,\n  Leaf,\n  type LucideIcon,\n  PlugIcon,\n  RotateCcw,\n  Shield,\n  Star,\n  UserPlusIcon,\n  Users,\n} from \"lucide-react\";\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { MenuToggleIcon } from \"@/components/menu-toggle-icon\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from \"@/components/ui/navigation-menu\";\nimport { useScroll } from \"@/hooks/use-scroll\";\nimport { cn } from \"@/lib/utils\";\n\ntype LinkItem = {\n  title: string;\n  href: string;\n  icon: LucideIcon;\n  description?: string;\n};\n\nexport function Header() {\n  const [open, setOpen] = React.useState(false);\n  const scrolled = useScroll(10);\n\n  React.useEffect(() => {\n    if (open) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [open]);\n\n  return (\n    <header\n      className={cn(\"sticky top-0 z-50 w-full border-transparent border-b\", {\n        \"border-border bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/50\":\n          scrolled,\n      })}\n    >\n      <nav className=\"mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-4\">\n        <div className=\"flex items-center gap-5\">\n          <a className=\"rounded-md p-2 hover:bg-accent\" href=\"#\">\n            <LogoIcon className=\"size-6\" />\n          </a>\n          <NavigationMenu className=\"hidden md:flex\">\n            <NavigationMenuList>\n              <NavigationMenuItem>\n                <NavigationMenuTrigger className=\"bg-transparent\">\n                  Product\n                </NavigationMenuTrigger>\n                <NavigationMenuContent className=\"bg-muted/50 p-1 pr-1.5 dark:bg-background\">\n                  <ul className=\"grid w-lg grid-cols-2 gap-2 rounded-md border bg-popover p-2 shadow\">\n                    {productLinks.map((item, _i) => (\n                      <li key={item.title}>\n                        <ListItem {...item} />\n                      </li>\n                    ))}\n                  </ul>\n                  <div className=\"p-2\">\n                    <p className=\"text-muted-foreground text-sm\">\n                      Interested?{\" \"}\n                      <a\n                        className=\"font-medium text-foreground hover:underline\"\n                        href=\"#\"\n                      >\n                        Schedule a demo\n                      </a>\n                    </p>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n              <NavigationMenuItem>\n                <NavigationMenuTrigger className=\"bg-transparent\">\n                  Company\n                </NavigationMenuTrigger>\n                <NavigationMenuContent className=\"bg-muted/50 p-1 pr-1.5 pb-1.5 dark:bg-background\">\n                  <div className=\"grid w-lg grid-cols-2 gap-2\">\n                    <ul className=\"space-y-2 rounded-md border bg-popover p-2 shadow\">\n                      {companyLinks.map((item, _i) => (\n                        <li key={item.title}>\n                          <ListItem {...item} />\n                        </li>\n                      ))}\n                    </ul>\n                    <ul className=\"space-y-2 p-3\">\n                      {companyLinks2.map((item, _i) => (\n                        <li key={item.title}>\n                          <NavigationMenuLink\n                            className=\"flex-row items-center gap-x-2\"\n                            href={item.href}\n                          >\n                            <item.icon className=\"size-4 text-foreground\" />\n                            <span className=\"font-medium\">{item.title}</span>\n                          </NavigationMenuLink>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n              <NavigationMenuLink asChild className=\"px-4\">\n                <a className=\"rounded-md p-2 hover:bg-accent\" href=\"#\">\n                  Pricing\n                </a>\n              </NavigationMenuLink>\n            </NavigationMenuList>\n          </NavigationMenu>\n        </div>\n        <div className=\"hidden items-center gap-2 md:flex\">\n          <Button variant=\"outline\">Sign In</Button>\n          <Button>Get Started</Button>\n        </div>\n        <Button\n          aria-controls=\"mobile-menu\"\n          aria-expanded={open}\n          aria-label=\"Toggle menu\"\n          className=\"md:hidden\"\n          onClick={() => setOpen(!open)}\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <MenuToggleIcon className=\"size-5\" duration={300} open={open} />\n        </Button>\n      </nav>\n      <MobileMenu\n        className=\"flex flex-col justify-between gap-2 overflow-y-auto\"\n        open={open}\n      >\n        <NavigationMenu className=\"max-w-full\">\n          <div className=\"flex w-full flex-col gap-y-2\">\n            <span className=\"text-sm\">Product</span>\n            {productLinks.map((link) => (\n              <ListItem key={link.title} {...link} />\n            ))}\n            <span className=\"text-sm\">Company</span>\n            {companyLinks.map((link) => (\n              <ListItem key={link.title} {...link} />\n            ))}\n            {companyLinks2.map((link) => (\n              <ListItem key={link.title} {...link} />\n            ))}\n          </div>\n        </NavigationMenu>\n        <div className=\"flex flex-col gap-2\">\n          <Button className=\"w-full bg-transparent\" variant=\"outline\">\n            Sign In\n          </Button>\n          <Button className=\"w-full\">Get Started</Button>\n        </div>\n      </MobileMenu>\n    </header>\n  );\n}\n\ntype MobileMenuProps = React.ComponentProps<\"div\"> & {\n  open: boolean;\n};\n\nfunction MobileMenu({ open, children, className, ...props }: MobileMenuProps) {\n  if (!open || typeof window === \"undefined\") {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        \"bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/50\",\n        \"fixed top-14 right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden border-y md:hidden\"\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className={cn(\n          \"data-[slot=open]:zoom-in-97 ease-out data-[slot=open]:animate-in\",\n          \"size-full p-4\",\n          className\n        )}\n        data-slot={open ? \"open\" : \"closed\"}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body\n  );\n}\n\nfunction ListItem({\n  title,\n  description,\n  icon: Icon,\n  className,\n  href,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuLink> & LinkItem) {\n  return (\n    <NavigationMenuLink\n      className={cn(\"w-full flex-row gap-x-2\", className)}\n      {...props}\n      asChild\n    >\n      <a href={href}>\n        <div className=\"flex aspect-square size-12 items-center justify-center rounded-md border bg-background/40 shadow-sm\">\n          <Icon className=\"size-5 text-foreground\" />\n        </div>\n        <div className=\"flex flex-col items-start justify-center\">\n          <span className=\"font-medium\">{title}</span>\n          <span className=\"text-muted-foreground text-xs\">{description}</span>\n        </div>\n      </a>\n    </NavigationMenuLink>\n  );\n}\n\nconst productLinks: LinkItem[] = [\n  {\n    title: \"Website Builder\",\n    href: \"#\",\n    description: \"Create responsive websites with ease\",\n    icon: GlobeIcon,\n  },\n  {\n    title: \"Cloud Platform\",\n    href: \"#\",\n    description: \"Deploy and scale apps in the cloud\",\n    icon: LayersIcon,\n  },\n  {\n    title: \"Team Collaboration\",\n    href: \"#\",\n    description: \"Tools to help your teams work better together\",\n    icon: UserPlusIcon,\n  },\n  {\n    title: \"Analytics\",\n    href: \"#\",\n    description: \"Track and analyze your website traffic\",\n    icon: BarChart,\n  },\n  {\n    title: \"Integrations\",\n    href: \"#\",\n    description: \"Connect your apps and services\",\n    icon: PlugIcon,\n  },\n  {\n    title: \"API\",\n    href: \"#\",\n    description: \"Build custom integrations with our API\",\n    icon: CodeIcon,\n  },\n];\n\nconst companyLinks: LinkItem[] = [\n  {\n    title: \"About Us\",\n    href: \"#\",\n    description: \"Learn more about our story and team\",\n    icon: Users,\n  },\n  {\n    title: \"Customer Stories\",\n    href: \"#\",\n    description: \"See how we’ve helped our clients succeed\",\n    icon: Star,\n  },\n  {\n    title: \"Partnerships\",\n    href: \"#\",\n    icon: Handshake,\n    description: \"Collaborate with us for mutual growth\",\n  },\n];\n\nconst companyLinks2: LinkItem[] = [\n  {\n    title: \"Terms of Service\",\n    href: \"#\",\n    icon: FileText,\n  },\n  {\n    title: \"Privacy Policy\",\n    href: \"#\",\n    icon: Shield,\n  },\n  {\n    title: \"Refund Policy\",\n    href: \"#\",\n    icon: RotateCcw,\n  },\n  {\n    title: \"Blog\",\n    href: \"#\",\n    icon: Leaf,\n  },\n  {\n    title: \"Help Center\",\n    href: \"#\",\n    icon: HelpCircle,\n  },\n];\n",
      "type": "registry:component"
    },
    {
      "path": "components/logo.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = {\n  className?: string;\n};\n\nexport const LogoIcon = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block size-6 animate-pulse rounded-full bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-icon-light.png\"\n      : \"/logo/freddy-logo-icon-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"size-6 object-contain\", className)}\n      height={250}\n      priority\n      src={src}\n      width={250}\n    />\n  );\n};\n\nexport const Logo = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block h-6 w-24 animate-pulse rounded bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-light.png\"\n      : \"/logo/freddy-logo-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"h-6 w-auto object-contain\", className)}\n      height={106}\n      priority\n      src={src}\n      width={344}\n    />\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "components/menu-toggle-icon.tsx",
      "content": "\"use client\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype MenuToggleProps = React.ComponentProps<\"svg\"> & {\n  open: boolean;\n  duration?: number;\n};\n\nexport function MenuToggleIcon({\n  open,\n  className,\n  fill = \"none\",\n  stroke = \"currentColor\",\n  strokeWidth = 2.5,\n  strokeLinecap = \"round\",\n  strokeLinejoin = \"round\",\n  duration = 500,\n  ...props\n}: MenuToggleProps) {\n  return (\n    <svg\n      className={cn(\n        \"transition-transform ease-in-out\",\n        open && \"-rotate-45\",\n        className\n      )}\n      fill={fill}\n      stroke={stroke}\n      strokeLinecap={strokeLinecap}\n      strokeLinejoin={strokeLinejoin}\n      strokeWidth={strokeWidth}\n      style={{\n        transitionDuration: `${duration}ms`,\n      }}\n      viewBox=\"0 0 32 32\"\n      {...props}\n    >\n      <path\n        className={cn(\n          \"transition-all ease-in-out\",\n          open\n            ? \"[stroke-dasharray:20_300] [stroke-dashoffset:-32.42px]\"\n            : \"[stroke-dasharray:12_63]\"\n        )}\n        d=\"M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22\"\n        style={{\n          transitionDuration: `${duration}ms`,\n        }}\n      />\n      <path d=\"M7 16 27 16\" />\n    </svg>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "hooks/use-scroll.ts",
      "content": "\"use client\";\nimport React from \"react\";\n\nexport function useScroll(threshold: number) {\n  const [scrolled, setScrolled] = React.useState(false);\n\n  const onScroll = React.useCallback(() => {\n    setScrolled(window.scrollY > threshold);\n  }, [threshold]);\n\n  React.useEffect(() => {\n    window.addEventListener(\"scroll\", onScroll);\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [onScroll]);\n\n  // also check on first load\n  React.useEffect(() => {\n    onScroll();\n  }, [onScroll]);\n\n  return scrolled;\n}\n",
      "type": "registry:hook"
    }
  ],
  "meta": {
    "height": "60vh"
  },
  "categories": [
    "header"
  ],
  "type": "registry:block"
}