Timmy-time-dashboard/src/dashboard/templates/landing.html

{% 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 %}