add main nav on landing + clean up

packages/docs/app/components/header-layout.tsx

@@ -1,25 +0,0 @@
-import clsx from "clsx"
-import { useScrolled } from "~/hooks/dom/use-scrolled"
-
-export function HeaderLayout({
-  header,
-  body,
-}: {
-  header: React.ReactNode
-  body: React.ReactNode
-}) {
-  const isScrolled = useScrolled()
-  return (
-    <div className="isolate">
-      <header
-        className={clsx(
-          isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10 h-16 flex",
-        )}
-      >
-        <div className="m-auto w-full max-w-screen-lg px-6">{header}</div>
-      </header>
-      <div className="m-auto max-w-screen-lg px-6 mt-8">{body}</div>
-    </div>
-  )
-}

packages/docs/app/components/main-navigation.tsx

@@ -4,9 +4,9 @@ import { Link } from "remix"
 import { ExternalLink } from "~/components/external-link"
 import { linkClass } from "~/styles"
 
-export function HeaderNav() {
+export function MainNavigation() {
   return (
-    <nav className="flex justify-between items-center">
+    <nav className="flex justify-between items-center h-16">
       <Link to="/">
         <h1 className="text-3xl font-light">reacord</h1>
       </Link>

packages/docs/app/components/side-nav.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react"
-
-export function SideNav({
-  heading,
-  children,
-}: {
-  heading: ReactNode
-  children: ReactNode
-}) {
-  return (
-    <nav>
-      <h2 className="text-2xl">{heading}</h2>
-      <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
-    </nav>
-  )
-}

packages/docs/app/components/sidebar-layout.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react"
-
-export function SidebarLayout({
-  sidebar,
-  body,
-}: {
-  sidebar: ReactNode
-  body: ReactNode
-}) {
-  return (
-    <div className="flex items-start gap-6">
-      <div className="w-64 sticky top-24">{sidebar}</div>
-      <div className="flex-1 min-w-0">{body}</div>
-    </div>
-  )
-}