← back to Grant
mockups/01-river-flow.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 — Deadline River</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=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--ink:#04231a; --deep:#022b20; --emerald:#059669; --accent:#10b981;
--mist:#d1fae5; --foam:#ecfdf5; --paper:#f6fffb; --slate:#0a3a2c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:var(--paper);background:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:26px 28px;max-width:1200px;margin:0 auto}
.logo{font-family:'Fraunces',serif;font-weight:900;font-size:24px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}
.logo svg{flex:none}
.navlinks{display:flex;gap:30px;font-size:15px;color:var(--mist);align-items:center}
.navlinks a:hover{color:#fff}
.btn{background:var(--accent);color:#022b20;font-weight:600;padding:11px 20px;border-radius:999px;font-size:15px;transition:.2s}
.btn:hover{background:#34d399;transform:translateY(-1px)}
.btn-ghost{border:1px solid rgba(209,250,229,.3);color:var(--mist);padding:10px 18px;border-radius:999px;font-size:15px}
/* hero */
.hero{position:relative;padding:70px 0 40px;text-align:center}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:22px}
h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(42px,7vw,82px);line-height:.98;letter-spacing:-2px;max-width:14ch;margin:0 auto 24px}
h1 em{font-style:italic;color:var(--accent)}
.sub{font-size:20px;color:var(--mist);max-width:54ch;margin:0 auto 34px;line-height:1.55}
.cta-row{display:flex;gap:14px;justify-content:center;margin-bottom:18px}
.cta-row .btn{padding:15px 30px;font-size:17px}
.tiny{font-size:13px;color:#7dd3b0}
/* the river */
.river{position:relative;margin-top:60px;height:420px}
.river svg{width:100%;height:100%;display:block}
.deadline{position:absolute;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);border:1px solid rgba(16,185,129,.35);border-radius:14px;padding:13px 16px;width:212px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.deadline .when{font-family:'Fraunces',serif;font-weight:600;color:var(--accent);font-size:13px;margin-bottom:4px}
.deadline .name{font-size:14.5px;font-weight:600;line-height:1.3;color:#fff}
.deadline .amt{font-size:13px;color:var(--mist);margin-top:5px}
.dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(16,185,129,.25)}
.d1{left:2%;top:8px} .d2{left:26%;top:155px} .d3{left:52%;top:30px} .d4{left:75%;top:175px}
.dot1{left:8%;top:90px} .dot2{left:32%;top:120px} .dot3{left:58%;top:108px} .dot4{left:81%;top:138px}
/* stats strip */
.strip{background:var(--deep);border-top:1px solid rgba(16,185,129,.18);border-bottom:1px solid rgba(16,185,129,.18);margin-top:50px;padding:34px 0}
.strip .wrap{display:flex;justify-content:space-around;flex-wrap:wrap;gap:24px;text-align:center}
.stat .n{font-family:'Fraunces',serif;font-weight:900;font-size:40px;color:#fff}
.stat .l{font-size:14px;color:var(--mist);margin-top:4px}
/* features */
.features{padding:80px 0}
.features h2{font-family:'Fraunces',serif;font-size:38px;font-weight:600;text-align:center;letter-spacing:-1px;margin-bottom:12px}
.features .lede{text-align:center;color:var(--mist);max-width:50ch;margin:0 auto 50px;font-size:17px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--slate);border:1px solid rgba(16,185,129,.14);border-radius:16px;padding:26px;transition:.2s}
.card:hover{border-color:rgba(16,185,129,.4);transform:translateY(-3px)}
.card .ic{width:44px;height:44px;border-radius:12px;background:rgba(16,185,129,.16);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px}
.card h3{font-family:'Fraunces',serif;font-size:20px;font-weight:600;margin-bottom:8px}
.card p{color:var(--mist);font-size:15px;line-height:1.55}
/* closing */
.close{text-align:center;padding:80px 0 100px}
.close h2{font-family:'Fraunces',serif;font-size:clamp(34px,5vw,56px);font-weight:900;letter-spacing:-1.5px;margin-bottom:18px}
.close h2 em{color:var(--accent);font-style:italic}
footer{border-top:1px solid rgba(16,185,129,.15);padding:30px 0;color:#7dd3b0;font-size:14px;text-align:center}
@media(max-width:820px){.grid{grid-template-columns:1fr}.navlinks{display:none}.river{display:none}}
</style>
</head>
<body>
<nav>
<div class="logo">
<svg width="26" height="26" viewBox="0 0 26 26"><path d="M3 8c4-3 6 3 10 0s6 3 10 0M3 14c4-3 6 3 10 0s6 3 10 0M3 20c4-3 6 3 10 0s6 3 10 0" stroke="#10b981" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
Grant
</div>
<div class="navlinks">
<a href="#">Discover</a><a href="#">Proposals</a><a href="#">Deadline River</a><a href="#">Pricing</a>
<a class="btn-ghost" href="#">Sign in</a>
<a class="btn" href="#">Start free</a>
</div>
</nav>
<section class="hero">
<div class="wrap">
<span class="eyebrow">Never miss a grant deadline</span>
<h1>Funding flows. <em>Catch it</em> before the deadline passes.</h1>
<p class="sub">Grant turns every funding source — federal, foundation, corporate, local, individual — into one fit-scored stream that surfaces your next deadline before it slips by. For under-resourced nonprofits, not $899-a-month dev teams.</p>
<div class="cta-row">
<a class="btn" href="#">Start free</a>
<a class="btn-ghost" href="#" style="padding:15px 30px;font-size:17px">See your fit scores</a>
</div>
<p class="tiny">No credit card · Federal feed powered by the live U.S. Federal Register API</p>
</div>
<div class="wrap">
<div class="river">
<svg viewBox="0 0 1140 420" preserveAspectRatio="none">
<defs>
<linearGradient id="riv" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#022b20"/><stop offset=".5" stop-color="#059669"/><stop offset="1" stop-color="#10b981"/>
</linearGradient>
<linearGradient id="rivfade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#10b981" stop-opacity=".0"/><stop offset="1" stop-color="#10b981" stop-opacity=".25"/>
</linearGradient>
</defs>
<path d="M0,120 C200,40 280,260 480,180 C660,108 760,300 940,200 C1040,148 1100,210 1140,180 L1140,420 L0,420 Z" fill="url(#rivfade)"/>
<path d="M0,120 C200,40 280,260 480,180 C660,108 760,300 940,200 C1040,148 1100,210 1140,180" stroke="url(#riv)" stroke-width="5" fill="none"/>
<path d="M0,150 C200,80 280,290 480,210 C660,140 760,330 940,230 C1040,180 1100,240 1140,210" stroke="#10b981" stroke-width="1.5" fill="none" opacity=".4"/>
</svg>
<span class="dot dot1"></span><span class="dot dot2"></span><span class="dot dot3"></span><span class="dot dot4"></span>
<div class="deadline d1"><div class="when">Due in 6 days</div><div class="name">NEA Grants for Arts Projects</div><div class="amt">$10k–$100k · Federal · 94% fit</div></div>
<div class="deadline d2"><div class="when">Due in 19 days</div><div class="name">Kresge Foundation — Health</div><div class="amt">up to $250k · Foundation · 88% fit</div></div>
<div class="deadline d3"><div class="when">Due in 31 days</div><div class="name">Bank of America Charitable</div><div class="amt">$25k · Corporate · 81% fit</div></div>
<div class="deadline d4"><div class="when">Due in 44 days</div><div class="name">CA Arts Council — Local Impact</div><div class="amt">$18k · State/Local · 90% fit</div></div>
</div>
</div>
</section>
<div class="strip">
<div class="wrap">
<div class="stat"><div class="n">$2T+</div><div class="l">in grant records, fit-scored to your mission</div></div>
<div class="stat"><div class="n">5 sources</div><div class="l">federal · foundation · corporate · local · individual</div></div>
<div class="stat"><div class="n">1 feed</div><div class="l">every deadline in one flowing pipeline</div></div>
<div class="stat"><div class="n">< $299/mo</div><div class="l">the full arc, below Instrumentl's floor</div></div>
</div>
</div>
<section class="features">
<div class="wrap">
<h2>The whole journey, in one current</h2>
<p class="lede">Discover, score, draft, track, and reach out — without ever leaving the river.</p>
<div class="grid">
<div class="card"><div class="ic">🔎</div><h3>Fit-scored discovery</h3><p>Every grant gets a %-fit score tuned to your org profile — not a keyword firehose. Federal, foundation, corporate, and local in one ranked feed.</p></div>
<div class="card"><div class="ic">✍️</div><h3>Proposal generation</h3><p>Draft an LOI, a full proposal, or a one-pager in minutes. Grant writes from your mission and the funder's priorities.</p></div>
<div class="card"><div class="ic">📰</div><h3>Live news monitoring</h3><p>Funder priority shifts and new RFPs, sourced from the real U.S. Federal Register API — feeding your Deadline River the moment they post.</p></div>
<div class="card"><div class="ic">🤝</div><h3>Partner tracking</h3><p>Track nonprofits, politicians, corporations, and municipalities as co-applicants and warm intros — turn discovery into relationships.</p></div>
<div class="card"><div class="ic">✉️</div><h3>AI outreach templates</h3><p>Generate funder-specific outreach email the moment a deadline surfaces. Close the loop everyone else drops.</p></div>
<div class="card"><div class="ic">🌊</div><h3>The Deadline River</h3><p>A proactive pipeline, not a static calendar — driven by live news and partner signal so you act before deadlines pass.</p></div>
</div>
</div>
</section>
<section class="close">
<div class="wrap">
<h2>Stop fishing. <em>Start catching.</em></h2>
<p class="sub">Join the under-resourced orgs winning grants without the $10k tooling budget.</p>
<a class="btn" href="#" style="padding:16px 34px;font-size:18px">Find grants now</a>
</div>
</section>
<footer>Grant — Deadline River · Built for nonprofits priced out of Instrumentl & Candid · Federal data via the U.S. Federal Register API</footer>
</body>
</html>