altstack-data/docs/app/page.mdx

---
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>