`mockups/06-calm-minimal.html`

121 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grant — Never miss a deadline</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=Epilogue:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#ffffff; --soft:#f5f8f6; --ink:#13211c; --muted:#677a71;
    --emerald:#059669; --accent:#10b981; --line:#e8efeb; --mist:#ecfdf5;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Epilogue',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}

  nav{display:flex;align-items:center;justify-content:space-between;height:80px;max-width:1080px;margin:0 auto;padding:0 28px}
  .logo{font-weight:700;font-size:21px;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
  .logo .d{width:11px;height:11px;border-radius:50%;background:var(--emerald)}
  .navlinks{display:flex;gap:30px;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:11px 22px;border-radius:999px;font-size:15px}
  .btn:hover{background:#047a55}
  .btn-text{color:var(--ink);font-weight:600;font-size:15px}

  .hero{text-align:center;padding:96px 0 70px;max-width:760px;margin:0 auto}
  .badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--emerald);background:var(--mist);padding:8px 16px;border-radius:999px;margin-bottom:32px;font-weight:500}
  .badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent)}
  h1{font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-2px;line-height:1.02;margin-bottom:24px}
  h1 em{font-family:'Newsreader',serif;font-style:italic;font-weight:400;color:var(--emerald)}
  .sub{font-size:20px;color:var(--muted);line-height:1.6;max-width:50ch;margin:0 auto 40px}
  .cta-row{display:flex;gap:14px;justify-content:center;align-items:center}
  .btn-lg{padding:16px 32px;font-size:17px}
  .trust{margin-top:24px;font-size:14px;color:var(--muted)}

  /* quiet product line */
  .line{margin:60px auto 0;max-width:560px;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:8px}
  .lrow{display:flex;align-items:center;gap:14px;padding:15px 18px;background:#fff;border-radius:13px;margin-bottom:6px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
  .lrow:last-child{margin-bottom:0}
  .lrow .ic{width:38px;height:38px;border-radius:10px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
  .lrow .t{flex:1;text-align:left}
  .lrow .t b{font-size:15px;font-weight:600;display:block}
  .lrow .t span{font-size:13.5px;color:var(--muted)}
  .lrow .v{font-size:13px;font-weight:600;color:var(--emerald);background:var(--mist);padding:5px 11px;border-radius:999px}

  /* steps */
  .steps{padding:90px 0;text-align:center}
  .steps h2{font-size:34px;font-weight:700;letter-spacing:-1px;margin-bottom:8px}
  .steps .l{color:var(--muted);font-size:17px;margin-bottom:54px}
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:left}
  .step .n{font-family:'Newsreader',serif;font-style:italic;font-size:22px;color:var(--accent);margin-bottom:12px}
  .step h3{font-size:19px;font-weight:600;margin-bottom:8px}
  .step p{color:var(--muted);font-size:15px;line-height:1.6}

  /* value band */
  .band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:60px 0}
  .band .wrap{display:flex;justify-content:space-around;flex-wrap:wrap;gap:30px;text-align:center}
  .vc b{font-size:15px;font-weight:600}
  .vc span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
  .vc .lead{font-family:'Newsreader',serif;font-style:italic;font-size:30px;color:var(--emerald);display:block;margin-bottom:6px}

  .closer{text-align:center;padding:100px 0}
  .closer h2{font-size:clamp(32px,4.5vw,48px);font-weight:700;letter-spacing:-1.5px;margin-bottom:18px}
  .closer h2 em{font-family:'Newsreader',serif;font-style:italic;font-weight:400;color:var(--emerald)}
  .closer p{font-size:18px;color:var(--muted);margin-bottom:30px}
  footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:14px}
  @media(max-width:780px){.three{grid-template-columns:1fr}.navlinks{display:none}}
</style>
</head>
<body>
<nav>
  <div class="logo"><span class="d"></span>Grant</div>
  <div class="navlinks"><a href="#">How it works</a><a href="#">Pricing</a><a href="#">Sign in</a><a class="btn" href="#">Start free</a></div>
</nav>

<section class="hero">
  <span class="badge"><span class="pulse"></span>Never miss a grant deadline</span>
  <h1>Find the grants that fit. <em>Win the ones that matter.</em></h1>
  <p class="sub">Grant unifies every funding source into one fit-scored feed, drafts your proposal, and keeps every deadline flowing — so a one-person nonprofit can compete with a full development team.</p>
  <div class="cta-row">
    <a class="btn btn-lg" href="#">Start free</a>
    <a class="btn-text" href="#">See your fit scores →</a>
  </div>
  <p class="trust">Free to start · No credit card · Built for nonprofits priced out of Instrumentl &amp; Candid</p>

  <div class="line">
    <div class="lrow"><div class="ic">🔎</div><div class="t"><b>NEA Grants for Arts Projects</b><span>Federal · $10k–$100k</span></div><div class="v">94% fit</div></div>
    <div class="lrow"><div class="ic">✍️</div><div class="t"><b>Letter of inquiry — drafted</b><span>Generated from your mission</span></div><div class="v">Ready</div></div>
    <div class="lrow"><div class="ic">🌊</div><div class="t"><b>Deadline River</b><span>Next deadline surfaced automatically</span></div><div class="v">in 6 days</div></div>
  </div>
</section>

<section class="steps wrap">
  <h2>Three steps. One quiet workflow.</h2>
  <p class="l">No firehose, no 47-field search form, no $899/mo gate.</p>
  <div class="three">
    <div class="step"><div class="n">01</div><h3>Tell us your mission</h3><p>Describe your work once. Grant scores federal, foundation, corporate, and local grants against your profile — and filters out the noise.</p></div>
    <div class="step"><div class="n">02</div><h3>Draft in a click</h3><p>Turn any high-fit match into a letter of inquiry, a full proposal, or a one-pager — written from your mission and the funder's priorities.</p></div>
    <div class="step"><div class="n">03</div><h3>Never miss a date</h3><p>Your Deadline River keeps every deadline flowing, fed by live news from the real U.S. Federal Register — and ready outreach when it's time.</p></div>
  </div>
</section>

<div class="band"><div class="wrap">
  <div class="vc"><span class="lead">5</span><b>sources, one feed</b><span>federal · foundation · corporate · local · individual</span></div>
  <div class="vc"><span class="lead">$0</span><b>to start</b><span>no card, no commitment</span></div>
  <div class="vc"><span class="lead">1</span><b>workflow</b><span>discover → draft → deadline → outreach</span></div>
</div></div>

<section class="closer wrap">
  <h2>The deadline is coming. <em>Be ready.</em></h2>
  <p>Start free today — find your first high-fit grant in minutes.</p>
  <a class="btn btn-lg" href="#">Find grants now</a>
</section>

<footer>Grant — Deadline River · AI grant discovery, drafting &amp; deadline tracking for nonprofits · Federal data via the U.S. Federal Register API</footer>
</body>
</html>