diff --git a/.eslintrc.json b/.eslintrc.json
index 4cd83ec..8f4ed9d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["next/core-web-vitals"],
+  "extends": ["next/core-web-vitals", "next/typescript"],
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module"
@@ -10,5 +10,15 @@
     "node": true,
     "jest": true
   },
-  "rules": {}
+  "rules": {},
+  "ignorePatterns": [
+    "node_modules/",
+    ".next/",
+    "out/",
+    "build/",
+    "dist/",
+    "coverage/",
+    "*.config.js",
+    "*.config.mjs"
+  ]
 }
diff --git a/src/app/landing.css b/src/app/landing.css
new file mode 100644
index 0000000..79fe82c
--- /dev/null
+++ b/src/app/landing.css
@@ -0,0 +1,343 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  --purple: #8B5CF6;
+  --amber: #F59E0B;
+  --bg: #0F172A;
+  --surface: #1E293B;
+  --border: #334155;
+  --text: #F1F5F9;
+  --text-secondary: #CBD5E1;
+  --text-tertiary: #94A3B8;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+}
+
+.landing-container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+/* Header */
+.landing-header {
+  padding: 24px 0;
+  border-bottom: 1px solid var(--border);
+  background: rgba(15, 23, 42, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.landing-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.landing-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.logo-mark {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--purple) 0%, var(--amber) 100%);
+  border-radius: 6px;
+}
+
+.nav-links {
+  display: flex;
+  gap: 32px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.nav-links a:hover {
+  color: var(--text);
+}
+
+.btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+}
+
+.btn-primary {
+  background: var(--purple);
+  color: white;
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+}
+
+/* Hero */
+.hero {
+  padding: 100px 0;
+  position: relative;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+
+.hero-content h1 {
+  font-size: 48px;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 20px;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--purple) 0%, var(--amber) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-content p {
+  font-size: 18px;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.stats {
+  display: flex;
+  gap: 32px;
+  margin-top: 40px;
+}
+
+.stat {
+  border-left: 2px solid var(--purple);
+  padding-left: 16px;
+}
+
+.stat-number {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--purple);
+  display: block;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+/* Terminal */
+.terminal {
+  background: #0A0F1E;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+}
+
+.terminal-header {
+  background: #1A1F2E;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.terminal-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.dot-red { background: #EF4444; }
+.dot-yellow { background: #F59E0B; }
+.dot-green { background: #10B981; }
+
+.terminal-body {
+  padding: 24px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.terminal-line {
+  margin-bottom: 8px;
+}
+
+.prompt {
+  color: #10B981;
+}
+
+.command {
+  color: #F59E0B;
+}
+
+.output {
+  color: #94A3B8;
+}
+
+.success {
+  color: #10B981;
+}
+
+/* Features */
+.features {
+  padding: 80px 0;
+}
+
+.features h2 {
+  text-align: center;
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.features-subtitle {
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 18px;
+  margin-bottom: 60px;
+}
+
+.tech-stack {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin-top: 60px;
+}
+
+.tech-item {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+}
+
+.tech-item h4 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.tech-item p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Comparison */
+.comparison {
+  padding: 80px 0;
+  background: var(--surface);
+}
+
+.comparison h2 {
+  text-align: center;
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 60px;
+}
+
+.comparison-table {
+  max-width: 900px;
+  margin: 0 auto;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.comparison-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  border-bottom: 1px solid var(--border);
+}
+
+.comparison-row:last-child {
+  border-bottom: none;
+}
+
+.comparison-header {
+  background: #1A1F2E;
+  font-weight: 600;
+}
+
+.comparison-cell {
+  padding: 16px 20px;
+  border-right: 1px solid var(--border);
+}
+
+.comparison-cell:last-child {
+  border-right: none;
+}
+
+.check {
+  color: #10B981;
+  font-weight: 600;
+}
+
+.cross {
+  color: #EF4444;
+}
+
+/* Footer */
+.landing-footer {
+  padding: 60px 0;
+  text-align: center;
+  border-top: 1px solid var(--border);
+}
+
+.landing-footer p {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .tech-stack {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .comparison-row {
+    grid-template-columns: 1.5fr 1fr 1fr 1fr;
+    font-size: 14px;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d54a1f2..e41698f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,9 @@
 import './globals.css';
 import type { Metadata } from 'next/types';
-import { Header } from '@/components/Header';
-import { SearchPalette } from '@/components/SearchPalette';
 
 export const metadata: Metadata = {
-  title: 'EmberDocs',
-  description: 'Modern documentation framework with Git-native versioning and instant search.'
+  title: 'EmberDocs - Build docs that developers actually use',
+  description: 'Zero-config documentation framework for indie developers. Beautiful, fast, and maintainable.'
 };
 
 export default function RootLayout({
@@ -23,20 +21,8 @@ export default function RootLayout({
           rel="stylesheet"
         />
       </head>
-      <body className="flex flex-col min-h-screen bg-[var(--bg)] text-[var(--text)]">
-        <Header />
-
-        <main className="flex-1">
-          {children}
-        </main>
-
-        <footer className="border-t border-[var(--border)] py-15 text-center">
-          <div className="max-w-[1280px] mx-auto px-8">
-            <p className="text-[var(--text-secondary)]">EmberDocs - Free self-hosted documentation framework</p>
-          </div>
-        </footer>
-
-        <SearchPalette />
+      <body>
+        {children}
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e1b151b..7cc41bd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,160 +1,164 @@
-import Link from 'next/link';
-import { EMBERDOCS_BASE_ROUTE } from '@/lib/config';
-
-const stats = [
-  { number: '<50ms', label: 'Search latency' },
-  { number: '30s', label: 'Setup time' },
-  { number: '100%', label: 'Free OSS' },
-];
-
-const techStack = [
-  { name: 'Next.js 14', description: 'App Router, Edge Functions' },
-  { name: 'TypeScript', description: 'Full type safety' },
-  { name: 'FlexSearch', description: 'Client-side, <50ms' },
-  { name: 'Tailwind CSS', description: 'Utility-first styling' },
-];
+import './landing.css';
 
 export default function HomePage() {
   return (
-    <main className="min-h-screen">
-      {/* Hero Section */}
-      <section className="py-[100px] max-w-[1280px] mx-auto px-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-[60px] items-center">
-          {/* Hero Content */}
-          <div>
-            <h1 className="text-[48px] font-bold tracking-[-0.02em] mb-5" style={{ lineHeight: '1.2' }}>
-              Build docs that<br/>
-              <span className="bg-gradient-to-br from-[var(--purple)] to-[var(--amber)] bg-clip-text text-transparent">
-                developers actually use
-              </span>
-            </h1>
-            <p className="text-lg text-[var(--text-secondary)] mb-8" style={{ lineHeight: '1.6' }}>
-              Zero-config documentation framework for indie developers. Beautiful, fast, and maintainable. Deploy in 30 seconds, customize when you need to.
-            </p>
-            <Link
-              href={`${EMBERDOCS_BASE_ROUTE}/getting-started/introduction` as any}
-              className="inline-block px-6 py-3 bg-[var(--purple)] text-white rounded-[8px] font-semibold hover:translate-y-[-1px] hover:shadow-[0_4px_12px_rgba(139,92,246,0.4)] transition-all duration-200 text-base"
-            >
-              npx emberdocs init →
-            </Link>
-            {/* Stats */}
-            <div className="flex gap-8 mt-10">
-              {stats.map((stat, idx) => (
-                <div key={idx} className="border-l-2 border-[var(--purple)] pl-4">
-                  <div className="text-[32px] font-bold text-[var(--purple)] block">
-                    {stat.number}
+    <>
+      <header className="landing-header">
+        <div className="landing-container">
+          <nav className="landing-nav">
+            <a href="#" className="landing-logo">
+              <div className="logo-mark"></div>
+              EmberDocs
+            </a>
+            <ul className="nav-links">
+              <li><a href="#features">Features</a></li>
+              <li><a href="#docs">Docs</a></li>
+              <li><a href="#github">GitHub</a></li>
+            </ul>
+            <a href="#" className="btn btn-primary">Get Started →</a>
+          </nav>
+        </div>
+      </header>
+
+      <main>
+        <section className="hero">
+          <div className="landing-container">
+            <div className="hero-grid">
+              <div className="hero-content">
+                <h1>
+                  Build docs that<br/>
+                  <span className="gradient-text">developers actually use</span>
+                </h1>
+                <p>
+                  Zero-config documentation framework for indie developers.
+                  Beautiful, fast, and maintainable. Deploy in 30 seconds,
+                  customize when you need to.
+                </p>
+                <a href="#" className="btn btn-primary">npx emberdocs init →</a>
+
+                <div className="stats">
+                  <div className="stat">
+                    <span className="stat-number">&lt;50ms</span>
+                    <span className="stat-label">Search latency</span>
                   </div>
-                  <div className="text-sm text-[var(--text-secondary)]">
-                    {stat.label}
+                  <div className="stat">
+                    <span className="stat-number">30s</span>
+                    <span className="stat-label">Setup time</span>
+                  </div>
+                  <div className="stat">
+                    <span className="stat-number">100%</span>
+                    <span className="stat-label">Free OSS</span>
                   </div>
                 </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Terminal Demo */}
-          <div className="bg-[var(--terminal-bg)] border border-[var(--border)] rounded-[12px] overflow-hidden shadow-[0_20px_25px_-5px_rgba(0,0,0,0.3)]">
-            <div className="bg-[var(--terminal-header)] px-4 py-3 border-b border-[var(--border)] flex items-center gap-2">
-              <div className="w-3 h-3 rounded-full bg-[var(--error)]" />
-              <div className="w-3 h-3 rounded-full bg-[var(--amber)]" />
-              <div className="w-3 h-3 rounded-full bg-[var(--success)]" />
-            </div>
-            <div className="p-6 font-code text-sm" style={{ lineHeight: '1.8' }}>
-              <div className="mb-2">
-                <span className="text-[var(--success)]">$</span>{' '}
-                <span className="text-[var(--amber)]">npx emberdocs init</span> my-docs
               </div>
-              <div className="text-[var(--text-tertiary)] mb-2">Creating EmberDocs project...</div>
-              <div className="text-[var(--success)] mb-2">✓ Created docs/ directory</div>
-              <div className="text-[var(--success)] mb-2">✓ Generated example pages</div>
-              <div className="text-[var(--success)] mb-2">✓ Installed dependencies</div>
-              <div className="text-[var(--success)] mb-2">✓ Ready to go!</div>
-              <div className="mb-2"><br/></div>
-              <div className="mb-2">
-                <span className="text-[var(--success)]">$</span>{' '}
-                <span className="text-[var(--amber)]">cd</span> my-docs &&{' '}
-                <span className="text-[var(--amber)]">npm run</span> dev
+
+              <div className="terminal">
+                <div className="terminal-header">
+                  <div className="terminal-dot dot-red"></div>
+                  <div className="terminal-dot dot-yellow"></div>
+                  <div className="terminal-dot dot-green"></div>
+                </div>
+                <div className="terminal-body">
+                  <div className="terminal-line">
+                    <span className="prompt">$</span>{' '}
+                    <span className="command">npx emberdocs init</span> my-docs
+                  </div>
+                  <div className="terminal-line output">Creating EmberDocs project...</div>
+                  <div className="terminal-line output">✓ Created docs/ directory</div>
+                  <div className="terminal-line output">✓ Generated example pages</div>
+                  <div className="terminal-line output">✓ Installed dependencies</div>
+                  <div className="terminal-line success">✓ Ready to go!</div>
+                  <div className="terminal-line"><br/></div>
+                  <div className="terminal-line">
+                    <span className="prompt">$</span>{' '}
+                    <span className="command">cd</span> my-docs &&{' '}
+                    <span className="command">npm run</span> dev
+                  </div>
+                  <div className="terminal-line output">Starting development server...</div>
+                  <div className="terminal-line success">✓ Server running at http://localhost:3000</div>
+                </div>
               </div>
-              <div className="text-[var(--text-tertiary)] mb-2">Starting development server...</div>
-              <div className="text-[var(--success)]">✓ Server running at http://localhost:3000</div>
             </div>
           </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section className="py-20 max-w-[1280px] mx-auto px-8">
-        <h2 className="text-center text-[36px] font-bold mb-4">Built for developers</h2>
-        <p className="text-center text-lg text-[var(--text-secondary)] mb-15">
-          Modern stack, zero complexity
-        </p>
-
-        {/* Tech Stack */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-15">
-          {techStack.map((tech, idx) => (
-            <div
-              key={idx}
-              className="bg-[var(--surface)] border border-[var(--border)] rounded-[8px] p-5 text-center"
-            >
-              <h4 className="text-base font-semibold mb-2">{tech.name}</h4>
-              <p className="text-sm text-[var(--text-secondary)]">{tech.description}</p>
-            </div>
-          ))}
-        </div>
-      </section>
+        </section>
 
-      {/* Comparison Section */}
-      <section className="py-20 bg-[var(--surface)]">
-        <div className="max-w-[1280px] mx-auto px-8">
-          <h2 className="text-center text-[36px] font-bold mb-15">Why EmberDocs?</h2>
+        <section className="features">
+          <div className="landing-container">
+            <h2>Built for developers</h2>
+            <p className="features-subtitle">Modern stack, zero complexity</p>
 
-          <div className="max-w-[900px] mx-auto bg-[var(--bg)] border border-[var(--border)] rounded-[12px] overflow-hidden">
-            {/* Table Header */}
-            <div className="grid grid-cols-[2fr_1fr_1fr_1fr] bg-[#1A1F2E] border-b border-[var(--border)]">
-              <div className="px-5 py-4 text-base font-semibold">Feature</div>
-              <div className="px-5 py-4 text-base font-semibold border-l border-[var(--border)]">EmberDocs</div>
-              <div className="px-5 py-4 text-base font-semibold border-l border-[var(--border)]">Docusaurus</div>
-              <div className="px-5 py-4 text-base font-semibold border-l border-[var(--border)]">GitBook</div>
-            </div>
-
-            {/* Table Rows */}
-            <div className="grid grid-cols-[2fr_1fr_1fr_1fr] border-b border-[var(--border)]">
-              <div className="px-5 py-4">Setup time</div>
-              <div className="px-5 py-4 border-l border-[var(--border)]">30 seconds</div>
-              <div className="px-5 py-4 border-l border-[var(--border)]">15 minutes</div>
-              <div className="px-5 py-4 border-l border-[var(--border)]">5 minutes</div>
-            </div>
-
-            <div className="grid grid-cols-[2fr_1fr_1fr_1fr] border-b border-[var(--border)]">
-              <div className="px-5 py-4">Zero config</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--success)] font-semibold">✓</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--error)]">✗</div>
-              <div className="px-5 py-4 border-l border-[var(--border)]">Partial</div>
-            </div>
-
-            <div className="grid grid-cols-[2fr_1fr_1fr_1fr] border-b border-[var(--border)]">
-              <div className="px-5 py-4">Self-hosted (free)</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--success)] font-semibold">✓</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--success)] font-semibold">✓</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--error)]">✗</div>
+            <div className="tech-stack">
+              <div className="tech-item">
+                <h4>Next.js 14</h4>
+                <p>App Router, Edge Functions</p>
+              </div>
+              <div className="tech-item">
+                <h4>TypeScript</h4>
+                <p>Full type safety</p>
+              </div>
+              <div className="tech-item">
+                <h4>FlexSearch</h4>
+                <p>Client-side, &lt;50ms</p>
+              </div>
+              <div className="tech-item">
+                <h4>Tailwind CSS</h4>
+                <p>Utility-first styling</p>
+              </div>
             </div>
+          </div>
+        </section>
 
-            <div className="grid grid-cols-[2fr_1fr_1fr_1fr] border-b border-[var(--border)]">
-              <div className="px-5 py-4">Privacy-first</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--success)] font-semibold">✓</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--error)]">✗</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--error)]">✗</div>
-            </div>
+        <section className="comparison">
+          <div className="landing-container">
+            <h2>Why EmberDocs?</h2>
 
-            <div className="grid grid-cols-[2fr_1fr_1fr_1fr]">
-              <div className="px-5 py-4">Drop-in integration</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--success)] font-semibold">✓</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--error)]">✗</div>
-              <div className="px-5 py-4 border-l border-[var(--border)] text-[var(--error)]">✗</div>
+            <div className="comparison-table">
+              <div className="comparison-row comparison-header">
+                <div className="comparison-cell">Feature</div>
+                <div className="comparison-cell">EmberDocs</div>
+                <div className="comparison-cell">Docusaurus</div>
+                <div className="comparison-cell">GitBook</div>
+              </div>
+              <div className="comparison-row">
+                <div className="comparison-cell">Setup time</div>
+                <div className="comparison-cell">30 seconds</div>
+                <div className="comparison-cell">15 minutes</div>
+                <div className="comparison-cell">5 minutes</div>
+              </div>
+              <div className="comparison-row">
+                <div className="comparison-cell">Zero config</div>
+                <div className="comparison-cell check">✓</div>
+                <div className="comparison-cell cross">✗</div>
+                <div className="comparison-cell">Partial</div>
+              </div>
+              <div className="comparison-row">
+                <div className="comparison-cell">Self-hosted (free)</div>
+                <div className="comparison-cell check">✓</div>
+                <div className="comparison-cell check">✓</div>
+                <div className="comparison-cell cross">✗</div>
+              </div>
+              <div className="comparison-row">
+                <div className="comparison-cell">Privacy-first</div>
+                <div className="comparison-cell check">✓</div>
+                <div className="comparison-cell cross">✗</div>
+                <div className="comparison-cell cross">✗</div>
+              </div>
+              <div className="comparison-row">
+                <div className="comparison-cell">Drop-in integration</div>
+                <div className="comparison-cell check">✓</div>
+                <div className="comparison-cell cross">✗</div>
+                <div className="comparison-cell cross">✗</div>
+              </div>
             </div>
           </div>
+        </section>
+      </main>
+
+      <footer className="landing-footer">
+        <div className="landing-container">
+          <p>EmberDocs - Free self-hosted documentation framework</p>
         </div>
-      </section>
-    </main>
+      </footer>
+    </>
   );
 }