Service Landing Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[SERVICE] for [AUDIENCE] — [BUSINESS NAME]</title>
  <meta name="description" content="[ONE-LINE PROMISE: outcome, audience, timeframe]">
  <style>
    :root{ --ink:#0B1220; --panel:#141E33; --cloud:#F7F8FB; --accent:#F6821F;
           --green:#22C55E; --slate:#AEB8CC; --hair:#263149; }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,Arial,sans-serif;background:var(--ink);
         color:var(--cloud);line-height:1.6;padding:0 20px}
    .wrap{max-width:820px;margin:0 auto;padding:56px 0 70px}
    h1{font-size:clamp(30px,6vw,46px);line-height:1.12;margin-bottom:14px}
    h2{font-size:26px;margin:44px 0 10px}
    .lead{font-size:19px;color:var(--slate);margin-bottom:26px}
    .btn{display:inline-block;background:var(--accent);color:var(--ink);font-weight:700;
         padding:15px 26px;border-radius:12px;text-decoration:none;font-size:17px}
    .card{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:20px;margin:12px 0}
    .form{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
    .form input[type=email]{flex:1 1 240px;padding:14px 16px;border-radius:11px;border:1px solid var(--hair);
         background:#0A1224;color:var(--cloud);font-size:16px}
    .hp{position:absolute;left:-9999px}
    .fine{font-size:12.5px;color:#6B7690;margin-top:26px}
  </style>
</head>
<body>
<div class="wrap">

  <h1>[OUTCOME] for [AUDIENCE] — without [PAIN POINT].</h1>
  <p class="lead">[ONE SENTENCE: who it's for, what they get, how long it takes.]</p>

  <form class="form" action="/api/lead" method="post">
    <input type="email" name="email" placeholder="you@email.com" required>
    <input type="hidden" name="source" value="[page-name]">
    <input type="hidden" name="ts" value="">
    <input class="hp" type="text" name="hp" tabindex="-1">
    <button class="btn" type="submit">[CTA: get the free X] →</button>
  </form>

  <h2>What you get</h2>
  <div class="card"><h3>1 · [BENEFIT]</h3><p>[ONE LINE OF PROOF OR DETAIL]</p></div>
  <div class="card"><h3>2 · [BENEFIT]</h3><p>[ONE LINE OF PROOF OR DETAIL]</p></div>
  <div class="card"><h3>3 · [BENEFIT]</h3><p>[ONE LINE OF PROOF OR DETAIL]</p></div>

  <h2>How it works</h2>
  <div class="card"><p><b>Step 1</b> — [ACTION].</p><p><b>Step 2</b> — [ACTION].</p>
    <p><b>Step 3</b> — [RESULT].</p></div>

  <h2>Questions</h2>
  <div class="card"><b>[QUESTION 1]</b><p>[HONEST ANSWER]</p></div>
  <div class="card"><b>[QUESTION 2]</b><p>[HONEST ANSWER]</p></div>

  <h2>[GUARANTEE LINE: plain language, easy to honor]</h2>

  <form class="form" action="/api/lead" method="post">
    <input type="email" name="email" placeholder="you@email.com" required>
    <input type="hidden" name="source" value="[page-name]-footer">
    <input type="hidden" name="ts" value="">
    <input class="hp" type="text" name="hp" tabindex="-1">
    <button class="btn" type="submit">[CTA] →</button>
  </form>

  <p class="fine">[BUSINESS NAME] · [CONTACT EMAIL] · [POSTAL ADDRESS — required in commercial email]
  · Unsubscribe any time by replying to any email.</p>
</div>
<script>
  document.querySelectorAll('input[name=ts]').forEach(function(t){
    t.value = String(Math.floor(Date.now()/1000));   // bots submit in 0 seconds
  });
</script>
</body>
</html>