`html/index.html`

98 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>SDCC Mockup Gallery</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;background:#0a0a0a;color:#fff;padding:48px 32px;min-height:100vh}
.wrap{max-width:1320px;margin:0 auto}
.crumbs{font-size:12px;color:#666;letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.crumbs a{color:#888;text-decoration:none}
h1{font-family:Georgia,serif;font-size:48px;font-weight:400;letter-spacing:-.02em;margin-bottom:8px}
.sub{color:#888;margin-bottom:32px;font-size:16px;max-width:720px;line-height:1.5}
.banner{background:#0e3b18;border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:18px 24px;margin-bottom:32px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#86efac}
.banner strong{color:#22c55e}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:#161616;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;transition:border-color .25s}
.card:hover{border-color:rgba(255,255,255,.4)}
.card-h{padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.08)}
.card-n{font-size:11px;color:#888;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.card-t{font-family:Georgia,serif;font-size:26px;margin:6px 0 10px;font-weight:400;letter-spacing:-.01em}
.card-p{color:#aaa;font-size:14px;line-height:1.55}
.card-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.tag{background:rgba(255,255,255,.08);padding:4px 11px;border-radius:99px;font-size:11px;color:#ccc}
.card-iframe{width:100%;height:560px;border:0;background:#fff;display:block}
.card-foot{padding:14px 26px;display:flex;gap:10px;background:#0d0d0d}
.btn{padding:8px 16px;border-radius:6px;font-size:13px;text-decoration:none;color:#fff;background:rgba(255,255,255,.1)}
.btn:hover{background:rgba(255,255,255,.2)}
.btn-fig{background:#a855f7}
</style></head><body>
<div class="wrap">
<div class="crumbs"><a href="/">SDCC Analysis</a> / Mockup Gallery</div>
<h1>10 Front-Page Concepts</h1>
<div class="sub">Each mockup is a different strategic answer drawn from the audit findings — different hero, different conversion path, different visual register. Built to be deployable HTML; ready to push into Figma for editing.</div>
<div class="banner"><span><strong>✓ All 10 deployed</strong> · scroll to compare · click any tile for full preview</span><span style="font-family:monospace;font-size:12px;color:#4ade80">2026-05-04</span></div>
<div class="grid">

<div class="card">
  <div class="card-h"><div class="card-n">Concept 01 · Live</div><div class="card-t">Debt Clock</div><div class="card-p">Live national debt counter dominates the hero. One number, one CTA. Journalism-grade restraint.</div><div class="card-tags"><span class="tag">FRED counter</span><span class="tag">single CTA</span><span class="tag">stat ribbon</span></div></div>
  <iframe class="card-iframe" src="01-debt-clock.html" title="Debt Clock"></iframe>
  <div class="card-foot"><a class="btn" href="01-debt-clock.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 02 · Live</div><div class="card-t">Story Wall</div><div class="card-p">Real borrower portraits dominate above the fold. Each tile is a name, state, dollar amount, outcome.</div><div class="card-tags"><span class="tag">borrower-faces hero</span><span class="tag">video badges</span></div></div>
  <iframe class="card-iframe" src="02-story-wall.html" title="Story Wall"></iframe>
  <div class="card-foot"><a class="btn" href="02-story-wall.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 03 · Live</div><div class="card-t">Activist Tracker</div><div class="card-p">Live signature counts on the active campaign. Scoreboard of how every senator just voted. Urgency is the design language.</div><div class="card-tags"><span class="tag">live sig counter</span><span class="tag">vote scoreboard</span><span class="tag">wins band</span></div></div>
  <iframe class="card-iframe" src="03-activist.html" title="Activist Tracker"></iframe>
  <div class="card-foot"><a class="btn" href="03-activist.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 04 · Live</div><div class="card-t">Tools-Forward</div><div class="card-p">PSLF eligibility calculator + email-your-rep widget side-by-side above the fold. The org that helps borrowers do something today.</div><div class="card-tags"><span class="tag">PSLF calculator</span><span class="tag">zip-to-rep</span></div></div>
  <iframe class="card-iframe" src="04-tools-forward.html" title="Tools-Forward"></iframe>
  <div class="card-foot"><a class="btn" href="04-tools-forward.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 05 · Live</div><div class="card-t">Magazine</div><div class="card-p">NYT-style editorial lead story above the fold, byline-first, sidebar opinions, most-read. SDCC as the publication of record on student debt.</div><div class="card-tags"><span class="tag">editorial lead</span><span class="tag">byline + photo</span><span class="tag">subscribe block</span></div></div>
  <iframe class="card-iframe" src="05-magazine.html" title="Magazine"></iframe>
  <div class="card-foot"><a class="btn" href="05-magazine.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 06 · Live</div><div class="card-t">State Map</div><div class="card-p">Interactive 50-state map dominates above the fold. Every bill, every state, status-coded. Federal advocacy as data brand.</div><div class="card-tags"><span class="tag">SVG state grid</span><span class="tag">bill tracker</span><span class="tag">spotlight state</span></div></div>
  <iframe class="card-iframe" src="06-state-map.html" title="State Map"></iframe>
  <div class="card-foot"><a class="btn" href="06-state-map.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 07 · Live</div><div class="card-t">Research Hub</div><div class="card-p">Document library forward, citation density, downloads. Peer-reviewed reports + raw datasets + how-to-cite. Built for journalists and Hill staffers.</div><div class="card-tags"><span class="tag">filterable library</span><span class="tag">citation panel</span><span class="tag">DOI-style records</span></div></div>
  <iframe class="card-iframe" src="07-research-hub.html" title="Research Hub"></iframe>
  <div class="card-foot"><a class="btn" href="07-research-hub.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 08 · Live</div><div class="card-t">Coalition</div><div class="card-p">"2.04M and counting" headline number. Partner-org logo wall (47 orgs, 230 affiliates). Senate testimonial. Power-in-numbers framing.</div><div class="card-tags"><span class="tag">2M big number</span><span class="tag">partner wall</span><span class="tag">Warren quote</span></div></div>
  <iframe class="card-iframe" src="08-coalition.html" title="Coalition"></iframe>
  <div class="card-foot"><a class="btn" href="08-coalition.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 09 · Live</div><div class="card-t">Brutalist</div><div class="card-p">Stark black/white/yellow, slogan-driven, scrolling marquee. Three non-negotiable demands. Maximum-energy protest aesthetic.</div><div class="card-tags"><span class="tag">Archivo Black</span><span class="tag">scrolling tape</span><span class="tag">3 demands</span></div></div>
  <iframe class="card-iframe" src="09-brutalist.html" title="Brutalist"></iframe>
  <div class="card-foot"><a class="btn" href="09-brutalist.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

<div class="card">
  <div class="card-h"><div class="card-n">Concept 10 · Live</div><div class="card-t">Bilingual Equity</div><div class="card-p">EN/ES dual-language hero, equity stats, multilingual tools, 6-language nav. Reaches the disproportionately-debt-burdened Hispanic borrower demographic.</div><div class="card-tags"><span class="tag">EN+ES hero</span><span class="tag">equity band</span><span class="tag">6 languages</span></div></div>
  <iframe class="card-iframe" src="10-bilingual.html" title="Bilingual Equity"></iframe>
  <div class="card-foot"><a class="btn" href="10-bilingual.html" target="_blank" rel="noopener noreferrer">Open full</a><a class="btn btn-fig" href="#">Push to Figma</a></div>
</div>

</div></div>
</body></html>