Navbar Flow

import NavbarFlow, {
  FeatureItem,
  HoverLink,
} from "@/components/ui/navbar-flow";

<NavbarFlow
  emblem={<ScrollXHeading className="w-auto h-4 sm:h-5 whitespace-nowrap" />}
  links={[
    {
      text: "Components",
      submenu: (
        <div className="flex flex-col space-y-2">
          <HoverLink url="/components/button">Button</HoverLink>
          <HoverLink url="/components/hero">Hero Section</HoverLink>
          <HoverLink url="/components/navbar">Navbar</HoverLink>
          <HoverLink url="/components/footer">Footer</HoverLink>
          <HoverLink url="/components/cards">Cards</HoverLink>
          <HoverLink url="/components/forms">Forms</HoverLink>
        </div>
      ),
    },
    {
      text: "Templates",
      submenu: (
        <div className="grid grid-cols-1 gap-2 w-48">
          <FeatureItem
            heading="Portfolio Template"
            url="/templates/portfolio"
            info="Clean, personal showcase for designers & developers."
          />
          <FeatureItem
            heading="Business Template"
            url="/templates/business"
            info="Professional website layout for startups & businesses."
          />
          <FeatureItem
            heading="Blog Template"
            url="/templates/blog"
            info="Minimal blog with modern reading experience."
          />
          <FeatureItem
            heading="Landing Page"
            url="/templates/landing"
            info="High-converting landing page for product launches."
          />
        </div>
      ),
    },
    {
      text: "Showcase",
      submenu: (
        <div className="flex flex-col space-y-2">
          <HoverLink url="/showcase/astroship">Astroship</HoverLink>
          <HoverLink url="/showcase/papermod">PaperMod</HoverLink>
          <HoverLink url="/showcase/satori">Satori</HoverLink>
          <HoverLink url="/showcase/scrollx">ScrollX</HoverLink>
          <HoverLink url="/showcase/speedyfolio">Speedyfolio</HoverLink>
        </div>
      ),
    },
    { text: "About", url: "/about" },
  ]}
  rightComponent={<ThemeSwitchIcon />}
/>