Upgrade landing page: video hero, like bar, capability grid, community links

index.html

@@ -1,37 +1,97 @@
 <!DOCTYPE html>
-<html lang="en"><head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Moching — Open-source AI Desktop Agent (Rust)</title>
+<meta name="description" content="Moching is a digital operator that controls your entire PC — 219 native tools: screen perception, HID control, browser automation, Office suite, AI media. Open source, Rust core.">
 <style>
-*{margin:0;padding:0;box-sizing:border-box}
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f1117;color:#e6e8ee;line-height:1.6}
-.wrap{max-width:880px;margin:0 auto;padding:64px 24px}
-.badge{display:inline-block;background:#1d2333;border:1px solid #2c3448;border-radius:999px;padding:6px 16px;font-size:13px;color:#9aa4bf;margin-bottom:24px}
-h1{font-size:44px;line-height:1.15;margin-bottom:16px;background:linear-gradient(90deg,#818cf8,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent}
-.sub{font-size:19px;color:#b6bdcc;max-width:640px;margin-bottom:36px}
-.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:36px 0}
-.card{background:#161a24;border:1px solid #262d40;border-radius:12px;padding:20px}
-.card h3{font-size:15px;margin-bottom:8px;color:#a5b4fc}
-.card p{font-size:14px;color:#9aa4bf}
-.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
-.btn{padding:13px 26px;border-radius:10px;font-weight:600;text-decoration:none;font-size:15px}
-.btn-p{background:linear-gradient(90deg,#6366f1,#8b5cf6);color:#fff}
-.btn-s{background:#1d2333;color:#e6e8ee;border:1px solid #2c3448}
-footer{margin-top:56px;padding-top:24px;border-top:1px solid #262d40;font-size:13px;color:#6b7490}
-a{color:#818cf8}
-</style></head><body><div class="wrap">
-<div class="badge">✨ Open source · MIT License</div>
-<h1>Your AI desktop agent.<br>It sees. It acts. It verifies.</h1>
-<p class="sub">Moching operates the computer like a person — real-time screen understanding through two engines (visual + accessibility UI tree), then clicks, types and verifies its own actions in a closed loop.</p>
-<div class="grid">
-<div class="card"><h3>219 native tools</h3><p>Files, browser, office documents, system control — built in.</p></div>
-<div class="card"><h3>Rust core</h3><p>Fast, low memory, ships as a single app.</p></div>
-<div class="card"><h3>30+ skill store</h3><p>Extensible via MCP plugins.</p></div>
-<div class="card"><h3>Windows &amp; macOS</h3><p>Free and open source.</p></div>
+  :root { --bg:#0b0f14; --card:#121821; --line:#1f2937; --green:#10b981; --txt:#e5e7eb; --mut:#9ca3af; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--bg); color:var(--txt); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; line-height:1.6; }
+  .wrap { max-width:1040px; margin:0 auto; padding:0 24px; }
+  .likebar { background:linear-gradient(90deg,#134e4a,#0b0f14); text-align:center; padding:10px 16px; font-size:15px; }
+  .likebar a { color:#fbbf24; text-decoration:none; font-weight:600; }
+  .likebar a:hover { text-decoration:underline; }
+  header { padding:28px 0 12px; display:flex; align-items:center; justify-content:space-between; }
+  .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; }
+  .brand .m { color:var(--green); }
+  nav a { color:var(--mut); text-decoration:none; margin-left:18px; font-size:14px; }
+  nav a:hover { color:var(--txt); }
+  .hero { text-align:center; padding:56px 0 40px; }
+  .hero h1 { font-size:44px; line-height:1.15; letter-spacing:-.5px; }
+  .hero h1 span { color:var(--green); }
+  .hero p.sub { color:var(--mut); font-size:19px; max-width:720px; margin:18px auto 30px; }
+  .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
+  .btn { padding:13px 28px; border-radius:10px; text-decoration:none; font-weight:600; font-size:16px; transition:.15s; }
+  .btn.primary { background:var(--green); color:#04110b; }
+  .btn.primary:hover { filter:brightness(1.1); }
+  .btn.ghost { border:1px solid var(--line); color:var(--txt); }
+  .btn.ghost:hover { border-color:var(--green); color:var(--green); }
+  .stats { display:flex; gap:26px; justify-content:center; margin-top:26px; color:var(--mut); font-size:14px; flex-wrap:wrap; }
+  .stats b { color:var(--txt); }
+  video, img.hero-img { width:100%; max-width:880px; display:block; margin:34px auto 0; border-radius:14px; border:1px solid var(--line); }
+  h2 { text-align:center; font-size:30px; margin:64px 0 10px; }
+  .sub2 { text-align:center; color:var(--mut); margin-bottom:36px; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
+  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; }
+  .card h3 { font-size:17px; margin-bottom:8px; }
+  .card p { color:var(--mut); font-size:14.5px; }
+  .card .ic { font-size:26px; }
+  .linkbox { text-align:center; margin:56px 0 20px; padding:30px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
+  .linkbox h2 { margin:0 0 8px; font-size:24px; }
+  .linkbox p { color:var(--mut); margin-bottom:18px; }
+  footer { text-align:center; color:var(--mut); font-size:13px; padding:34px 0 40px; }
+  footer a { color:var(--mut); }
+</style>
+</head>
+<body>
+<div class="likebar">❤️ Using Moching? <a href="https://huggingface.co/spaces/mochingcode/moching" target="_blank" rel="noopener">Like this Space</a> &amp; <a href="https://github.com/moching-ai-dev/moching" target="_blank" rel="noopener">star on GitHub</a> — it helps a lot!</div>
+<div class="wrap">
+  <header>
+    <div class="brand"><span class="m">▲</span> Moching</div>
+    <nav>
+      <a href="https://github.com/moching-ai-dev/moching">GitHub</a>
+      <a href="https://mochingcode.com">Website</a>
+      <a href="https://huggingface.co/spaces/mochingcode/moching/discussions/2">Community</a>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <h1>The AI Agent that operates<br>your <span>entire PC</span></h1>
+    <p class="sub">Not a chatbot. Not a coding assistant. Moching is a <b>digital operator</b> — 219 native tools spanning screen perception, HID control, browser automation, Office suite and AI media. Open source. Rust core.</p>
+    <div class="cta">
+      <a class="btn primary" href="https://github.com/moching-ai-dev/moching/releases" target="_blank" rel="noopener">⬇️ Download for Windows</a>
+      <a class="btn ghost" href="https://github.com/moching-ai-dev/moching" target="_blank" rel="noopener">★ Star on GitHub</a>
+    </div>
+    <div class="stats"><span><b>219</b> native tools</span><span><b>Rust</b> core</span><span><b>Win</b> + <b>macOS</b></span><span><b>Open source</b></span></div>
+    <video src="https://huggingface.co/mochingcode/moching/resolve/main/moching_demo.mp4" controls muted loop autoplay playsinline poster=""></video>
+  </section>
+
+  <h2>What it can do</h2>
+  <p class="sub2">Every capability is a native tool the agent can invoke.</p>
+  <div class="grid">
+    <div class="card"><div class="ic">🖥️</div><h3>Screen perception</h3><p>Reads and understands whatever is on screen — apps, dialogs, games, dashboards.</p></div>
+    <div class="card"><div class="ic">🖱️</div><h3>HID control</h3><p>Moves the mouse and types like a person. Works across any desktop application.</p></div>
+    <div class="card"><div class="ic">🌐</div><h3>Browser automation</h3><p>Drives real browsers end-to-end: navigation, forms, scraping, verification.</p></div>
+    <div class="card"><div class="ic">📊</div><h3>Office suite</h3><p>Word, Excel and PowerPoint handled natively — reports and slides on autopilot.</p></div>
+    <div class="card"><div class="ic">🎨</div><h3>AI media</h3><p>Image generation and editing built right into the agent loop.</p></div>
+    <div class="card"><div class="ic">🦀</div><h3>Rust core</h3><p>Native performance with a low memory footprint. One installer, no dependencies.</p></div>
+  </div>
+
+  <div class="linkbox">
+    <h2>Join the community</h2>
+    <p>Updates, benchmarks and engineering notes are posted in the Space discussion.</p>
+    <div class="cta">
+      <a class="btn primary" href="https://huggingface.co/spaces/mochingcode/moching/discussions/2" target="_blank" rel="noopener">💬 Read &amp; reply</a>
+      <a class="btn ghost" href="https://github.com/moching-ai-dev/moching/discussions/3" target="_blank" rel="noopener">GitHub Discussions</a>
+    </div>
+  </div>
+
+  <footer>
+    <a href="https://mochingcode.com">mochingcode.com</a> · <a href="https://github.com/moching-ai-dev/moching">GitHub</a> · <a href="https://huggingface.co/spaces/mochingcode/moching">Hugging Face</a>
+    <br>Moching — open-source AI desktop agent. Built with a Rust core.
+  </footer>
 </div>
-<div class="cta">
-<a class="btn btn-p" href="https://mochingcode.com">Download →</a>
-<a class="btn btn-s" href="https://github.com/moching-ai-dev/moching">GitHub →</a>
-</div>
-<footer>Moching · open-source AI desktop agent · <a href="https://github.com/moching-ai-dev/moching">github.com/moching-ai-dev/moching</a> · <a href="https://mochingcode.com">mochingcode.com</a></footer>
-</div></body></html>
+</body>
+</html>