• Updated 30 Oct, 21:11 UTC
  • Next run 31 Oct, 05:17 UTCNext 31 Oct 05:17
  • Last 7 days: 4 new models · 475 runs7 d: 4 models · 475 runs
Landing page for a cargo bike workshop

GPT-6.1 TerraOpenAI

Network offOpen alone (new tab)

Run details

Model
openai/gpt-6.1-terra
Route
OpenRouter API, one user message
Served by
OpenAI
Effort
medium, OpenRouter's default for this model
Limits
60 min · 128,000 output tokens (the model's limit)
Date
27 Oct 2026
Time
2 min 15 s
Size
36 kB
Tokens
93 in, 12,186 out (695 of them thinking)
List price
$0.061 at today's price ($1 in / $5 out per M)
Paid
$0.061

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

36 kB 886 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f4f2e9">
<title>Lumen Cycles — Made for the long way round</title>
<style>
  :root {
    --paper: #f4f2e9;
    --white: #fffef9;
    --ink: #172d29;
    --muted: #66736a;
    --line: #c9cec1;
    --lime: #d7e770;
    --rust: #c66c4c;
    --dark: #17352e;
    --serif: Georgia, "Times New Roman", serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  button, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  a { color: inherit; }
  button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible {
    outline: 3px solid #d98c63;
    outline-offset: 4px;
  }
  .wrap { width: min(100% - 80px, 1440px); margin-inline: auto; }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--rust);
  }
  .arrow { font-size: 1.25em; line-height: .7; }

  /* Navigation */
  .site-header { border-bottom: 1px solid var(--line); }
  .header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
  }
  .brand-mark { width: 29px; height: 29px; display: block; }
  .brand-word {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.075em;
    line-height: .8;
  }
  .brand-word small {
    display: block;
    margin-top: 5px;
    font-size: 7px;
    letter-spacing: .3em;
    text-transform: uppercase;
  }
  .nav-links { display: flex; align-items: center; gap: 35px; }
  .nav-links a {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  .nav-links a:not(.nav-cta):hover { text-decoration: underline; text-underline-offset: 5px; }
  .nav-links .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 13px 17px;
    border: 1px solid var(--ink);
    transition: background .2s, color .2s;
  }
  .nav-cta:hover { background: var(--ink); color: var(--white); }

  /* Hero */
  .hero { padding: 68px 0 25px; overflow: hidden; }
  .hero-top {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: end;
    gap: 50px;
  }
  h1, h2, h3, p { margin-top: 0; }
  h1, h2, h3 { font-weight: 400; }
  h1 {
    margin: 24px 0 0;
    font-family: var(--serif);
    font-size: clamp(58px, 7.4vw, 112px);
    line-height: .91;
    letter-spacing: -.06em;
  }
  h1 em { font-weight: 400; color: var(--rust); }
  .hero-intro { max-width: 390px; padding: 0 0 7px 10%; }
  .hero-intro p {
    max-width: 330px;
    margin-bottom: 24px;
    color: #4f6056;
    font-size: 15px;
    line-height: 1.7;
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 38px;
    padding-bottom: 8px;
    border-bottom: 1px solid currentColor;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }
  .text-link:hover { color: var(--rust); }
  .hero-visual {
    position: relative;
    margin-top: 48px;
    min-height: 420px;
    background: #dce4ce;
    overflow: hidden;
  }
  .hero-visual::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(23,45,41,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 75px rgba(255,255,255,.09), 0 0 0 150px rgba(255,255,255,.06);
  }
  .bike-art {
    position: relative;
    display: block;
    width: min(100%, 1130px);
    height: auto;
    margin: -10px auto -7%;
    filter: drop-shadow(0 22px 12px rgba(41,54,38,.12));
  }
  .visual-label {
    position: absolute;
    left: 30px;
    top: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .visual-label span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(23,45,41,.5);
    border-radius: 50%;
    font-size: 9px;
  }
  .visual-stamp {
    position: absolute;
    right: 28px;
    top: 25px;
    width: 82px;
    height: 82px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(23,45,41,.45);
    border-radius: 50%;
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    transform: rotate(12deg);
  }
  .hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 17px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .hero-bottom span:last-child { color: var(--muted); text-align: right; }

  /* Intro */
  .intro { padding: 150px 0 120px; }
  .intro-grid {
    display: grid;
    grid-template-columns: 1fr 2.05fr;
    gap: 60px;
  }
  .intro h2, .section-title {
    font-family: var(--serif);
    font-size: clamp(40px, 4.7vw, 72px);
    letter-spacing: -.05em;
    line-height: 1.05;
  }
  .intro h2 { max-width: 790px; margin-bottom: 35px; }
  .intro h2 em { color: var(--rust); font-weight: 400; }
  .intro-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 750px;
    color: #5c6a60;
    font-size: 14px;
    line-height: 1.75;
  }

  /* Features */
  .features { padding-bottom: 130px; }
  .feature-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 30px;
  }
  .feature-head h2 { margin: 16px 0 0; }
  .feature-head > p { max-width: 280px; margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .feature-card { min-width: 0; }
  .feature-image {
    position: relative;
    height: 290px;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .feature-image svg { width: 100%; height: 100%; }
  .feature-image.one { background: #d7ded1; }
  .feature-image.two { background: #e6d4c3; }
  .feature-image.three { background: #d9d9c8; }
  .feature-number {
    position: absolute;
    top: 18px;
    left: 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
  }
  .feature-card h3 {
    margin: 20px 0 9px;
    font-family: var(--serif);
    font-size: 25px;
    letter-spacing: -.03em;
  }
  .feature-card p { max-width: 320px; color: var(--muted); font-size: 13px; line-height: 1.65; }

  /* Configurator */
  .build { background: var(--dark); color: var(--paper); padding: 100px 0; }
  .build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 150px); }
  .build .eyebrow::before { background: var(--lime); }
  .build h2 { margin: 28px 0 25px; }
  .build-intro { max-width: 380px; color: #bac8bc; font-size: 14px; line-height: 1.75; }
  .build-note {
    margin-top: 75px;
    padding-top: 20px;
    border-top: 1px solid #547067;
    color: #bac8bc;
    font-size: 12px;
    line-height: 1.6;
  }
  .build-note strong { display: block; margin-bottom: 6px; color: var(--paper); }
  .config-group { border-top: 1px solid #6b8177; padding: 20px 0 25px; }
  .config-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
  .config-heading strong { font-size: 13px; font-weight: 600; }
  .config-heading span { color: #bac8bc; font-size: 11px; }
  .options { display: flex; flex-wrap: wrap; gap: 8px; }
  .option {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #71877d;
    border-radius: 0;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    font-size: 12px;
    text-align: left;
  }
  .option:hover { border-color: var(--lime); }
  .option[aria-pressed="true"] { border-color: var(--lime); background: var(--lime); color: var(--dark); }
  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    border-top: 1px solid #6b8177;
    padding-top: 24px;
  }
  .price-row small { display: block; margin-bottom: 8px; color: #bac8bc; font-size: 11px; }
  .price { font-family: var(--serif); font-size: 39px; line-height: 1; letter-spacing: -.04em; }
  .build-button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    background: var(--lime);
    color: var(--dark);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .build-button:hover { background: #e5f48a; }
  .estimate-note { margin: 14px 0 0; color: #bac8bc; font-size: 11px; line-height: 1.5; }
  .inquiry { margin-top: 22px; padding: 20px; background: #27473e; }
  .inquiry[hidden] { display: none; }
  .inquiry p { margin: 0 0 12px; color: #d1ddd2; font-size: 12px; line-height: 1.6; }
  .inquiry textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    padding: 12px;
    border: 1px solid #82978b;
    border-radius: 0;
    background: #f4f2e9;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.5;
  }
  .copy-button {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid #a4b8a9;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    font-size: 12px;
  }
  .copy-status { display: inline-block; margin-left: 10px; font-size: 11px; color: var(--lime); }

  /* Process and FAQ */
  .process { padding: 130px 0; }
  .process-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 90px; }
  .process h2 { max-width: 440px; margin: 24px 0; }
  .process-lead { max-width: 320px; color: var(--muted); font-size: 14px; line-height: 1.7; }
  .step {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 15px;
    padding: 25px 0 26px;
    border-top: 1px solid var(--line);
  }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step-num { color: var(--rust); font-size: 11px; font-weight: 700; }
  .step h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 26px; letter-spacing: -.03em; }
  .step p { max-width: 440px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

  .faq { padding: 0 0 130px; }
  .faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 90px; }
  .faq h2 { margin: 24px 0; }
  details { border-top: 1px solid var(--line); }
  details:last-child { border-bottom: 1px solid var(--line); }
  summary {
    position: relative;
    padding: 22px 35px 22px 0;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
  }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: 2px; top: 17px; font-size: 23px; font-weight: 400; }
  details[open] summary::after { content: "−"; }
  details p { max-width: 540px; margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }

  /* Footer */
  .footer { background: #d8e2c9; padding: 70px 0 24px; }
  .footer-main { display: flex; justify-content: space-between; align-items: end; gap: 35px; padding-bottom: 80px; }
  .footer h2 { margin: 20px 0 25px; font-family: var(--serif); font-size: clamp(45px, 6vw, 88px); letter-spacing: -.055em; line-height: .98; }
  .footer h2 em { color: var(--rust); font-weight: 400; }
  .footer-contact { font-size: 13px; line-height: 1.8; }
  .footer-contact strong { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
  .footer-contact p { margin: 8px 0 0; }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
    border-top: 1px solid #aebcab;
    padding-top: 20px;
  }
  .footer-bottom p { margin: 0; color: #586b5d; font-size: 10px; line-height: 1.6; }
  .footer-bottom .brand-word { font-size: 27px; }

  @media (max-width: 850px) {
    .wrap { width: min(100% - 40px, 1440px); }
    .header-inner { min-height: 72px; }
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 11px; }
    .hero { padding-top: 50px; }
    .hero-top { grid-template-columns: 1fr 1fr; gap: 20px; }
    h1 { font-size: clamp(55px, 8.5vw, 78px); }
    .hero-intro { padding-left: 0; }
    .hero-visual { min-height: 0; }
    .bike-art { width: 110%; max-width: none; margin-left: -5%; margin-top: 20px; }
    .intro { padding: 100px 0 85px; }
    .intro-grid { grid-template-columns: 1fr 2fr; gap: 30px; }
    .features { padding-bottom: 90px; }
    .feature-image { height: 230px; }
    .build-grid, .process-layout, .faq-layout { gap: 45px; }
    .process { padding: 90px 0; }
    .faq { padding-bottom: 90px; }
  }
  @media (max-width: 600px) {
    .wrap { width: calc(100% - 32px); }
    .header-inner { min-height: 66px; }
    .nav-links a:not(.nav-cta) { display: none; }
    .nav-links .nav-cta { padding: 11px 13px; gap: 18px; }
    .hero { padding-top: 42px; }
    .hero-top { grid-template-columns: 1fr; gap: 23px; }
    h1 { margin-top: 20px; font-size: clamp(58px, 13vw, 78px); }
    .hero-intro p { margin-bottom: 16px; font-size: 14px; }
    .hero-visual { margin-top: 32px; min-height: 275px; display: flex; align-items: center; }
    .bike-art { width: 145%; flex: 0 0 145%; margin: 35px 0 0 -22%; }
    .visual-label { top: 16px; left: 16px; font-size: 8px; }
    .visual-stamp { top: 14px; right: 14px; width: 62px; height: 62px; font-size: 6px; }
    .hero-bottom { font-size: 9px; }
    .intro { padding: 90px 0 75px; }
    .intro-grid { grid-template-columns: 1fr; gap: 22px; }
    .intro-copy { grid-template-columns: 1fr; gap: 0; }
    .feature-head { display: block; }
    .feature-head > p { margin-top: 15px; }
    .feature-grid { grid-template-columns: 1fr; gap: 30px; }
    .feature-image { height: 280px; }
    .feature-card h3 { margin-top: 16px; }
    .feature-card p { margin-bottom: 0; }
    .build { padding: 75px 0; }
    .build-grid, .process-layout, .faq-layout { grid-template-columns: 1fr; gap: 35px; }
    .build-note { margin-top: 30px; }
    .price-row { align-items: center; }
    .price { font-size: 34px; }
    .build-button { gap: 12px; }
    .process { padding: 80px 0; }
    .faq { padding-bottom: 80px; }
    .footer { padding-top: 60px; }
    .footer-main { display: block; padding-bottom: 60px; }
    .footer-contact { margin-top: 40px; }
    .footer-bottom { align-items: end; }
    .footer-bottom p { text-align: right; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
  }
</style>
</head>
<body>
<header class="site-header">
  <div class="wrap header-inner">
    <a class="brand" href="#top" aria-label="Lumen Cycles home">
      <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
        <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="1.5"/>
        <path d="M16 3v26M3 16h26M7 7l18 18M25 7 7 25" stroke="currentColor" stroke-width="1.3"/>
        <circle cx="16" cy="16" r="4" fill="#f4f2e9" stroke="currentColor" stroke-width="1.3"/>
      </svg>
      <span class="brand-word">lumen<small>cycles</small></span>
    </a>
    <nav class="nav-links" aria-label="Main navigation">
      <a href="#details">The bike</a>
      <a href="#process">Our process</a>
      <a href="#faq">Questions</a>
      <a class="nav-cta" href="#build">Build yours <span class="arrow" aria-hidden="true">↗</span></a>
    </nav>
  </div>
</header>

<main id="top">
  <section class="hero" aria-labelledby="hero-title">
    <div class="wrap">
      <div class="hero-top">
        <div>
          <div class="eyebrow">Cargo bikes, made in Copenhagen</div>
          <h1 id="hero-title">More life.<br>Less <em>car.</em></h1>
        </div>
        <div class="hero-intro">
          <p>A thoughtfully built cargo bike for the everyday adventures, little passengers and good detours that make a life.</p>
          <a class="text-link" href="#details">Meet your Lumen <span class="arrow" aria-hidden="true">↘</span></a>
        </div>
      </div>

      <div class="hero-visual">
        <div class="visual-label"><span>01</span> The everyday hauler</div>
        <div class="visual-stamp">Made to<br>move you<br>↗</div>
        <svg class="bike-art" viewBox="0 0 1100 600" role="img" aria-label="Illustration of a deep green long-tail cargo bicycle with a front cargo box">
          <defs>
            <linearGradient id="box" x1="0" x2="1" y1="0" y2="1">
              <stop offset="0" stop-color="#e7b997"/>
              <stop offset="1" stop-color="#c78666"/>
            </linearGradient>
            <linearGradient id="boxside" x1="0" x2="1">
              <stop stop-color="#bb7659"/>
              <stop offset="1" stop-color="#d39773"/>
            </linearGradient>
            <g id="wheel">
              <circle r="112" fill="#b5c5ad" stroke="#243a34" stroke-width="15"/>
              <circle r="96" fill="none" stroke="#e9ede1" stroke-width="3"/>
              <circle r="91" fill="none" stroke="#758b7d" stroke-width="1"/>
              <g stroke="#71887a" stroke-width="1.5">
                <path d="M-95 0H95 M0-95V95 M-67-67 67 67 M67-67-67 67 M-88-36 88 36 M-88 36 88-36 M-36-88 36 88 M36-88-36 88"/>
              </g>
              <circle r="12" fill="#293c36" stroke="#d3ddd0" stroke-width="3"/>
              <circle r="3" fill="#c8d6c6"/>
            </g>
          </defs>
          <ellipse cx="543" cy="528" rx="455" ry="17" fill="#819585" opacity=".2"/>
          <use href="#wheel" x="214" y="410"/>
          <use href="#wheel" x="867" y="410"/>
          <!-- rear mudguard and rack -->
          <path d="M101 390 A115 115 0 0 1 322 357" fill="none" stroke="#29463b" stroke-width="8" stroke-linecap="round"/>
          <path d="M132 287h148l24 20H119z" fill="#29463b"/>
          <path d="M152 303 132 383 M272 303l28 72" fill="none" stroke="#496759" stroke-width="4"/>
          <!-- frame -->
          <g fill="none" stroke="#234a3b" stroke-width="13" stroke-linecap="round" stroke-linejoin="round">
            <path d="M214 410 351 274 408 410 214 410 351 274"/>
            <path d="M351 274 492 282 408 410"/>
            <path d="M408 410 700 343 766 296"/>
            <path d="M700 343 867 410"/>
          </g>
          <path d="M408 410 715 359" fill="none" stroke="#16382f" stroke-width="9" stroke-linecap="round"/>
          <path d="M760 273 792 346 867 410" fill="none" stroke="#253f36" stroke-width="10" stroke-linecap="round"/>
          <path d="M756 274 749 235 779 225" fill="none" stroke="#253f36" stroke-width="7" stroke-linecap="round"/>
          <path d="M778 225 805 226" stroke="#253f36" stroke-width="8" stroke-linecap="round"/>
          <path d="M350 274 344 237" stroke="#263b33" stroke-width="8"/>
          <path d="M316 231c14-7 52-7 66 0 4 2 2 8-2 9l-50 1c-11 0-18-4-14-10z" fill="#594c3e"/>
          <!-- crank and chain -->
          <path d="M214 410 405 426 405 395 214 405" fill="none" stroke="#8a9788" stroke-width="2"/>
          <circle cx="408" cy="410" r="30" fill="#344b40" stroke="#96a59a" stroke-width="4"/>
          <circle cx="408" cy="410" r="17" fill="none" stroke="#96a59a" stroke-width="2"/>
          <path d="M408 410 424 440h19" fill="none" stroke="#a8b5a6" stroke-width="5" stroke-linecap="round"/>
          <path d="M438 440h20" stroke="#344b40" stroke-width="7" stroke-linecap="round"/>
          <!-- cargo platform -->
          <path d="M462 328h294l16 22H476z" fill="#254438"/>
          <!-- cargo box -->
          <path d="M475 163 713 163 746 310 498 310z" fill="url(#box)" stroke="#8c634e" stroke-width="3"/>
          <path d="M713 163 758 180 784 311 746 310z" fill="url(#boxside)" stroke="#8c634e" stroke-width="3"/>
          <path d="M467 154h252l11 18H477z" fill="#745d4a"/>
          <path d="M719 154 764 171l4 16-38-15z" fill="#5e5141"/>
          <path d="M492 191h231 M497 220h232 M502 249h233 M506 278h235" stroke="#a77157" stroke-width="2" opacity=".55"/>
          <path d="M527 176 544 303 M685 175l24 127" stroke="#f2c8a8" stroke-width="3" opacity=".4"/>
          <circle cx="505" cy="180" r="3" fill="#765848"/><circle cx="701" cy="180" r="3" fill="#765848"/>
          <circle cx="519" cy="293" r="3" fill="#765848"/><circle cx="723" cy="293" r="3" fill="#765848"/>
          <text x="579" y="240" fill="#795b49" font-family="Georgia,serif" font-size="23" letter-spacing="-1">lumen</text>
          <text x="581" y="253" fill="#795b49" font-family="Arial,sans-serif" font-size="6" letter-spacing="3">CYCLES</text>
          <!-- front fender and lamp -->
          <path d="M755 389 A113 113 0 0 1 979 389" fill="none" stroke="#29463b" stroke-width="8" stroke-linecap="round"/>
          <path d="M795 294h20" stroke="#384b3f" stroke-width="5"/>
          <rect x="808" y="286" width="19" height="15" rx="5" fill="#d4d1a7" stroke="#384b3f" stroke-width="3"/>
          <path d="M461 344h-30" stroke="#8aa08c" stroke-width="3"/>
        </svg>
      </div>
      <div class="hero-bottom">
        <span>Built to order · Made to be kept</span>
        <span>Copenhagen, Denmark &nbsp; 55° 40′ N</span>
      </div>
    </div>
  </section>

  <section class="intro" aria-labelledby="intro-title">
    <div class="wrap intro-grid">
      <div class="eyebrow">A better kind of everyday</div>
      <div>
        <h2 id="intro-title">For everything you carry, and everywhere you <em>want to go.</em></h2>
        <div class="intro-copy">
          <p>School runs. Market mornings. An extra stop for coffee. A cargo bike has a way of turning the necessary trips into the good ones.</p>
          <p>We build each Lumen to order in Copenhagen, with considered details, dependable components and room for your particular kind of life.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="features" id="details" aria-labelledby="details-title">
    <div class="wrap">
      <div class="feature-head">
        <div>
          <div class="eyebrow">Thought through, all the way</div>
          <h2 class="section-title" id="details-title">The details matter.</h2>
        </div>
        <p>Simple where it can be. Clever where it counts. Ready for the rhythms of real life.</p>
      </div>
      <div class="feature-grid">
        <article class="feature-card">
          <div class="feature-image one">
            <span class="feature-number">01 / 03</span>
            <svg viewBox="0 0 400 290" aria-hidden="true">
              <circle cx="210" cy="145" r="114" fill="#c4d2bf"/>
              <path d="M-30 224 123 90 179 224-30 224 123 90 262 99 179 224" fill="none" stroke="#264a3b" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M123 90 116 47" stroke="#30483c" stroke-width="8"/>
              <path d="M83 44c17-8 57-8 72 0 3 2 2 8-3 9l-53 1c-11 0-19-5-16-10z" fill="#665545"/>
              <circle cx="179" cy="224" r="31" fill="#344b40" stroke="#9eae9f" stroke-width="4"/>
              <circle cx="179" cy="224" r="16" fill="none" stroke="#9eae9f" stroke-width="2"/>
              <path d="M179 224 198 255h21" fill="none" stroke="#9eae9f" stroke-width="5" stroke-linecap="round"/>
              <path d="M178 224 400 178" fill="none" stroke="#264a3b" stroke-width="13" stroke-linecap="round"/>
            </svg>
          </div>
          <h3>A frame for the long run</h3>
          <p>A balanced, low-step shape that feels intuitive in the city and comfortable when the days get longer.</p>
        </article>
        <article class="feature-card">
          <div class="feature-image two">
            <span class="feature-number">02 / 03</span>
            <svg viewBox="0 0 400 290" aria-hidden="true">
              <circle cx="199" cy="144" r="115" fill="#dfc2ac"/>
              <path d="M67 72 290 72l34 164H92z" fill="#d29a77" stroke="#956b54" stroke-width="3"/>
              <path d="M290 72 330 89l31 149-37-2z" fill="#bd8061" stroke="#956b54" stroke-width="3"/>
              <path d="M59 62h237l12 18H70z" fill="#705c4b"/>
              <path d="M296 62 337 79l3 18-32-17z" fill="#5c5144"/>
              <path d="M77 107h220 M81 143h225 M87 179h227 M92 215h229" stroke="#b47e60" stroke-width="2"/>
              <circle cx="91" cy="91" r="3" fill="#805c49"/><circle cx="281" cy="91" r="3" fill="#805c49"/>
              <circle cx="110" cy="224" r="3" fill="#805c49"/><circle cx="308" cy="224" r="3" fill="#805c49"/>
              <text x="149" y="158" fill="#805c49" font-family="Georgia,serif" font-size="29" letter-spacing="-1">lumen</text>
              <text x="153" y="173" fill="#805c49" font-family="Arial,sans-serif" font-size="7" letter-spacing="3">CYCLES</text>
            </svg>
          </div>
          <h3>Room for your world</h3>
          <p>A generous front box keeps the things that matter within sight, whether that is the weekly shop or precious company.</p>
        </article>
        <article class="feature-card">
          <div class="feature-image three">
            <span class="feature-number">03 / 03</span>
            <svg viewBox="0 0 400 290" aria-hidden="true">
              <circle cx="202" cy="145" r="114" fill="#c5c9b6"/>
              <circle cx="207" cy="162" r="98" fill="none" stroke="#263d34" stroke-width="16"/>
              <circle cx="207" cy="162" r="82" fill="none" stroke="#e6eadd" stroke-width="3"/>
              <g stroke="#879b8b" stroke-width="1.5">
                <path d="M125 162h164 M207 80v164 M149 104l116 116 M265 104 149 220 M131 131l152 62 M131 193l152-62 M176 86l62 152 M238 86l-62 152"/>
              </g>
              <circle cx="207" cy="162" r="24" fill="#d4d8c7" stroke="#617b69" stroke-width="4"/>
              <circle cx="207" cy="162" r="10" fill="#354d40"/>
              <path d="M206 161 168 65 190 30 M207 161 252 55" fill="none" stroke="#274b3c" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M95 143A113 113 0 0 1 318 143" fill="none" stroke="#29463b" stroke-width="8" stroke-linecap="round"/>
            </svg>
          </div>
          <h3>Made to be maintained</h3>
          <p>We choose serviceable components and a straightforward design, so your bike can keep earning its place for years.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="build" id="build" aria-labelledby="build-title">
    <div class="wrap build-grid">
      <div>
        <div class="eyebrow">Make it yours</div>
        <h2 class="section-title" id="build-title">A good place<br>to start.</h2>
        <p class="build-intro">Every Lumen starts with the same considered foundation. Choose a few details below and we’ll have something to talk about.</p>
        <div class="build-note">
          <strong>Made for you, not a warehouse.</strong>
          This is a starting estimate, not a checkout. We’ll talk through fit, options and timing before anything is final.
        </div>
      </div>
      <div class="configurator">
        <div class="config-group" role="group" aria-label="Choose assistance">
          <div class="config-heading"><strong>01 &nbsp; Assistance</strong><span>Choose one</span></div>
          <div class="options" data-group="assistance">
            <button class="option" type="button" aria-pressed="true" data-name="Pedal power" data-price="0">Pedal power &nbsp; +€0</button>
            <button class="option" type="button" aria-pressed="false" data-name="Electric assist" data-price="1100">Electric assist &nbsp; +€1,100</button>
          </div>
        </div>
        <div class="config-group" role="group" aria-label="Choose box setup">
          <div class="config-heading"><strong>02 &nbsp; Box setup</strong><span>Choose one</span></div>
          <div class="options" data-group="box">
            <button class="option" type="button" aria-pressed="true" data-name="Open box" data-price="0">Open box &nbsp; +€0</button>
            <button class="option" type="button" aria-pressed="false" data-name="Box with rain cover" data-price="450">Rain cover &nbsp; +€450</button>
          </div>
        </div>
        <div class="config-group" role="group" aria-label="Choose frame colour">
          <div class="config-heading"><strong>03 &nbsp; Frame colour</strong><span>Choose one</span></div>
          <div class="options" data-group="colour">
            <button class="option" type="button" aria-pressed="true" data-name="Forest green" data-price="0">Forest green</button>
            <button class="option" type="button" aria-pressed="false" data-name="Warm clay" data-price="0">Warm clay</button>
            <button class="option" type="button" aria-pressed="false" data-name="Soft black" data-price="0">Soft black</button>
          </div>
        </div>
        <div class="price-row">
          <div><small>Estimated from</small><div class="price" id="price" aria-live="polite">€3,900</div></div>
          <button class="build-button" id="inquiry-button" type="button">Prepare an enquiry <span class="arrow" aria-hidden="true">↗</span></button>
        </div>
        <p class="estimate-note">Indicative price in euros, including VAT. Final specification and pricing are confirmed together.</p>
        <div class="inquiry" id="inquiry" hidden>
          <p>Your starting point is ready. Copy this note into an email to <strong>hello@lumencycles.dk</strong> and tell us a little about how you’d like to ride.</p>
          <label for="inquiry-text" class="eyebrow">Your enquiry</label>
          <textarea id="inquiry-text" spellcheck="true"></textarea>
          <button class="copy-button" id="copy-button" type="button">Copy note</button>
          <span class="copy-status" id="copy-status" role="status"></span>
        </div>
      </div>
    </div>
  </section>

  <section class="process" id="process" aria-labelledby="process-title">
    <div class="wrap process-layout">
      <div>
        <div class="eyebrow">From our workshop to your world</div>
        <h2 class="section-title" id="process-title">Good things take a little conversation.</h2>
        <p class="process-lead">No one-size-fits-all, no rush. Just a bike made with your everyday in mind.</p>
      </div>
      <div>
        <article class="step">
          <span class="step-num">01 /</span>
          <div><h3>Tell us about your days.</h3><p>Start with your routes, your cargo and the things you wish were easier. We’ll help make sense of the options.</p></div>
        </article>
        <article class="step">
          <span class="step-num">02 /</span>
          <div><h3>We make a plan.</h3><p>Together, we settle on the details, confirm the price and agree on a build timeline that works.</p></div>
        </article>
        <article class="step">
          <span class="step-num">03 /</span>
          <div><h3>Meet your new everyday.</h3><p>When your bike is ready, we’ll walk you through it and make sure you feel at home before you set off.</p></div>
        </article>
      </div>
    </div>
  </section>

  <section class="faq" id="faq" aria-labelledby="faq-title">
    <div class="wrap faq-layout">
      <div>
        <div class="eyebrow">Good to know</div>
        <h2 class="section-title" id="faq-title">A few things<br>you might ask.</h2>
      </div>
      <div>
        <details>
          <summary>How long does a build take?</summary>
          <p>It depends on the specification and our current workshop schedule. We’ll give you a clear timeline when we discuss your build, before you commit.</p>
        </details>
        <details>
          <summary>Can I choose electric assistance?</summary>
          <p>Yes. You can start with pedal power or choose electric assistance. We’ll help you decide what makes sense for your routes and the loads you carry.</p>
        </details>
        <details>
          <summary>Can I talk through the details before ordering?</summary>
          <p>Absolutely. That’s how every Lumen starts. Tell us what you need and we’ll discuss the bike, available options and final pricing with you.</p>
        </details>
        <details>
          <summary>What happens when my bike needs a service?</summary>
          <p>We design with maintenance in mind and can talk you through care and servicing options when we discuss your build.</p>
        </details>
      </div>
    </div>
  </section>
</main>

<footer class="footer">
  <div class="wrap">
    <div class="footer-main">
      <div>
        <div class="eyebrow">The road is yours</div>
        <h2>Let’s go<br><em>somewhere.</em></h2>
        <a class="text-link" href="#build">Start your build <span class="arrow" aria-hidden="true">↗</span></a>
      </div>
      <div class="footer-contact">
        <strong>Say hello</strong>
        <p>hello@lumencycles.dk<br>Copenhagen, Denmark</p>
      </div>
    </div>
    <div class="footer-bottom">
      <a class="brand" href="#top" aria-label="Lumen Cycles, back to top">
        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
          <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="1.5"/>
          <path d="M16 3v26M3 16h26M7 7l18 18M25 7 7 25" stroke="currentColor" stroke-width="1.3"/>
          <circle cx="16" cy="16" r="4" fill="#d8e2c9" stroke="currentColor" stroke-width="1.3"/>
        </svg>
        <span class="brand-word">lumen<small>cycles</small></span>
      </a>
      <p>Made for the long way round.<br>© Lumen Cycles</p>
    </div>
  </div>
</footer>

<script>
(function () {
  const basePrice = 3900;
  const groups = Array.from(document.querySelectorAll('.options'));
  const price = document.getElementById('price');
  const inquiry = document.getElementById('inquiry');
  const inquiryText = document.getElementById('inquiry-text');
  const inquiryButton = document.getElementById('inquiry-button');
  const copyButton = document.getElementById('copy-button');
  const copyStatus = document.getElementById('copy-status');

  function selection() {
    return groups.map(function (group) {
      return group.querySelector('.option[aria-pressed="true"]');
    });
  }

  function formatPrice(amount) {
    return '€' + amount.toLocaleString('en-IE');
  }

  function updatePrice() {
    const total = selection().reduce(function (sum, option) {
      return sum + Number(option.dataset.price);
    }, basePrice);
    price.textContent = formatPrice(total);
    return total;
  }

  function makeNote() {
    const selected = selection();
    return 'Hello Lumen,\n\nI’d like to talk about a cargo bike with:\n' +
      '• ' + selected[0].dataset.name + '\n' +
      '• ' + selected[1].dataset.name + '\n' +
      '• ' + selected[2].dataset.name + ' frame\n\n' +
      'Starting estimate: ' + formatPrice(updatePrice()) + ' including VAT.\n\n' +
      'A little about how I plan to ride: ';
  }

  groups.forEach(function (group) {
    group.addEventListener('click', function (event) {
      const button = event.target.closest('.option');
      if (!button || !group.contains(button)) return;
      group.querySelectorAll('.option').forEach(function (option) {
        option.setAttribute('aria-pressed', String(option === button));
      });
      updatePrice();
      if (!inquiry.hidden) {
        inquiryText.value = makeNote();
        copyStatus.textContent = 'Updated with your choices.';
      }
    });
  });

  inquiryButton.addEventListener('click', function () {
    inquiryText.value = makeNote();
    inquiry.hidden = false;
    copyStatus.textContent = '';
    inquiryText.focus();
  });

  copyButton.addEventListener('click', function () {
    inquiryText.select();
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(inquiryText.value).then(function () {
        copyStatus.textContent = 'Copied.';
      }).catch(function () {
        copyStatus.textContent = 'Selected — copy the text manually.';
      });
    } else {
      copyStatus.textContent = 'Selected — copy the text manually.';
    }
  });
})();
</script>
</body>
</html>

Compare with

GPT-6.1 Terra: other attempts