← back to Grant
mockups/03-command-center.html
160 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grant — Command Center</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#070d12; --panel:#0e1820; --panel2:#13212c; --ink:#eaf2ee; --muted:#8aa39a;
--emerald:#059669; --accent:#10b981; --line:#1d2f3a; --teal:#22d3ee; --gold:#fbbf24;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:radial-gradient(1100px 600px at 80% -10%,rgba(5,150,105,.18),transparent),var(--bg);color:var(--ink);min-height:100vh}
a{text-decoration:none;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 30px}
nav{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1280px;margin:0 auto;padding:0 30px}
.logo{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;gap:9px}
.logo .sq{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--teal));display:flex;align-items:center;justify-content:center;color:#06281f;font-weight:800}
.navlinks{display:flex;gap:28px;font-size:15px;color:var(--muted);align-items:center}
.navlinks a:hover{color:#fff}
.btn{background:linear-gradient(135deg,var(--accent),#0ea5a0);color:#04201a;font-weight:700;padding:11px 22px;border-radius:10px;font-size:15px;font-family:'Sora',sans-serif}
.hero{text-align:center;padding:64px 0 36px}
.tag{display:inline-block;font-size:13px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:20px}
h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(40px,5.5vw,68px);line-height:1.02;letter-spacing:-2px;max-width:18ch;margin:0 auto 20px}
h1 b{background:linear-gradient(120deg,var(--accent),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:19px;color:var(--muted);max-width:60ch;margin:0 auto 30px;line-height:1.55}
.cta-row{display:flex;gap:14px;justify-content:center}
.btn-lg{padding:15px 30px;font-size:17px}
.btn-ghost{border:1px solid var(--line);color:var(--ink);padding:14px 28px;border-radius:10px;font-weight:600;font-size:17px;font-family:'Sora',sans-serif}
/* dashboard */
.dash{margin-top:54px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.dwin{display:grid;grid-template-columns:200px 1fr;gap:16px}
.side{background:var(--panel2);border-radius:14px;padding:16px}
.side .org{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;margin-bottom:3px}
.side .orgsub{font-size:12px;color:var(--muted);margin-bottom:18px}
.navitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:14px;color:var(--muted);margin-bottom:3px}
.navitem.on{background:rgba(16,185,129,.16);color:#fff;font-weight:600}
.navitem .e{font-size:16px}
.modgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:14px}
.mod{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;min-height:138px}
.mod .h{display:flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:600;font-size:13.5px;color:var(--muted);margin-bottom:12px}
.mod .h .e{width:26px;height:26px;border-radius:7px;background:rgba(16,185,129,.15);display:flex;align-items:center;justify-content:center;font-size:14px}
.big{font-family:'Sora',sans-serif;font-weight:800;font-size:30px}
.mline{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}
.mini{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.mini:last-child{border:none}
.mini .pct{color:var(--accent);font-weight:600;font-family:'Sora',sans-serif}
.barwrap{height:7px;background:#0a141a;border-radius:4px;overflow:hidden;margin-top:8px}
.bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--teal));border-radius:4px}
.span2{grid-column:span 2}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ch{font-size:11px;padding:4px 9px;border-radius:6px;background:rgba(34,211,238,.13);color:var(--teal)}
.ch.g{background:rgba(251,191,36,.14);color:var(--gold)}
.strip{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;padding:54px 0 0;text-align:center}
.strip .n{font-family:'Sora',sans-serif;font-weight:800;font-size:34px;background:linear-gradient(120deg,var(--accent),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.strip .l{font-size:13.5px;color:var(--muted);margin-top:4px}
.closer{text-align:center;padding:90px 0}
.closer h2{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(32px,4.5vw,52px);letter-spacing:-1.5px;margin-bottom:20px}
footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;color:var(--muted);font-size:13.5px}
@media(max-width:960px){.modgrid{grid-template-columns:1fr 1fr}.dwin{grid-template-columns:1fr}.side{display:none}.navlinks{display:none}.span2{grid-column:span 1}}
@media(max-width:600px){.modgrid{grid-template-columns:1fr}}
</style>
</head>
<body>
<nav>
<div class="logo"><span class="sq">G</span>Grant</div>
<div class="navlinks"><a href="#">Workspace</a><a href="#">Discovery</a><a href="#">Proposals</a><a href="#">Outreach</a><a href="#">Pricing</a><a href="#">Sign in</a><a class="btn" href="#">Start free</a></div>
</nav>
<section class="hero wrap">
<span class="tag">The full seeker arc · one workspace</span>
<h1>Your entire grant operation, <b>on one screen.</b></h1>
<p class="sub">Discover → fit-score → draft → track deadlines → monitor news → reach out. Five modules other tools sell separately (or gate behind $899/mo), unified into a single command center built for under-resourced nonprofits.</p>
<div class="cta-row">
<a class="btn btn-lg" href="#">Start free</a>
<a class="btn-ghost" href="#">Take the tour</a>
</div>
<div class="dash">
<div class="dwin">
<aside class="side">
<div class="org">Riverside Youth Arts</div>
<div class="orgsub">501(c)(3) · est. 2019</div>
<div class="navitem on"><span class="e">⊞</span> Workspace</div>
<div class="navitem"><span class="e">🔎</span> Discovery</div>
<div class="navitem"><span class="e">✍️</span> Proposals</div>
<div class="navitem"><span class="e">📰</span> News</div>
<div class="navitem"><span class="e">🤝</span> Partners</div>
<div class="navitem"><span class="e">✉️</span> Outreach</div>
</aside>
<div class="modgrid">
<div class="mod">
<div class="h"><span class="e">🔎</span> Discovery</div>
<div class="big">42</div>
<div class="mline">high-fit grants matched this week across 4 sources</div>
</div>
<div class="mod">
<div class="h"><span class="e">🎯</span> Top fit score</div>
<div class="big">94%</div>
<div class="mline">NEA Grants for Arts Projects</div>
<div class="barwrap"><div class="bar" style="width:94%"></div></div>
</div>
<div class="mod">
<div class="h"><span class="e">🌊</span> Deadline River</div>
<div class="mini"><span>NEA Arts Projects</span><span class="pct">6d</span></div>
<div class="mini"><span>Kresge — Health</span><span class="pct">19d</span></div>
<div class="mini"><span>CA Arts Council</span><span class="pct">31d</span></div>
</div>
<div class="mod span2">
<div class="h"><span class="e">✍️</span> Proposals in flight</div>
<div class="mini"><span>NEA — full proposal</span><span class="pct">Draft 80%</span></div>
<div class="mini"><span>Kresge — letter of inquiry</span><span class="pct">Review</span></div>
<div class="mini"><span>BofA — one-pager</span><span class="pct">Sent</span></div>
</div>
<div class="mod">
<div class="h"><span class="e">📰</span> News (live)</div>
<div class="mline">3 new Federal Register notices match your mission</div>
<div class="chips"><span class="ch">RFP opened</span><span class="ch g">Priority shift</span></div>
</div>
<div class="mod span2">
<div class="h"><span class="e">🤝</span> Partners & outreach</div>
<div class="mini"><span>Rep. district office — co-letter</span><span class="pct">Warm</span></div>
<div class="mini"><span>City Arts Commission — municipal</span><span class="pct">Intro sent</span></div>
</div>
<div class="mod">
<div class="h"><span class="e">✉️</span> Outreach drafts</div>
<div class="big">5</div>
<div class="mline">funder-specific emails ready to send</div>
</div>
</div>
</div>
</div>
<div class="strip">
<div><div class="n">5</div><div class="l">modules, one product</div></div>
<div><div class="n">$0</div><div class="l">to start — no card</div></div>
<div><div class="n">< $299/mo</div><div class="l">below Instrumentl's floor</div></div>
<div><div class="n">1 login</div><div class="l">no more tool-stacking</div></div>
</div>
</section>
<section class="closer wrap">
<h2>One workspace. Every step from prospect to award.</h2>
<p class="sub">No competitor combines all five. The cheap ones are listings-only; the full ones cost a grant budget.</p>
<a class="btn btn-lg" href="#">Open your command center</a>
</section>
<footer>Grant — Deadline River · The full seeker arc in one workspace · News powered by the live U.S. Federal Register API</footer>
</body>
</html>