npm - @float.js/core - Versions diffs - 2.0.4 → 2.0.6 - Mend

@float.js/core 2.0.4 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/cli/index.js CHANGED Viewed

@@ -1703,493 +1703,765 @@ var FLOAT_ERROR_OVERLAY = `
 init_esm_shims();
 function generateWelcomePage() {
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="light">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Welcome to Float.js</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%236366f1'/><stop offset='100%25' stop-color='%23d946ef'/></linearGradient></defs><circle cx='16' cy='16' r='14' fill='url(%23g)'/></svg>">
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    :root {
-      --float-purple: #8b5cf6;
-      --float-indigo: #6366f1;
-      --float-pink: #d946ef;
-      --float-cyan: #06b6d4;
-    }
-    body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: #0a0a0b;
-      color: white;
-      min-height: 100vh;
-      overflow-x: hidden;
-    }
-    /* Animated background */
-    .bg-gradient {
-      position: fixed;
-      inset: 0;
-      background:
-        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent),
-        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139, 92, 246, 0.15), transparent),
-        radial-gradient(ellipse 40% 30% at 20% 80%, rgba(217, 70, 239, 0.1), transparent);
-      pointer-events: none;
-    }
-    .bg-grid {
-      position: fixed;
-      inset: 0;
-      background-image:
-        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-      background-size: 60px 60px;
-      pointer-events: none;
-    }
-    /* Floating orbs */
-    .orb {
-      position: fixed;
-      border-radius: 50%;
-      filter: blur(80px);
-      opacity: 0.5;
-      animation: float 20s ease-in-out infinite;
-      pointer-events: none;
-    }
-    .orb-1 {
-      width: 400px;
-      height: 400px;
-      background: var(--float-purple);
-      top: -100px;
-      right: -100px;
-      animation-delay: 0s;
-    }
-    .orb-2 {
-      width: 300px;
-      height: 300px;
-      background: var(--float-pink);
-      bottom: -50px;
-      left: -50px;
-      animation-delay: -7s;
-    }
-    .orb-3 {
-      width: 200px;
-      height: 200px;
-      background: var(--float-cyan);
-      top: 50%;
-      left: 50%;
-      animation-delay: -14s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      25% { transform: translate(30px, -30px) scale(1.1); }
-      50% { transform: translate(-20px, 20px) scale(0.9); }
-      75% { transform: translate(20px, 10px) scale(1.05); }
-    }
-    /* Main content */
-    .container {
-      position: relative;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 60px 24px;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    /* Logo */
-    .logo {
-      margin-bottom: 48px;
-      animation: fadeInUp 0.8s ease-out;
-    }
-    .logo svg {
-      width: 80px;
-      height: 80px;
-      filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.5));
-    }
-    /* Hero */
-    .hero {
-      text-align: center;
-      margin-bottom: 64px;
-    }
-    .hero h1 {
-      font-size: clamp(48px, 10vw, 80px);
-      font-weight: 800;
-      letter-spacing: -0.03em;
-      line-height: 1.1;
-      margin-bottom: 24px;
-      animation: fadeInUp 0.8s ease-out 0.1s both;
-    }
-    .hero h1 .gradient {
-      background: linear-gradient(135deg, var(--float-indigo), var(--float-purple), var(--float-pink));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .hero p {
-      font-size: 20px;
-      color: rgba(255,255,255,0.6);
-      max-width: 600px;
-      margin: 0 auto;
-      line-height: 1.7;
-      animation: fadeInUp 0.8s ease-out 0.2s both;
-    }
-    /* Features */
-    .features {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 20px;
-      width: 100%;
-      max-width: 900px;
-      margin-bottom: 64px;
-    }
-    .feature {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(255,255,255,0.06);
-      border-radius: 20px;
-      padding: 28px;
-      transition: all 0.3s ease;
-      animation: fadeInUp 0.8s ease-out both;
-    }
-    .feature:nth-child(1) { animation-delay: 0.3s; }
-    .feature:nth-child(2) { animation-delay: 0.4s; }
-    .feature:nth-child(3) { animation-delay: 0.5s; }
-    .feature:hover {
-      background: rgba(255,255,255,0.05);
-      border-color: rgba(139, 92, 246, 0.3);
-      transform: translateY(-4px);
-    }
-    .feature-icon {
-      width: 48px;
-      height: 48px;
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
-      border-radius: 14px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 16px;
-      font-size: 24px;
-    }
-    .feature h3 {
-      font-size: 18px;
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
-    .feature p {
-      font-size: 14px;
-      color: rgba(255,255,255,0.5);
-      line-height: 1.6;
-    }
-    /* Code block */
-    .code-section {
-      width: 100%;
-      max-width: 600px;
-      animation: fadeInUp 0.8s ease-out 0.6s both;
-      margin-bottom: 48px;
-    }
-    .code-header {
-      background: rgba(255,255,255,0.05);
-      border: 1px solid rgba(255,255,255,0.08);
-      border-bottom: none;
-      border-radius: 16px 16px 0 0;
-      padding: 14px 20px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .code-dots {
-      display: flex;
-      gap: 6px;
-    }
-    .code-dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: rgba(255,255,255,0.1);
-    }
-    .code-dot:nth-child(1) { background: #ff5f57; }
-    .code-dot:nth-child(2) { background: #febc2e; }
-    .code-dot:nth-child(3) { background: #28c840; }
-    .code-title {
-      margin-left: auto;
-      font-size: 12px;
-      color: rgba(255,255,255,0.4);
-    }
-    .code-block {
-      background: rgba(0,0,0,0.4);
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 0 0 16px 16px;
-      padding: 24px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 14px;
-      line-height: 1.8;
-      overflow-x: auto;
-    }
-    .code-line {
-      display: flex;
-    }
-    .code-number {
-      color: rgba(255,255,255,0.2);
-      width: 40px;
-      flex-shrink: 0;
-      user-select: none;
-    }
-    .code-content {
-      color: rgba(255,255,255,0.8);
-    }
-    .code-keyword { color: #c792ea; }
-    .code-string { color: #c3e88d; }
-    .code-function { color: #82aaff; }
-    .code-comment { color: rgba(255,255,255,0.3); }
-    .code-tag { color: #f07178; }
-    .code-attr { color: #ffcb6b; }
-    /* Quick start */
-    .quick-start {
-      text-align: center;
-      animation: fadeInUp 0.8s ease-out 0.7s both;
-    }
-    .quick-start h2 {
-      font-size: 14px;
-      font-weight: 500;
-      color: rgba(255,255,255,0.4);
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin-bottom: 20px;
-    }
-    .quick-start-cmd {
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-      background: rgba(255,255,255,0.05);
-      border: 1px solid rgba(255,255,255,0.1);
-      border-radius: 12px;
-      padding: 16px 24px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 15px;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .quick-start-cmd:hover {
-      background: rgba(255,255,255,0.08);
-      border-color: rgba(139, 92, 246, 0.4);
-    }
-    .quick-start-cmd .prompt {
-      color: var(--float-purple);
-    }
-    .quick-start-cmd .text {
-      color: rgba(255,255,255,0.8);
-    }
-    .quick-start-cmd .copy {
-      opacity: 0.4;
-      transition: opacity 0.2s;
-    }
-    .quick-start-cmd:hover .copy {
-      opacity: 0.8;
-    }
-    /* Links */
-    .links {
-      display: flex;
-      gap: 24px;
-      margin-top: 48px;
-      animation: fadeInUp 0.8s ease-out 0.8s both;
-    }
-    .link {
-      color: rgba(255,255,255,0.5);
-      text-decoration: none;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      transition: color 0.2s;
-    }
-    .link:hover {
-      color: var(--float-purple);
-    }
-    /* Footer */
-    .footer {
-      position: absolute;
-      bottom: 24px;
-      font-size: 12px;
-      color: rgba(255,255,255,0.3);
-      animation: fadeInUp 0.8s ease-out 0.9s both;
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><linearGradient id='g' x1='0%25' y1='100%25' x2='100%25' y2='0%25'><stop offset='0%25' stop-color='%233B82F6'/><stop offset='100%25' stop-color='%238B5CF6'/></linearGradient></defs><path d='M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z' fill='url(%23g)'/><path d='M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z' fill='url(%23g)'/><path d='M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z' fill='url(%23g)'/></svg>">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }
+        }
+      }
     }
+  </script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+    .fade-up { animation: fade-up 0.6s ease-out forwards; }
+    .fade-up-1 { animation: fade-up 0.6s ease-out 0.1s forwards; opacity: 0; }
+    .fade-up-2 { animation: fade-up 0.6s ease-out 0.2s forwards; opacity: 0; }
+    .fade-up-3 { animation: fade-up 0.6s ease-out 0.3s forwards; opacity: 0; }
+    .fade-up-4 { animation: fade-up 0.6s ease-out 0.4s forwards; opacity: 0; }
+    .logo-float { animation: float 4s ease-in-out infinite; }
+  </style>
+</head>
+<body class="bg-white dark:bg-zinc-950 text-zinc-900 dark:text-white min-h-screen font-sans transition-colors duration-300">
+  <!-- Header -->
+  <header class="fixed top-0 left-0 right-0 z-50 border-b border-zinc-200 dark:border-zinc-800 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md">
+    <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+      <!-- Logo -->
+      <div class="flex items-center gap-3">
+        <svg class="w-8 h-8" viewBox="0 0 200 200" fill="none">
+          <defs>
+            <linearGradient id="hdr-grad" x1="50" y1="160" x2="170" y2="40" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#8B5CF6"/>
+            </linearGradient>
+          </defs>
+          <path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="url(#hdr-grad)"/>
+          <path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="url(#hdr-grad)"/>
+          <path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="url(#hdr-grad)"/>
+        </svg>
+        <span class="font-semibold text-lg">Float.js</span>
+        <span class="text-xs px-2 py-0.5 rounded-full bg-gradient-to-r from-blue-500 to-violet-500 text-white font-medium">v2.0.6</span>
+      </div>
+      <!-- Nav -->
+      <nav class="hidden sm:flex items-center gap-6">
+        <a href="/__docs" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Docs</a>
+        <a href="/__learn" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Learn</a>
+        <a href="/__examples" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Examples</a>
+        <a href="https://github.com/float-js/float-js" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">GitHub</a>
+      </nav>
+      <!-- Dark Mode Toggle -->
+      <button id="theme-toggle" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Toggle theme">
+        <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+        </svg>
+        <svg class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+  <!-- Hero Section -->
+  <main class="pt-32 pb-20 px-6">
+    <div class="max-w-4xl mx-auto text-center">
+      <!-- Logo -->
+      <div class="fade-up logo-float mb-8">
+        <svg class="w-24 h-24 mx-auto" viewBox="0 0 200 200" fill="none">
+          <defs>
+            <linearGradient id="hero-grad" x1="50" y1="160" x2="170" y2="40" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#8B5CF6"/>
+            </linearGradient>
+          </defs>
+          <path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="url(#hero-grad)"/>
+          <path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="url(#hero-grad)"/>
+          <path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="url(#hero-grad)"/>
+        </svg>
+      </div>
+      <!-- Title -->
+      <h1 class="fade-up-1 text-4xl sm:text-6xl font-bold tracking-tight mb-6">
+        The React Framework<br/>
+        <span class="bg-gradient-to-r from-blue-500 to-violet-500 bg-clip-text text-transparent">for the Modern Web</span>
+      </h1>
+      <!-- Subtitle -->
+      <p class="fade-up-2 text-lg sm:text-xl text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto mb-10">
+        Build full-stack React applications with file-based routing, SSR, API routes,
+        and lightning-fast HMR. Get started by creating your first page.
+      </p>
+      <!-- CTA Buttons -->
+      <div class="fade-up-3 flex flex-col sm:flex-row gap-4 justify-center mb-16">
+        <a href="/__learn"
+           class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-semibold rounded-xl hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-all shadow-lg hover:shadow-xl">
+          Get Started
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+          </svg>
+        </a>
+        <a href="/__docs"
+           class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white font-semibold rounded-xl hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-all">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+          </svg>
+          Documentation
+        </a>
+      </div>
+      <!-- Code Block -->
+      <div class="fade-up-4 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6 text-left max-w-xl mx-auto shadow-sm">
+        <div class="flex items-center gap-2 mb-4">
+          <div class="w-3 h-3 rounded-full bg-red-400"></div>
+          <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
+          <div class="w-3 h-3 rounded-full bg-green-400"></div>
+          <span class="ml-3 text-xs text-zinc-500 font-mono">app/page.tsx</span>
+        </div>
+        <pre class="text-sm font-mono overflow-x-auto text-zinc-800 dark:text-zinc-200"><code><span class="text-violet-600 dark:text-violet-400">export default</span> <span class="text-blue-600 dark:text-blue-400">function</span> <span class="text-amber-600 dark:text-yellow-300">Page</span>() {
+  <span class="text-violet-600 dark:text-violet-400">return</span> (
+    <span class="text-zinc-500">&lt;</span><span class="text-emerald-600 dark:text-emerald-400">h1</span><span class="text-zinc-500">&gt;</span>Hello, Float.js!<span class="text-zinc-500">&lt;/</span><span class="text-emerald-600 dark:text-emerald-400">h1</span><span class="text-zinc-500">&gt;</span>
+  );
+}</code></pre>
+      </div>
+    </div>
+  </main>
+  <!-- Features Section -->
+  <section class="py-20 px-6 bg-zinc-50 dark:bg-zinc-900/50">
+    <div class="max-w-6xl mx-auto">
+      <h2 class="text-2xl sm:text-3xl font-bold text-center mb-4">Built for Performance</h2>
+      <p class="text-zinc-600 dark:text-zinc-400 text-center mb-12 max-w-xl mx-auto">
+        Everything you need to build fast, modern web applications
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Feature 1 -->
+        <div class="p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl hover:border-blue-500 dark:hover:border-blue-500 transition-colors">
+          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+            </svg>
+          </div>
+          <h3 class="font-semibold text-lg mb-2">Lightning Fast HMR</h3>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400">Instant hot module replacement. See your changes in milliseconds without losing state.</p>
+        </div>
+        <!-- Feature 2 -->
+        <div class="p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl hover:border-violet-500 dark:hover:border-violet-500 transition-colors">
+          <div class="w-12 h-12 bg-violet-100 dark:bg-violet-500/20 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+            </svg>
+          </div>
+          <h3 class="font-semibold text-lg mb-2">File-Based Routing</h3>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400">Create routes by adding files to the app directory. Dynamic routes, layouts, and more.</p>
+        </div>
+        <!-- Feature 3 -->
+        <div class="p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl hover:border-emerald-500 dark:hover:border-emerald-500 transition-colors">
+          <div class="w-12 h-12 bg-emerald-100 dark:bg-emerald-500/20 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
+            </svg>
+          </div>
+          <h3 class="font-semibold text-lg mb-2">Server-Side Rendering</h3>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400">Automatic SSR for optimal SEO and performance. Hybrid rendering strategies.</p>
+        </div>
+        <!-- Feature 4 -->
+        <div class="p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl hover:border-amber-500 dark:hover:border-amber-500 transition-colors">
+          <div class="w-12 h-12 bg-amber-100 dark:bg-amber-500/20 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+            </svg>
+          </div>
+          <h3 class="font-semibold text-lg mb-2">API Routes</h3>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400">Build your backend API with simple route handlers. Full TypeScript support.</p>
+        </div>
+        <!-- Feature 5 -->
+        <div class="p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl hover:border-pink-500 dark:hover:border-pink-500 transition-colors">
+          <div class="w-12 h-12 bg-pink-100 dark:bg-pink-500/20 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+            </svg>
+          </div>
+          <h3 class="font-semibold text-lg mb-2">Built-in AI Integration</h3>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400">First-class support for AI streaming, OpenAI, Anthropic, and more.</p>
+        </div>
+        <!-- Feature 6 -->
+        <div class="p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl hover:border-cyan-500 dark:hover:border-cyan-500 transition-colors">
+          <div class="w-12 h-12 bg-cyan-100 dark:bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+            </svg>
+          </div>
+          <h3 class="font-semibold text-lg mb-2">Developer Experience</h3>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400">Error overlay, DevTools, and debugging utilities built-in for a smooth workflow.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Quick Start Section -->
+  <section class="py-20 px-6">
+    <div class="max-w-4xl mx-auto">
+      <h2 class="text-2xl sm:text-3xl font-bold text-center mb-4">Get Started in Seconds</h2>
+      <p class="text-zinc-600 dark:text-zinc-400 text-center mb-12">Create your first page and see it live</p>
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div class="p-5 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl">
+          <div class="text-xs text-zinc-500 mb-2 uppercase tracking-wider">1. Create page</div>
+          <code class="text-sm font-mono text-zinc-700 dark:text-zinc-300">touch app/page.tsx</code>
+        </div>
+        <div class="p-5 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl">
+          <div class="text-xs text-zinc-500 mb-2 uppercase tracking-wider">2. Add route</div>
+          <code class="text-sm font-mono text-zinc-700 dark:text-zinc-300">mkdir app/about</code>
+        </div>
+        <div class="p-5 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl">
+          <div class="text-xs text-zinc-500 mb-2 uppercase tracking-wider">3. API route</div>
+          <code class="text-sm font-mono text-zinc-700 dark:text-zinc-300">touch app/api/route.ts</code>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="border-t border-zinc-200 dark:border-zinc-800 py-12 px-6 bg-zinc-50 dark:bg-zinc-900/50">
+    <div class="max-w-6xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-8 mb-12">
+        <!-- Brand -->
+        <div class="sm:col-span-1">
+          <div class="flex items-center gap-2 mb-4">
+            <svg class="w-8 h-8" viewBox="0 0 200 200" fill="none">
+              <defs>
+                <linearGradient id="ftr-grad" x1="50" y1="160" x2="170" y2="40" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#8B5CF6"/>
+                </linearGradient>
+              </defs>
+              <path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="url(#ftr-grad)"/>
+              <path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="url(#ftr-grad)"/>
+              <path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="url(#ftr-grad)"/>
+            </svg>
+            <span class="font-semibold text-lg">Float.js</span>
+          </div>
+          <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
+            The React framework for the modern web.
+          </p>
+        </div>
+        <!-- Resources -->
+        <div>
+          <h4 class="font-semibold mb-4 text-sm">Resources</h4>
+          <ul class="space-y-2">
+            <li><a href="/__docs" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Documentation</a></li>
+            <li><a href="/__learn" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Learn Float.js</a></li>
+            <li><a href="/__examples" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Examples</a></li>
+            <li><a href="https://github.com/float-js/float-js" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Blog</a></li>
+          </ul>
+        </div>
+        <!-- More -->
+        <div>
+          <h4 class="font-semibold mb-4 text-sm">More</h4>
+          <ul class="space-y-2">
+            <li><a href="https://github.com/float-js/float-js" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">GitHub</a></li>
+            <li><a href="https://github.com/float-js/float-js/releases" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Releases</a></li>
+            <li><a href="https://x.com/floatjs" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Twitter</a></li>
+          </ul>
+        </div>
+        <!-- Legal -->
+        <div>
+          <h4 class="font-semibold mb-4 text-sm">Legal</h4>
+          <ul class="space-y-2">
+            <li><a href="https://github.com/float-js/float-js/blob/main/LICENSE" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">MIT License</a></li>
+            <li><a href="https://github.com/float-js/float-js" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Contribute</a></li>
+          </ul>
+        </div>
+      </div>
+      <!-- Bottom -->
+      <div class="pt-8 border-t border-zinc-200 dark:border-zinc-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <p class="text-sm text-zinc-500">
+          \xA9 2024-2026 Float.js. Created by <span class="text-zinc-700 dark:text-zinc-300 font-medium">Peter Fulle</span>
+        </p>
+        <div class="flex items-center gap-4">
+          <a href="mailto:prfulle@gmail.com" class="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">prfulle@gmail.com</a>
+          <a href="https://github.com/float-js/float-js" target="_blank" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+          </a>
+          <a href="https://x.com/floatjs" target="_blank" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <!-- Theme Toggle Script -->
+  <script>
+    const toggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
+    // Check for saved theme or system preference
+    if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      html.classList.add('dark');
+      html.classList.remove('light');
     }
-    /* Responsive */
-    @media (max-width: 640px) {
-      .container { padding: 40px 20px; }
-      .hero h1 { font-size: 40px; }
-      .hero p { font-size: 16px; }
-      .features { gap: 16px; }
-      .feature { padding: 20px; }
+    toggle.addEventListener('click', () => {
+      html.classList.toggle('dark');
+      html.classList.toggle('light');
+      localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
+    });
+  </script>
+</body>
+</html>`;
+}
+// src/client/docs-pages.ts
+init_esm_shims();
+var baseStyles = `
+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>%TITLE% - Float.js</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><linearGradient id='g' x1='0%25' y1='100%25' x2='100%25' y2='0%25'><stop offset='0%25' stop-color='%233B82F6'/><stop offset='100%25' stop-color='%238B5CF6'/></linearGradient></defs><path d='M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z' fill='url(%23g)'/><path d='M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z' fill='url(%23g)'/><path d='M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z' fill='url(%23g)'/></svg>">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: { extend: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] } } }
     }
+  </script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    .prose code { background: #f4f4f5; padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
+    .dark .prose code { background: #27272a; }
+    .prose pre { background: #18181b; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; }
+    .prose pre code { background: transparent; padding: 0; }
   </style>
 </head>
-<body>
-  <div class="bg-gradient"></div>
-  <div class="bg-grid"></div>
-  <div class="orb orb-1"></div>
-  <div class="orb orb-2"></div>
-  <div class="orb orb-3"></div>
-  <div class="container">
-    <div class="logo">
-      <svg viewBox="0 0 80 80" fill="none">
-        <defs>
-          <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" stop-color="#6366f1"/>
-            <stop offset="50%" stop-color="#8b5cf6"/>
-            <stop offset="100%" stop-color="#d946ef"/>
-          </linearGradient>
-        </defs>
-        <circle cx="40" cy="40" r="36" stroke="url(#logoGrad)" stroke-width="3" fill="none">
-          <animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="20s" repeatCount="indefinite"/>
-        </circle>
-        <circle cx="40" cy="40" r="28" stroke="url(#logoGrad)" stroke-width="2" fill="none" opacity="0.5">
-          <animateTransform attributeName="transform" type="rotate" from="360 40 40" to="0 40 40" dur="15s" repeatCount="indefinite"/>
-        </circle>
-        <path d="M30 28 L54 40 L30 52 Z" fill="url(#logoGrad)"/>
-      </svg>
+<body class="bg-white dark:bg-zinc-950 text-zinc-900 dark:text-white min-h-screen font-sans">
+`;
+var header = `
+  <!-- Header -->
+  <header class="sticky top-0 z-50 border-b border-zinc-200 dark:border-zinc-800 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md">
+    <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-3">
+        <svg class="w-8 h-8" viewBox="0 0 200 200" fill="none">
+          <defs>
+            <linearGradient id="hdr-grad" x1="50" y1="160" x2="170" y2="40" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#8B5CF6"/>
+            </linearGradient>
+          </defs>
+          <path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="url(#hdr-grad)"/>
+          <path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="url(#hdr-grad)"/>
+          <path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="url(#hdr-grad)"/>
+        </svg>
+        <span class="font-semibold text-lg">Float.js</span>
+      </a>
+      <nav class="flex items-center gap-6">
+        <a href="/__docs" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Docs</a>
+        <a href="/__learn" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Learn</a>
+        <a href="/__examples" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">Examples</a>
+        <a href="https://github.com/float-js/float-js" target="_blank" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">GitHub</a>
+        <button id="theme-toggle" class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
+          <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+          <svg class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+        </button>
+      </nav>
     </div>
-    <div class="hero">
-      <h1>Welcome to <span class="gradient">Float.js</span></h1>
-      <p>Tu framework ultramoderno est\xE1 listo. Comienza a crear experiencias web incre\xEDbles con SSR, routing inteligente y desarrollo instant\xE1neo.</p>
+  </header>
+`;
+var footer = `
+  <!-- Footer -->
+  <footer class="border-t border-zinc-200 dark:border-zinc-800 py-8 px-6 bg-zinc-50 dark:bg-zinc-900/50">
+    <div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+      <p class="text-sm text-zinc-500">\xA9 2024-2026 Float.js. Created by Peter Fulle</p>
+      <div class="flex items-center gap-4">
+        <a href="mailto:prfulle@gmail.com" class="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">prfulle@gmail.com</a>
+        <a href="https://github.com/float-js/float-js" target="_blank" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+        </a>
+      </div>
     </div>
+  </footer>
+  <script>
+    const toggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      html.classList.add('dark'); html.classList.remove('light');
+    }
+    toggle?.addEventListener('click', () => {
+      html.classList.toggle('dark'); html.classList.toggle('light');
+      localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
+    });
+  </script>
+</body>
+</html>
+`;
+function generateDocsPage() {
+  return baseStyles.replace("%TITLE%", "Documentation") + header + `
+  <div class="flex">
+    <!-- Sidebar -->
+    <aside class="hidden lg:block w-64 border-r border-zinc-200 dark:border-zinc-800 min-h-[calc(100vh-4rem)] p-6">
+      <nav class="space-y-6">
+        <div>
+          <h3 class="font-semibold text-sm mb-3">Getting Started</h3>
+          <ul class="space-y-2">
+            <li><a href="#installation" class="text-sm text-blue-600 dark:text-blue-400 font-medium">Installation</a></li>
+            <li><a href="#project-structure" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">Project Structure</a></li>
+            <li><a href="#routing" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">Routing</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="font-semibold text-sm mb-3">Core Concepts</h3>
+          <ul class="space-y-2">
+            <li><a href="#pages" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">Pages</a></li>
+            <li><a href="#layouts" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">Layouts</a></li>
+            <li><a href="#api-routes" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">API Routes</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="font-semibold text-sm mb-3">Features</h3>
+          <ul class="space-y-2">
+            <li><a href="#ssr" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">Server Rendering</a></li>
+            <li><a href="#hmr" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">Hot Module Replacement</a></li>
+            <li><a href="#ai" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">AI Integration</a></li>
+          </ul>
+        </div>
+      </nav>
+    </aside>
-    <div class="features">
-      <div class="feature">
-        <div class="feature-icon">\u26A1</div>
-        <h3>Desarrollo Instant\xE1neo</h3>
-        <p>Hot reload ultrarr\xE1pido con esbuild. Ve tus cambios al instante sin perder el estado.</p>
-      </div>
-      <div class="feature">
-        <div class="feature-icon">\u{1F3AF}</div>
-        <h3>Routing Inteligente</h3>
-        <p>Sistema de rutas basado en archivos. Crea page.tsx y tu ruta est\xE1 lista autom\xE1ticamente.</p>
+    <!-- Main Content -->
+    <main class="flex-1 max-w-3xl mx-auto px-6 py-12 prose dark:prose-invert">
+      <h1 id="installation" class="text-4xl font-bold mb-4">Documentation</h1>
+      <p class="text-lg text-zinc-600 dark:text-zinc-400 mb-8">Learn how to build modern web applications with Float.js</p>
+      <h2 class="text-2xl font-semibold mt-12 mb-4">Installation</h2>
+      <p class="mb-4">Create a new Float.js project with a single command:</p>
+      <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl mb-6"><code class="font-mono">npx create-float@latest my-app
+cd my-app
+npm run dev</code></pre>
+      <h2 id="project-structure" class="text-2xl font-semibold mt-12 mb-4">Project Structure</h2>
+      <p class="mb-4">Float.js uses a file-based routing system. Your project structure looks like this:</p>
+      <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl mb-6"><code class="font-mono">my-app/
+\u251C\u2500\u2500 app/
+\u2502   \u251C\u2500\u2500 page.tsx        # Home page (/)
+\u2502   \u251C\u2500\u2500 layout.tsx      # Root layout
+\u2502   \u251C\u2500\u2500 about/
+\u2502   \u2502   \u2514\u2500\u2500 page.tsx    # About page (/about)
+\u2502   \u2514\u2500\u2500 api/
+\u2502       \u2514\u2500\u2500 route.ts    # API route (/api)
+\u251C\u2500\u2500 public/             # Static assets
+\u2514\u2500\u2500 package.json</code></pre>
+      <h2 id="routing" class="text-2xl font-semibold mt-12 mb-4">Routing</h2>
+      <p class="mb-4">Routes are automatically generated based on your file structure:</p>
+      <div class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl p-6 mb-6">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-left border-b border-zinc-200 dark:border-zinc-700">
+              <th class="pb-3 font-semibold">File</th>
+              <th class="pb-3 font-semibold">Route</th>
+            </tr>
+          </thead>
+          <tbody class="font-mono">
+            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-3">app/page.tsx</td><td class="py-3 text-blue-600 dark:text-blue-400">/</td></tr>
+            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-3">app/about/page.tsx</td><td class="py-3 text-blue-600 dark:text-blue-400">/about</td></tr>
+            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-3">app/blog/[slug]/page.tsx</td><td class="py-3 text-blue-600 dark:text-blue-400">/blog/:slug</td></tr>
+            <tr><td class="py-3">app/api/users/route.ts</td><td class="py-3 text-blue-600 dark:text-blue-400">/api/users</td></tr>
+          </tbody>
+        </table>
       </div>
-      <div class="feature">
-        <div class="feature-icon">\u{1F30A}</div>
-        <h3>SSR Streaming</h3>
-        <p>Renderizado del lado del servidor con React 18 y soporte para streaming nativo.</p>
+      <h2 id="pages" class="text-2xl font-semibold mt-12 mb-4">Creating Pages</h2>
+      <p class="mb-4">Each page exports a default React component:</p>
+      <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl mb-6"><code class="font-mono"><span class="text-violet-400">export default</span> <span class="text-blue-400">function</span> <span class="text-yellow-300">Page</span>() {
+  <span class="text-violet-400">return</span> (
+    <span class="text-zinc-500">&lt;</span><span class="text-emerald-400">div</span><span class="text-zinc-500">&gt;</span>
+      <span class="text-zinc-500">&lt;</span><span class="text-emerald-400">h1</span><span class="text-zinc-500">&gt;</span>Welcome to my page<span class="text-zinc-500">&lt;/</span><span class="text-emerald-400">h1</span><span class="text-zinc-500">&gt;</span>
+    <span class="text-zinc-500">&lt;/</span><span class="text-emerald-400">div</span><span class="text-zinc-500">&gt;</span>
+  );
+}</code></pre>
+      <h2 id="api-routes" class="text-2xl font-semibold mt-12 mb-4">API Routes</h2>
+      <p class="mb-4">Create API endpoints by exporting HTTP method handlers:</p>
+      <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl mb-6"><code class="font-mono"><span class="text-violet-400">export async function</span> <span class="text-yellow-300">GET</span>(<span class="text-orange-400">request</span>: Request) {
+  <span class="text-violet-400">return</span> Response.json({ message: <span class="text-emerald-400">'Hello from API!'</span> });
+}
+<span class="text-violet-400">export async function</span> <span class="text-yellow-300">POST</span>(<span class="text-orange-400">request</span>: Request) {
+  <span class="text-violet-400">const</span> body = <span class="text-violet-400">await</span> request.json();
+  <span class="text-violet-400">return</span> Response.json({ received: body });
+}</code></pre>
+      <div class="mt-12 p-6 bg-gradient-to-r from-blue-50 to-violet-50 dark:from-blue-950/30 dark:to-violet-950/30 border border-blue-200 dark:border-blue-800 rounded-xl">
+        <h3 class="font-semibold text-lg mb-2">\u{1F680} Ready to build?</h3>
+        <p class="text-zinc-600 dark:text-zinc-400 mb-4">Start creating your first page by running:</p>
+        <code class="bg-white dark:bg-zinc-900 px-4 py-2 rounded-lg border border-zinc-200 dark:border-zinc-700 font-mono text-sm">touch app/page.tsx</code>
       </div>
+    </main>
+  </div>
+` + footer;
+}
+function generateLearnPage() {
+  return baseStyles.replace("%TITLE%", "Learn") + header + `
+  <main class="max-w-4xl mx-auto px-6 py-16">
+    <div class="text-center mb-16">
+      <h1 class="text-4xl sm:text-5xl font-bold mb-4">Learn Float.js</h1>
+      <p class="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
+        Follow our step-by-step tutorial to master Float.js and build your first application
+      </p>
     </div>
-    <div class="code-section">
-      <div class="code-header">
-        <div class="code-dots">
-          <div class="code-dot"></div>
-          <div class="code-dot"></div>
-          <div class="code-dot"></div>
+    <!-- Tutorial Steps -->
+    <div class="space-y-6">
+      <!-- Step 1 -->
+      <div class="p-6 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl">
+        <div class="flex items-start gap-4">
+          <div class="w-10 h-10 bg-blue-100 dark:bg-blue-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+            <span class="font-bold text-blue-600 dark:text-blue-400">1</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="font-semibold text-xl mb-2">Create Your Project</h3>
+            <p class="text-zinc-600 dark:text-zinc-400 mb-4">Start by creating a new Float.js project using the CLI</p>
+            <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl text-sm font-mono overflow-x-auto"><code>npx create-float@latest my-first-app</code></pre>
+          </div>
         </div>
-        <span class="code-title">app/page.tsx</span>
       </div>
-      <div class="code-block">
-        <div class="code-line">
-          <span class="code-number">1</span>
-          <span class="code-content"><span class="code-keyword">export default function</span> <span class="code-function">HomePage</span>() {</span>
-        </div>
-        <div class="code-line">
-          <span class="code-number">2</span>
-          <span class="code-content">  <span class="code-keyword">return</span> (</span>
+      <!-- Step 2 -->
+      <div class="p-6 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl">
+        <div class="flex items-start gap-4">
+          <div class="w-10 h-10 bg-violet-100 dark:bg-violet-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+            <span class="font-bold text-violet-600 dark:text-violet-400">2</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="font-semibold text-xl mb-2">Start the Development Server</h3>
+            <p class="text-zinc-600 dark:text-zinc-400 mb-4">Navigate to your project and start the dev server</p>
+            <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl text-sm font-mono overflow-x-auto"><code>cd my-first-app
+npm run dev</code></pre>
+          </div>
         </div>
-        <div class="code-line">
-          <span class="code-number">3</span>
-          <span class="code-content">    <span class="code-tag">&lt;h1&gt;</span>Hello, Float.js!<span class="code-tag">&lt;/h1&gt;</span></span>
+      </div>
+      <!-- Step 3 -->
+      <div class="p-6 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl">
+        <div class="flex items-start gap-4">
+          <div class="w-10 h-10 bg-emerald-100 dark:bg-emerald-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+            <span class="font-bold text-emerald-600 dark:text-emerald-400">3</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="font-semibold text-xl mb-2">Create Your First Page</h3>
+            <p class="text-zinc-600 dark:text-zinc-400 mb-4">Create a page component in the app directory</p>
+            <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl text-sm font-mono overflow-x-auto"><code><span class="text-zinc-500">// app/page.tsx</span>
+<span class="text-violet-400">export default</span> <span class="text-blue-400">function</span> <span class="text-yellow-300">HomePage</span>() {
+  <span class="text-violet-400">return</span> (
+    <span class="text-zinc-500">&lt;</span><span class="text-emerald-400">main</span><span class="text-zinc-500">&gt;</span>
+      <span class="text-zinc-500">&lt;</span><span class="text-emerald-400">h1</span><span class="text-zinc-500">&gt;</span>Hello, Float.js!<span class="text-zinc-500">&lt;/</span><span class="text-emerald-400">h1</span><span class="text-zinc-500">&gt;</span>
+      <span class="text-zinc-500">&lt;</span><span class="text-emerald-400">p</span><span class="text-zinc-500">&gt;</span>Welcome to my first app<span class="text-zinc-500">&lt;/</span><span class="text-emerald-400">p</span><span class="text-zinc-500">&gt;</span>
+    <span class="text-zinc-500">&lt;/</span><span class="text-emerald-400">main</span><span class="text-zinc-500">&gt;</span>
+  );
+}</code></pre>
+          </div>
         </div>
-        <div class="code-line">
-          <span class="code-number">4</span>
-          <span class="code-content">  );</span>
+      </div>
+      <!-- Step 4 -->
+      <div class="p-6 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl">
+        <div class="flex items-start gap-4">
+          <div class="w-10 h-10 bg-amber-100 dark:bg-amber-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+            <span class="font-bold text-amber-600 dark:text-amber-400">4</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="font-semibold text-xl mb-2">Add an API Route</h3>
+            <p class="text-zinc-600 dark:text-zinc-400 mb-4">Create your backend API with simple handlers</p>
+            <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl text-sm font-mono overflow-x-auto"><code><span class="text-zinc-500">// app/api/hello/route.ts</span>
+<span class="text-violet-400">export async function</span> <span class="text-yellow-300">GET</span>() {
+  <span class="text-violet-400">return</span> Response.json({
+    message: <span class="text-emerald-400">'Hello from the API!'</span>,
+    timestamp: <span class="text-violet-400">new</span> Date().toISOString()
+  });
+}</code></pre>
+          </div>
         </div>
-        <div class="code-line">
-          <span class="code-number">5</span>
-          <span class="code-content">}</span>
+      </div>
+      <!-- Step 5 -->
+      <div class="p-6 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl">
+        <div class="flex items-start gap-4">
+          <div class="w-10 h-10 bg-pink-100 dark:bg-pink-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+            <span class="font-bold text-pink-600 dark:text-pink-400">5</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="font-semibold text-xl mb-2">Build for Production</h3>
+            <p class="text-zinc-600 dark:text-zinc-400 mb-4">Ready to deploy? Build your application</p>
+            <pre class="bg-zinc-900 text-zinc-100 p-4 rounded-xl text-sm font-mono overflow-x-auto"><code>npm run build
+npm start</code></pre>
+          </div>
         </div>
       </div>
     </div>
-    <div class="quick-start">
-      <h2>Crea tu primera p\xE1gina</h2>
-      <div class="quick-start-cmd" onclick="navigator.clipboard.writeText('touch app/about/page.tsx')">
-        <span class="prompt">$</span>
-        <span class="text">touch app/about/page.tsx</span>
-        <span class="copy">\u{1F4CB}</span>
+    <!-- Next Steps -->
+    <div class="mt-16 text-center">
+      <h2 class="text-2xl font-bold mb-4">What's Next?</h2>
+      <p class="text-zinc-600 dark:text-zinc-400 mb-8">Explore more features and capabilities</p>
+      <div class="flex flex-wrap justify-center gap-4">
+        <a href="/__docs" class="px-6 py-3 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-semibold rounded-xl hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
+          Read the Docs
+        </a>
+        <a href="/__examples" class="px-6 py-3 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white font-semibold rounded-xl hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+          View Examples
+        </a>
       </div>
     </div>
+  </main>
+` + footer;
+}
+function generateExamplesPage() {
+  return baseStyles.replace("%TITLE%", "Examples") + header + `
+  <main class="max-w-6xl mx-auto px-6 py-16">
+    <div class="text-center mb-16">
+      <h1 class="text-4xl sm:text-5xl font-bold mb-4">Examples</h1>
+      <p class="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
+        Explore example projects to learn common patterns and best practices
+      </p>
+    </div>
-    <div class="links">
-      <a href="https://floatjs.dev/docs" target="_blank" class="link">
-        <span>\u{1F4D6}</span> Documentaci\xF3n
-      </a>
-      <a href="https://github.com/floatjs/float" target="_blank" class="link">
-        <span>\u2B50</span> GitHub
-      </a>
-      <a href="https://floatjs.dev/examples" target="_blank" class="link">
-        <span>\u{1F3A8}</span> Ejemplos
-      </a>
+    <!-- Examples Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <!-- Basic App -->
+      <div class="group p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl hover:border-blue-500 transition-all hover:shadow-lg">
+        <div class="w-12 h-12 bg-blue-100 dark:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+          </svg>
+        </div>
+        <h3 class="font-semibold text-lg mb-2">Basic App</h3>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Simple starter with pages, layouts, and routing</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">React</span>
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">TypeScript</span>
+        </div>
+      </div>
+      <!-- Blog -->
+      <div class="group p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl hover:border-violet-500 transition-all hover:shadow-lg">
+        <div class="w-12 h-12 bg-violet-100 dark:bg-violet-500/20 rounded-xl flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+          </svg>
+        </div>
+        <h3 class="font-semibold text-lg mb-2">Blog</h3>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Full blog with MDX, dynamic routes, and SSG</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">MDX</span>
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">SSG</span>
+        </div>
+      </div>
+      <!-- API Backend -->
+      <div class="group p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl hover:border-emerald-500 transition-all hover:shadow-lg">
+        <div class="w-12 h-12 bg-emerald-100 dark:bg-emerald-500/20 rounded-xl flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+          </svg>
+        </div>
+        <h3 class="font-semibold text-lg mb-2">API Backend</h3>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">REST API with authentication and database</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">API</span>
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">Auth</span>
+        </div>
+      </div>
+      <!-- AI Chat -->
+      <div class="group p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl hover:border-pink-500 transition-all hover:shadow-lg">
+        <div class="w-12 h-12 bg-pink-100 dark:bg-pink-500/20 rounded-xl flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+        </div>
+        <h3 class="font-semibold text-lg mb-2">AI Chat</h3>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Streaming chat with OpenAI integration</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">AI</span>
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">Streaming</span>
+        </div>
+      </div>
+      <!-- E-commerce -->
+      <div class="group p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl hover:border-amber-500 transition-all hover:shadow-lg">
+        <div class="w-12 h-12 bg-amber-100 dark:bg-amber-500/20 rounded-xl flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
+          </svg>
+        </div>
+        <h3 class="font-semibold text-lg mb-2">E-commerce</h3>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Store with cart, checkout, and payments</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">Stripe</span>
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">Cart</span>
+        </div>
+      </div>
+      <!-- Dashboard -->
+      <div class="group p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl hover:border-cyan-500 transition-all hover:shadow-lg">
+        <div class="w-12 h-12 bg-cyan-100 dark:bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+          </svg>
+        </div>
+        <h3 class="font-semibold text-lg mb-2">Dashboard</h3>
+        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Admin panel with charts and real-time data</p>
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">Charts</span>
+          <span class="text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">Realtime</span>
+        </div>
+      </div>
     </div>
-    <div class="footer">
-      Float.js v2.0.4 \u2014 Made with \u26A1 for the modern web
+    <!-- CTA -->
+    <div class="mt-16 text-center p-8 bg-gradient-to-r from-blue-50 to-violet-50 dark:from-blue-950/30 dark:to-violet-950/30 border border-blue-200 dark:border-blue-800 rounded-2xl">
+      <h2 class="text-2xl font-bold mb-4">Want to contribute?</h2>
+      <p class="text-zinc-600 dark:text-zinc-400 mb-6">Share your example with the community</p>
+      <a href="https://github.com/float-js/float-js" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-semibold rounded-xl hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+        View on GitHub
+      </a>
     </div>
-  </div>
-</body>
-</html>`;
+  </main>
+` + footer;
 }
 // src/server/dev-server.ts
@@ -2307,6 +2579,21 @@ ${FLOAT_ERROR_OVERLAY}
         res.end(generateWelcomePage());
         return;
       }
+      if (pathname === "/__docs") {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-cache" });
+        res.end(generateDocsPage());
+        return;
+      }
+      if (pathname === "/__learn") {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-cache" });
+        res.end(generateLearnPage());
+        return;
+      }
+      if (pathname === "/__examples") {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-cache" });
+        res.end(generateExamplesPage());
+        return;
+      }
       if (!route) {
         res.writeHead(404, { "Content-Type": "text/html" });
         res.end(create404Page(pathname));