From b0f47e444742cd549a19fc9200a40d102dcbfc67 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 14 Feb 2026 03:59:00 +0000
Subject: [PATCH] Add landing page with TORCH documentation modal

- Created `landing/` directory with `index.html`.
- Implemented a modern landing page design matching the `dashboard/` style.
- Added a custom SVG Torch logo.
- Integrated `marked.js` to fetch and render `src/docs/TORCH.md` in a modal.
- Linked to the existing dashboard.

Co-authored-by: PR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
---
 landing/index.html | 371 +++++++++++++++++++++++++++++++++++++++++++++
 server.log         |   3 +
 2 files changed, 374 insertions(+)
 create mode 100644 landing/index.html
 create mode 100644 server.log

diff --git a/landing/index.html b/landing/index.html
new file mode 100644
index 0000000..6a1e006
--- /dev/null
+++ b/landing/index.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TORCH: AI Workforce Orchestration</title>
+    <link rel="stylesheet" href="../dashboard/styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        /* Landing Page Specific Overrides & Additions */
+        body {
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        header {
+            padding: 2rem 5%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(to bottom, var(--surface-alt), transparent);
+        }
+
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            font-weight: 700;
+            font-size: 1.5rem;
+            color: var(--text-strong);
+            letter-spacing: -0.02em;
+        }
+
+        .hero {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 4rem 1rem;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .hero h1 {
+            font-size: 3.5rem;
+            line-height: 1.1;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, var(--text-strong) 0%, var(--info) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.03em;
+        }
+
+        .hero p {
+            font-size: 1.25rem;
+            color: var(--muted);
+            margin-bottom: 2.5rem;
+            line-height: 1.6;
+            max-width: 60ch;
+        }
+
+        .actions {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .cta-button {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.75rem 2rem;
+            border-radius: 9999px;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            font-size: 1rem;
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .cta-button.primary {
+            background: var(--accent);
+            color: white;
+            box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
+        }
+
+        .cta-button.primary:hover {
+            background: var(--accent-strong);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 25px rgba(79, 140, 255, 0.4);
+        }
+
+        .cta-button.secondary {
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text);
+            border-color: var(--border);
+        }
+
+        .cta-button.secondary:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-strong);
+        }
+
+        /* Feature Grid */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            max-width: 1200px;
+            margin: 4rem auto;
+            padding: 0 2rem;
+        }
+
+        .feature-card {
+            background: var(--surface-alt);
+            border: 1px solid var(--border);
+            padding: 2rem;
+            border-radius: 1rem;
+            transition: transform 0.2s;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+        }
+
+        .feature-icon {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: var(--accent);
+        }
+
+        .feature-title {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text-strong);
+        }
+
+        .feature-desc {
+            font-size: 0.9rem;
+            color: var(--muted);
+        }
+
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(11, 16, 32, 0.8);
+            backdrop-filter: blur(5px);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal.show {
+            display: flex;
+            opacity: 1;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-content {
+            background-color: var(--surface);
+            margin: auto;
+            padding: 2rem;
+            border: 1px solid var(--border);
+            border-radius: 1rem;
+            width: 90%;
+            max-width: 800px;
+            max-height: 85vh;
+            overflow-y: auto;
+            position: relative;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            animation: modalSlideIn 0.3s ease-out;
+        }
+
+        @keyframes modalSlideIn {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
+        .close-modal {
+            color: var(--muted);
+            position: sticky;
+            top: 0;
+            float: right;
+            font-size: 2rem;
+            font-weight: bold;
+            cursor: pointer;
+            z-index: 10;
+            background: var(--surface);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 1;
+        }
+
+        .close-modal:hover,
+        .close-modal:focus {
+            color: var(--text-strong);
+            background: var(--surface-alt);
+        }
+
+        /* Markdown Content Styling within Modal */
+        #markdown-content {
+            color: var(--text);
+            line-height: 1.7;
+        }
+        #markdown-content h1, #markdown-content h2, #markdown-content h3 {
+            color: var(--text-strong);
+            margin-top: 1.5em;
+        }
+        #markdown-content code {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+            background: var(--surface-alt);
+            padding: 0.2em 0.4em;
+            border-radius: 4px;
+            font-size: 0.85em;
+        }
+        #markdown-content pre {
+            background: var(--surface-alt);
+            padding: 1rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            border: 1px solid var(--border);
+        }
+        #markdown-content pre code {
+            background: transparent;
+            padding: 0;
+            color: var(--info);
+        }
+        #markdown-content a {
+            color: var(--accent);
+            text-decoration: none;
+        }
+        #markdown-content a:hover {
+            text-decoration: underline;
+        }
+
+        footer {
+            margin-top: auto;
+            padding: 2rem;
+            text-align: center;
+            color: var(--muted);
+            font-size: 0.875rem;
+            border-top: 1px solid var(--border);
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <div class="logo-container">
+            <!-- Modern Torch SVG Logo -->
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16 2L19 10L24 12L18 16L20 22L16 18L12 22L14 16L8 12L13 10L16 2Z" fill="#F5B84B"/>
+                <path d="M16 18V30" stroke="#4F8CFF" stroke-width="3" stroke-linecap="round"/>
+                <path d="M12 24H20" stroke="#4F8CFF" stroke-width="3" stroke-linecap="round"/>
+                <circle cx="16" cy="10" r="6" stroke="#F5B84B" stroke-width="2" stroke-opacity="0.5"/>
+            </svg>
+            TORCH
+        </div>
+        <nav>
+            <a href="https://github.com/landing-ai/torch" class="text-muted hover:text-info-strong transition-colors">GitHub</a>
+        </nav>
+    </header>
+
+    <main>
+        <section class="hero">
+            <h1>The Operating System for Your AI Workforce.</h1>
+            <p>
+                A simple drag-and-drop folder that grants every project autonomous AI agents that learn, adapt, and evolve over time.
+            </p>
+            <div class="actions">
+                <a href="../dashboard/" class="cta-button primary">Launch Dashboard</a>
+                <button id="openDocs" class="cta-button secondary">Read Documentation</button>
+            </div>
+        </section>
+
+        <section class="features">
+            <div class="feature-card">
+                <div class="feature-icon">⚡</div>
+                <div class="feature-title">Instant Setup</div>
+                <div class="feature-desc">Just drop the folder into your project. No complex configuration pipelines.</div>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🤖</div>
+                <div class="feature-title">Self-Evolving Agents</div>
+                <div class="feature-desc">Agents automatically adapt to your codebase and workflow patterns.</div>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🔒</div>
+                <div class="feature-title">Decentralized Locking</div>
+                <div class="feature-desc">Powered by Nostr for secure, distributed task orchestration.</div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 TORCH Project. Built for the future of AI-driven development.</p>
+    </footer>
+
+    <!-- Documentation Modal -->
+    <div id="docsModal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <div id="markdown-content">
+                <p class="text-muted">Loading documentation...</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Modal Logic
+        const modal = document.getElementById("docsModal");
+        const btn = document.getElementById("openDocs");
+        const span = document.getElementsByClassName("close-modal")[0];
+        const contentDiv = document.getElementById("markdown-content");
+        let docsLoaded = false;
+
+        btn.onclick = function() {
+            modal.classList.add("show");
+            if (!docsLoaded) {
+                fetchDocs();
+            }
+        }
+
+        span.onclick = function() {
+            modal.classList.remove("show");
+        }
+
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.classList.remove("show");
+            }
+        }
+
+        // Fetch and Render Markdown
+        async function fetchDocs() {
+            try {
+                const response = await fetch('../src/docs/TORCH.md');
+                if (!response.ok) {
+                    throw new Error('Failed to load documentation');
+                }
+                const text = await response.text();
+
+                // Configure marked options if needed (e.g., highlighting)
+                // Using simple rendering for now
+                contentDiv.innerHTML = marked.parse(text);
+                docsLoaded = true;
+            } catch (error) {
+                console.error(error);
+                contentDiv.innerHTML = `<p class="text-danger">Error loading documentation: ${error.message}</p>`;
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/server.log b/server.log
new file mode 100644
index 0000000..90b6ffc
--- /dev/null
+++ b/server.log
@@ -0,0 +1,3 @@
+127.0.0.1 - - [14/Feb/2026 03:58:05] "GET /landing/index.html HTTP/1.1" 200 -
+127.0.0.1 - - [14/Feb/2026 03:58:05] "GET /dashboard/styles.css HTTP/1.1" 200 -
+127.0.0.1 - - [14/Feb/2026 03:58:06] "GET /src/docs/TORCH.md HTTP/1.1" 200 -