@fuzionx/framework 0.1.45 → 0.1.47

package/cli/templates/make/app-ssr/views/default/pages/features.html

@@ -0,0 +1,373 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ t(key="feat.page_title", default="Features") }} — FuzionX Framework{% endblock %}
+{% block description %}{{ t(key="feat.meta_desc", default="Explore FuzionX features: Rust N-API Bridge, Multi-DB ORM, WebSocket, Task Queue, and more.") }}{% endblock %}
+{% block content %}
+
+<!-- ── Page Header ── -->
+<section class="section">
+  <div class="container">
+    <div class="section-header">
+      <div class="hero-badge" style="margin-bottom:1rem;">📖 {{ t(key="feat.badge", default="Framework Features") }}</div>
+      <h1 class="section-title">{{ t(key="feat.header_title_1", default="Built for") }} <span class="gradient-text">{{ t(key="feat.header_title_2", default="Production") }}</span></h1>
+      <p class="section-subtitle">{{ t(key="feat.header_sub", default="Every feature designed for performance, developer experience, and enterprise readiness.") }}</p>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 1: Rust N-API Bridge ── -->
+<section class="section section-dark" id="bridge">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">⚡</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.bridge_title", default="Rust N-API Bridge") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.bridge_sub", default="Native performance for core operations — no JavaScript overhead.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid">
+        <div class="feat-detail-card">
+          <h4>500K+ RPS</h4>
+          <p>{{ t(key="feat.bridge_rps", default="The HTTP engine runs entirely in Rust through N-API, delivering throughput that JavaScript-based servers cannot match. Request parsing, routing, and response serialization happen at native speed.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.bridge_zerocopy", default="Zero-Copy File Uploads") }}</h4>
+          <p>{{ t(key="feat.bridge_zerocopy_desc", default="Multipart parsing happens in Rust. Files are written directly to disk — the file buffer never enters JavaScript memory, making large file uploads safe and efficient.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.bridge_crypto", default="Native Crypto") }}</h4>
+          <p>{{ t(key="feat.bridge_crypto_desc", default="bcrypt, argon2id, AES-256-GCM, SHA-256, MD5, UUID v4 — all executed in Rust. No crypto module overhead, no C++ addon compilation issues.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.bridge_media", default="Media Processing") }}</h4>
+          <p>{{ t(key="feat.bridge_media_desc", default="Image resizing (Lanczos3), WebP conversion, and video thumbnail extraction powered by Rust image crate and ffmpeg bindings.") }}</p>
+        </div>
+      </div>
+      <div class="feat-code-block">
+        <div class="code-header">
+          <span class="code-dot red"></span>
+          <span class="code-dot yellow"></span>
+          <span class="code-dot green"></span>
+          <span class="code-title">{{ t(key="feat.bridge_code_title", default="Native Performance — Zero JS Overhead") }}</span>
+        </div>
+        <pre class="code-body"><span class="code-cmt">// All these operations run in Rust — no JS overhead</span>
+<span class="code-kw">const</span> hash = app.hash.<span class="code-fn">argon2</span>(password);           <span class="code-cmt">// Rust argon2id</span>
+<span class="code-kw">const</span> id   = app.crypto.<span class="code-fn">uuid</span>();                   <span class="code-cmt">// Rust UUID v4</span>
+<span class="code-kw">const</span> enc  = app.crypto.<span class="code-fn">encrypt</span>(key, plaintext);   <span class="code-cmt">// Rust AES-256-GCM</span>
+app.media.<span class="code-fn">resize</span>(input, output, <span class="code-num">800</span>, <span class="code-num">600</span>, <span class="code-str">'webp'</span>); <span class="code-cmt">// Rust image crate</span></pre>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 2: Multi-DB ORM ── -->
+<section class="section" id="orm">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">🗄️</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.orm_title", default="Multi-Database ORM") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.orm_sub", default="One API for MariaDB, PostgreSQL, and MongoDB. Model = Schema = Single source of truth.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid">
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.orm_unified", default="Unified Query API") }}</h4>
+          <p>{{ t(key="feat.orm_unified_desc", default="Write User.where('active', true).paginate(1, 20) and it works across all databases. No database-specific code needed for CRUD operations.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.orm_schema", default="Model-Based Schema Sync") }}</h4>
+          <p>{{ t(key="feat.orm_schema_desc", default="Define columns in the model with static columns, then run fx db:sync. No more writing migration files — the model IS the schema.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.orm_relations", default="Relationships") }}</h4>
+          <p>{{ t(key="feat.orm_relations_desc", default="hasMany, hasOne, belongsTo, belongsToMany — define relations as methods. Eager loading with .with('posts.comments').") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.orm_access", default="3-Level Access") }}</h4>
+          <p>{{ t(key="feat.orm_access_desc", default="Unified API for 99% of cases → Raw Query for DB-specific features → Native driver access when you need full control.") }}</p>
+        </div>
+      </div>
+      <div class="feat-code-block">
+        <div class="code-header">
+          <span class="code-dot red"></span>
+          <span class="code-dot yellow"></span>
+          <span class="code-dot green"></span>
+          <span class="code-title">models/User.js</span>
+        </div>
+        <pre class="code-body"><span class="code-kw">import</span> { Model } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">export default class</span> <span class="code-fn">User</span> <span class="code-kw">extends</span> Model {
+    <span class="code-kw">static</span> table = <span class="code-str">'users'</span>;
+    <span class="code-kw">static</span> timestamps = <span class="code-num">true</span>;
+
+    <span class="code-kw">static</span> columns = {
+        id:    { type: <span class="code-str">'increments'</span> },
+        name:  { type: <span class="code-str">'string'</span>, length: <span class="code-num">100</span> },
+        email: { type: <span class="code-str">'string'</span>, length: <span class="code-num">150</span>, unique: <span class="code-num">true</span> },
+    };
+
+    <span class="code-fn">posts</span>()   { <span class="code-kw">return</span> <span class="code-kw">this</span>.hasMany(<span class="code-str">'Post'</span>); }
+    <span class="code-fn">profile</span>() { <span class="code-kw">return</span> <span class="code-kw">this</span>.hasOne(<span class="code-str">'Profile'</span>); }
+}</pre>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 3: SSR + SPA ── -->
+<section class="section section-dark" id="rendering">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">🎨</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.ssr_title", default="SSR + SPA Hybrid") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.ssr_sub", default="Server-rendered pages and single-page apps in one project with domain routing.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid">
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ssr_tera", default="Tera Template Engine") }}</h4>
+          <p>{{ t(key="feat.ssr_tera_desc", default="Jinja2-compatible template engine compiled in Rust. Layouts, blocks, inheritance, filters, and macros for fast SSR rendering.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ssr_theme", default="Theme System") }}</h4>
+          <p>{{ t(key="feat.ssr_theme_desc", default="Multiple view themes with views/{theme}/ structure. Switch themes via config without changing any controller code.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ssr_multiapp", default="Multi-App Routing") }}</h4>
+          <p>{{ t(key="feat.ssr_multiapp_desc", default="Route different domains to different apps: api.example.com → spa, www.example.com → ssr. One codebase, multiple frontends.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ssr_i18n", default="Built-in i18n") }}</h4>
+          <p>{{ t(key="feat.ssr_i18n_desc", default="JSON-based translations with auto-detection, fallback locales, and missing key auto-complete.") }} <code>ctx.t('key')</code> / <code>{{ "{{" }} t(key="...") }}</code></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 4: WebSocket ── -->
+<section class="section" id="websocket">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">🔌</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.ws_title", default="Real-time WebSocket") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.ws_sub", default="Namespace-based event routing with rooms, middleware sharing, and multi-server Hub.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid">
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ws_dsl", default="Event Routing DSL") }}</h4>
+          <p>{{ t(key="feat.ws_dsl_desc", default="static events(e) declares event → handler mappings, just like controller routes. Clean, declarative, and auto-scanned from ws/ folder.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ws_rooms", default="Rooms") }}</h4>
+          <p>{{ t(key="feat.ws_rooms_desc", default="socket.join('room:123'), socket.to('room:123').send({...}) — built-in room management without external libraries.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ws_middleware", default="Middleware Sharing") }}</h4>
+          <p>{{ t(key="feat.ws_middleware_desc", default="Reuse the same HTTP middleware for WebSocket handshake. Auth middleware works for both HTTP and WS connections.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.ws_hub", default="Hub Broadcasting") }}</h4>
+          <p>{{ t(key="feat.ws_hub_desc", default="Multi-server? Just add { hub: true } to broadcast. Messages route through Hub server to all connected instances.") }}</p>
+        </div>
+      </div>
+      <div class="feat-code-block">
+        <div class="code-header">
+          <span class="code-dot red"></span>
+          <span class="code-dot yellow"></span>
+          <span class="code-dot green"></span>
+          <span class="code-title">ws/ChatHandler.js</span>
+        </div>
+        <pre class="code-body"><span class="code-kw">import</span> { WsHandler } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">export default class</span> <span class="code-fn">ChatHandler</span> <span class="code-kw">extends</span> WsHandler {
+    <span class="code-kw">static</span> namespace = <span class="code-str">'/chat'</span>;
+    <span class="code-kw">static</span> middleware = [<span class="code-str">'auth'</span>];
+
+    <span class="code-kw">static</span> <span class="code-fn">events</span>(e) {
+        e.on(<span class="code-str">'chat'</span>,   <span class="code-kw">this</span>.handleChat);
+        e.on(<span class="code-str">'typing'</span>, <span class="code-kw">this</span>.handleTyping);
+    }
+
+    <span class="code-fn">handleChat</span>(socket, data) {
+        socket.to(<span class="code-str">`room:${data.roomId}`</span>).send({
+            type: <span class="code-str">'chat'</span>,
+            data: { user: socket.user, message: data.message }
+        });
+    }
+}</pre>
+      </div>
+      <div style="text-align:center; margin-top:2rem;">
+        <a href="/chat" class="btn btn-hero-primary"><span>{{ t(key="feat.btn_try_chat", default="Try Live Chat Demo →") }}</span></a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 5: Task Queue ── -->
+<section class="section section-dark" id="queue">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">⏰</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.queue_title", default="Task Queue + Workers") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.queue_sub", default="Three ways to handle background work — scheduled, queued, and CPU-isolated.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid feat-detail-grid-3">
+        <div class="feat-detail-card">
+          <h4>📅 {{ t(key="feat.queue_scheduled", default="Scheduled Jobs") }}</h4>
+          <p>{{ t(key="feat.queue_scheduled_desc", default="Cron-based recurring tasks. static schedule = 'daily:02:00'. Runs on master process with Redis distributed lock for multi-server.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>📬 {{ t(key="feat.queue_queued", default="Queued Tasks") }}</h4>
+          <p>{{ t(key="feat.queue_queued_desc", default="Async dispatch with retries: app.dispatch('SendEmail', data). Memory or Redis backend. Failed tasks call failed() hook.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>🧵 WorkerPool</h4>
+          <p>{{ t(key="feat.queue_worker_desc", default="CPU-heavy work in worker_threads: app.worker.run('csv-parser', data). Prevents event loop blocking. Timeout + auto-cleanup.") }}</p>
+        </div>
+      </div>
+      <div class="feat-code-block">
+        <div class="code-header">
+          <span class="code-dot red"></span>
+          <span class="code-dot yellow"></span>
+          <span class="code-dot green"></span>
+          <span class="code-title">jobs/SendWelcomeEmail.js</span>
+        </div>
+        <pre class="code-body"><span class="code-kw">import</span> { Task } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">export default class</span> <span class="code-fn">SendWelcomeEmail</span> <span class="code-kw">extends</span> Task {
+    <span class="code-kw">static</span> queue   = <span class="code-str">'emails'</span>;
+    <span class="code-kw">static</span> retries = <span class="code-num">3</span>;
+
+    <span class="code-kw">async</span> <span class="code-fn">handle</span>(data) {
+        <span class="code-kw">const</span> user = <span class="code-kw">await</span> <span class="code-kw">this</span>.db.User.find(data.userId);
+        <span class="code-kw">await</span> <span class="code-kw">this</span>.service(<span class="code-str">'MailService'</span>).sendWelcome(user.email);
+    }
+
+    <span class="code-kw">async</span> <span class="code-fn">failed</span>(data, error) {
+        <span class="code-kw">this</span>.logger.error(<span class="code-str">'Email failed'</span>, { userId: data.userId });
+    }
+}</pre>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 6: Security ── -->
+<section class="section" id="security">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">🔐</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.sec_title", default="Enterprise Security") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.sec_sub", default="Production-grade security built into every layer — from wire encryption to password hashing.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid">
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.sec_asp", default="ASP Wire Encryption") }}</h4>
+          <p>{{ t(key="feat.sec_asp_desc", default="FuzionX Stealth Protocol encrypts all HTTP request/response bodies on the wire. Transparent to application code, impenetrable to MITM attacks.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.sec_hash", default="Native Password Hashing") }}</h4>
+          <p>{{ t(key="feat.sec_hash_desc", default="bcrypt (cost 12) and argon2id hashing in Rust — orders of magnitude faster than JavaScript implementations with the same security guarantees.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.sec_session", default="Session + JWT Auth") }}</h4>
+          <p>{{ t(key="feat.sec_session_desc", default="File-based or Redis session store. JWT access/refresh token rotation. Built-in auth() middleware with route guards.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.sec_rate", default="Rate Limiting + CSRF") }}</h4>
+          <p>{{ t(key="feat.sec_rate_desc", default="Per-IP rate limiting in the Rust bridge layer. CSRF token generation and validation. IP whitelist/blacklist. HSTS and CSP headers.") }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Feature 7: DX ── -->
+<section class="section section-dark" id="dx">
+  <div class="container">
+    <div class="feat-detail">
+      <div class="feat-detail-header">
+        <span class="feat-detail-icon">🛠️</span>
+        <div>
+          <h2 class="feat-detail-title">{{ t(key="feat.dx_title", default="Developer Experience") }}</h2>
+          <p class="feat-detail-sub">{{ t(key="feat.dx_sub", default="CLI scaffolding, auto-scanning, hot reload, OpenAPI docs — everything to keep you productive.") }}</p>
+        </div>
+      </div>
+      <div class="feat-detail-grid">
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.dx_cli", default="CLI Code Generator") }}</h4>
+          <p>{{ t(key="feat.dx_cli_desc", default="fx make:controller, fx make:model, fx make:service — scaffold any component instantly with proper boilerplate.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.dx_autoscan", default="Auto-Scanning") }}</h4>
+          <p>{{ t(key="feat.dx_autoscan_desc", default="Drop a file in controllers/, services/, ws/, or jobs/ — the framework discovers and registers it automatically. Zero manual wiring.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.dx_openapi", default="OpenAPI Auto-Generation") }}</h4>
+          <p>{{ t(key="feat.dx_openapi_desc", default="Swagger UI at /docs with zero configuration. Route definitions are automatically converted to OpenAPI 3.0 spec.") }}</p>
+        </div>
+        <div class="feat-detail-card">
+          <h4>{{ t(key="feat.dx_test", default="Testing Helpers") }}</h4>
+          <p>{{ t(key="feat.dx_test_desc", default="In-process HTTP test client, database transaction rollbacks, isolated test contexts. vitest integration out of the box.") }}</p>
+        </div>
+      </div>
+      <div class="feat-code-block">
+        <div class="code-header">
+          <span class="code-dot red"></span>
+          <span class="code-dot yellow"></span>
+          <span class="code-dot green"></span>
+          <span class="code-title">Terminal</span>
+        </div>
+        <pre class="code-body"><span class="code-cmt">$ npx create-fuzionx my-app</span>
+<span class="code-cmt">$ cd my-app</span>
+<span class="code-cmt">$ fx make:controller User</span>     <span class="code-str"># → controllers/UserController.js</span>
+<span class="code-cmt">$ fx make:model User</span>          <span class="code-str"># → models/User.js</span>
+<span class="code-cmt">$ fx make:service User</span>        <span class="code-str"># → services/UserService.js</span>
+<span class="code-cmt">$ fx db:sync --apply</span>          <span class="code-str"># → Schema synced ✓</span>
+<span class="code-cmt">$ fx dev</span>                       <span class="code-str"># → 🚀 Running on http://localhost:3000</span></pre>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── CTA ── -->
+<section class="cta-section">
+  <div class="container">
+    <div class="cta-card glass-card">
+      <h2 class="cta-title">{{ t(key="feat.cta_title_1", default="Start Building") }} <span class="gradient-text">{{ t(key="feat.cta_title_2", default="Today") }}</span></h2>
+      <p class="cta-subtitle">{{ t(key="feat.cta_sub", default="One command to scaffold. Zero configuration to start.") }}</p>
+      <div class="cta-install">
+        <code>npx create-fuzionx my-app</code>
+      </div>
+      <div class="hero-actions" style="margin-top: 1.5rem;">
+        <a href="/" class="btn btn-hero-outline"><span>← {{ t(key="feat.btn_back", default="Back to Home") }}</span></a>
+        <a href="/chat" class="btn btn-hero-primary"><span>{{ t(key="feat.btn_chat", default="Try Chat Demo") }}</span></a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-content">
+      <span class="footer-brand">FuzionX</span>
+      <span class="footer-text">{{ t(key="home.footer", default="Rust-powered Node.js framework for the modern web.") }}</span>
+    </div>
+  </div>
+</footer>
+
+{% endblock %}

package/cli/templates/make/app-ssr/views/default/pages/home.html

@@ -0,0 +1,258 @@
+{% extends "layouts/main.html" %}
+{% block title %}FuzionX — {{ t(key="home.title", default="Rust-Powered Full-Stack Node.js Framework") }}{% endblock %}
+{% block description %}{{ t(key="home.meta_desc", default="Build blazing-fast web applications with FuzionX. Rust N-API bridge delivering 500K+ RPS, multi-DB ORM, real-time WebSocket, and enterprise-grade security.") }}{% endblock %}
+{% block content %}
+
+<!-- ── Hero Section ── -->
+<section class="hero-section">
+  <div class="hero-particles">
+    <div class="particle p1"></div>
+    <div class="particle p2"></div>
+    <div class="particle p3"></div>
+    <div class="particle p4"></div>
+    <div class="particle p5"></div>
+    <div class="particle p6"></div>
+  </div>
+  <div class="container hero-container">
+    <div class="hero-badge">⚡ {{ t(key="home.hero_badge", default="Powered by Rust N-API") }}</div>
+    <h1 class="hero-title">
+      {{ t(key="home.hero_title_1", default="Build") }} <span class="gradient-text">{{ t(key="home.hero_title_2", default="Blazing Fast") }}</span><br>
+      {{ t(key="home.hero_title_3", default="Web Applications") }}
+    </h1>
+    <p class="hero-subtitle">
+      {{ t(key="home.hero_sub_1", default="Full-stack MVC framework for Node.js with a Rust-powered core engine.") }}<br>
+      {{ t(key="home.hero_sub_2", default="500K+ requests per second. Zero-copy file handling. Native-speed crypto.") }}
+    </p>
+    <div class="hero-actions">
+      <a href="/features" class="btn btn-hero-primary">
+        <span>{{ t(key="home.btn_features", default="Explore Features") }}</span>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </a>
+      <a href="/chat" class="btn btn-hero-outline">
+        <span>{{ t(key="home.btn_demo", default="Live Demo") }}</span>
+      </a>
+    </div>
+    <div class="hero-code">
+      <div class="code-header">
+        <span class="code-dot red"></span>
+        <span class="code-dot yellow"></span>
+        <span class="code-dot green"></span>
+        <span class="code-title">app.js</span>
+      </div>
+      <pre class="code-body"><span class="code-kw">import</span> { Application } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">const</span> app = <span class="code-kw">new</span> <span class="code-fn">Application</span>({ configPath: <span class="code-str">'./fuzionx.yaml'</span> });
+
+<span class="code-kw">await</span> app.<span class="code-fn">boot</span>();
+<span class="code-kw">await</span> app.<span class="code-fn">listen</span>();  <span class="code-cmt">// 🚀 500K+ RPS ready</span></pre>
+    </div>
+  </div>
+</section>
+
+<!-- ── Stats Bar ── -->
+<section class="stats-bar">
+  <div class="container">
+    <div class="stats-bar-grid">
+      <div class="stat-bar-item">
+        <span class="stat-bar-number">500K+</span>
+        <span class="stat-bar-label">{{ t(key="home.stat_rps", default="Requests/sec") }}</span>
+      </div>
+      <div class="stat-bar-divider"></div>
+      <div class="stat-bar-item">
+        <span class="stat-bar-number">3</span>
+        <span class="stat-bar-label">{{ t(key="home.stat_db", default="Database Drivers") }}</span>
+      </div>
+      <div class="stat-bar-divider"></div>
+      <div class="stat-bar-item">
+        <span class="stat-bar-number">0</span>
+        <span class="stat-bar-label">{{ t(key="home.stat_zero_copy", default="Memory Copy Uploads") }}</span>
+      </div>
+      <div class="stat-bar-divider"></div>
+      <div class="stat-bar-item">
+        <span class="stat-bar-number">21</span>
+        <span class="stat-bar-label">{{ t(key="home.stat_modules", default="Core Modules") }}</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Core Features Grid ── -->
+<section class="section">
+  <div class="container">
+    <div class="section-header">
+      <h2 class="section-title">{{ t(key="home.feat_title_1", default="Everything You Need.") }}<br><span class="gradient-text">{{ t(key="home.feat_title_2", default="Nothing You Don't.") }}</span></h2>
+      <p class="section-subtitle">{{ t(key="home.feat_subtitle", default="A production-ready framework that ships with batteries included — powered by Rust under the hood.") }}</p>
+    </div>
+    <div class="features-showcase">
+      <div class="feature-showcase-card">
+        <div class="feature-icon-wrap"><span class="feature-icon">⚡</span></div>
+        <h3>{{ t(key="home.feat_bridge", default="Rust N-API Bridge") }}</h3>
+        <p>{{ t(key="home.feat_bridge_desc", default="HTTP server, session management, cryptography, and file processing at native speed. No JavaScript overhead for core operations.") }}</p>
+        <span class="feature-tag tag-rust">Rust</span>
+      </div>
+      <div class="feature-showcase-card">
+        <div class="feature-icon-wrap"><span class="feature-icon">🗄️</span></div>
+        <h3>{{ t(key="home.feat_orm", default="Multi-DB ORM") }}</h3>
+        <p>{{ t(key="home.feat_orm_desc", default="One unified API for MariaDB, PostgreSQL, and MongoDB. Model-based schema sync replaces migration files.") }}</p>
+        <span class="feature-tag tag-node">Node.js</span>
+      </div>
+      <div class="feature-showcase-card">
+        <div class="feature-icon-wrap"><span class="feature-icon">🔌</span></div>
+        <h3>{{ t(key="home.feat_ws", default="Real-time WebSocket") }}</h3>
+        <p>{{ t(key="home.feat_ws_desc", default="Namespace routing, rooms, event-based handlers, and multi-server Hub broadcasting built into the framework.") }}</p>
+        <span class="feature-tag tag-ws">WebSocket</span>
+      </div>
+      <div class="feature-showcase-card">
+        <div class="feature-icon-wrap"><span class="feature-icon">🎨</span></div>
+        <h3>{{ t(key="home.feat_ssr", default="SSR + SPA Hybrid") }}</h3>
+        <p>{{ t(key="home.feat_ssr_desc", default="Tera template engine for SSR pages alongside Vue.js SPA — run both in a single project with domain-based routing.") }}</p>
+        <span class="feature-tag tag-node">Hybrid</span>
+      </div>
+      <div class="feature-showcase-card">
+        <div class="feature-icon-wrap"><span class="feature-icon">🔐</span></div>
+        <h3>{{ t(key="home.feat_security", default="Enterprise Security") }}</h3>
+        <p>{{ t(key="home.feat_security_desc", default="Native bcrypt/argon2 hashing, AES-256-GCM encryption, ASP wire protocol, CSRF protection, and rate limiting.") }}</p>
+        <span class="feature-tag tag-rust">Rust</span>
+      </div>
+      <div class="feature-showcase-card">
+        <div class="feature-icon-wrap"><span class="feature-icon">⏰</span></div>
+        <h3>{{ t(key="home.feat_queue", default="Task Queue + Workers") }}</h3>
+        <p>{{ t(key="home.feat_queue_desc", default="Scheduled jobs (cron), async task queues with retry logic, and WorkerPool for CPU-heavy operations in isolated threads.") }}</p>
+        <span class="feature-tag tag-node">Node.js</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Architecture ── -->
+<section class="section section-dark">
+  <div class="container">
+    <div class="section-header">
+      <h2 class="section-title">{{ t(key="home.arch_title_1", default="Layered") }} <span class="gradient-text">{{ t(key="home.arch_title_2", default="Architecture") }}</span></h2>
+      <p class="section-subtitle">{{ t(key="home.arch_subtitle", default="Three-tier design separating concerns for maximum performance and developer ergonomics.") }}</p>
+    </div>
+    <div class="arch-layers">
+      <div class="arch-layer arch-layer-top">
+        <div class="arch-layer-badge">{{ t(key="home.arch_you_write", default="You Write") }}</div>
+        <h4>@fuzionx/framework</h4>
+        <p>{{ t(key="home.arch_framework_desc", default="Controllers, Services, Models, Middleware, WebSocket Handlers, Jobs — Laravel-style MVC with full DI container") }}</p>
+      </div>
+      <div class="arch-connector">
+        <svg width="24" height="30" viewBox="0 0 24 30"><path d="M12 0v24M6 18l6 6 6-6" stroke="rgba(102,126,234,0.6)" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
+      </div>
+      <div class="arch-layer arch-layer-mid">
+        <div class="arch-layer-badge">{{ t(key="home.arch_engine", default="Engine") }}</div>
+        <h4>@fuzionx/core</h4>
+        <p>{{ t(key="home.arch_core_desc", default="Express-level HTTP engine wrapping the Rust bridge. Routing, request/response lifecycle, WebSocket server.") }}</p>
+      </div>
+      <div class="arch-connector">
+        <svg width="24" height="30" viewBox="0 0 24 30"><path d="M12 0v24M6 18l6 6 6-6" stroke="rgba(118,75,162,0.6)" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
+      </div>
+      <div class="arch-layer arch-layer-bottom">
+        <div class="arch-layer-badge">{{ t(key="home.arch_native", default="Native") }}</div>
+        <h4>@fuzionx/bridge</h4>
+        <p>{{ t(key="home.arch_bridge_desc", default="Rust N-API binary — libuv Fusion HTTP, native crypto, media processing, file I/O. Zero-copy where possible.") }}</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── Comparison ── -->
+<section class="section">
+  <div class="container">
+    <div class="section-header">
+      <h2 class="section-title">{{ t(key="home.why_title_1", default="Why") }} <span class="gradient-text">FuzionX</span>?</h2>
+      <p class="section-subtitle">{{ t(key="home.why_subtitle", default="See how FuzionX stacks up against popular Node.js frameworks.") }}</p>
+    </div>
+    <div class="comparison-table-wrap">
+      <table class="comparison-table">
+        <thead>
+          <tr>
+            <th>{{ t(key="home.cmp_feature", default="Feature") }}</th>
+            <th class="highlight-col">FuzionX</th>
+            <th>Express</th>
+            <th>NestJS</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{{ t(key="home.cmp_http", default="HTTP Engine") }}</td>
+            <td class="highlight-col"><span class="check">✓</span> Rust N-API</td>
+            <td>JavaScript</td>
+            <td>JavaScript</td>
+          </tr>
+          <tr>
+            <td>{{ t(key="home.cmp_orm", default="ORM Built-in") }}</td>
+            <td class="highlight-col"><span class="check">✓</span> Multi-DB</td>
+            <td><span class="cross">✗</span> {{ t(key="home.cmp_3rd_party", default="3rd party") }}</td>
+            <td><span class="cross">✗</span> TypeORM plugin</td>
+          </tr>
+          <tr>
+            <td>WebSocket</td>
+            <td class="highlight-col"><span class="check">✓</span> Native + Hub</td>
+            <td><span class="cross">✗</span> socket.io</td>
+            <td><span class="cross">✗</span> Gateway plugin</td>
+          </tr>
+          <tr>
+            <td>{{ t(key="home.cmp_upload", default="File Upload") }}</td>
+            <td class="highlight-col"><span class="check">✓</span> Zero-copy Rust</td>
+            <td>multer (JS memory)</td>
+            <td>multer (JS memory)</td>
+          </tr>
+          <tr>
+            <td>Crypto/Hash</td>
+            <td class="highlight-col"><span class="check">✓</span> Native Rust</td>
+            <td>Node.js crypto</td>
+            <td>Node.js crypto</td>
+          </tr>
+          <tr>
+            <td>{{ t(key="home.cmp_queue", default="Task Queue") }}</td>
+            <td class="highlight-col"><span class="check">✓</span> {{ t(key="home.cmp_builtin", default="Built-in") }}</td>
+            <td><span class="cross">✗</span> bull/agenda</td>
+            <td><span class="cross">✗</span> bull plugin</td>
+          </tr>
+          <tr>
+            <td>{{ t(key="home.cmp_schema", default="Schema Sync") }}</td>
+            <td class="highlight-col"><span class="check">✓</span> {{ t(key="home.cmp_model_based", default="Model-based") }}</td>
+            <td><span class="cross">✗</span> N/A</td>
+            <td><span class="cross">✗</span> Migrations</td>
+          </tr>
+          <tr>
+            <td>i18n</td>
+            <td class="highlight-col"><span class="check">✓</span> {{ t(key="home.cmp_builtin", default="Built-in") }}</td>
+            <td><span class="cross">✗</span> i18next</td>
+            <td><span class="cross">✗</span> nestjs-i18n</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+
+<!-- ── CTA ── -->
+<section class="cta-section">
+  <div class="container">
+    <div class="cta-card glass-card">
+      <h2 class="cta-title">{{ t(key="home.cta_title_1", default="Ready to Build") }} <span class="gradient-text">{{ t(key="home.cta_title_2", default="Something Fast") }}</span>?</h2>
+      <p class="cta-subtitle">{{ t(key="home.cta_subtitle", default="Get started with FuzionX in seconds. One command, zero configuration.") }}</p>
+      <div class="cta-install">
+        <code>npx create-fuzionx my-app</code>
+      </div>
+      <div class="hero-actions" style="margin-top: 1.5rem;">
+        <a href="/features" class="btn btn-hero-primary"><span>{{ t(key="home.btn_all_features", default="View All Features") }}</span></a>
+        <a href="/chat" class="btn btn-hero-outline"><span>{{ t(key="home.btn_try_chat", default="Try Chat Demo") }}</span></a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-content">
+      <span class="footer-brand">FuzionX</span>
+      <span class="footer-text">{{ t(key="home.footer", default="Rust-powered Node.js framework for the modern web.") }}</span>
+    </div>
+  </div>
+</footer>
+
+{% endblock %}