Navigation menu with grid layout and learn more button.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu"
import { h } from "vue"

const userIcon = () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
      h("circle", { cx: "12", cy: "7", r: "4" }),
    ]
  )

const buildingIcon = () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("path", { d: "M12 10h.01" }),
      h("path", { d: "M12 14h.01" }),
      h("path", { d: "M12 6h.01" }),
      h("path", { d: "M16 10h.01" }),
      h("path", { d: "M16 14h.01" }),
      h("path", { d: "M16 6h.01" }),
      h("path", { d: "M8 10h.01" }),
      h("path", { d: "M8 14h.01" }),
      h("path", { d: "M8 6h.01" }),
      h("path", { d: "M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }),
      h("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2" }),
    ]
  )

const circleDollarSignIcon = () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("circle", { cx: "12", cy: "12", r: "10" }),
      h("path", { d: "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" }),
      h("path", { d: "M12 18V6" }),
    ]
  )

const layoutGridIcon = () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
      h("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
      h("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
      h("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" }),
    ]
  )

const sparklesIcon = () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("path", {
        d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
      }),
      h("path", { d: "M20 2v4" }),
      h("path", { d: "M22 4h-4" }),
      h("circle", { cx: "4", cy: "20", r: "2" }),
    ]
  )

const radioIcon = () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
    },
    [
      h("path", { d: "M16.247 7.761a6 6 0 0 1 0 8.478" }),
      h("path", { d: "M19.075 4.933a10 10 0 0 1 0 14.134" }),
      h("path", { d: "M4.925 19.067a10 10 0 0 1 0-14.134" }),
      h("path", { d: "M7.753 16.239a6 6 0 0 1 0-8.478" }),
      h("circle", { cx: "12", cy: "12", r: "2" }),
    ]
  )

const industries = [
  { title: "Individuals", description: "Keep your finances organized.", href: "#", icon: userIcon },
  { title: "LLCs", description: "Benefit from tax write-offs.", href: "#", icon: buildingIcon },
  { title: "Freelancers", description: "For independent workers.", href: "#", icon: circleDollarSignIcon },
  { title: "Investors", description: "Make and grow your money.", href: "#", icon: layoutGridIcon },
  { title: "Small businesses", description: "We take care of your taxes.", href: "#", icon: sparklesIcon },
  { title: "Crypto", description: "For tech enthusiasts.", href: "#", icon: circleDollarSignIcon },
  { title: "Big companies", description: "Run your finances easily.", href: "#", icon: buildingIcon },
  { title: "Investments", description: "Launch your ideas worldwide.", href: "#", icon: radioIcon },
]
</script>

<template>
  <div class="flex items-center justify-center">
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Industries</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div class="w-[500px]">
              <ul class="grid grid-cols-2 gap-1">
                <li v-for="item in industries" :key="item.title">
                  <NavigationMenuLink as-child class="flex items-start gap-2 p-3">
                    <a href="#">
                      <component :is="item.icon" />
                      <div class="flex flex-col gap-0.5">
                        <div class="text-sm leading-none font-medium">{{ item.title }}</div>
                        <p class="text-muted-foreground text-xs leading-snug">{{ item.description }}</p>
                      </div>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
              <div class="mt-2 px-1 pb-1">
                <Button class="w-full" as-child>
                  <a href="#">Learn more</a>
                </Button>
              </div>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </div>
</template>