fix: feat: landing page communicates value proposition clearly (#534)

Update the landing page to clearly communicate Disinto's value proposition:

- Reframe pitch as "autonomous code factory for solo founders"
- Add full lifecycle section with all six stages (build, review, ship,
  operate, plan, groom) and descriptions of what each agent does
- Add vault differentiator section contrasting Disinto with generic CI/CD,
  explaining the vision + vault quality gate model
- Update meta descriptions for SEO consistency
- Update footer to list all eight agents

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
openhands 2026-03-22 07:22:31 +00:00
parent c09b56ae3a
commit f9bdaa8f29

View file

@ -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>
Agents derive the backlog, build, review, ship, and operate.<br>
You're the founder, not the developer.
<strong>An autonomous code factory for solo founders.</strong><br>
Write a vision file. Define quality gates in the vault.<br>
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>