Merge pull request 'fix: feat: landing page communicates value proposition clearly (#534)' (#537) from fix/issue-534 into main

site/index.html

@@ -4,19 +4,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Disinto — From Vision to Market Fit</title>
-  <meta name="description" content="Open-source autonomous startup engine for solo founders. Write the vision, define quality gates — agents build, ship, operate, and find market fit.">
+  <meta name="description" content="Open-source autonomous code factory for solo founders. Write the vision, define quality gates — agents build, review, ship, operate, plan, and groom.">
   <link rel="icon" href="favicon.ico" sizes="32x32">
   <link rel="icon" href="favicon-192.png" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <link rel="canonical" href="https://disinto.ai/">
   <meta property="og:title" content="Disinto — From Vision to Market Fit">
-  <meta property="og:description" content="Open-source autonomous startup engine for solo founders. Write the vision, define quality gates — agents build, ship, operate, and find market fit.">
+  <meta property="og:description" content="Open-source autonomous code factory for solo founders. Write the vision, define quality gates — agents build, review, ship, operate, plan, and groom.">
   <meta property="og:image" content="https://disinto.ai/og-image.jpg">
   <meta property="og:url" content="https://disinto.ai/">
   <meta property="og:type" content="website">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Disinto — From Vision to Market Fit">
-  <meta name="twitter:description" content="Open-source autonomous startup engine for solo founders.">
+  <meta name="twitter:description" content="Open-source autonomous code factory for solo founders.">
   <meta name="twitter:image" content="https://disinto.ai/og-image.jpg">
   <style>
     :root {
@@ -185,7 +185,7 @@
       padding: 1.5rem;
       background: var(--surface);
       border: 1px solid var(--border);
-      margin-bottom: 3rem;
+      margin-bottom: 1rem;
       overflow-x: auto;
       text-align: center;
     }
@@ -199,6 +199,42 @@
       margin: 0 0.5rem;
     }
 
+    /* Lifecycle detail */
+    .lifecycle {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      background: var(--border);
+      margin-bottom: 3rem;
+    }
+
+    .lifecycle-stage {
+      background: var(--surface);
+      padding: 1.2rem;
+    }
+
+    .lifecycle-stage .stage-name {
+      font-size: 0.75rem;
+      color: var(--accent);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 0.4rem;
+    }
+
+    .lifecycle-stage .stage-desc {
+      font-size: 0.75rem;
+      color: var(--dim);
+      line-height: 1.7;
+    }
+
+    .lifecycle-stage .stage-desc strong {
+      color: var(--fg);
+    }
+
+    @media (max-width: 600px) {
+      .lifecycle { grid-template-columns: 1fr; }
+    }
+
     /* Proof */
     .proof {
       padding: 1.5rem;
@@ -236,6 +272,82 @@
       font-style: italic;
     }
 
+    /* Differentiator */
+    .differ {
+      margin-bottom: 3rem;
+      padding: 2rem;
+      border: 1px solid var(--accent-dim);
+      background: var(--surface);
+    }
+
+    .differ h2 {
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--accent);
+      margin-bottom: 1.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--accent-dim);
+    }
+
+    .differ p {
+      color: var(--dim);
+      font-size: 0.85rem;
+      line-height: 1.8;
+      margin-bottom: 1rem;
+    }
+
+    .differ p:last-child {
+      margin-bottom: 0;
+    }
+
+    .differ p strong {
+      color: var(--fg);
+    }
+
+    .differ .accent {
+      color: var(--accent);
+    }
+
+    .differ-cols {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      background: var(--border);
+      margin-bottom: 1.5rem;
+    }
+
+    .differ-col {
+      background: var(--surface);
+      padding: 1.2rem;
+    }
+
+    .differ-col .col-head {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 0.5rem;
+    }
+
+    .differ-col .col-head.dim { color: var(--dim); }
+    .differ-col .col-head.gold { color: var(--accent); }
+
+    .differ-col ul {
+      list-style: none;
+      font-size: 0.75rem;
+      color: var(--dim);
+      line-height: 2;
+    }
+
+    .differ-col ul strong {
+      color: var(--fg);
+    }
+
+    @media (max-width: 600px) {
+      .differ-cols { grid-template-columns: 1fr; }
+    }
+
     /* Concrete example */
     .example {
       margin-bottom: 3rem;
@@ -392,9 +504,10 @@
 
     <div class="pitch">
       <p>
-        <strong>Set the vision. Define quality gates.</strong><br>
+        <strong>An autonomous code factory for solo founders.</strong><br>
-        Agents derive the backlog, build, review, ship, and operate.<br>
+        Write a vision file. Define quality gates in the vault.<br>
-        You're the founder, not the developer.
+        Agents derive the backlog, build, review, ship, operate, plan, and groom.<br>
+        You make decisions. They do the work.
       </p>
     </div>
 
@@ -441,12 +554,8 @@
     </div>
 
     <div class="section">
-      <h2>The loop</h2>
+      <h2>The full lifecycle</h2>
       <div class="pipeline">
-        <span class="step">vision</span>
-        <span class="arrow">→</span>
-        <span class="step">backlog</span>
-        <span class="arrow">→</span>
         <span class="step">build</span>
         <span class="arrow">→</span>
         <span class="step">review</span>
@@ -455,10 +564,73 @@
         <span class="arrow">→</span>
         <span class="step">operate</span>
         <span class="arrow">→</span>
-        <span class="step">learn</span>
+        <span class="step">plan</span>
         <span class="arrow">→</span>
-        <span class="step">vision</span>
+        <span class="step">groom</span>
+        <span class="arrow">→</span>
+        <span class="step">build</span>
       </div>
+      <div class="lifecycle">
+        <div class="lifecycle-stage">
+          <div class="stage-name">Build</div>
+          <div class="stage-desc"><strong>Dev-agent</strong> picks up backlog issues, implements in isolated worktrees, opens PRs.</div>
+        </div>
+        <div class="lifecycle-stage">
+          <div class="stage-name">Review</div>
+          <div class="stage-desc"><strong>Review-agent</strong> checks PRs against project conventions, approves or requests changes.</div>
+        </div>
+        <div class="lifecycle-stage">
+          <div class="stage-name">Ship</div>
+          <div class="stage-desc">CI runs, PRs merge, deployments happen. The <strong>vault</strong> controls what needs your sign-off.</div>
+        </div>
+        <div class="lifecycle-stage">
+          <div class="stage-name">Operate</div>
+          <div class="stage-desc"><strong>Supervisor</strong> monitors health, fixes what it can, escalates what it can't.</div>
+        </div>
+        <div class="lifecycle-stage">
+          <div class="stage-name">Plan</div>
+          <div class="stage-desc"><strong>Planner</strong> compares project state against your vision, creates issues for gaps.</div>
+        </div>
+        <div class="lifecycle-stage">
+          <div class="stage-name">Groom</div>
+          <div class="stage-desc"><strong>Gardener</strong> maintains the backlog — closes duplicates, promotes tech debt, keeps things moving.</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="differ">
+      <h2>Not CI/CD — a quality-gated code factory</h2>
+      <div class="differ-cols">
+        <div class="differ-col">
+          <div class="col-head dim">Generic CI/CD</div>
+          <ul>
+            <li>Runs your tests after you push</li>
+            <li>You write the code</li>
+            <li>You manage the backlog</li>
+            <li>You decide what to build next</li>
+          </ul>
+        </div>
+        <div class="differ-col">
+          <div class="col-head gold">Disinto</div>
+          <ul>
+            <li>Writes the code, opens the PR, reviews it</li>
+            <li><strong>Vision</strong> defines what gets built</li>
+            <li><strong>Vault</strong> gates what can ship</li>
+            <li>Agents plan, groom, build, and operate</li>
+          </ul>
+        </div>
+      </div>
+      <p>
+        Two files set the boundaries: <strong class="accent">VISION.md</strong> tells agents
+        what you're building and why. The <strong class="accent">vault</strong> defines what
+        needs your approval — deployments, infrastructure changes, anything dangerous.
+        Everything else flows autonomously.
+      </p>
+      <p>
+        This is the quality gate model. Your vision sets direction. The vault enforces
+        safety. Between them, agents have enough freedom to work and enough
+        constraint to be trusted. <strong>That's what makes it a factory, not a pipeline.</strong>
+      </p>
     </div>
 
     <div class="example">
@@ -544,7 +716,7 @@
         <a href="/dashboard">dashboard</a>
       </div>
       <div class="under-hood">
-        Under the hood: dev, review, planner, gardener, supervisor, vault — six agents orchestrated by cron and bash.
+        Under the hood: dev, review, planner, gardener, supervisor, predictor, action, vault — eight agents orchestrated by cron and bash.
       </div>
     </div>