← back to Grant
mockups/02-fit-feed.html
152 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grant — One fit-scored feed</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=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#f4f7f5; --panel:#ffffff; --ink:#0c1f17; --muted:#5a6b62;
--emerald:#047857; --accent:#10b981; --line:#e2ebe5;
--fed:#2563eb; --found:#7c3aed; --corp:#ea580c; --local:#0891b2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
nav{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nbar{display:flex;align-items:center;justify-content:space-between;height:66px;max-width:1240px;margin:0 auto;padding:0 30px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;color:var(--emerald);display:flex;align-items:center;gap:8px}
.logo .badge{background:var(--emerald);color:#fff;border-radius:7px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:15px}
.navlinks{display:flex;gap:26px;font-size:15px;color:var(--muted);align-items:center}
.navlinks a:hover{color:var(--ink)}
.btn{background:var(--emerald);color:#fff;font-weight:600;padding:10px 20px;border-radius:9px;font-size:15px;font-family:'Space Grotesk',sans-serif}
.btn:hover{background:#036249}
.hero{padding:60px 0 30px;display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#e4f5ee;color:var(--emerald);font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;margin-bottom:22px}
h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(38px,4.6vw,58px);line-height:1.04;letter-spacing:-1.5px;margin-bottom:20px}
h1 span{color:var(--emerald)}
.sub{font-size:18px;color:var(--muted);line-height:1.6;margin-bottom:28px;max-width:46ch}
.cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-out{border:1.5px solid var(--line);color:var(--ink);background:#fff;padding:13px 24px;border-radius:9px;font-weight:600;font-size:16px;font-family:'Space Grotesk',sans-serif}
.undr{margin-top:18px;font-size:13.5px;color:var(--muted)}
/* feed mock */
.feed{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -20px rgba(4,120,87,.22);overflow:hidden}
.feedhead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.feedhead .t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px}
.filters{display:flex;gap:6px}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;background:#eef3f0;color:var(--muted);font-weight:500}
.chip.on{background:var(--emerald);color:#fff}
.gcard{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center}
.gcard:last-child{border-bottom:none}
.score{flex:none;width:58px;height:58px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif}
.score .pct{font-weight:700;font-size:19px;line-height:1}
.score .lab{font-size:9px;text-transform:uppercase;letter-spacing:.5px;opacity:.7}
.gmeta{flex:1;min-width:0}
.gmeta .nm{font-weight:600;font-size:15.5px;margin-bottom:5px}
.gmeta .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.src{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;color:#fff}
.src.fed{background:var(--fed)} .src.found{background:var(--found)} .src.corp{background:var(--corp)} .src.local{background:var(--local)}
.due{font-weight:600;color:var(--emerald)}
.strip{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.strip .wrap{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;align-items:center}
.scell{text-align:center}
.scell b{font-family:'Space Grotesk',sans-serif;font-size:15px}
.scell span{display:block;font-size:13px;color:var(--muted)}
.why{padding:80px 0}
.why h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;letter-spacing:-1px;text-align:center;margin-bottom:10px}
.why p.l{text-align:center;color:var(--muted);max-width:50ch;margin:0 auto 46px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.col{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.col h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:8px}
.col p{color:var(--muted);font-size:14.5px;line-height:1.55}
.col .k{display:inline-block;font-size:12px;font-weight:600;color:var(--emerald);background:#e4f5ee;padding:4px 10px;border-radius:6px;margin-bottom:12px}
.closer{background:var(--emerald);color:#fff;text-align:center;padding:70px 0}
.closer h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-1px;margin-bottom:24px}
.closer .btn-w{background:#fff;color:var(--emerald);padding:15px 32px;border-radius:10px;font-weight:600;font-size:17px;font-family:'Space Grotesk',sans-serif;display:inline-block}
footer{padding:28px 0;text-align:center;color:var(--muted);font-size:13.5px}
@media(max-width:880px){.hero{grid-template-columns:1fr}.cols{grid-template-columns:1fr}.navlinks{display:none}}
</style>
</head>
<body>
<nav><div class="nbar">
<div class="logo"><span class="badge">G</span>Grant</div>
<div class="navlinks"><a href="#">Feed</a><a href="#">Fit scores</a><a href="#">Proposals</a><a href="#">Pricing</a><a href="#">Sign in</a><a class="btn" href="#">Start free</a></div>
</div></nav>
<section class="wrap hero">
<div>
<span class="pill">● One feed, every funding source</span>
<h1>Stop tab-hopping. <span>Every grant, ranked by fit.</span></h1>
<p class="sub">Federal, foundation, corporate, and local grants — siloed everywhere else — unified into a single feed and scored against your mission. See the 94%-fit opportunity before the 40% noise.</p>
<div class="cta-row">
<a class="btn btn-lg" href="#">See your fit scores</a>
<a class="btn-out" href="#">Browse the feed</a>
</div>
<p class="undr">Rivals are siloed — Grants.gov is federal-only, Candid is foundation-centric. Grant scores them all together.</p>
</div>
<div class="feed">
<div class="feedhead">
<div class="t">Your fit-scored feed</div>
<div class="filters"><span class="chip on">All</span><span class="chip">Federal</span><span class="chip">Foundation</span><span class="chip">Corporate</span><span class="chip">Local</span></div>
</div>
<div class="gcard">
<div class="score" style="background:#e4f5ee;color:#047857"><span class="pct">94%</span><span class="lab">fit</span></div>
<div class="gmeta"><div class="nm">NEA Grants for Arts Projects</div><div class="row"><span class="src fed">Federal</span><span>$10k–$100k</span><span class="due">Due in 6 days</span></div></div>
</div>
<div class="gcard">
<div class="score" style="background:#ede9fe;color:#7c3aed"><span class="pct">90%</span><span class="lab">fit</span></div>
<div class="gmeta"><div class="nm">Kresge Foundation — Health Equity</div><div class="row"><span class="src found">Foundation</span><span>up to $250k</span><span class="due">Due in 19 days</span></div></div>
</div>
<div class="gcard">
<div class="score" style="background:#cffafe;color:#0891b2"><span class="pct">88%</span><span class="lab">fit</span></div>
<div class="gmeta"><div class="nm">CA Arts Council — Local Impact</div><div class="row"><span class="src local">State / Local</span><span>$18k</span><span class="due">Due in 31 days</span></div></div>
</div>
<div class="gcard">
<div class="score" style="background:#ffedd5;color:#ea580c"><span class="pct">81%</span><span class="lab">fit</span></div>
<div class="gmeta"><div class="nm">Bank of America Charitable Fund</div><div class="row"><span class="src corp">Corporate</span><span>$25k</span><span class="due">Due in 44 days</span></div></div>
</div>
<div class="gcard">
<div class="score" style="background:#eef3f0;color:#5a6b62"><span class="pct">38%</span><span class="lab">fit</span></div>
<div class="gmeta"><div class="nm">Rural Broadband Infrastructure Pilot</div><div class="row"><span class="src fed">Federal</span><span>$1M+</span><span style="color:#9aa8a0">Low fit — filtered down</span></div></div>
</div>
</div>
</section>
<div class="strip"><div class="wrap">
<div class="scell"><b>4 source types</b><span>federal · foundation · corporate · local</span></div>
<div class="scell"><b>1 fit score</b><span>tuned to your org profile</span></div>
<div class="scell"><b>No double-tooling</b><span>free federal feed built in</span></div>
<div class="scell"><b>Individuals welcome</b><span>not just funded dev teams</span></div>
</div></div>
<section class="why wrap">
<h2>Precision the firehose can't give you</h2>
<p class="l">GrantWatch lists everything. Candid has the data. Neither ranks it for <em>you</em>.</p>
<div class="cols">
<div class="col"><span class="k">Vector B</span><h3>Source-unified</h3><p>Federal + foundation + corporate + local + individual in one ranked stream — no more paying for one tool and still tabbing over to Grants.gov.</p></div>
<div class="col"><span class="k">Fit scoring</span><h3>Ranked, not listed</h3><p>Every opportunity scored against your mission, budget, and history. The 38%-fit gets pushed down; the 94% rises to the top.</p></div>
<div class="col"><span class="k">Vector C</span><h3>Action, not reference</h3><p>Click a high-fit grant and draft the LOI in the same screen. Discovery flows straight into a proposal and outreach.</p></div>
</div>
</section>
<section class="closer"><div class="wrap">
<h2>See what actually fits your mission.</h2>
<a class="btn-w" href="#">See your fit scores</a>
</div></section>
<footer>Grant — Deadline River · One fit-scored feed for under-resourced nonprofits · Federal data via the U.S. Federal Register API</footer>
</body>
</html>