From d99d7086ba78f741988c201add20e5338a3b5fe7 Mon Sep 17 00:00:00 2001
From: abullaisi <iabullaisi@gmail.com>
Date: Thu, 16 Jul 2026 16:17:06 +0700
Subject: [PATCH] prototype: Start a community wizard (start.html, Jason /start
 flow port)

3-step onboarding (Welcome > Brand > You are live) in prototype idiom:
real stepper classes, pay-col centered column, K state gate + fake tx,
k_creator_brand persistence. Wires the 09 FOR PARTNERS placeholder CTA
on index.html to the new screen. SPEC.md gets the Screen 8 brief.
Copy ported verbatim from packages/web /start.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 prototype/SPEC.md    |  12 ++-
 prototype/index.html |   2 +-
 prototype/start.html | 180 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 192 insertions(+), 2 deletions(-)
 create mode 100644 prototype/start.html

diff --git a/prototype/SPEC.md b/prototype/SPEC.md
index 8102a5b..60112bb 100644
--- a/prototype/SPEC.md
+++ b/prototype/SPEC.md
@@ -10,7 +10,7 @@ Sources of truth (read before building):
 ## Hard rules (violations = rejected)
 
 1. **No raw hex colors, no new CSS files.** If a screen truly needs a local style, max ~15 lines in a `<style>` block using ONLY the CSS custom properties, with a comment `/* candidate for promotion */`.
-2. **No em dashes (—) anywhere in copy.** Use periods, commas, or colons.
+2. **No em dashes anywhere in copy.** Use periods, commas, or colons.
 3. **One primary button per card.** Secondary actions use `class="ghost"`.
 4. All numbers that can column-align use existing classes (`.balance`, `.alloc-amt`, `.stat-value`) or inherit `tabular-nums` from them.
 5. Copy tone: simple, concrete, benefits before features, 8th grade reading level. No "leverage", "unlock" is allowed ONLY as the product's literal verb (unlocking benefits), no "seamless", no "robust".
@@ -186,3 +186,13 @@ The Mobbin patterns are now working features, not visual dressing. New state lay
 - All interactive elements work with the simulated state (connect, pay, reset).
 - Zero raw hex, zero em dashes, valid HTML.
 - Links between screens use relative hrefs exactly as named above.
+
+## Screen 8: `start.html` (Start a community)
+
+PRD creator onboarding acceptance: a connected creator can name a community, simulate the on-chain claim, and reach the live state.
+
+- Wallet guard card: if no wallet is connected, show only a centered prompt with one primary "Connect wallet (demo)" button that calls `K.connect()` before the flow begins.
+- Stepper: Welcome starts active, Brand becomes active after the welcome action, and Live becomes active after creation. Completed steps use checkmarks and each line lights when its left step is done.
+- Welcome card: `.num-label` (`10 WELCOME`), "Get paid for what you publish", three benefit lines, one primary "Create my community" button, and the free-to-start signing hint.
+- Brand card: `.num-label` (`11 BRAND`), a required community name input, optional description, logo hint, and one primary submit button. Submission simulates wallet confirmation, stores `k_creator_brand`, and logs "Community created" through `K.logActivity`.
+- Live card (`.card.center`): `.num-label` (`12 LIVE`), the saved community name, one primary link to partner.html, and one ghost link to dashboard.html.
diff --git a/prototype/index.html b/prototype/index.html
index 882040c..f60e1da 100644
--- a/prototype/index.html
+++ b/prototype/index.html
@@ -79,7 +79,7 @@ <h1 class="headline">Single subscription.<span class="gold">Multiple benefits.</
       <h2>Have premium resources?</h2>
       <p class="hint">Publish Learning resources and Digital assets for members. Earn payout straight to your wallet anytime. It's free to start and takes just a few minutes.</p>
       <div class="row tight">
-        <a class="btn ghost" href="#" title="Partner onboarding, placeholder in this prototype">Become a partner</a>
+        <a class="btn ghost" href="start.html">Start a community</a>
       </div>
     </div>
 
diff --git a/prototype/start.html b/prototype/start.html
new file mode 100644
index 0000000..830e19f
--- /dev/null
+++ b/prototype/start.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Komunify · Start a community</title>
+  <link rel="icon" type="image/png" href="logo-mark.png">
+  <link rel="stylesheet" href="styles.css?v=5">
+  <style>
+    /* candidate for promotion */
+    textarea {
+      background: var(--color-bg-input);
+      border: 1px solid var(--color-border-medium);
+      border-radius: var(--radius-md);
+      padding: var(--space-3);
+      color: var(--color-content-primary);
+      font: inherit;
+      resize: vertical;
+    }
+    textarea:focus { outline: none; border-color: var(--color-border-accent); }
+  </style>
+</head>
+<body>
+<main class="shell">
+  <div class="topbar">
+    <a class="logo" href="index.html"><img src="logo-mark.png" alt="" class="logo-mark">Komunify</a>
+    <nav class="topbar-nav">
+      <a href="index.html">Connect</a>
+      <a href="subscribe.html">Subscribe</a>
+      <a href="benefits.html">Benefits</a>
+      <a href="dashboard.html">Dashboard</a>
+      <a href="traction.html">Traction</a>
+      <code id="topbar-wallet" class="hidden"></code>
+    </nav>
+  </div>
+
+  <div class="pay-col">
+    <section class="card center hidden" id="guard-card">
+      <h2>Connect a wallet first</h2>
+      <p class="hint">Connect your testnet wallet to claim a community in this demo.</p>
+      <button id="connect-btn" type="button">Connect wallet (demo)</button>
+    </section>
+
+    <div class="stepper" id="wizard-stepper">
+      <div class="step active" id="step-1"><span class="step-dot">1</span><span class="step-name">Welcome</span></div>
+      <div class="step-line" id="line-1"></div>
+      <div class="step todo" id="step-2"><span class="step-dot">2</span><span class="step-name">Brand</span></div>
+      <div class="step-line" id="line-2"></div>
+      <div class="step todo" id="step-3"><span class="step-dot">3</span><span class="step-name">Live</span></div>
+    </div>
+
+    <section class="card" id="welcome-card">
+      <div class="num-label"><span class="num">10</span> WELCOME</div>
+      <h2>Get paid for what you publish</h2>
+      <div class="benefit-line">
+        <span><strong>Earn on every read</strong><br><span class="hint">Members support your work when they read it.</span></span>
+      </div>
+      <div class="benefit-line">
+        <span><strong>Your work stays yours</strong><br><span class="hint">You keep control of your name, ideas, and content.</span></span>
+      </div>
+      <div class="benefit-line">
+        <span><strong>Cash out anytime</strong><br><span class="hint">Send your earnings to your wallet when you are ready.</span></span>
+      </div>
+      <button id="welcome-next" type="button">Create my community</button>
+      <p class="hint">Free to start. You will sign one quick transaction to claim your community on-chain.</p>
+    </section>
+
+    <section class="card hidden" id="brand-card">
+      <div class="num-label"><span class="num">11</span> BRAND</div>
+      <h2>Name your community</h2>
+      <form id="brand-form">
+        <label>Community name
+          <input id="community-name" type="text" required autocomplete="organization">
+        </label>
+        <label>Description
+          <textarea id="community-description" rows="4"></textarea>
+        </label>
+        <p class="hint">Logo optional, image under 512 KB.</p>
+        <div><button id="create-btn" type="submit">Create my community</button></div>
+      </form>
+    </section>
+
+    <section class="card center hidden" id="live-card">
+      <div class="num-label"><span class="num">12</span> LIVE</div>
+      <h2>You are live</h2>
+      <p><span id="live-name">Your community</span> is now on komunify.</p>
+      <a class="btn" href="partner.html">View your public page →</a>
+      <a class="btn ghost" href="dashboard.html">Go to dashboard →</a>
+    </section>
+  </div>
+
+  <footer>
+    <a href="#" id="reset-proto">Reset demo</a>
+  </footer>
+</main>
+
+<script src="app.js?v=5"></script>
+<script>
+  (function () {
+    var guardCard = document.getElementById("guard-card");
+    var stepper = document.getElementById("wizard-stepper");
+    var cards = [
+      document.getElementById("welcome-card"),
+      document.getElementById("brand-card"),
+      document.getElementById("live-card")
+    ];
+
+    function setStep(current) {
+      [1, 2, 3].forEach(function (num) {
+        var state = num < current ? "done" : (num === current ? "active" : "todo");
+        var step = document.getElementById("step-" + num);
+        step.className = "step " + state;
+        step.querySelector(".step-dot").textContent = state === "done" ? "✓" : num;
+      });
+      document.getElementById("line-1").className = "step-line" + (current > 1 ? " lit" : "");
+      document.getElementById("line-2").className = "step-line" + (current > 2 ? " lit" : "");
+    }
+
+    function showStep(current) {
+      cards.forEach(function (card, index) {
+        card.classList.toggle("hidden", index !== current - 1);
+      });
+      setStep(current);
+    }
+
+    document.getElementById("reset-proto").addEventListener("click", function (e) {
+      e.preventDefault();
+      K.reset();
+      location.href = "index.html";
+    });
+
+    document.getElementById("connect-btn").addEventListener("click", function () {
+      K.connect();
+      location.reload();
+    });
+
+    if (!K.wallet) {
+      guardCard.classList.remove("hidden");
+      stepper.classList.add("hidden");
+      cards.forEach(function (card) { card.classList.add("hidden"); });
+      return;
+    }
+
+    document.getElementById("welcome-next").addEventListener("click", function () {
+      showStep(2);
+      document.getElementById("community-name").focus();
+    });
+
+    document.getElementById("brand-form").addEventListener("submit", function (e) {
+      e.preventDefault();
+      var input = document.getElementById("community-name");
+      var name = input.value.trim();
+      if (!name) {
+        input.setCustomValidity("Enter a community name.");
+        input.reportValidity();
+        return;
+      }
+      input.setCustomValidity("");
+
+      var createBtn = document.getElementById("create-btn");
+      createBtn.disabled = true;
+      createBtn.textContent = "Check your wallet…";
+
+      window.setTimeout(function () {
+        localStorage.setItem("k_creator_brand", name);
+        K.logActivity("Community created", name);
+        document.getElementById("live-name").textContent = localStorage.getItem("k_creator_brand") || "Your community";
+        showStep(3);
+      }, 1200);
+    });
+
+    document.getElementById("community-name").addEventListener("input", function () {
+      this.setCustomValidity("");
+    });
+
+    showStep(1);
+  })();
+</script>
+</body>
+</html>