Initialize public data and docs repository

docs/app/page.mdx

@@ -0,0 +1,127 @@
+---
+title: AltStack Docs
+searchable: false
+---
+
+import { Rocket, Box, Flame, Brain, ArrowRight, ScrollText, Globe } from 'lucide-react'
+
+<div className="py-20 text-center">
+  <h1 className="text-4xl md:text-7xl font-black tracking-tighter leading-tight mb-6 py-4 bg-gradient-to-r from-[var(--hero-from)] to-[var(--hero-to)] bg-clip-text text-transparent">
+    The AltStack Docs
+  </h1>
+  <div className="text-xl md:text-2xl text-[var(--altstack-text-dim)] max-w-2xl mx-auto font-medium">
+    The World's First Sovereign Infrastructure Engine. Self-hosting guides that actually work.
+  </div>
+</div>
+
+<div className="premium-grid">
+  <a href="/quick-start/what-is-self-hosting" className="premium-card group">
+    <div className="premium-card-title">
+      <div className="p-2 rounded-lg bg-red-500/10 text-red-500 group-hover:bg-red-500/20 transition-colors">
+        <Rocket size={20} />
+      </div>
+      <span>Quick Start</span>
+    </div>
+    <div className="premium-card-description">
+      New to self-hosting? Start here. 5 minutes to your first deploy.
+    </div>
+    <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity text-red-500">
+      <ArrowRight size={18} />
+    </div>
+  </a>
+
+  <a href="/deploy" className="premium-card group">
+    <div className="premium-card-title">
+      <div className="p-2 rounded-lg bg-orange-500/10 text-orange-500 group-hover:bg-orange-500/20 transition-colors">
+        <Box size={20} />
+      </div>
+      <span>Deploy Guides</span>
+    </div>
+    <div className="premium-card-description">
+      65+ tools with Docker Compose configs. Find yours, ship it, own it.
+    </div>
+    <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity text-orange-500">
+      <ArrowRight size={18} />
+    </div>
+  </a>
+
+  <a href="/stacks" className="premium-card group">
+    <div className="premium-card-title">
+      <div className="p-2 rounded-lg bg-yellow-500/10 text-yellow-500 group-hover:bg-yellow-500/20 transition-colors">
+        <Flame size={20} />
+      </div>
+      <span>Curated Stacks</span>
+    </div>
+    <div className="premium-card-description">
+      Pre-built tool bundles for bootstrappers, designers, DevOps, privacy, and AI.
+    </div>
+    <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity text-yellow-500">
+      <ArrowRight size={18} />
+    </div>
+  </a>
+
+  <a href="/concepts" className="premium-card group">
+    <div className="premium-card-title">
+      <div className="p-2 rounded-lg bg-blue-500/10 text-blue-500 group-hover:bg-blue-500/20 transition-colors">
+        <Brain size={20} />
+      </div>
+      <span>Concepts</span>
+    </div>
+    <div className="premium-card-description">
+      Docker, reverse proxies, SSL, backups — explained like you're a human.
+    </div>
+    <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity text-blue-500">
+      <ArrowRight size={18} />
+    </div>
+  </a>
+
+  <a href="/why" className="premium-card group">
+    <div className="premium-card-title">
+      <div className="p-2 rounded-lg bg-purple-500/10 text-purple-500 group-hover:bg-purple-500/20 transition-colors">
+        <ScrollText size={20} />
+      </div>
+      <span>Why These Docs Exist</span>
+    </div>
+    <div className="premium-card-description">
+      Our philosophy, editorial rules, and what makes these docs different.
+    </div>
+    <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity text-purple-500">
+      <ArrowRight size={18} />
+    </div>
+  </a>
+
+  <a href="https://thealtstack.com" className="premium-card group">
+    <div className="premium-card-title">
+      <div className="p-2 rounded-lg bg-emerald-500/10 text-emerald-500 group-hover:bg-emerald-500/20 transition-colors">
+        <Globe size={20} />
+      </div>
+      <span>AltStack Directory</span>
+    </div>
+    <div className="premium-card-description">
+      Browse 400+ open source tools, compare alternatives, and build your stack.
+    </div>
+    <div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity text-emerald-500">
+      <ArrowRight size={18} />
+    </div>
+  </a>
+</div>
+
+<div className="mt-32 prose prose-invert max-w-none">
+  <div className="grid md:grid-cols-2 gap-12 border-t border-[var(--altstack-border)] pt-16">
+    <div>
+      <h2 className="text-3xl font-bold mb-4">Why These Docs Exist</h2>
+      <div className="text-lg text-[var(--altstack-text-dim)]">
+        Every tool in the <a href="https://thealtstack.com" className="text-red-500 font-semibold no-underline hover:underline">AltStack directory</a> can be self-hosted. These docs show you <em>how</em> — with real configs, honest trade-offs, and none of the hand-waving.
+      </div>
+    </div>
+    <div>
+      <h2 className="text-3xl font-bold mb-4">The Rules</h2>
+      <ul className="space-y-4 text-[var(--altstack-text-dim)] list-none p-0">
+        <li className="flex gap-3"><span className="text-red-500 font-bold">1.</span> Every guide ends with a working deployment</li>
+        <li className="flex gap-3"><span className="text-red-500 font-bold">2.</span> Every config is tested and copy-pasteable</li>
+        <li className="flex gap-3"><span className="text-red-500 font-bold">3.</span> Every tool gets an honest verdict</li>
+        <li className="flex gap-3"><span className="text-red-500 font-bold">4.</span> We don't waste your time with "Introduction" filler</li>
+      </ul>
+    </div>
+  </div>
+</div>