Rockachopa/Timmy-time-dashboard
1
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: homepage value proposition — 10-second clarity landing page (#809)
Some checks failed
Tests / lint (pull_request) Failing after 25s
Details
Tests / test (pull_request) Has been skipped
Details

Browse Source 
Replace the mission-control dashboard at / with a conversion-optimised
public landing page. The dashboard moves to /dashboard.

Landing page hierarchy:
- 3-second glance: hero title + eyebrow + live-pulse badge
- 10-second scan: four value cards (Lightning, Sovereign, Global, Pay-per-task)
- 30-second exploration: expandable capability accordion (Code, Research,
  Creative, Analysis)
- Social proof: HTMX-polled stat cards (jobs, sats, agents, uptime)
- Audience CTAs: developers (API docs), end users (Try Now → /dashboard),
  investors (View Ledger)

Changes:
- src/dashboard/templates/landing.html — new landing page template
- src/dashboard/app.py — / → landing.html; /dashboard → index.html
- src/dashboard/templates/base.html — HOME stays /; add DASHBOARD → /dashboard
- static/css/mission-control.css — landing page styles (lp-* namespace)

Fixes #809

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alexander Whitestone
2026-03-23 22:40:42 -04:00
parent 298b585689
commit 72ed97a008
4 changed files with 561 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/dashboard/app.py
View File

@@ -762,7 +762,13 @@ async def swarm_agents_sidebar():
@app.get("/", response_class=HTMLResponse)
async def root(request: Request):
"""Serve the main dashboard page."""
"""Serve the public landing page (homepage value proposition)."""
return templates.TemplateResponse(request, "landing.html", {})
@app.get("/dashboard", response_class=HTMLResponse)
async def dashboard(request: Request):
"""Serve the main mission-control dashboard."""
return templates.TemplateResponse(request, "index.html", {})

4
src/dashboard/templates/base.html
View File

@@ -127,7 +127,7 @@
<body>
<header class="mc-header">
<div class="mc-header-left">
<a href="/" class="mc-title">MISSION CONTROL</a>
<a href="/dashboard" class="mc-title">MISSION CONTROL</a>
<span class="mc-subtitle">MISSION CONTROL</span>
<span class="mc-conn-status" id="conn-status">
<span class="mc-conn-dot amber" id="conn-dot"></span>
@@ -138,6 +138,7 @@
<!-- Desktop nav — grouped dropdowns matching mobile sections -->
<div class="mc-header-right mc-desktop-nav">
<a href="/" class="mc-test-link">HOME</a>
<a href="/dashboard" class="mc-test-link">DASHBOARD</a>
<div class="mc-nav-dropdown">
<button class="mc-test-link mc-dropdown-toggle" aria-expanded="false">CORE &#x25BE;</button>
<div class="mc-dropdown-menu">
@@ -221,6 +222,7 @@
<span class="mc-time" id="clock-mobile"></span>
</div>
<a href="/" class="mc-mobile-link">HOME</a>
<a href="/dashboard" class="mc-mobile-link">DASHBOARD</a>
<div class="mc-mobile-section-label">CORE</div>
<a href="/calm" class="mc-mobile-link">CALM</a>
<a href="/tasks" class="mc-mobile-link">TASKS</a>

207
src/dashboard/templates/landing.html Normal file
View File

@@ -0,0 +1,207 @@
{% extends "base.html" %}
{% block title %}Timmy AI Workshop | Lightning-Powered AI Jobs — Pay Per Task with Bitcoin{% endblock %}
{% block meta_description %}Pay sats, get AI work done. No subscription. No signup. Instant global access. Timmy AI Workshop — Lightning-powered agents by Alexander Whitestone.{% endblock %}
{% block content %}
<div class="lp-wrap">
<!-- ══ HERO — 3-second glance ══════════════════════════════════════ -->
<section class="lp-hero">
<div class="lp-hero-eyebrow">LIGHTNING-POWERED AI WORKSHOP</div>
<h1 class="lp-hero-title">Hire Timmy,<br>the AI that takes Bitcoin.</h1>
<p class="lp-hero-sub">
Pay sats, get AI work done.<br>
No subscription. No signup. Instant global access.
</p>
<div class="lp-hero-cta-row">
<a href="/dashboard" class="lp-btn lp-btn-primary">TRY NOW &rarr;</a>
<a href="/docs/api" class="lp-btn lp-btn-secondary">API DOCS</a>
<a href="/lightning/ledger" class="lp-btn lp-btn-ghost">VIEW LEDGER</a>
</div>
<div class="lp-hero-badge">
<span class="lp-badge-dot"></span>
AI tasks from <strong>200 sats</strong> &mdash; no account, no waiting
</div>
</section>
<!-- ══ VALUE PROP — 10-second scan ═════════════════════════════════ -->
<section class="lp-section lp-value">
<div class="lp-value-grid">
<div class="lp-value-card">
<span class="lp-value-icon">&#x26A1;</span>
<h3>Instant Settlement</h3>
<p>Jobs complete in seconds. Pay over Bitcoin Lightning &mdash; no credit card, no banking required.</p>
</div>
<div class="lp-value-card">
<span class="lp-value-icon">&#x1F512;</span>
<h3>Sovereign &amp; Private</h3>
<p>All inference runs locally. No cloud round-trips. Your prompts never leave the workshop.</p>
</div>
<div class="lp-value-card">
<span class="lp-value-icon">&#x1F310;</span>
<h3>Global Access</h3>
<p>Anyone with a Lightning wallet can hire Timmy. No KYC. No geo-blocks. Pure open access.</p>
</div>
<div class="lp-value-card">
<span class="lp-value-icon">&#x1F4B0;</span>
<h3>Pay Per Task</h3>
<p>Zero subscription. Pay only for what you use, priced in sats. Start from 200 sats per job.</p>
</div>
</div>
</section>
<!-- ══ CAPABILITIES — 30-second exploration ════════════════════════ -->
<section class="lp-section lp-caps">
<h2 class="lp-section-title">What Timmy Can Do</h2>
<p class="lp-section-sub">Four core capability domains &mdash; each backed by sovereign local inference.</p>
<div class="lp-caps-list">
<details class="lp-cap-item" open>
<summary class="lp-cap-summary">
<span class="lp-cap-icon">&#x1F4BB;</span>
<span class="lp-cap-label">Code</span>
<span class="lp-cap-chevron">&#x25BE;</span>
</summary>
<div class="lp-cap-body">
<p>Generate, review, refactor, and debug code across any language. Timmy can write tests, explain legacy systems, and auto-fix issues through self-correction loops.</p>
<ul class="lp-cap-bullets">
<li>Code generation &amp; refactoring</li>
<li>Automated test writing</li>
<li>Bug diagnosis &amp; self-correction</li>
<li>Architecture review &amp; documentation</li>
</ul>
</div>
</details>
<details class="lp-cap-item">
<summary class="lp-cap-summary">
<span class="lp-cap-icon">&#x1F50D;</span>
<span class="lp-cap-label">Research</span>
<span class="lp-cap-chevron">&#x25BE;</span>
</summary>
<div class="lp-cap-body">
<p>Deep-dive research on any topic. Synthesise sources, extract key insights, produce structured reports &mdash; all without leaving the workshop.</p>
<ul class="lp-cap-bullets">
<li>Topic deep-dives &amp; literature synthesis</li>
<li>Competitive &amp; market intelligence</li>
<li>Structured report generation</li>
<li>Source extraction &amp; citation</li>
</ul>
</div>
</details>
<details class="lp-cap-item">
<summary class="lp-cap-summary">
<span class="lp-cap-icon">&#x270D;</span>
<span class="lp-cap-label">Creative</span>
<span class="lp-cap-chevron">&#x25BE;</span>
</summary>
<div class="lp-cap-body">
<p>Copywriting, ideation, storytelling, brand voice &mdash; Timmy brings creative horsepower on demand, priced to the job.</p>
<ul class="lp-cap-bullets">
<li>Marketing copy &amp; brand messaging</li>
<li>Long-form content &amp; articles</li>
<li>Naming, taglines &amp; ideation</li>
<li>Script &amp; narrative writing</li>
</ul>
</div>
</details>
<details class="lp-cap-item">
<summary class="lp-cap-summary">
<span class="lp-cap-icon">&#x1F4CA;</span>
<span class="lp-cap-label">Analysis</span>
<span class="lp-cap-chevron">&#x25BE;</span>
</summary>
<div class="lp-cap-body">
<p>Data interpretation, strategic analysis, financial modelling, and executive briefings &mdash; structured intelligence from raw inputs.</p>
<ul class="lp-cap-bullets">
<li>Data interpretation &amp; visualisation briefs</li>
<li>Strategic frameworks &amp; SWOT</li>
<li>Financial modelling support</li>
<li>Executive summaries &amp; board decks</li>
</ul>
</div>
</details>
</div>
</section>
<!-- ══ SOCIAL PROOF ═════════════════════════════════════════════════ -->
<section class="lp-section lp-stats">
<h2 class="lp-section-title">Built on Sovereign Infrastructure</h2>
<div class="lp-stats-grid">
<div class="lp-stat-card"
hx-get="/api/stats/jobs_completed"
hx-trigger="load"
hx-swap="innerHTML">
<div class="lp-stat-num">—</div>
<div class="lp-stat-label">JOBS COMPLETED</div>
</div>
<div class="lp-stat-card"
hx-get="/api/stats/sats_settled"
hx-trigger="load"
hx-swap="innerHTML">
<div class="lp-stat-num">—</div>
<div class="lp-stat-label">SATS SETTLED</div>
</div>
<div class="lp-stat-card"
hx-get="/api/stats/agents_live"
hx-trigger="load"
hx-swap="innerHTML">
<div class="lp-stat-num">—</div>
<div class="lp-stat-label">AGENTS ONLINE</div>
</div>
<div class="lp-stat-card"
hx-get="/api/stats/uptime"
hx-trigger="load"
hx-swap="innerHTML">
<div class="lp-stat-num">—</div>
<div class="lp-stat-label">UPTIME</div>
</div>
</div>
</section>
<!-- ══ AUDIENCE CTAs ════════════════════════════════════════════════ -->
<section class="lp-section lp-audiences">
<h2 class="lp-section-title">Choose Your Path</h2>
<div class="lp-audience-grid">
<div class="lp-audience-card">
<div class="lp-audience-icon">&#x1F9D1;&#x200D;&#x1F4BB;</div>
<h3>Developers</h3>
<p>Integrate Timmy into your stack. REST API, WebSocket streams, and Lightning payment hooks &mdash; all documented.</p>
<a href="/docs/api" class="lp-btn lp-btn-primary lp-btn-sm">API DOCS &rarr;</a>
</div>
<div class="lp-audience-card lp-audience-featured">
<div class="lp-audience-badge">MOST POPULAR</div>
<div class="lp-audience-icon">&#x26A1;</div>
<h3>Get Work Done</h3>
<p>Open the workshop, describe your task, pay in sats. Results in seconds. No account required.</p>
<a href="/dashboard" class="lp-btn lp-btn-primary lp-btn-sm">TRY NOW &rarr;</a>
</div>
<div class="lp-audience-card">
<div class="lp-audience-icon">&#x1F4C8;</div>
<h3>Investors &amp; Partners</h3>
<p>Lightning-native AI marketplace. Sovereign infrastructure, global reach, pay-per-task economics.</p>
<a href="/lightning/ledger" class="lp-btn lp-btn-secondary lp-btn-sm">VIEW LEDGER &rarr;</a>
</div>
</div>
</section>
<!-- ══ FINAL CTA ════════════════════════════════════════════════════ -->
<section class="lp-section lp-final-cta">
<h2 class="lp-final-cta-title">Ready to hire Timmy?</h2>
<p class="lp-final-cta-sub">
Timmy AI Workshop &mdash; Lightning-Powered Agents by Alexander Whitestone
</p>
<a href="/dashboard" class="lp-btn lp-btn-primary lp-btn-lg">ENTER THE WORKSHOP &rarr;</a>
</section>
</div>
{% endblock %}

344
static/css/mission-control.css
View File

@@ -3075,3 +3075,347 @@
padding: 0.4rem 0.5rem;
}
}
/* ── Landing page (homepage value proposition) ────────────────── */
.lp-wrap {
max-width: 960px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
/* Hero */
.lp-hero {
text-align: center;
padding: 4rem 0 3rem;
}
.lp-hero-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--purple);
margin-bottom: 1.25rem;
}
.lp-hero-title {
font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 700;
line-height: 1.1;
color: var(--text-bright);
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
}
.lp-hero-sub {
font-size: 1.1rem;
color: var(--text);
line-height: 1.7;
max-width: 480px;
margin: 0 auto 2rem;
}
.lp-hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.lp-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 14px;
}
.lp-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
animation: lp-pulse 2s infinite;
flex-shrink: 0;
}
@keyframes lp-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Shared buttons */
.lp-btn {
display: inline-block;
font-family: var(--font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
border-radius: var(--radius-sm);
padding: 10px 22px;
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.lp-btn-primary {
background: var(--purple);
color: #fff;
border: 1px solid var(--purple);
}
.lp-btn-primary:hover {
background: #a855f7;
border-color: #a855f7;
box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
color: #fff;
}
.lp-btn-secondary {
background: transparent;
color: var(--text-bright);
border: 1px solid var(--border);
}
.lp-btn-secondary:hover {
border-color: var(--purple);
color: var(--purple);
}
.lp-btn-ghost {
background: transparent;
color: var(--text-dim);
border: 1px solid transparent;
}
.lp-btn-ghost:hover {
color: var(--text);
border-color: var(--border);
}
.lp-btn-sm {
font-size: 10px;
padding: 8px 16px;
}
.lp-btn-lg {
font-size: 13px;
padding: 14px 32px;
}
/* Shared section */
.lp-section {
padding: 3.5rem 0;
border-top: 1px solid var(--border);
}
.lp-section-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-bright);
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.lp-section-sub {
color: var(--text-dim);
font-size: 0.9rem;
margin-bottom: 2.5rem;
}
/* Value cards */
.lp-value-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem;
}
.lp-value-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.5rem 1.25rem;
}
.lp-value-icon {
font-size: 1.6rem;
display: block;
margin-bottom: 0.75rem;
}
.lp-value-card h3 {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-bright);
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.lp-value-card p {
font-size: 0.85rem;
color: var(--text);
line-height: 1.6;
margin: 0;
}
/* Capability accordion */
.lp-caps-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lp-cap-item {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.2s;
}
.lp-cap-item[open] {
border-color: var(--purple);
}
.lp-cap-summary {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
list-style: none;
user-select: none;
}
.lp-cap-summary::-webkit-details-marker { display: none; }
.lp-cap-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.lp-cap-label {
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-bright);
text-transform: uppercase;
flex: 1;
}
.lp-cap-chevron {
font-size: 0.7rem;
color: var(--text-dim);
transition: transform 0.2s;
}
.lp-cap-item[open] .lp-cap-chevron {
transform: rotate(180deg);
}
.lp-cap-body {
padding: 0 1.25rem 1.25rem;
border-top: 1px solid var(--border);
}
.lp-cap-body p {
font-size: 0.875rem;
color: var(--text);
line-height: 1.65;
margin: 0.875rem 0 0.75rem;
}
.lp-cap-bullets {
margin: 0;
padding-left: 1.1rem;
font-size: 0.8rem;
color: var(--text-dim);
line-height: 1.8;
}
/* Stats */
.lp-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.25rem;
}
.lp-stat-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.5rem 1rem;
text-align: center;
}
.lp-stat-num {
font-size: 1.75rem;
font-weight: 700;
color: var(--purple);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 0.5rem;
}
.lp-stat-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--text-dim);
text-transform: uppercase;
}
/* Audience CTAs */
.lp-audience-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.25rem;
}
.lp-audience-card {
position: relative;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.lp-audience-featured {
border-color: var(--purple);
background: rgba(124, 58, 237, 0.07);
}
.lp-audience-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--purple);
color: #fff;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.14em;
padding: 3px 10px;
border-radius: 999px;
white-space: nowrap;
}
.lp-audience-icon {
font-size: 1.75rem;
}
.lp-audience-card h3 {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-bright);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0;
}
.lp-audience-card p {
font-size: 0.85rem;
color: var(--text);
line-height: 1.65;
margin: 0;
flex: 1;
}
/* Final CTA */
.lp-final-cta {
text-align: center;
border-top: 1px solid var(--border);
padding: 4rem 0 2rem;
}
.lp-final-cta-title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--text-bright);
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
.lp-final-cta-sub {
color: var(--text-dim);
font-size: 0.875rem;
letter-spacing: 0.04em;
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 600px) {
.lp-hero { padding: 2.5rem 0 2rem; }
.lp-hero-cta-row { flex-direction: column; align-items: center; }
.lp-value-grid { grid-template-columns: 1fr; }
.lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
.lp-audience-grid { grid-template-columns: 1fr; }
}