neat landing page

packages/docs/app/routes/docs.tsx

@@ -1,5 +1,13 @@
+import { CodeIcon } from "@heroicons/react/outline"
+import {
+  DatabaseIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
 import type { LoaderFunction } from "remix"
 import { Link, Outlet, useLoaderData } from "remix"
+import { ExternalLink } from "~/components/external-link"
+import { HeaderLayout } from "~/components/header-layout"
 import { SideNav } from "~/components/side-nav"
 import { SidebarLayout } from "~/components/sidebar-layout"
 import type { ContentIndexEntry } from "~/create-index.server"
@@ -16,21 +24,52 @@ export const loader: LoaderFunction = async () => {
 export default function Docs() {
   const data: LoaderData = useLoaderData()
   return (
-    <SidebarLayout
-      sidebar={
-        <SideNav heading="Guides">
-          {data.map(({ title, route }) => (
-            <Link className={linkClass} key={route} to={route}>
-              {title}
-            </Link>
-          ))}
-        </SideNav>
-      }
+    <HeaderLayout
+      header={<HeaderNav />}
       body={
-        <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
-          <Outlet />
-        </section>
+        <SidebarLayout
+          sidebar={
+            <SideNav heading="Guides">
+              {data.map(({ title, route }) => (
+                <Link className={linkClass} key={route} to={route}>
+                  {title}
+                </Link>
+              ))}
+            </SideNav>
+          }
+          body={
+            <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
+              <Outlet />
+            </section>
+          }
+        />
       }
     />
   )
 }
+
+function HeaderNav() {
+  return (
+    <nav className="flex justify-between items-center">
+      <Link to="/">
+        <h1 className="text-3xl font-light">
+          reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
+        </h1>
+      </Link>
+      <div className="flex gap-4">
+        <Link className={linkClass} to="/docs/guides/getting-started">
+          <DocumentTextIcon className="inline align-sub w-5" /> Guides
+        </Link>
+        <Link className={linkClass} to="/docs/api">
+          <DatabaseIcon className="inline align-sub w-5" /> API Reference
+        </Link>
+        <ExternalLink
+          className={linkClass}
+          href="https://github.com/itsMapleLeaf/reacord"
+        >
+          <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
+        </ExternalLink>
+      </div>
+    </nav>
+  )
+}

packages/docs/app/routes/index.tsx

@@ -1,10 +1,26 @@
-export default function Index() {
+import { Link } from "remix"
+import LandingExample from "~/landing-example.mdx"
+
+export default function Landing() {
   return (
-    <main>
-      <h1>Reacord</h1>
-      <pre>code snippet here</pre>
-      <p>Create interactive Discord messages using React and JSX.</p>
-      <button>Get Started</button>
+    <main className="flex min-w-0 min-h-screen p-4 text-center">
+      <div className="w-full max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
+        <h1 className="text-6xl font-light">reacord</h1>
+        <div className="w-full overflow-x-auto">
+          <section className="mx-auto text-sm shadow w-fit sm:text-base">
+            <LandingExample />
+          </section>
+        </div>
+        <p className="px-8 text-2xl font-light">
+          Create interactive Discord messages using React and JSX.
+        </p>
+        <Link
+          to="/docs/guides/getting-started"
+          className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md "
+        >
+          Get Started
+        </Link>
+      </div>
     </main>
   )
 }