{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-4",
  "description": "Premium mega menu header with card-style items, vibrant gradients, and smooth motion animations.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button",
    "navigation-menu"
  ],
  "files": [
    {
      "path": "registry/blocks/header/4/header.tsx",
      "content": "\"use client\";\nimport {\n  Building2,\n  CalendarDays,\n  ChevronRight,\n  Gem,\n  Github,\n  LayoutGrid,\n  LineChart,\n  RefreshCw,\n  Search,\n  TrendingUp,\n  Wallet,\n} from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React from \"react\";\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\nexport function Header() {\n  const scrolled = useScroll(20);\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-50 w-full transition-all duration-300\",\n        scrolled\n          ? \"border-b bg-background/80 backdrop-blur-xl\"\n          : \"bg-transparent\"\n      )}\n    >\n      <div className=\"container mx-auto flex h-16 items-center justify-between px-4\">\n        {/* Logo */}\n        <div className=\"flex items-center gap-8\">\n          <a\n            className=\"group flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-accent\"\n            href=\"/\"\n          >\n            <LogoIcon className=\"size-7 transition-transform group-hover:scale-110\" />\n            <span className=\"hidden font-bold text-xl tracking-tight sm:inline-block\">\n              Freddy\n            </span>\n          </a>\n\n          {/* Desktop Navigation */}\n          <NavigationMenu className=\"hidden md:flex\" viewport={false}>\n            <NavigationMenuList className=\"gap-2\">\n              <NavigationMenuItem>\n                <a\n                  className=\"group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 font-medium text-sm 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\"\n                  href=\"#\"\n                >\n                  Home\n                </a>\n              </NavigationMenuItem>\n              <NavigationMenuItem>\n                <a\n                  className=\"group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 font-medium text-sm 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\"\n                  href=\"#\"\n                >\n                  Pricing\n                </a>\n              </NavigationMenuItem>\n\n              <NavigationMenuItem>\n                <NavigationMenuTrigger className=\"h-9 bg-transparent px-4 font-medium text-sm transition-colors hover:bg-accent\">\n                  Products\n                </NavigationMenuTrigger>\n                <NavigationMenuContent className=\"md:-translate-x-1/2 md:left-1/2 md:translate-y-2\">\n                  <motion.div\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    className=\"grid max-h-[calc(100vh-6rem)] w-[calc(100vw-2rem)] grid-cols-1 gap-6 overflow-y-auto rounded-2xl border bg-background p-6 shadow-2xl md:w-[840px] md:grid-cols-[1fr_1.2fr] md:gap-8 md:p-8\"\n                    initial={{ opacity: 0, scale: 0.95, y: 10 }}\n                  >\n                    <div className=\"space-y-8\">\n                      <div>\n                        <h3 className=\"mb-6 font-bold text-[10px] text-muted-foreground uppercase tracking-[0.2em]\">\n                          Basic Asset\n                        </h3>\n                        <div className=\"grid gap-2\">\n                          {basicAssets.map((asset, _idx) => (\n                            <MenuCard key={asset.title} {...asset} />\n                          ))}\n                        </div>\n                      </div>\n                    </div>\n\n                    <div className=\"space-y-8\">\n                      <div>\n                        <h3 className=\"mb-6 font-bold text-[10px] text-muted-foreground uppercase tracking-[0.2em]\">\n                          Assets with a ready-made strategy\n                        </h3>\n                        <div className=\"grid gap-2\">\n                          {strategyAssets.map((asset, _idx) => (\n                            <MenuCard key={asset.title} {...asset} largeIcon />\n                          ))}\n                        </div>\n                      </div>\n\n                      <div>\n                        <h3 className=\"mb-6 border-t pt-8 font-bold text-[10px] text-muted-foreground uppercase tracking-[0.2em]\">\n                          Trade\n                        </h3>\n                        <div className=\"grid gap-2\">\n                          {tradeAssets.map((asset, _idx) => (\n                            <MenuCard key={asset.title} {...asset} ghostIcon />\n                          ))}\n                        </div>\n                      </div>\n                    </div>\n\n                    {/* Footer */}\n                    <div className=\"mt-4 flex flex-col items-start justify-between gap-4 border-border/50 border-t pt-6 md:col-span-2 md:flex-row md:items-center\">\n                      <p className=\"text-muted-foreground text-sm\">\n                        Interested?{\" \"}\n                        <a\n                          className=\"font-bold text-foreground transition-colors hover:text-primary\"\n                          href=\"#\"\n                        >\n                          Schedule a demo\n                        </a>\n                      </p>\n                      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2 font-medium text-muted-foreground text-xs\">\n                        <a\n                          className=\"transition-colors hover:text-foreground\"\n                          href=\"#\"\n                        >\n                          Documentation\n                        </a>\n                        <span className=\"hidden size-1 rounded-full bg-border md:block\" />\n                        <a\n                          className=\"transition-colors hover:text-foreground\"\n                          href=\"#\"\n                        >\n                          API Reference\n                        </a>\n                      </div>\n                    </div>\n                  </motion.div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n\n              <NavigationMenuItem>\n                <NavigationMenuTrigger className=\"h-9 bg-transparent px-4 font-medium text-sm transition-colors hover:bg-accent\">\n                  Services\n                </NavigationMenuTrigger>\n                <NavigationMenuContent className=\"md:translate-y-2\">\n                  <div className=\"w-[calc(100vw-2rem)] p-4 md:w-80\">\n                    <ul className=\"grid gap-3\">\n                      {serviceLinks.map((link, _idx) => (\n                        <ListItem key={link.title} {...link}>\n                          {link.description}\n                        </ListItem>\n                      ))}\n                    </ul>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n\n              <NavigationMenuItem>\n                <NavigationMenuTrigger className=\"h-9 bg-transparent px-4 font-medium text-sm transition-colors hover:bg-accent\">\n                  Resources\n                </NavigationMenuTrigger>\n                <NavigationMenuContent className=\"md:right-0 md:left-auto md:translate-y-2\">\n                  <div className=\"w-[calc(100vw-2rem)] p-4 md:w-80\">\n                    <ul className=\"grid gap-3\">\n                      {resourceLinks.map((link, _idx) => (\n                        <ListItem key={link.title} {...link}>\n                          {link.description}\n                        </ListItem>\n                      ))}\n                    </ul>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            </NavigationMenuList>\n          </NavigationMenu>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3\">\n          <div className=\"mr-2 hidden items-center gap-2 sm:flex\">\n            <Button\n              aria-label=\"Search\"\n              className=\"rounded-full\"\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <Search className=\"h-5 w-5\" />\n            </Button>\n            <Button\n              aria-label=\"GitHub\"\n              className=\"rounded-full\"\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <Github className=\"h-5 w-5\" />\n            </Button>\n          </div>\n          <Button\n            className=\"rounded-full px-6 font-semibold shadow-lg shadow-primary/20 transition-all hover:shadow-primary/30 hover:shadow-xl active:scale-95\"\n            type=\"button\"\n          >\n            Get in touch\n          </Button>\n\n          {/* Mobile menu toggle */}\n          <Button\n            aria-expanded={isMobileMenuOpen}\n            aria-label=\"Toggle menu\"\n            className=\"rounded-full md:hidden\"\n            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n            size=\"icon\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            <MenuToggleIcon\n              className=\"size-6\"\n              duration={300}\n              open={isMobileMenuOpen}\n            />\n          </Button>\n        </div>\n      </div>\n\n      {/* Mobile Menu */}\n      <AnimatePresence>\n        {isMobileMenuOpen && (\n          <motion.div\n            animate={{ opacity: 1, height: \"auto\" }}\n            className=\"overflow-hidden border-b bg-background md:hidden\"\n            exit={{ opacity: 0, height: 0 }}\n            initial={{ opacity: 0, height: 0 }}\n          >\n            <div className=\"container space-y-6 px-4 py-8\">\n              <nav className=\"flex flex-col gap-4\">\n                <a className=\"px-2 py-1 font-medium text-lg\" href=\"#\">\n                  Home\n                </a>\n                <a className=\"px-2 py-1 font-medium text-lg\" href=\"#\">\n                  Pricing\n                </a>\n                <div className=\"space-y-4\">\n                  <h4 className=\"px-2 font-bold text-muted-foreground text-xs uppercase tracking-widest\">\n                    Products\n                  </h4>\n                  <div className=\"grid gap-2\">\n                    {[...basicAssets, ...strategyAssets, ...tradeAssets].map(\n                      (asset, _i) => (\n                        <a\n                          className=\"flex items-center gap-3 rounded-xl p-3 transition-colors hover:bg-accent\"\n                          href=\"#\"\n                          key={asset.title}\n                        >\n                          <div\n                            className={cn(\n                              \"flex size-10 shrink-0 items-center justify-center rounded-lg shadow-sm\",\n                              asset.gradient\n                            )}\n                          >\n                            <asset.icon\n                              className={cn(\"size-5\", asset.iconColor)}\n                            />\n                          </div>\n                          <span className=\"font-medium\">{asset.title}</span>\n                        </a>\n                      )\n                    )}\n                  </div>\n                </div>\n              </nav>\n              <div className=\"flex flex-col gap-3 border-t pt-4\">\n                <Button className=\"h-12 w-full rounded-2xl\" variant=\"outline\">\n                  Search\n                </Button>\n                <Button className=\"h-12 w-full rounded-2xl\">\n                  Get in touch\n                </Button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </header>\n  );\n}\n\ntype Asset = {\n  title: string;\n  description: string;\n  icon: React.ElementType;\n  gradient?: string;\n  iconColor: string;\n  largeIcon?: boolean;\n  ghostIcon?: boolean;\n};\n\nfunction MenuCard({\n  title,\n  description,\n  icon: Icon,\n  gradient,\n  iconColor,\n  largeIcon = false,\n  ghostIcon = false,\n}: Asset) {\n  return (\n    <a\n      className={cn(\n        \"group flex items-center gap-4 rounded-2xl p-3 transition-all duration-300\",\n        \"hover:bg-accent/50 hover:shadow-sm\"\n      )}\n      href=\"#\"\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center justify-center rounded-xl shadow-sm transition-transform duration-300 group-hover:scale-105\",\n          largeIcon ? \"h-14 w-14\" : \"h-12 w-12\",\n          ghostIcon ? \"border border-border bg-accent/50\" : gradient\n        )}\n      >\n        <Icon className={cn(largeIcon ? \"h-7 w-7\" : \"h-6 w-6\", iconColor)} />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"font-bold text-foreground text-sm transition-colors group-hover:text-primary\">\n          {title}\n        </span>\n        <span className=\"text-muted-foreground text-xs leading-relaxed\">\n          {description}\n        </span>\n      </div>\n      <ChevronRight className=\"-translate-x-2 size-4 shrink-0 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100\" />\n    </a>\n  );\n}\n\ntype LinkItem = {\n  title: string;\n  href: string;\n  description: string;\n};\n\ninterface ListItemProps extends React.ComponentPropsWithoutRef<\"a\"> {\n  title: string;\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  className,\n  ...props\n}: ListItemProps) {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          href={href}\n          {...props}\n        >\n          <div className=\"font-medium text-sm leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-muted-foreground text-sm leading-snug\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  );\n}\n\nconst basicAssets: Asset[] = [\n  {\n    title: \"Stocks\",\n    description: \"Shares of public companies\",\n    icon: TrendingUp,\n    gradient: \"bg-blue-500/10 dark:bg-blue-500/20\",\n    iconColor: \"text-blue-600 dark:text-blue-400\",\n  },\n  {\n    title: \"Mutual funds\",\n    description: \"Ready-made portfolios at affordable prices\",\n    icon: Wallet,\n    gradient: \"bg-purple-500/10 dark:bg-purple-500/20\",\n    iconColor: \"text-purple-600 dark:text-purple-400\",\n  },\n  {\n    title: \"Currency\",\n    description: \"Currency trading at the exchange rate\",\n    icon: RefreshCw,\n    gradient: \"bg-orange-500/10 dark:bg-orange-500/20\",\n    iconColor: \"text-orange-600 dark:text-orange-400\",\n  },\n  {\n    title: \"Bonds\",\n    description: \"Lend your funds to companies\",\n    icon: Building2,\n    gradient: \"bg-rose-500/10 dark:bg-rose-500/20\",\n    iconColor: \"text-rose-600 dark:text-rose-400\",\n  },\n  {\n    title: \"Futures\",\n    description: \"Contracts based on the underlying asset\",\n    icon: Gem,\n    gradient: \"bg-indigo-500/10 dark:bg-indigo-500/20\",\n    iconColor: \"text-indigo-600 dark:text-indigo-400\",\n  },\n];\n\nconst strategyAssets: Asset[] = [\n  {\n    title: \"Structural products\",\n    description: \"Combinations of assets to protect against risks\",\n    icon: LayoutGrid,\n    gradient: \"bg-emerald-500/10 dark:bg-emerald-500/20\",\n    iconColor: \"text-emerald-600 dark:text-emerald-400\",\n  },\n];\n\nconst tradeAssets: Asset[] = [\n  {\n    title: \"Currency exchange\",\n    description: \"Calculate the benefits of the exchange rate\",\n    icon: RefreshCw,\n    iconColor: \"text-foreground/70\",\n  },\n  {\n    title: \"Trading\",\n    description: \"Trading for professionals\",\n    icon: LineChart,\n    iconColor: \"text-foreground/70\",\n  },\n  {\n    title: \"Dividend Calendar\",\n    description: \"Keep track of important dates\",\n    icon: CalendarDays,\n    iconColor: \"text-foreground/70\",\n  },\n];\n\nconst serviceLinks: LinkItem[] = [\n  {\n    title: \"Consulting\",\n    href: \"#\",\n    description: \"Expert financial advice tailored to your needs.\",\n  },\n  {\n    title: \"Asset Management\",\n    href: \"#\",\n    description: \"Professional management of your diverse portfolio.\",\n  },\n];\n\nconst resourceLinks: LinkItem[] = [\n  {\n    title: \"Blog\",\n    href: \"#\",\n    description: \"Latest news and insights from the market.\",\n  },\n  {\n    title: \"Help Center\",\n    href: \"#\",\n    description: \"Everything you need to know about our platform.\",\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": "400px",
    "isPinned": true,
    "createdAt": "2024-03-25"
  },
  "categories": [
    "header"
  ],
  "type": "registry:block"
}