finished landing

packages/website/src/components/main-navigation.astro

@@ -0,0 +1,69 @@
+---
+import { MenuIcon } from "@heroicons/react/outline"
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
+import AppLogo from "./app-logo.astro"
+import ExternalLink from "./external-link.astro"
+import MenuItem from "./menu-item.astro"
+import Menu from "./menu.astro"
+
+const links = [
+  {
+    href: "/guides/getting-started",
+    label: "Guides",
+    icon: DocumentTextIcon,
+    component: "a",
+  },
+  {
+    href: "/api/",
+    label: "API Reference",
+    icon: CodeIcon,
+    component: "a",
+  },
+  {
+    href: "https://github.com/itsMapleLeaf/reacord",
+    label: "GitHub",
+    icon: ExternalLinkIcon,
+    component: ExternalLink,
+  },
+]
+---
+
+<nav class="flex justify-between items-center h-16">
+  <a href="/">
+    <AppLogo class="w-32" />
+    <span class="sr-only">Home</span>
+  </a>
+  <div class="hidden md:flex gap-4">
+    {
+      links.map((link) => (
+        <link.component
+          href={link.href}
+          class="link inline-flex gap-1 items-center"
+        >
+          <link.icon className="inline-icon" />
+          {link.label}
+        </link.component>
+      ))
+    }
+  </div>
+
+  <Menu>
+    <Fragment slot="button">
+      <MenuIcon className="w-6" />
+      <span class="sr-only">Menu</span>
+    </Fragment>
+    {
+      links.map((link) => (
+        <link.component href={link.href}>
+          <MenuItem icon={link.icon} label={link.label} />
+        </link.component>
+      ))
+    }
+    <hr class="border-black/25" />
+    <!-- TODO: guide links -->
+  </Menu>
+</nav>