templates/end.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>End card</title>
<style>
  /* ======== BRAND (edit these per product) ======== */
  :root {
    --brand: #4c6ef5;
    --ink: #18181b;
    --grey: #52525b;
    --line: #e4e7f2;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
    --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  /* ================================================ */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 1920px; height: 1080px; overflow: hidden; }
  body {
    font-family: var(--sans);
    background:
      radial-gradient(1100px 760px at 12% 110%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
      linear-gradient(160deg, #f6f8ff 0%, #ffffff 60%);
    display: flex; align-items: center; justify-content: center;
  }
  .card {
    width: 1180px; background: #fff; border: 1px solid var(--line); border-radius: 30px;
    box-shadow: 0 18px 50px rgba(24,24,27,0.12);
    padding: 100px 110px 84px; text-align: center;
  }
  .wordmark { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--brand); }
  h1 { font-family: var(--mono); color: var(--ink); font-size: 66px; font-weight: 800; line-height: 1.14; letter-spacing: -1.5px; margin-top: 26px; }
  h1 .hl { color: var(--brand); }
  .subtitle { color: var(--grey); font-size: 28px; line-height: 1.55; margin-top: 28px; }
  .footer { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 30px; font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--grey); }
  .footer .accent { color: var(--brand); font-weight: 700; }
</style>
</head>
<body>
  <div class="card">
    <div class="wordmark">Acme</div>
    <h1>Try it on <span class="hl">your projects</span></h1>
    <p class="subtitle">Getting started takes minutes.<br>No invented contact details — ask the team what to print here.</p>
    <div class="footer">Get started · <span class="accent">acme.example</span></div>
  </div>
</body>
</html>