• Updated 21 Oct, 22:07 UTC
  • Next run 22 Oct, 05:17 UTCNext 22 Oct 05:17
  • Last 7 days: 12 new models, 134 runs7 d: 12 models, 134 runs
Network offOpen alone (new tab)

Run details

Model
recursive/flint-v1.0:free
Route
OpenRouter API, one user message
Served by
Recursive
Reasoning
provider default, 12,244 reasoning tokens
Limits
60 min · 235,929 output tokens
Date
21 Oct 2026
Time
2 min 52 s
Size
29 kB
Tokens
88 in, 22,464 out
List price
free (list price $0)
Paid
$0 (free route)

Raw files: output · meta.json

Exact prompt

Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

29 kB 523 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lumen Cycles — Custom Cargo Bikes, Copenhagen</title>
  <style>
    :root {
      --ink: #121418;
      --paper: #f7f4ee;
      --mist: #ece8df;
      --card: #fffdf8;
      --line: #ddd6c8;
      --muted: #66635a;
      --accent: #b4442c;
      --accent-dark: #8e3520;
      --radius: 20px;
      --shadow: 0 24px 60px rgba(18,20,24,.12);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: var(--paper);
      color: var(--ink);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3 { line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 .5em; }
    p { margin: 0 0 1em; }
    svg { display: block; }

    .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
    .section { padding: 96px 0; }
    .section.alt { background: var(--mist); }

    .section-head { max-width: 720px; margin-bottom: 56px; }
    .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
    .section-head.center .section-lead { margin-left: auto; margin-right: auto; }
    .section-title { font-size: clamp(30px, 4.5vw, 48px); }
    .section-lead { font-size: 18px; color: var(--muted); max-width: 640px; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      background: #f3e7e0;
      border: 1px solid #e6cfc4;
      padding: 8px 12px;
      border-radius: 999px;
      margin-bottom: 18px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
      border: 1px solid transparent;
      cursor: pointer;
      text-decoration: none;
      transition: all .2s ease;
      font-family: inherit;
    }
    .btn-primary { background: var(--ink); color: var(--paper); }
    .btn-primary:hover { background: var(--accent); }
    .btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
    .btn-ghost:hover { border-color: var(--ink); }
    .btn-lg { padding: 18px 28px; font-size: 16px; }
    .btn:disabled { opacity: .7; cursor: default; }

    .announce { background: var(--ink); color: #f5f1e8; text-align: center; padding: 10px 16px; font-size: 13px; letter-spacing: .04em; }

    .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247,244,238,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
    .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
    .main-nav { display: flex; gap: 26px; }
    .main-nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
    .main-nav a:hover { color: var(--ink); }

    .hero { padding: 72px 0 96px; background: radial-gradient(900px 500px at 85% -10%, #ece4d3, transparent 60%), var(--paper); }
    .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
    .hero h1 { font-size: clamp(44px, 6vw, 74px); line-height: .98; letter-spacing: -0.045em; margin-bottom: 18px; }
    .hero .lead { font-size: 19px; color: var(--muted); max-width: 540px; }
    .hero-actions { display: flex; gap: 12px; margin: 26px 0 16px; flex-wrap: wrap; }
    .hero-proof { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

    .hero-visual { background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 28px; position: relative; }
    .bike-frame { background: linear-gradient(180deg, #f3efe6, #ece5d6); border-radius: 20px; border: 1px solid #ddd5c3; padding: 20px; }
    .bike-caption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
    .spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .chip { background: var(--mist); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; }

    .trust { border-block: 1px solid var(--line); background: var(--card); padding: 22px 0; }
    .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .trust-item { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--muted); text-align: center; }
    .trust-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--accent); flex: none; }

    .builds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .build-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 30px rgba(18,20,24,.05); }
    .build-card.featured { border-color: var(--ink); box-shadow: var(--shadow); }
    .build-tag { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
    .build-card h3 { font-size: 26px; margin: 0; }
    .build-price { font-size: 14px; font-weight: 700; color: var(--muted); }
    .build-price strong { color: var(--ink); font-size: 22px; }
    .build-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); font-size: 15px; }
    .build-card ul li { display: flex; gap: 10px; align-items: flex-start; }
    .build-card ul svg { color: var(--accent); flex: none; margin-top: 2px; }
    .card-link { margin-top: auto; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px; align-self: flex-start; }

    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
    .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }
    .step h3 { font-size: 20px; margin-bottom: 8px; }
    .step p { margin: 0; color: var(--muted); font-size: 15px; }

    .pricing-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }
    .price-card { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 20px; }
    .price-card.featured { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .price { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; }
    .price span { font-size: 16px; font-weight: 600; color: var(--muted); }
    .price-card.featured .price span { color: #cfc8bb; }
    .price-note { color: var(--muted); font-size: 14px; }
    .price-card.featured .price-note { color: #cfc8bb; }
    .include-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
    .include-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
    .include-list svg { color: var(--accent); flex: none; margin-top: 2px; }
    .optional-list { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--line); display: grid; gap: 10px; color: var(--muted); font-size: 15px; }
    .price-card.featured .optional-list { border-top-color: #3a3f47; color: #cfc8bb; }

    .quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .quote-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
    .quote-card .stars { color: #e2a13c; letter-spacing: 2px; }
    .quote-card p { font-size: 17px; color: var(--ink-soft); }
    .quote-author { margin-top: auto; display: flex; align-items: center; gap: 12px; }
    .quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; font-weight: 800; color: var(--accent); }
    .quote-author strong { display: block; }
    .quote-author span { font-size: 13px; color: var(--muted); }

    .faq-list { max-width: 780px; display: grid; gap: 12px; }
    details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
    summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--accent); }
    details[open] summary::after { content: "–"; }
    details p { padding: 0 24px 22px; margin: 0; color: var(--muted); }

    .cta-card { background: var(--ink); color: var(--paper); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; box-shadow: var(--shadow); }
    .cta-card h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; }
    .cta-card p { color: #cfc8bb; }
    .cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .field { display: grid; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-size: 13px; font-weight: 700; }
    .field input, .field select, .field textarea { font: inherit; padding: 14px 16px; border-radius: 12px; border: 1px solid #3a3f47; background: #17191e; color: var(--paper); width: 100%; }
    .field textarea { min-height: 110px; }
    .form-success { display: none; background: #14301f; color: #d7ecd9; padding: 16px; border-radius: 12px; margin-bottom: 16px; }

    .site-footer { border-top: 1px solid var(--line); padding: 48px 0; background: var(--card); }
    .footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
    .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
    .footer-links a:hover { color: var(--ink); }
    .footer-base { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

    @media (max-width: 960px) {
      .hero-grid, .why-grid, .pricing-grid, .cta-card { grid-template-columns: 1fr; }
      .builds-grid, .quotes-grid { grid-template-columns: 1fr 1fr; }
      .process-grid { grid-template-columns: 1fr 1fr; }
      .trust-grid { grid-template-columns: 1fr 1fr; }
      .cta-form { grid-template-columns: 1fr; }
      .cta-card { padding: 36px; }
    }
    @media (max-width: 640px) {
      .section { padding: 64px 0; }
      .builds-grid, .quotes-grid, .process-grid, .trust-grid { grid-template-columns: 1fr; }
      .main-nav { display: none; }
      .header-inner { min-height: 0; height: auto; padding: 12px 0; flex-wrap: wrap; }
    }
  </style>
</head>
<body>

  <div class="announce">Spring 2026 custom cargo builds now booking — Copenhagen workshop</div>

  <header class="site-header">
    <div class="container header-inner">
      <a class="brand" href="#top">
        <svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden="true">
          <circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="2.5"></circle>
          <path d="M16 6v20M6 16h20" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path>
        </svg>
        <span>Lumen Cycles</span>
      </a>
      <nav class="main-nav">
        <a href="#work">Work</a>
        <a href="#process">Process</a>
        <a href="#pricing">Pricing</a>
        <a href="#faq">FAQ</a>
      </nav>
      <a href="#build" class="btn btn-primary">Book a build</a>
    </div>
  </header>

  <section class="hero" id="top">
    <div class="container hero-grid">
      <div>
        <div class="eyebrow">Copenhagen custom cargo workshop</div>
        <h1>Your cargo bike, built around your real life.</h1>
        <p class="lead">Lumen Cycles designs and builds custom cargo bikes in our Copenhagen workshop. Steel or carbon, family size, cargo needs, city streets. From €4,000.</p>
        <div class="hero-actions">
          <a href="#build" class="btn btn-primary btn-lg">Start your build</a>
          <a href="#work" class="btn btn-ghost btn-lg">Explore builds</a>
        </div>
        <div class="hero-proof">Custom frames in-house · Built to order · No off-the-shelf compromises</div>
      </div>
      <div class="hero-visual">
        <div class="bike-frame">
          <svg viewBox="0 0 560 300" role="img" aria-label="Custom cargo bike illustration">
            <g fill="none" stroke="#121418" stroke-width="16" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="110" cy="180" r="70"></circle>
              <circle cx="330" cy="190" r="60"></circle>
              <path d="M110 180 L180 100 L250 180"></path>
              <path d="M250 180 L320 110 L330 180"></path>
              <path d="M180 100 L250 80 L250 180"></path>
            </g>
            <rect x="180" y="60" width="120" height="44" rx="10" fill="#b4442c"></rect>
          </svg>
        </div>
        <div class="bike-caption">
          <div><strong>Custom long-wheelbase frame</strong><span>Copenhagen-tested</span></div>
          <div><strong>From €4,000</strong><span>Steel or carbon</span></div>
        </div>
        <div class="spec-chips">
          <span class="chip">Custom cargo box</span>
          <span class="chip">Child-ready</span>
          <span class="chip">Grocery-hauler</span>
          <span class="chip">City delivery</span>
        </div>
      </div>
    </div>
  </section>

  <div class="trust">
    <div class="container trust-grid">
      <div class="trust-item"><span class="trust-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Custom frames in-house</div>
      <div class="trust-item"><span class="trust-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Steel & carbon builds</div>
      <div class="trust-item"><span class="trust-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Copenhagen street-tested</div>
      <div class="trust-item"><span class="trust-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Built to order</div>
    </div>
  </div>

  <section class="section" id="work">
    <div class="container">
      <div class="section-head">
        <div class="eyebrow">The fleet</div>
        <h2 class="section-title">Three ways we build. One rule: made for you.</h2>
        <p class="section-lead">Every Lumen cargo bike starts with your route, your cargo, and your family or business. The platform adapts. The details don’t.</p>
      </div>
      <div class="builds-grid">
        <article class="build-card featured">
          <div class="build-tag">Most popular</div>
          <h3>Family Hauler</h3>
          <div class="build-price"><strong>From €4,000</strong></div>
          <ul>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Two-child capacity, secure seating</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Big rear and front storage</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Stability for wet cobblestones</li>
          </ul>
          <a href="#build" class="card-link">Start a Family Hauler</a>
        </article>
        <article class="build-card">
          <div class="build-tag">For city life</div>
          <h3>Urban Grocery</h3>
          <div class="build-price"><strong>From €4,000</strong></div>
          <ul>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Low step-through, big box</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Grocery-hauler geometry</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Braking for heavier loads</li>
          </ul>
          <a href="#build" class="card-link">Start an Urban Grocery</a>
        </article>
        <article class="build-card">
          <div class="build-tag">For little legs</div>
          <h3>Child Carrier</h3>
          <div class="build-price"><strong>From €4,000</strong></div>
          <ul>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Safe, tested child mounting</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Rear or front loading options</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Parental weight limits</li>
          </ul>
          <a href="#build" class="card-link">Start a Child Carrier</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section alt" id="process">
    <div class="container">
      <div class="section-head">
        <div class="eyebrow">How it works</div>
        <h2 class="section-title">From first call to first ride in four steps.</h2>
      </div>
      <div class="process-grid">
        <div class="step">
          <div class="step-num">1</div>
          <h3>Consult</h3>
          <p>We map your routes, cargo, and must-haves over coffee in Copenhagen.</p>
        </div>
        <div class="step">
          <div class="step-num">2</div>
          <h3>Frame</h3>
          <p>You get a custom frame quote, material choice, and geometry tuned to your load.</p>
        </div>
        <div class="step">
          <div class="step-num">3</div>
          <h3>Build</h3>
          <p>Our workshop builds the bike, tests brakes, handling, and cargo security.</p>
        </div>
        <div class="step">
          <div class="step-num">4</div>
          <h3>Ride</h3>
          <p>We deliver, fit accessories, and help you plan your first real-world runs.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="pricing">
    <div class="container">
      <div class="pricing-grid">
        <article class="price-card featured">
          <div class="eyebrow">Transparent pricing</div>
          <h2 class="section-title">From €4,000.</h2>
          <div class="price">€4,000<span>from</span></div>
          <p class="price-note">A custom cargo bike built to your spec. Includes frame, key build, and Copenhagen testing.</p>
          <ul class="include-list">
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Custom frame design and build</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Key components and cargo system</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Factory-style fit and adjustment</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Copenhagen street testing</li>
          </ul>
          <div class="optional-list">
            <strong>Often added:</strong> child seat, trailer, weather bag, rear rack, delivery.
          </div>
          <a href="#build" class="btn btn-primary btn-lg">Start your build</a>
        </article>
        <article class="price-card">
          <div className="eyebrow">What changes the quote</div>
          <h3 class="section-title">Build options, not guesswork.</h3>
          <p class="price-note">The base price covers a standard custom cargo bike. Your final quote reflects steel or carbon, motor support, battery, and cargo accessories.</p>
          <ul class="include-list">
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Steel frame, no motor</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Carbon frame, no motor</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Lightweight cargo build</li>
            <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>Electric assist</li>
          </ul>
        </article>
      </div>
    </div>
  </section>

  <section class="section alt" id="testimonials">
    <div class="container">
      <div class="section-head center">
        <div class="eyebrow">Kind words</div>
        <h2 class="section-title">Trusted by Copenhagen families and local couriers.</h2>
      </div>
      <div class="quotes-grid">
        <article class="quote-card">
          <div class="stars">★★★★★</div>
          <p>“We wanted a cargo bike that could take two kids, a dog, and a full grocery run without feeling like a van. Lumen built it and it disappeared into everyday life beautifully.”</p>
          <div class="quote-author">
            <div class="quote-avatar">MK</div>
            <div><strong>Maria K.</strong><span>Copenhagen family</span></div>
          </div>
        </article>
        <article class="quote-card">
          <div class="stars">★★★★★</div>
          <p>“The workshop is small, which is exactly why it feels real. They tested the frame on our worst hill before we ever took delivery.”</p>
          <div class="quote-author">
            <div class="quote-avatar">JT</div>
            <div><strong>Jonas T.</strong><span>Urban grocery shopper</span></div>
          </div>
        </article>
        <article class="quote-card">
          <div class="stars">★★★★★</div>
          <p>“From quote to pickup was quick. The build quality is excellent, and the custom cargo box fit our needs perfectly.”</p>
          <div class="quote-author">
            <div class="quote-avatar">AS</div>
            <div><strong>Amara S.</strong><span>City delivery</span></div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section" id="faq">
    <div class="container">
      <div class="section-head">
        <div class="eyebrow">FAQ</div>
        <h2 class="section-title">Questions, answered.</h2>
      </div>
      <div class="faq-list">
        <details>
          <summary>How long does a custom cargo bike take?</summary>
          <p>Most builds are around 8–12 weeks from frame approval to delivery, depending on parts availability and options.</p>
        </details>
        <details>
          <summary>Is €4,000 the final price?</summary>
          <p>€4,000 is the starting point for a custom cargo bike. Final pricing depends on frame material, motor, battery, and accessories.</p>
        </details>
        <details>
          <summary>Do you ship outside Denmark?</summary>
          <p>We build in Copenhagen and primarily deliver across Europe. International shipping is arranged case by case.</p>
        </details>
        <details>
          <summary>What warranty do you offer?</summary>
          <p>We stand behind our frames and builds with a 24-month frame warranty and workshop support for fit and adjustments.</p>
        </details>
        <details>
          <summary>Can I test ride before building?</summary>
          <p>Yes. We have demo cargo bikes for route testing and longer test rides before you commit to a custom build.</p>
        </details>
      </div>
    </div>
  </section>

  <section class="section" id="build">
    <div class="container">
      <div class="cta-card">
        <div>
          <div class="eyebrow">Start your build</div>
          <h2>Let’s build your next cargo bike.</h2>
          <p>Tell us about your cargo. We’ll reply within one workshop day with next steps and an honest frame quote.</p>
        </div>
        <div>
          <form id="ctaForm" class="cta-form" novalidate>
            <div class="form-success" id="formSuccess">Thanks. We’ll be in touch within one workshop day.</div>
            <div class="field">
              <label for="name">Name</label>
              <input id="name" name="name" type="text" required>
            </div>
            <div class="field">
              <label for="email">Email</label>
              <input id="email" name="email" type="email" required>
            </div>
            <div class="field">
              <label for="cargo">Cargo type</label>
              <select id="cargo" name="cargo" required>
                <option value="">Select…</option>
                <option>Family / kids</option>
                <option>Groceries / shopping</option>
                <option>Delivery / courier</option>
                <option>Child / toddler</option>
                <option>Other</option>
              </select>
            </div>
            <div class="field full">
              <label for="message">Tell us about your route and cargo</label>
              <textarea id="message" name="message" placeholder="e.g. Two kids, dog, weekly grocery run…"></textarea>
            </div>
            <div class="field full">
              <button type="submit" class="btn btn-primary btn-lg" id="ctaSubmit">Request my build quote</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div>
          <div class="brand" style="font-size:22px;">
            <span>Lumen Cycles</span>
          </div>
          <p style="color:var(--muted); max-width:320px;">A Copenhagen custom cargo workshop building bikes to order for real families, shops, and delivery teams.</p>
        </div>
        <div class="footer-links">
          <a href="#work">Work</a>
          <a href="#process">Process</a>
          <a href="#pricing">Pricing</a>
          <a href="#build">Build</a>
          <a href="#faq">FAQ</a>
        </div>
      </div>
      <div class="footer-base">
        <span>© 2026 Lumen Cycles. Copenhagen workshop.</span>
        <span>Built to order · From €4,000</span>
      </div>
    </div>
  </footer>

  <script>
    const form = document.getElementById('ctaForm');
    if (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        const success = document.getElementById('formSuccess');
        const btn = document.getElementById('ctaSubmit');
        if (success) success.style.display = 'block';
        btn.disabled = true;
        btn.textContent = 'Request received';
        form.reset();
      });
    }
  </script>

</body>
</html>

Compare with

Flint: other attempts