@float.js/core 2.0.3 → 2.0.5

package/dist/index.js

@@ -566,7 +566,7 @@ function generateDashboardHTML(state) {
         <div class="logo-icon">\u26A1</div>
         <div class="logo-text">
           <span class="logo-title">Float.js</span>
-          <span class="logo-version">v2.0.1</span>
+          <span class="logo-version">v2.0.4</span>
         </div>
       </div>
     </div>
@@ -869,7 +869,7 @@ init_esm_shims();
 
 // src/version.ts
 init_esm_shims();
-var VERSION = "2.0.1";
+var VERSION = "2.0.4";
 
 // src/router/index.ts
 init_esm_shims();
@@ -1332,7 +1332,7 @@ var FLOAT_INDICATOR_SCRIPT = `
   
   var indicator = document.createElement('div');
   indicator.id = '__float-dev-indicator';
-  indicator.innerHTML = '<div class="float-btn" id="float-btn"><svg width="16" height="16" viewBox="0 0 200 200" fill="none"><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="#3B82F6"/><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="#6366F1"/><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="#8B5CF6"/></svg><span class="float-dot" id="float-dot"></span></div><div class="float-panel" id="float-panel"><div class="float-panel-header"><svg width="20" height="20" viewBox="0 0 200 200" fill="none"><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="#3B82F6"/><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="#6366F1"/><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="#8B5CF6"/></svg><span>Float.js</span><span class="float-version">v2.0.1</span></div><div class="float-panel-body"><div class="float-row"><span class="float-label">Estado</span><span class="float-value" id="float-state">Conectando...</span></div><div class="float-row"><span class="float-label">HMR</span><span class="float-value" id="float-hmr">\u2014</span></div><div class="float-row"><span class="float-label">Build</span><span class="float-value" id="float-build">\u2014</span></div></div><div class="float-panel-footer"><a href="/__float" class="float-link">Dashboard</a><a href="https://floatjs.dev/docs" target="_blank" class="float-link">Docs</a></div></div>';
+  indicator.innerHTML = '<div class="float-btn" id="float-btn"><svg width="16" height="16" viewBox="0 0 200 200" fill="none"><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="#3B82F6"/><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="#6366F1"/><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="#8B5CF6"/></svg><span class="float-dot" id="float-dot"></span></div><div class="float-panel" id="float-panel"><div class="float-panel-header"><svg width="20" height="20" viewBox="0 0 200 200" fill="none"><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="#3B82F6"/><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="#6366F1"/><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="#8B5CF6"/></svg><span>Float.js</span><span class="float-version">v2.0.4</span></div><div class="float-panel-body"><div class="float-row"><span class="float-label">Estado</span><span class="float-value" id="float-state">Conectando...</span></div><div class="float-row"><span class="float-label">HMR</span><span class="float-value" id="float-hmr">\u2014</span></div><div class="float-row"><span class="float-label">Build</span><span class="float-value" id="float-build">\u2014</span></div></div><div class="float-panel-footer"><a href="/__float" class="float-link">Dashboard</a><a href="https://floatjs.dev/docs" target="_blank" class="float-link">Docs</a></div></div>';
   
   var styles = document.createElement('style');
   styles.textContent = '#__float-dev-indicator{position:fixed;bottom:16px;left:16px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px}.float-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,0.05);cursor:pointer;transition:all 0.15s}.float-btn:hover{border-color:#d1d5db;box-shadow:0 2px 8px rgba(0,0,0,0.08)}.float-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;transition:background 0.2s}.float-dot.connected{background:#22c55e}.float-dot.error{background:#ef4444}.float-dot.building{background:#eab308;animation:blink 0.8s infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}.float-panel{position:absolute;bottom:48px;left:0;width:240px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.1);opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.2s ease}.float-panel.open{opacity:1;visibility:visible;transform:translateY(0)}.float-panel-header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #f3f4f6;font-weight:600;color:#111827}.float-version{margin-left:auto;font-size:11px;font-weight:400;color:#9ca3af}.float-panel-body{padding:8px 0}.float-row{display:flex;justify-content:space-between;padding:8px 14px}.float-label{color:#6b7280}.float-value{color:#111827;font-weight:500}.float-value.success{color:#16a34a}.float-value.error{color:#dc2626}.float-panel-footer{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6}.float-link{flex:1;text-align:center;padding:8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;color:#374151;text-decoration:none;font-size:12px;font-weight:500;transition:all 0.15s}.float-link:hover{background:#f3f4f6;border-color:#d1d5db}';
@@ -1764,486 +1764,169 @@ function generateWelcomePage() {
   <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>">
+  <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>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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;
-    }
+    * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
     
-    .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 fade-in {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
     }
     
     @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;
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
     }
     
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
+    @keyframes pulse-glow {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 0.8; }
     }
     
-    /* 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; }
-    }
+    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
+    .animate-fade-in-delay { animation: fade-in 0.8s ease-out 0.2s forwards; opacity: 0; }
+    .animate-fade-in-delay-2 { animation: fade-in 0.8s ease-out 0.4s forwards; opacity: 0; }
+    .animate-fade-in-delay-3 { animation: fade-in 0.8s ease-out 0.6s forwards; opacity: 0; }
+    .animate-float { animation: float 3s ease-in-out infinite; }
+    .animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }
   </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>
+<body class="bg-black text-white min-h-screen flex flex-col">
   
-  <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>
-    </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>
-    </div>
+  <!-- Background Effects -->
+  <div class="fixed inset-0 pointer-events-none overflow-hidden">
+    <!-- Gradient orbs -->
+    <div class="absolute -top-40 -right-40 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse-glow"></div>
+    <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-violet-500/20 rounded-full blur-3xl animate-pulse-glow" style="animation-delay: 2s;"></div>
     
-    <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>
-      </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>
+    <!-- Grid pattern -->
+    <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
+  </div>
+  
+  <!-- Main Content -->
+  <main class="flex-1 flex items-center justify-center px-6 relative z-10">
+    <div class="max-w-2xl w-full text-center">
+      
+      <!-- Logo -->
+      <div class="animate-fade-in animate-float mb-8">
+        <svg class="w-20 h-20 mx-auto" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="logo-gradient" 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(#logo-gradient)"/>
+          <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(#logo-gradient)"/>
+          <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(#logo-gradient)"/>
+        </svg>
       </div>
-    </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>
+      
+      <!-- Title -->
+      <h1 class="animate-fade-in-delay text-4xl sm:text-5xl font-semibold tracking-tight mb-4">
+        Welcome to <span class="bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">Float.js</span>
+      </h1>
+      
+      <!-- Subtitle -->
+      <p class="animate-fade-in-delay-2 text-lg text-zinc-400 mb-12 max-w-md mx-auto">
+        The React framework built for speed. Get started by editing your first page.
+      </p>
+      
+      <!-- Code Block -->
+      <div class="animate-fade-in-delay-3 bg-zinc-900/80 backdrop-blur-sm border border-zinc-800 rounded-xl p-6 mb-8 text-left">
+        <div class="flex items-center gap-2 mb-4">
+          <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
+          <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
+          <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
+          <span class="ml-3 text-xs text-zinc-500 font-mono">app/page.tsx</span>
         </div>
-        <span class="code-title">app/page.tsx</span>
+        <pre class="text-sm font-mono overflow-x-auto"><code><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-blue-300">h1</span><span class="text-zinc-500">&gt;</span><span class="text-zinc-300">Hello, Float.js!</span><span class="text-zinc-500">&lt;/</span><span class="text-blue-300">h1</span><span class="text-zinc-500">&gt;</span>
+  );
+}</code></pre>
       </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>
-        </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>
+      
+      <!-- Action Buttons -->
+      <div class="animate-fade-in-delay-3 flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="https://floatjs.dev/docs" target="_blank" 
+           class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-black font-medium rounded-lg hover:bg-zinc-200 transition-colors">
+          <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>
+          Read the Docs
+        </a>
+        <a href="https://github.com/float-js/float-js" target="_blank"
+           class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-zinc-900 text-white font-medium rounded-lg border border-zinc-800 hover:bg-zinc-800 hover:border-zinc-700 transition-colors">
+          <svg class="w-4 h-4" 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>
+      
+      <!-- Quick Commands -->
+      <div class="animate-fade-in-delay-3 mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4 text-left">
+        <div class="p-4 bg-zinc-900/50 border border-zinc-800/50 rounded-lg">
+          <div class="text-xs text-zinc-500 mb-1 font-mono">Create page</div>
+          <code class="text-sm text-zinc-300 font-mono">mkdir app && touch app/page.tsx</code>
         </div>
-        <div class="code-line">
-          <span class="code-number">4</span>
-          <span class="code-content">  );</span>
+        <div class="p-4 bg-zinc-900/50 border border-zinc-800/50 rounded-lg">
+          <div class="text-xs text-zinc-500 mb-1 font-mono">Add route</div>
+          <code class="text-sm text-zinc-300 font-mono">touch app/about/page.tsx</code>
         </div>
-        <div class="code-line">
-          <span class="code-number">5</span>
-          <span class="code-content">}</span>
+        <div class="p-4 bg-zinc-900/50 border border-zinc-800/50 rounded-lg">
+          <div class="text-xs text-zinc-500 mb-1 font-mono">API route</div>
+          <code class="text-sm text-zinc-300 font-mono">touch app/api/route.ts</code>
         </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>
+  </main>
+  
+  <!-- Footer -->
+  <footer class="relative z-10 border-t border-zinc-800/50 py-8 px-6">
+    <div class="max-w-2xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+      
+      <!-- Left: Logo + Version -->
+      <div class="flex items-center gap-3">
+        <svg class="w-6 h-6" viewBox="0 0 200 200" fill="none">
+          <defs>
+            <linearGradient id="footer-gradient" 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(#footer-gradient)"/>
+          <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(#footer-gradient)"/>
+          <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(#footer-gradient)"/>
+        </svg>
+        <span class="text-sm text-zinc-500">Float.js v2.0.4</span>
       </div>
+      
+      <!-- Center: Creator Info -->
+      <div class="text-center">
+        <p class="text-sm text-zinc-400">
+          Created by <span class="text-white font-medium">Peter Fulle</span>
+        </p>
+        <a href="mailto:prfulle@gmail.com" class="text-xs text-zinc-500 hover:text-zinc-400 transition-colors">
+          prfulle@gmail.com
+        </a>
+      </div>
+      
+      <!-- Right: Links -->
+      <div class="flex items-center gap-4">
+        <a href="https://floatjs.dev" target="_blank" class="text-sm text-zinc-500 hover:text-white transition-colors">Docs</a>
+        <a href="https://github.com/float-js/float-js" target="_blank" class="text-sm text-zinc-500 hover:text-white transition-colors">GitHub</a>
+        <a href="https://x.com/floatjs" target="_blank" class="text-sm text-zinc-500 hover:text-white transition-colors">Twitter</a>
+      </div>
+      
     </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>
-    </div>
-    
-    <div class="footer">
-      Float.js v2.0.1 \u2014 Made with \u26A1 for the modern web
-    </div>
-  </div>
+  </footer>
+  
 </body>
 </html>`;
 }