feat: redesign website landing and changelog pages

website/package.json

@@ -20,7 +20,6 @@
     "fumadocs-mdx": "^15.4.5",
     "fumadocs-ui": "^16.15.14",
     "lucide-react": "^1.14.0",
-    "motion": "^13.4.4",
     "next": "16.2.4",
     "next-themes": "^0.4.6",
     "posthog-js": "^1.418.10",

website/src/app/changelog/page.tsx

@@ -1,10 +1,13 @@
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
 import { DocsBody } from 'fumadocs-ui/layouts/docs/page';
 import { getMDXComponents } from '@/components/mdx';
 import { changelog } from '@/lib/source';
 import Footer from '@/components/footer';
-import Nav from '@/components/nav';
+import { baseOptions } from '@/lib/layout.shared';
 
 const siteUrl = 'https://reqsh.dev';
 
@@ -35,27 +38,95 @@ export default async function ChangelogPage() {
   const Content = page.body;
 
   return (
-    <>
-      <Nav />
-      <main id="main-content" className="flex-1" tabIndex={-1}>
-        <div className="mx-auto max-w-2xl px-6 py-10">
-          <DocsBody>
-            <Content components={getMDXComponents()} />
-          </DocsBody>
-
-          <div className="mt-8">
+    <HomeLayout
+      {...baseOptions()}
+      id="main-content"
+      className="bg-fd-background text-fd-foreground"
+      tabIndex={-1}
+    >
+      <section className="border-b border-fd-border" aria-labelledby="changelog-heading">
+        <div className="mx-auto grid w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border lg:min-h-97.5 lg:grid-cols-[0.88fr_1.12fr]">
+          <div className="relative flex items-end px-5 py-16 sm:px-10 sm:py-20 lg:border-r lg:border-fd-border lg:px-14 lg:py-24 xl:px-20">
+            <span
+              className="absolute top-0 left-5 h-1 w-20 bg-brand sm:left-10 lg:left-14 xl:left-20"
+              aria-hidden="true"
+            />
+            <h1
+              id="changelog-heading"
+              className="text-[clamp(3.5rem,8vw,8rem)] leading-[0.9] font-semibold tracking-[-0.07em] text-balance"
+            >
+              Changelog
+            </h1>
+          </div>
+
+          <div className="flex flex-col justify-end border-t border-fd-border bg-fd-muted/45 px-5 py-12 sm:px-10 sm:py-16 lg:border-t-0 lg:px-14 lg:py-24 xl:px-20">
+            <p className="max-w-xl text-lg leading-8 text-fd-muted-foreground sm:text-xl sm:leading-9">
+              Every reqsh release, from new workflows to the smallest fixes. Newest updates appear
+              first.
+            </p>
             <a
               href="https://github.com/hars-21/reqsh/releases"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm font-medium text-foreground underline underline-offset-4 transition-colors hover:text-accent"
+              className="mt-7 inline-flex w-fit items-center gap-2 border-b border-fd-foreground/35 pb-1 text-sm font-medium transition-colors hover:border-brand hover:text-brand"
             >
-              View all releases on GitHub
+              View releases on GitHub
+              <ArrowUpRight size={15} aria-hidden="true" />
             </a>
           </div>
         </div>
-      </main>
+      </section>
+
+      <section className="border-b border-fd-border" aria-label="Release history">
+        <div className="mx-auto grid w-full max-w-(--fd-layout-width) sm:border-x sm:border-fd-border lg:grid-cols-[0.36fr_1fr]">
+          <aside className="border-b border-fd-border px-5 py-10 sm:px-10 lg:border-r lg:border-b-0 lg:px-14 lg:py-16 xl:px-20">
+            <div className="lg:sticky lg:top-24">
+              <p className="text-lg font-semibold tracking-[-0.02em]">Release archive</p>
+              <p className="mt-3 max-w-xs leading-7 text-fd-muted-foreground">
+                Features, fixes, and contributor notes, ordered from newest to oldest.
+              </p>
+
+              <div className="mt-8 border-y border-fd-border py-5">
+                <p className="font-mono text-xs text-fd-muted-foreground">Install the latest</p>
+                <Link
+                  href="/docs/install"
+                  className="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-brand transition-colors hover:text-brand-strong"
+                >
+                  Installation guide
+                  <ArrowRight size={15} aria-hidden="true" />
+                </Link>
+              </div>
+            </div>
+          </aside>
+
+          <article className="min-w-0 px-5 py-12 sm:px-10 sm:py-16 lg:px-14 lg:py-20 xl:px-20">
+            <DocsBody className="changelog-content">
+              <Content
+                components={getMDXComponents({
+                  h2: (props) => <h2 {...props} />,
+                })}
+              />
+            </DocsBody>
+
+            <div className="mt-16 border-t border-fd-border pt-8">
+              <p className="max-w-lg leading-7 text-fd-muted-foreground">
+                Looking for release assets, checksums, or older tags?
+              </p>
+              <a
+                href="https://github.com/hars-21/reqsh/releases"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-brand transition-colors hover:text-brand-strong"
+              >
+                Browse every GitHub release
+                <ArrowUpRight size={15} aria-hidden="true" />
+              </a>
+            </div>
+          </article>
+        </div>
+      </section>
+
       <Footer />
-    </>
+    </HomeLayout>
   );
 }

website/src/app/docs/layout.tsx

@@ -6,7 +6,17 @@ import { baseOptions } from '@/lib/layout.shared';
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <main id="main-content" className="min-h-screen" tabIndex={-1}>
-      <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
+      <DocsLayout
+        tree={source.getPageTree()}
+        {...baseOptions({ navOnlyLinks: true })}
+        sidebar={{
+          banner: (
+            <p className="px-2 pt-2 text-sm font-semibold tracking-[-0.01em] text-fd-foreground">
+              Documentation
+            </p>
+          ),
+        }}
+      >
         {children}
       </DocsLayout>
     </main>