← back to Grant
mockups/05-brutalist-data.html
124 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grant — The Numbers</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=Anton&family=Archivo+Black&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{
--black:#0a0a0a; --paper:#eef0e9; --emerald:#00e676; --deep:#00b85c;
--acid:#c6ff00; --ink:#0a0a0a; --line:#0a0a0a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'JetBrains Mono',monospace;background:var(--paper);color:var(--ink)}
a{text-decoration:none;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
nav{display:flex;align-items:center;justify-content:space-between;border-bottom:4px solid var(--ink);padding:16px 24px;max-width:1280px;margin:0 auto}
.logo{font-family:'Archivo Black',sans-serif;font-size:26px;letter-spacing:-1px;text-transform:uppercase}
.navlinks{display:flex;gap:4px;align-items:center}
.navlinks a{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:9px 12px;border:2px solid transparent}
.navlinks a:hover{border:2px solid var(--ink)}
.btn{background:var(--ink);color:var(--emerald);font-family:'Archivo Black',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;padding:12px 18px;border:2px solid var(--ink)}
.btn:hover{background:var(--emerald);color:var(--ink)}
.hero{border-bottom:4px solid var(--ink);padding:54px 0 40px}
.tag{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:3px;background:var(--acid);display:inline-block;padding:5px 12px;border:2px solid var(--ink);margin-bottom:26px}
h1{font-family:'Anton',sans-serif;font-size:clamp(56px,11vw,148px);line-height:.84;text-transform:uppercase;letter-spacing:-2px;margin-bottom:24px}
h1 .hl{background:var(--emerald);padding:0 8px;display:inline-block}
.sub{font-size:18px;font-weight:600;max-width:60ch;line-height:1.5;margin-bottom:30px}
.cta-row{display:flex;gap:0;flex-wrap:wrap}
.btn-lg{font-size:16px;padding:18px 30px}
.btn-out{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-left:none;font-family:'Archivo Black',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:1px;padding:18px 30px}
.btn-out:hover{background:var(--acid)}
/* big numbers */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:4px solid var(--ink)}
.num{border-right:4px solid var(--ink);padding:34px 22px}
.num:last-child{border-right:none}
.num .big{font-family:'Anton',sans-serif;font-size:clamp(44px,5.5vw,76px);line-height:.9;letter-spacing:-1px}
.num.inv{background:var(--ink);color:var(--emerald)}
.num.green{background:var(--emerald)}
.num .lab{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-top:12px;line-height:1.4}
/* compare */
.compare{border-bottom:4px solid var(--ink);padding:48px 0}
.compare h2{font-family:'Anton',sans-serif;font-size:clamp(32px,5vw,56px);text-transform:uppercase;letter-spacing:-1px;margin-bottom:28px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border:3px solid var(--ink);padding:14px 16px;text-align:left}
th{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:1px;background:var(--ink);color:var(--paper)}
td.you{background:var(--emerald);font-weight:600}
.yes{font-family:'Archivo Black',sans-serif}.no{color:#888}
.feat{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:4px solid var(--ink)}
.fcell{border-right:4px solid var(--ink);padding:28px 18px}
.fcell:last-child{border-right:none}
.fcell .e{font-family:'Anton',sans-serif;font-size:34px;display:block;margin-bottom:10px}
.fcell h3{font-family:'Archivo Black',sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;line-height:1.1}
.fcell p{font-size:13px;line-height:1.5;font-weight:500}
.closer{border-bottom:4px solid var(--ink);padding:70px 0;text-align:center;background:var(--ink);color:var(--paper)}
.closer h2{font-family:'Anton',sans-serif;font-size:clamp(40px,8vw,96px);text-transform:uppercase;letter-spacing:-2px;line-height:.88;margin-bottom:28px}
.closer h2 .hl{background:var(--emerald);color:var(--ink);padding:0 8px}
.closer .btn{background:var(--emerald);color:var(--ink);font-size:18px;padding:18px 36px}
footer{padding:22px 0;text-align:center;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px}
@media(max-width:880px){.numbers{grid-template-columns:1fr 1fr}.num:nth-child(2){border-right:none}.feat{grid-template-columns:1fr}.fcell{border-right:none;border-bottom:4px solid var(--ink)}.navlinks a:not(.btn){display:none}table{font-size:12px}th,td{padding:9px}}
</style>
</head>
<body>
<nav>
<div class="logo">Grant▪</div>
<div class="navlinks"><a href="#">Discover</a><a href="#">Score</a><a href="#">Draft</a><a href="#">Pricing</a><a class="btn" href="#">Start free</a></div>
</nav>
<section class="hero wrap">
<span class="tag">Deadline River · The full seeker arc</span>
<h1>$2 Trillion<br>in grants.<br><span class="hl">Zero</span> missed deadlines.</h1>
<p class="sub">Federal, foundation, corporate, local, and individual grants — fit-scored into one feed, drafted into proposals, tracked to the day. The whole machine, below Instrumentl's $299/mo floor.</p>
<div class="cta-row">
<a class="btn btn-lg" href="#">Start free</a>
<a class="btn-out" href="#">See the numbers</a>
</div>
</section>
<section class="numbers">
<div class="num"><div class="big">$2T+</div><div class="lab">in grant records, fit-scored to your org</div></div>
<div class="num inv"><div class="big">5</div><div class="lab">source types unified into one ranked feed</div></div>
<div class="num green"><div class="big">94%</div><div class="lab">fit on your top match this week</div></div>
<div class="num"><div class="big">$0</div><div class="lab">to start — no credit card, no gate</div></div>
</section>
<section class="compare wrap">
<h2>The math against the incumbents.</h2>
<table>
<tr><th>Tool</th><th>Entry price</th><th>All 4 sources</th><th>Fit scoring</th><th>Drafts proposals</th><th>Serves individuals</th></tr>
<tr><td>Instrumentl</td><td>$299/mo</td><td class="no">Partial</td><td class="yes">Yes</td><td class="no">$499+/mo</td><td class="no">No</td></tr>
<tr><td>Candid / FDO</td><td>~$1,199/yr</td><td class="no">Foundation</td><td class="no">Light</td><td class="no">No</td><td class="no">No</td></tr>
<tr><td>Grants.gov</td><td>Free</td><td class="no">Federal only</td><td class="no">No</td><td class="no">Forms only</td><td class="no">Federal</td></tr>
<tr><td>GrantWatch</td><td>$249/yr</td><td class="no">Noisy</td><td class="no">Light</td><td class="no">No</td><td class="yes">Yes</td></tr>
<tr><td class="you">Grant</td><td class="you">< $299/mo</td><td class="you yes">Yes</td><td class="you yes">Yes</td><td class="you yes">LOI / full / 1-pager</td><td class="you yes">Yes</td></tr>
</table>
</section>
<section class="feat">
<div class="fcell"><span class="e">01</span><h3>Discover</h3><p>One fit-scored feed across federal, foundation, corporate, and local sources.</p></div>
<div class="fcell"><span class="e">02</span><h3>Draft</h3><p>LOI, full proposal, or one-pager — generated from your mission.</p></div>
<div class="fcell"><span class="e">03</span><h3>Watch</h3><p>Live news from the real U.S. Federal Register API feeds your pipeline.</p></div>
<div class="fcell"><span class="e">04</span><h3>Partner</h3><p>Track nonprofits, politicians, corporations, and municipalities.</p></div>
<div class="fcell"><span class="e">05</span><h3>Reach out</h3><p>AI outreach templates close the loop into funder relationships.</p></div>
</section>
<section class="closer">
<div class="wrap">
<h2>Quit paying<br><span class="hl">$899/mo</span> for half<br>the machine.</h2>
<a class="btn" href="#">Find grants now</a>
</div>
</section>
<footer>Grant — Deadline River · For under-resourced nonprofits · Federal data via the U.S. Federal Register API</footer>
</body>
</html>