chore(docs): enhance documentation home page UI

docs/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

docs/package.json

@@ -11,14 +11,22 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.33.0",
     "fumadocs-core": "16.4.11",
     "fumadocs-mdx": "14.2.6",
     "fumadocs-twoslash": "^3.1.12",
     "fumadocs-ui": "16.4.11",
     "lucide-react": "^0.544.0",
+    "motion": "^12.33.0",
     "next": "16.1.6",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "react-use-measure": "^2.1.7",
+    "tailwind-merge": "^3.4.0",
     "twoslash": "^0.3.6"
   },
   "devDependencies": {
@@ -29,7 +37,9 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
+    "shadcn": "^3.8.4",
     "tailwindcss": "^4.1.14",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
 }

docs/src/app/global.css

@@ -2,3 +2,126 @@
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
 @import "fumadocs-twoslash/twoslash.css";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

docs/src/app/layout.tsx

@@ -1,17 +1,18 @@
 import "@/app/global.css"
 import { RootProvider } from "fumadocs-ui/provider/next"
-import { Inter } from "next/font/google"
+import { Sora } from "next/font/google"
 
-const inter = Inter({
+const sora = Sora({
     subsets: ["latin"],
+    display: "swap",
 })
 
 export { metadata } from "@/lib/metadata"
 
 export default function Layout({ children }: LayoutProps<"/">) {
     return (
-        <html lang="en" className={inter.className} suppressHydrationWarning>
-            <body className="flex flex-col min-h-screen">
+        <html lang="en" className={`${sora.className} antialiased`} suppressHydrationWarning>
+            <body className="flex flex-col min-h-screen bg-black">
                 <RootProvider>{children}</RootProvider>
             </body>
         </html>

docs/src/app/page.tsx

@@ -0,0 +1,21 @@
+import { Features } from "@/components/features"
+import { Header } from "@/components/header"
+import { Hero } from "@/components/hero"
+import { PoweringSection } from "@/components/powering"
+import { Footer } from "@/components/footer"
+
+const IndexPage = () => {
+    return (
+        <>
+            <Header />
+            <main>
+                <Hero />
+                <PoweringSection />
+                <Features />
+            </main>
+            <Footer />
+        </>
+    )
+}
+
+export default IndexPage

docs/src/components/features.tsx

@@ -0,0 +1,62 @@
+import { Cpu, Lock, Sparkles, Zap } from "lucide-react"
+import Image from "next/image"
+
+export const Features = () => {
+ return (
+        <section id="features" className="py-24 md:py-32 relative">
+            <div className="mx-auto max-w-6xl space-y-16 px-6">
+                <div className="relative z-10 grid items-center gap-8 md:grid-cols-2 md:gap-16">
+                    <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-white">Built for DX Backends</h2>
+                    <p className="max-w-lg text-lg text-muted-foreground sm:ml-auto">
+                        Designed for Developer Experience. A simple, intuitive, and type-safe API for building robust backends without the boilerplate.
+                    </p>
+                </div>
+                <div className="relative rounded-3xl p-3 md:-mx-8 lg:col-span-3">
+                    <div className="aspect-[88/36] relative">
+                        <Image className="mx-auto" src="/create-api-v3.svg" alt="Endpoint Illustration" width={1200} height={620} />
+                    </div>
+                </div>
+                <div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
+                    <div className="space-y-3">
+                        <div className="flex items-center gap-2">
+                            <Zap className="size-4" />
+                            <h3 className="text-sm font-medium">Any JS Runtime</h3>
+                        </div>
+                        <p className="text-muted-foreground text-sm">
+                            Deploy to Node.js, Deno, Bun, or Cloudflare Workers. Write once, run everywhere without platform
+                            lock-in.
+                        </p>
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <Cpu className="size-4" />
+                            <h3 className="text-sm font-medium">E2E Type Safety</h3>
+                        </div>
+                        <p className="text-muted-foreground text-sm">
+                            Share types directly between your backend and frontend. Get compile-time errors before you deploy.
+                        </p>
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <Lock className="size-4" />
+                            <h3 className="text-sm font-medium">Zod Integration</h3>
+                        </div>
+                        <p className="text-muted-foreground text-sm">
+                            First-class support for Zod. Validate your API inputs and outputs effortlessly using powerful schemas.
+                        </p>
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <Sparkles className="size-4" />
+                            <h3 className="text-sm font-medium">Auto-gen Client</h3>
+                        </div>
+                        <p className="text-muted-foreground text-sm">
+                            Stop writing fetch wrappers. Automatically generate a fully typed, light-weight API client for your
+                            frontend.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

docs/src/components/footer.tsx

@@ -0,0 +1,80 @@
+import Link from "next/link"
+import { Github, Twitter, Linkedin } from "lucide-react"
+
+const links = [
+    {
+        title: "Product",
+        items: [
+            { title: "Features", href: "#features" },
+            { title: "Documentation", href: "/docs" },
+            { title: "Quick Start", href: "/docs" },
+        ],
+    },
+    {
+        title: "Community",
+        items: [
+            { title: "GitHub", href: "https://github.com/aura-stack-ts/router" },
+            { title: "Discussions", href: "https://github.com/aura-stack-ts/router/discussions" },
+            { title: "Issues", href: "https://github.com/aura-stack-ts/router/issues" },
+        ],
+    },
+]
+
+export function Footer() {
+    const currentYear = new Date().getFullYear()
+
+    return (
+        <footer className="border-t border-white/10 bg-black pt-16 pb-8 md:pt-24 md:pb-12">
+            <div className="mx-auto max-w-7xl px-6">
+                <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5">
+                    <div className="col-span-2 lg:col-span-2">
+                        <Link href="/" aria-label="home" className="text-xl font-bold tracking-tighter text-white">
+                            @aura-stack/router
+                        </Link>
+                        <p className="mt-4 max-w-sm text-sm text-muted-foreground">
+                            Build type-safe APIs with confidence. The next-generation router for modern TypeScript backends.
+                        </p>
+                    </div>
+                    {links.map((group, index) => (
+                        <div key={index}>
+                            <h3 className="text-sm font-semibold text-white tracking-wide">{group.title}</h3>
+                            <ul className="mt-4 space-y-3">
+                                {group.items.map((item, idx) => (
+                                    <li key={idx}>
+                                        <Link
+                                            href={item.href}
+                                            className="text-sm text-muted-foreground hover:text-white transition-colors duration-200"
+                                        >
+                                            {item.title}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+                <div className="mt-16 border-t border-white/10 pt-8 flex flex-col items-center justify-between gap-4 md:flex-row">
+                    <p className="text-sm text-muted-foreground">&copy; {currentYear} Aura Stack. All rights reserved.</p>
+                    <div className="flex gap-6">
+                        <Link
+                            href="https://github.com/aura-stack-ts/router"
+                            target="_blank"
+                            className="text-muted-foreground hover:text-white transition-colors"
+                        >
+                            <span className="sr-only">GitHub</span>
+                            <Github className="size-5" />
+                        </Link>
+                        <Link
+                            href="https://x.com/sshahaider"
+                            target="_blank"
+                            className="text-muted-foreground hover:text-white transition-colors"
+                        >
+                            <span className="sr-only">Twitter</span>
+                            <Twitter className="size-5" />
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    )
+}