From 8cfa39a4d433a59a1ef2551f80d5fdd9016e38cf Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 11 Feb 2026 17:29:25 +0100
Subject: [PATCH] Refactor: move ASCII generator to a dedicated page and embed
 navigation directly into the homepage.

---
 src/components/Sidebar.astro | 246 ----------------
 src/pages/ascii.astro        | 362 +++++++++++++++++++++++
 src/pages/index.astro        | 555 ++++++++++++-----------------------
 3 files changed, 553 insertions(+), 610 deletions(-)
 delete mode 100644 src/components/Sidebar.astro
 create mode 100644 src/pages/ascii.astro

diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
deleted file mode 100644
index 23d3bfe..0000000
--- a/src/components/Sidebar.astro
+++ /dev/null
@@ -1,246 +0,0 @@
----
-import { Zap, FileText, Mail } from "@lucide/astro";
----
-
-<aside class="sidebar">
-    <div class="sidebar-content">
-        <div class="brand-group">
-            <a href="/" class="brand-link">
-                <h1 class="brand-title">SYNTAXBULLET</h1>
-            </a>
-            <div class="brand-subtitle">
-                FULL STACK ENGINEER
-                <span class="muted">|</span>
-                CREATIVE TECHNOLOGIST
-            </div>
-        </div>
-
-        <p class="brand-bio">
-            Crafting high-performance digital experiences at the intersection of
-            engineering, design, and artificial intelligence.
-        </p>
-
-        <div class="sidebar-actions">
-            <a href="/" class="sidebar-link desktop-only">
-                <span class="icon"><Zap size={20} /></span> GENERATE
-            </a>
-            <a href="/blog" class="sidebar-link">
-                <span class="icon"><FileText size={20} /></span> BLOG
-            </a>
-            <a href="mailto:me@syntaxbullet.com" class="sidebar-link">
-                <span class="icon"><Mail size={20} /></span> CONTACT
-            </a>
-        </div>
-
-        <div class="sidebar-social">
-            <a
-                href="https://git.ayau.me/syntaxbullet"
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="Git"
-            >
-                <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path
-                        d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
-                    ></path>
-                    <path d="M9 18c-4.51 2-5-2-7-2"></path>
-                </svg>
-            </a>
-            <a
-                href="https://www.linkedin.com/in/ivan-jovanovic-51b319187/"
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="LinkedIn"
-            >
-                <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path
-                        d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
-                    ></path>
-                    <rect width="4" height="12" x="2" y="9"></rect>
-                    <circle cx="4" cy="4" r="2"></circle>
-                </svg>
-            </a>
-        </div>
-    </div>
-</aside>
-
-<style>
-    .sidebar {
-        width: 25%;
-        min-width: 320px;
-        max-width: 480px;
-        border-right: 1px solid rgba(255, 255, 255, 0.1);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        background: #000;
-        position: relative;
-        z-index: 10;
-        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
-    }
-
-    .mobile-header {
-        display: none;
-    }
-
-    .sidebar-content {
-        padding: 4rem 3rem;
-        display: flex;
-        flex-direction: column;
-        gap: 2.5rem;
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-    .brand-group {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .brand-title {
-        font-size: 2.5rem;
-        font-weight: 900;
-        margin: 0;
-        line-height: 1;
-        letter-spacing: -1px;
-        color: #fff;
-        word-break: break-word; /* Prevent overflow */
-        max-width: 100%;
-    }
-
-    .brand-link {
-        text-decoration: none;
-        color: inherit;
-    }
-
-    .brand-subtitle {
-        font-size: 0.75rem;
-        color: rgba(255, 255, 255, 0.5);
-        font-family: var(--font-mono);
-        letter-spacing: 1px;
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .muted {
-        color: rgba(255, 255, 255, 0.2);
-    }
-
-    .brand-bio {
-        font-size: 1rem;
-        line-height: 1.6;
-        color: rgba(255, 255, 255, 0.8);
-        max-width: 400px;
-    }
-
-    .sidebar-actions {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-        align-items: flex-start;
-    }
-
-    .sidebar-link {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        color: rgba(255, 255, 255, 0.6);
-        text-decoration: none;
-        font-family: var(--font-mono);
-        font-size: 0.9rem;
-        padding: 4px 0;
-        transition: all 0.2s;
-    }
-
-    .sidebar-link:hover {
-        color: var(--text-color);
-        transform: translateX(4px);
-    }
-
-    .sidebar-link .icon {
-        width: 20px;
-        display: inline-block;
-        text-align: center;
-    }
-
-    .sidebar-social {
-        display: flex;
-        gap: 1.5rem;
-        margin-top: 1rem;
-        padding-top: 1.5rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .sidebar-social a {
-        color: rgba(255, 255, 255, 0.4);
-        transition: color 0.2s;
-    }
-
-    .sidebar-social a:hover {
-        color: #fff;
-    }
-
-    /* Responsive */
-    @media (max-width: 1600px) {
-        .sidebar {
-            width: 100%;
-            height: 100%;
-            max-width: none;
-            min-width: 0;
-            border-right: none;
-            border-bottom: none;
-            padding: 0;
-            align-items: center; /* Center horizontally */
-        }
-
-        .mobile-header {
-            display: none;
-        }
-
-        .sidebar-content {
-            padding: 2rem;
-            align-items: center;
-            text-align: center;
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            height: 100%;
-        }
-
-        .brand-subtitle,
-        .sidebar-actions {
-            justify-content: center;
-            align-items: center;
-        }
-
-        .desktop-only {
-            display: none !important;
-        }
-    }
-</style>
-
-<script>
-    // No script needed for sidebar anymore as it is always visible and static
-</script>
diff --git a/src/pages/ascii.astro b/src/pages/ascii.astro
new file mode 100644
index 0000000..bc61781
--- /dev/null
+++ b/src/pages/ascii.astro
@@ -0,0 +1,362 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Tooltip from "../components/Tooltip.astro";
+import ControlPanel from "../components/ControlPanel.astro";
+---
+
+<Layout title="ASCII Art Generator - Syntaxbullet">
+    <div class="ascii-layout">
+        <main class="ascii-workspace">
+            <div class="canvas-layer">
+                <div id="loading">Loading...</div>
+                <pre id="ascii-result"></pre>
+                <canvas id="ascii-canvas"></canvas>
+            </div>
+
+            <ControlPanel />
+
+            <div id="landing-screen" class="landing-overlay">
+                <div class="landing-content">
+                    <h1>ASCII Art Generator</h1>
+                    <p>
+                        Generate stunning ASCII art from images. Pull a random
+                        image from an anime API or upload your own to get
+                        started.
+                    </p>
+                    <div class="landing-buttons">
+                        <button id="btn-start-api" class="landing-btn"
+                            >Anime API</button
+                        >
+                        <button id="btn-start-upload" class="landing-btn"
+                            >Upload Image</button
+                        >
+                    </div>
+                    <p class="disclaimer">
+                        <b>Disclaimer:</b> Images loaded via the API are not my own
+                        and are not filtered or curated. In rare cases, they might
+                        contain sensitive material.
+                    </p>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        import { AsciiController } from "../scripts/ascii-controller";
+        import { ImageQueue } from "../scripts/image-queue";
+        import { UIBindings } from "../scripts/ui-bindings";
+
+        if (window.__ASCII_APP__) {
+            console.log("♻️ Disposing previous application instance...");
+            try {
+                window.__ASCII_APP__.dispose();
+            } catch (e) {
+                console.error("Failed to dispose previous instance:", e);
+            }
+        }
+
+        const canvas = document.getElementById(
+            "ascii-canvas",
+        ) as HTMLCanvasElement;
+        const asciiResult = document.getElementById(
+            "ascii-result",
+        ) as HTMLPreElement;
+        const loadingIndicator = document.getElementById(
+            "loading",
+        ) as HTMLDivElement;
+
+        if (!canvas || !asciiResult || !loadingIndicator) {
+            throw new Error("Critical UI elements missing");
+        }
+
+        let controller: AsciiController;
+        let queue: ImageQueue;
+        let ui: UIBindings;
+
+        controller = new AsciiController(
+            canvas,
+            asciiResult,
+            loadingIndicator,
+        );
+        queue = new ImageQueue(2);
+        ui = new UIBindings(controller, queue, loadNewImage);
+
+        window.__ASCII_APP__ = {
+            controller: controller!,
+            queue: queue!,
+            ui: ui!,
+            dispose: () => {
+                controller?.dispose();
+                ui?.dispose();
+                queue?.dispose();
+                window.__ASCII_APP__ = undefined;
+            },
+        };
+
+        controller.onSettingsChanged(() => ui!.updateUI());
+
+        let retryCount = 0;
+        const MAX_RETRIES = 3;
+
+        async function loadNewImage(): Promise<void> {
+            if (!controller || !queue || !ui) return;
+
+            try {
+                let item;
+
+                if (queue.getLength() === 0) {
+                    controller.showLoading("FETCHING...");
+                    item = await queue.fetchDirect();
+                } else {
+                    item = queue.pop()!;
+                    queue.ensureFilled();
+                }
+
+                controller.setCurrentImage(item.url, item.suggestions);
+                retryCount = 0;
+
+                ui.updateUI();
+                await controller.generate();
+                controller.hideLoading();
+            } catch (e) {
+                console.error(e);
+                if (retryCount < MAX_RETRIES) {
+                    retryCount++;
+                    asciiResult.textContent = `Connection lost. Retrying (${retryCount}/${MAX_RETRIES})...`;
+                    setTimeout(loadNewImage, 2000);
+                } else {
+                    asciiResult.textContent =
+                        "Connection failed. Please refresh.";
+                    controller.hideLoading();
+                }
+            }
+        }
+
+        ui.init();
+
+        const landingScreen = document.getElementById("landing-screen");
+        const btnStartApi = document.getElementById("btn-start-api");
+        const btnStartUpload = document.getElementById("btn-start-upload");
+        const fileInput = document.getElementById(
+            "file-upload",
+        ) as HTMLInputElement;
+
+        const controlPanel = document.querySelector(".control-panel");
+
+        const hideLanding = () => {
+            landingScreen?.classList.add("hidden");
+            if (controlPanel) {
+                controlPanel.classList.add("visible");
+            }
+        };
+
+        btnStartApi?.addEventListener("click", () => {
+            hideLanding();
+            loadNewImage().then(() => {
+                queue?.ensureFilled();
+            });
+        });
+
+        btnStartUpload?.addEventListener("click", () => {
+            fileInput?.click();
+        });
+
+        document.addEventListener("ascii-image-imported", () => {
+            hideLanding();
+        });
+    </script>
+    <Tooltip />
+</Layout>
+
+<style>
+    .ascii-layout {
+        display: flex;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        background: var(--bg-color);
+    }
+
+    .ascii-workspace {
+        flex-grow: 1;
+        height: 100vh;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        background: #050505;
+        overflow: hidden;
+    }
+
+    .canvas-layer {
+        flex-grow: 1;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        background: radial-gradient(circle at center, #111 0%, #000 100%);
+    }
+
+    #ascii-result {
+        font-size: 8px;
+        line-height: 1;
+        white-space: pre;
+        color: var(--text-color);
+        transform-origin: center;
+    }
+
+    #ascii-canvas {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        display: none;
+        image-rendering: pixelated;
+        opacity: 0;
+        transition: opacity 0.5s ease;
+        touch-action: none;
+    }
+
+    #loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-family: var(--font-mono);
+        color: #fff;
+        font-size: 1.5rem;
+        display: none;
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.8);
+        padding: 1rem 2rem;
+        border-radius: 4px;
+    }
+
+    .landing-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.85);
+        backdrop-filter: blur(12px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 100;
+        transition:
+            opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+            visibility 0.6s;
+    }
+
+    .landing-overlay.hidden {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+
+    .landing-content {
+        max-width: 440px;
+        padding: 2.5rem;
+        text-align: center;
+        background: rgba(15, 15, 15, 0.9);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 16px;
+        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
+        animation: landing-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes landing-in {
+        from {
+            opacity: 0;
+            transform: translateY(20px) scale(0.95);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+
+    .landing-content h1 {
+        font-size: 1.75rem;
+        margin-bottom: 1rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        color: #fff;
+    }
+
+    .landing-content p {
+        font-size: 0.95rem;
+        line-height: 1.6;
+        color: rgba(255, 255, 255, 0.6);
+        margin-bottom: 2rem;
+    }
+
+    .landing-buttons {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: center;
+        margin-bottom: 2rem;
+    }
+
+    .landing-btn {
+        padding: 0.75rem 1.25rem;
+        border-radius: 8px;
+        font-size: 0.85rem;
+        font-family: var(--font-mono);
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(255, 255, 255, 0.02);
+        color: rgba(255, 255, 255, 0.6);
+        cursor: pointer;
+        flex: 1;
+    }
+
+    .landing-btn:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.2);
+        transform: translateY(-2px);
+    }
+
+    #btn-start-api {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.15);
+    }
+
+    #btn-start-api:hover {
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.3);
+    }
+
+    .disclaimer {
+        font-size: 0.7rem !important;
+        color: rgba(255, 255, 255, 0.3) !important;
+        line-height: 1.4 !important;
+        margin-bottom: 0 !important;
+        text-align: left;
+        padding-top: 1.5rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    :global(.control-panel) {
+        width: 100%;
+        transform: translateY(150%);
+        opacity: 0;
+        transition:
+            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
+            opacity 0.6s ease;
+    }
+
+    :global(.control-panel.visible) {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    @media (max-width: 1600px) {
+        .ascii-layout {
+            flex-direction: column;
+            height: 100dvh;
+        }
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b014c89..28bdee0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,400 +1,227 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Sidebar from "../components/Sidebar.astro";
-import Tooltip from "../components/Tooltip.astro";
-import ControlPanel from "../components/ControlPanel.astro";
+import { Zap, FileText, Mail } from "@lucide/astro";
 ---
 
 <Layout title="Syntaxbullet - Full Stack Engineer">
-    <div class="split-layout">
-        <Sidebar />
-
-        <!-- RIGHT MAIN: ASCII & Controls -->
-        <main class="ascii-workspace hero-wrapper">
-            <!-- Canvas Layer -->
-            <div class="canvas-layer">
-                <div id="loading">Loading...</div>
-                <pre id="ascii-result"></pre>
-                <canvas id="ascii-canvas"></canvas>
+    <div class="home-container">
+        <main class="home-content">
+            <div class="brand-group">
+                <h1 class="brand-title">SYNTAXBULLET</h1>
+                <div class="brand-subtitle">
+                    FULL STACK ENGINEER
+                    <span class="muted">|</span>
+                    CREATIVE TECHNOLOGIST
+                </div>
             </div>
 
-            <ControlPanel />
+            <p class="brand-bio">
+                Crafting high-performance digital experiences at the intersection of
+                engineering, design, and artificial intelligence.
+            </p>
 
-            <!-- Landing Screen -->
-            <div id="landing-screen" class="landing-overlay">
-                <div class="landing-content">
-                    <h1>ASCII Art Generator</h1>
-                    <p>
-                        Generate stunning ASCII art from images. Pull a random
-                        image from an anime API or upload your own to get
-                        started.
-                    </p>
-                    <div class="landing-buttons">
-                        <button id="btn-start-api" class="landing-btn"
-                            >Anime API</button
-                        >
-                        <button id="btn-start-upload" class="landing-btn"
-                            >Upload Image</button
-                        >
-                    </div>
-                    <p class="disclaimer">
-                        <b>Disclaimer:</b> Images loaded via the API are not my own
-                        and are not filtered or curated. In rare cases, they might
-                        contain sensitive material.
-                    </p>
-                </div>
+            <nav class="nav-links">
+                <a href="/ascii" class="nav-link">
+                    <span class="icon"><Zap size={20} /></span>
+                    <span class="label">GENERATE</span>
+                </a>
+                <a href="/blog" class="nav-link">
+                    <span class="icon"><FileText size={20} /></span>
+                    <span class="label">BLOG</span>
+                </a>
+                <a href="mailto:me@syntaxbullet.com" class="nav-link">
+                    <span class="icon"><Mail size={20} /></span>
+                    <span class="label">CONTACT</span>
+                </a>
+            </nav>
+
+            <div class="social-links">
+                <a
+                    href="https://git.ayau.me/syntaxbullet"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Git"
+                >
+                    <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path
+                            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+                        ></path>
+                        <path d="M9 18c-4.51 2-5-2-7-2"></path>
+                    </svg>
+                </a>
+                <a
+                    href="https://www.linkedin.com/in/ivan-jovanovic-51b319187/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="LinkedIn"
+                >
+                    <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path
+                            d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
+                        ></path>
+                        <rect width="4" height="12" x="2" y="9"></rect>
+                        <circle cx="4" cy="4" r="2"></circle>
+                    </svg>
+                </a>
             </div>
         </main>
     </div>
-
-    <script>
-        import { AsciiController } from "../scripts/ascii-controller";
-        import { ImageQueue } from "../scripts/image-queue";
-        import { UIBindings } from "../scripts/ui-bindings";
-
-        // ============= Global Cleanup Protocol =============
-        // Fix for accumulating event listeners and render loops during HMR/Navigation
-        if (window.__ASCII_APP__) {
-            console.log("♻️ Disposing previous application instance...");
-            try {
-                window.__ASCII_APP__.dispose();
-            } catch (e) {
-                console.error("Failed to dispose previous instance:", e);
-            }
-        }
-
-        // ============= DOM Elements =============
-        const canvas = document.getElementById(
-            "ascii-canvas",
-        ) as HTMLCanvasElement;
-        const asciiResult = document.getElementById(
-            "ascii-result",
-        ) as HTMLPreElement;
-        const loadingIndicator = document.getElementById(
-            "loading",
-        ) as HTMLDivElement;
-
-        if (!canvas || !asciiResult || !loadingIndicator) {
-            throw new Error("Critical UI elements missing");
-        }
-
-        // ============= Initialize =============
-
-        // Feature Flag: Desktop Only
-        const isDesktop = window.matchMedia("(min-width: 1601px)").matches;
-
-        // Use 'let' so we can conditionally assign
-        let controller: AsciiController | undefined;
-        let queue: ImageQueue | undefined;
-        let ui: UIBindings | undefined;
-
-        if (isDesktop) {
-            controller = new AsciiController(
-                canvas,
-                asciiResult,
-                loadingIndicator,
-            );
-            queue = new ImageQueue(2);
-            ui = new UIBindings(controller, queue, loadNewImage);
-
-            // Store instances globally for cleanup
-            window.__ASCII_APP__ = {
-                controller: controller!,
-                queue: queue!,
-                ui: ui!,
-                dispose: () => {
-                    controller?.dispose();
-                    ui?.dispose();
-                    queue?.dispose();
-                    window.__ASCII_APP__ = undefined;
-                },
-            };
-
-            // Link settings updates to UI sync
-            controller.onSettingsChanged(() => ui!.updateUI());
-        }
-
-        let retryCount = 0;
-        const MAX_RETRIES = 3;
-
-        async function loadNewImage(): Promise<void> {
-            if (!isDesktop || !controller || !queue || !ui) return;
-
-            try {
-                let item;
-
-                if (queue.getLength() === 0) {
-                    controller.showLoading("FETCHING...");
-                    item = await queue.fetchDirect();
-                } else {
-                    item = queue.pop()!;
-                    queue.ensureFilled(); // Background refill
-                }
-
-                controller.setCurrentImage(item.url, item.suggestions);
-                retryCount = 0;
-
-                ui.updateUI();
-                await controller.generate();
-                controller.hideLoading();
-            } catch (e) {
-                console.error(e);
-                if (retryCount < MAX_RETRIES) {
-                    retryCount++;
-                    asciiResult.textContent = `Connection lost. Retrying (${retryCount}/${MAX_RETRIES})...`;
-                    setTimeout(loadNewImage, 2000);
-                } else {
-                    asciiResult.textContent =
-                        "Connection failed. Please refresh.";
-                    controller.hideLoading();
-                }
-            }
-        }
-
-        // ============= Initialize UI =============
-        if (isDesktop && ui) {
-            ui.init();
-        }
-
-        // ============= Landing Screen Logic =============
-        const landingScreen = document.getElementById("landing-screen");
-        const btnStartApi = document.getElementById("btn-start-api");
-        const btnStartUpload = document.getElementById("btn-start-upload");
-        const fileInput = document.getElementById(
-            "file-upload",
-        ) as HTMLInputElement;
-
-        const controlPanel = document.querySelector(".control-panel");
-
-        const hideLanding = () => {
-            landingScreen?.classList.add("hidden");
-            if (isDesktop && controlPanel) {
-                controlPanel.classList.add("visible");
-            }
-        };
-
-        btnStartApi?.addEventListener("click", () => {
-            hideLanding();
-            loadNewImage().then(() => {
-                queue?.ensureFilled();
-            });
-        });
-
-        btnStartUpload?.addEventListener("click", () => {
-            fileInput?.click();
-        });
-
-        // Hide landing screen when an image is imported (manual upload)
-        document.addEventListener("ascii-image-imported", () => {
-            hideLanding();
-        });
-    </script>
-    <Tooltip />
 </Layout>
 
 <style>
-    /* Split Layout */
-    .split-layout {
+    .home-container {
         display: flex;
+        justify-content: center;
+        align-items: center;
         width: 100vw;
         height: 100vh;
         overflow: hidden;
         background: var(--bg-color);
     }
 
-    /* Workspace (Right 75%) */
-
-    .ascii-workspace {
-        flex-grow: 1;
-        height: 100vh;
-        position: relative;
+    .home-content {
         display: flex;
         flex-direction: column;
-        background: #050505;
-        overflow: hidden;
-    }
-
-    .canvas-layer {
-        flex-grow: 1;
-        position: relative;
-        display: flex;
-        justify-content: center;
         align-items: center;
-        overflow: hidden;
-        background: radial-gradient(circle at center, #111 0%, #000 100%);
-    }
-
-    #ascii-result {
-        font-size: 8px;
-        line-height: 1;
-        white-space: pre;
-        color: var(--text-color);
-        transform-origin: center;
-    }
-
-    #ascii-canvas {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        display: none;
-        image-rendering: pixelated;
-        opacity: 0;
-        transition: opacity 0.5s ease;
-        touch-action: none;
-    }
-
-    #loading {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-family: var(--font-mono);
-        color: #fff;
-        font-size: 1.5rem;
-        display: none;
-        z-index: 10;
-        background: rgba(0, 0, 0, 0.8);
-        padding: 1rem 2rem;
-        border-radius: 4px;
-    }
-
-    /* Landing Overlay */
-    .landing-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.85);
-        backdrop-filter: blur(12px);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 100;
-        transition:
-            opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
-            visibility 0.6s;
-    }
-
-    .landing-overlay.hidden {
-        opacity: 0;
-        visibility: hidden;
-        pointer-events: none;
-    }
-
-    .landing-content {
-        max-width: 440px;
-        padding: 2.5rem;
         text-align: center;
-        background: rgba(15, 15, 15, 0.9);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 16px;
-        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
-        animation: landing-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+        padding: 2rem;
+        max-width: 560px;
+        animation: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
-    @keyframes landing-in {
+    @keyframes fade-in {
         from {
             opacity: 0;
-            transform: translateY(20px) scale(0.95);
+            transform: translateY(20px);
         }
         to {
             opacity: 1;
-            transform: translateY(0) scale(1);
-        }
-    }
-
-    .landing-content h1 {
-        font-size: 1.75rem;
-        margin-bottom: 1rem;
-        font-weight: 700;
-        letter-spacing: -0.02em;
-        color: #fff;
-    }
-
-    .landing-content p {
-        font-size: 0.95rem;
-        line-height: 1.6;
-        color: rgba(255, 255, 255, 0.6);
-        margin-bottom: 2rem;
-    }
-
-    .landing-buttons {
-        display: flex;
-        gap: 0.75rem;
-        justify-content: center;
-        margin-bottom: 2rem;
-    }
-
-    .landing-btn {
-        padding: 0.75rem 1.25rem;
-        border-radius: 8px;
-        font-weight: 600;
-        font-size: 0.85rem;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        background: rgba(255, 255, 255, 0.05);
-        color: #fff;
-        cursor: pointer;
-        flex: 1;
-    }
-
-    .landing-btn:hover {
-        background: #fff;
-        color: #000;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
-    }
-
-    #btn-start-api {
-        background: #fff;
-        color: #000;
-        border: none;
-    }
-
-    #btn-start-api:hover {
-        background: #ccc;
-    }
-
-    .disclaimer {
-        font-size: 0.7rem !important;
-        color: rgba(255, 255, 255, 0.3) !important;
-        line-height: 1.4 !important;
-        margin-bottom: 0 !important;
-        text-align: left;
-        padding-top: 1.5rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    /* Responsive */
-    @media (max-width: 1600px) {
-        .split-layout {
-            flex-direction: column;
-            overflow: hidden;
-            height: 100dvh;
-        }
-
-        /* Hide the entire ASCII workspace on mobile/tablet */
-        .ascii-workspace {
-            display: none !important;
-        }
-    }
-
-    /* Animation States for Control Panel (Desktop) */
-    @media (min-width: 1601px) {
-        :global(.control-panel) {
-            /* Participates in flex flow, reserving space so canvas resizes correctly */
-            width: 100%;
-            transform: translateY(150%);
-            opacity: 0;
-            transition:
-                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
-                opacity 0.6s ease;
-        }
-
-        :global(.control-panel.visible) {
             transform: translateY(0);
-            opacity: 1;
+        }
+    }
+
+    .brand-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .brand-title {
+        font-size: clamp(2rem, 8vw, 4rem);
+        font-weight: 900;
+        margin: 0;
+        line-height: 1;
+        letter-spacing: -2px;
+        color: #fff;
+    }
+
+    .brand-subtitle {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.5);
+        font-family: var(--font-mono);
+        letter-spacing: 2px;
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .muted {
+        color: rgba(255, 255, 255, 0.2);
+    }
+
+    .brand-bio {
+        font-size: 1.1rem;
+        line-height: 1.7;
+        color: rgba(255, 255, 255, 0.7);
+        max-width: 420px;
+        margin: 0 0 2.5rem 0;
+    }
+
+    .nav-links {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 2rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .nav-link {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: rgba(255, 255, 255, 0.6);
+        text-decoration: none;
+        font-family: var(--font-mono);
+        font-size: 0.85rem;
+        padding: 0.75rem 1.25rem;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.02);
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .nav-link:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.2);
+        transform: translateY(-2px);
+    }
+
+    .nav-link .icon {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .social-links {
+        display: flex;
+        gap: 1.5rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .social-links a {
+        color: rgba(255, 255, 255, 0.4);
+        transition: all 0.2s;
+        padding: 0.5rem;
+    }
+
+    .social-links a:hover {
+        color: #fff;
+        transform: translateY(-2px);
+    }
+
+    @media (max-width: 600px) {
+        .nav-links {
+            flex-direction: column;
+            width: 100%;
+        }
+
+        .nav-link {
+            justify-content: center;
         }
     }
 </style>