Run details
- Model
- opencode/muse-spark-1.3-contributor-free
- Route
- opencode CLI
- Reasoning
- provider default
- Limits
- 60 min · 131,072 output tokens
- Date
- 2 Oct 2026
- Time
- 76 s
- Size
- 45 kB
- Tokens
- 24,116 in, 15,428 out
- Paid
- Not billed per run (CLI plan)
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). Save it as index.html in the current directory, then stop. Do not ask questions.
Source
45 kB 612 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, Handbuilt in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds custom cargo bikes to order in Copenhagen. Steel frames, Bosch motors, 5-year warranty. From €3,950. Book a test ride.">
<style>
:root{
--ink:#101814;
--ink-2:#1a2620;
--cream:#faf7f0;
--cream-2:#f1ebe0;
--line:#e5ddd0;
--sage:#5a6d5d;
--sage-light:#e8ede6;
--brass:#b78a2e;
--brass-dark:#8a661e;
--amber:#e8b44a;
--clay:#c96a3b;
--white:#ffffff;
--muted:#6b7a6e;
--radius:18px;
--shadow:0 20px 60px rgba(16,24,20,.12);
--shadow-sm:0 8px 24px rgba(16,24,20,.08);
--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Helvetica Neue",Ubuntu,sans-serif;
--font-serif:Georgia,"Times New Roman",Palatino,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.topbar{background:var(--ink);color:#e9e2d3;font-size:12.5px;letter-spacing:.04em;text-align:center;padding:9px 16px}
.topbar strong{color:var(--amber);font-weight:700}
header.site{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em}
.brand-mark{width:40px;height:40px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.brand-name{font-size:19px;line-height:1}
.brand-name small{display:block;font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--sage);margin-top:3px}
.nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:600}
.nav-links a{opacity:.78}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 22px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-light{background:var(--white);border-color:var(--line);color:var(--ink)}
.btn-light:hover{border-color:var(--ink)}
.btn-amber{background:var(--amber);color:#1a1405}
.btn-amber:hover{background:#f0c063}
.btn-sm{padding:10px 18px;font-size:14px}
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.hero{padding:56px 0 32px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sage)}
.dot{width:8px;height:8px;border-radius:50%;background:#2d9d5b;box-shadow:0 0 0 6px rgba(45,157,91,.15)}
h1{font-family:var(--font-serif);font-size:clamp(42px,5.2vw,68px);line-height:.98;letter-spacing:-.03em;margin:20px 0 18px}
h1 em{font-style:italic;font-weight:400;color:#2f4636}
.lead{font-size:18.5px;color:#39463d;max-width:540px}
.hero-actions{display:flex;gap:12px;margin:26px 0 22px;flex-wrap:wrap}
.trust-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px}
.trust-item{display:flex;gap:10px;align-items:center;font-size:13.5px;font-weight:600;color:#33413a}
.trust-item svg{flex-shrink:0}
.hero-card{background:var(--ink);color:var(--cream);border-radius:24px;padding:28px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero-card::after{content:"";position:absolute;inset:auto -60px -60px auto;width:280px;height:280px;background:radial-gradient(circle,rgba(232,180,74,.35),transparent 70%);pointer-events:none}
.bike-svg{width:100%;height:auto;display:block;margin:6px 0 10px}
.hero-specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:16px}
.hero-spec{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 13px}
.hero-spec strong{display:block;font-size:18px}
.hero-spec span{font-size:12.5px;opacity:.75}
.price-line{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.price-line .from{font-size:13px;opacity:.75}
.price-line .amount{font-family:var(--font-serif);font-size:30px}
.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream-2);padding:16px 0;margin-top:36px}
.logos-inner{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a978d}
section{padding:72px 0}
.kicker{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--brass-dark);margin-bottom:12px}
h2{font-family:var(--font-serif);font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px}
h2 em{font-style:italic;font-weight:400}
.sub{color:#4a5a4f;max-width:640px;font-size:17px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.card-visual{height:210px;display:grid;place-items:center;padding:24px;position:relative}
.card-visual.v1{background:linear-gradient(135deg,#dfe8dd,#f5f1e6)}
.card-visual.v2{background:linear-gradient(135deg,#1a2620,#2f4636);color:var(--cream)}
.card-visual.v3{background:linear-gradient(135deg,#f3dfb5,#e9c98a)}
.card-body{padding:24px}
.tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--sage-light);color:#2f4636;border-radius:999px;padding:5px 10px;margin-bottom:10px}
.card h3{font-family:var(--font-serif);font-size:24px;margin-bottom:6px}
.card p{font-size:14.5px;color:#4d5c52}
.card ul{list-style:none;margin:14px 0;font-size:14px}
.card ul li{padding:7px 0 7px 26px;position:relative;border-top:1px dashed var(--line)}
.card ul li::before{content:"✓";position:absolute;left:4px;font-weight:800;color:#2d9d5b}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:18px 24px;border-top:1px solid var(--line);background:#fcfaf5}
.price{font-weight:800;font-size:18px}
.price small{font-weight:600;color:var(--muted);font-size:13px}
/* configurator */
.config{background:var(--ink);color:var(--cream);border-radius:28px;padding:40px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;overflow:hidden;position:relative}
.config::before{content:"";position:absolute;width:520px;height:520px;left:-160px;top:-160px;background:radial-gradient(circle,rgba(232,180,74,.18),transparent 70%)}
.opt-group{margin-bottom:22px;position:relative}
.opt-group h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;opacity:.7}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--cream);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.pill.active,.pill:hover{background:var(--amber);border-color:var(--amber);color:#1a1405}
.swatches{display:flex;gap:10px}
.swatch{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;outline:2px solid rgba(255,255,255,.2);outline-offset:2px}
.swatch.active{outline-color:var(--amber)}
.summary{background:var(--cream);color:var(--ink);border-radius:20px;padding:28px;position:relative}
.summary h3{font-family:var(--font-serif);font-size:26px}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.sum-total{display:flex;justify-content:space-between;align-items:end;margin:16px 0}
.sum-total strong{font-family:var(--font-serif);font-size:40px;letter-spacing:-.03em}
.delivery{background:#eef4ee;border:1px solid #d2e0d2;color:#24402e;border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:14px}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;counter-reset:step}
.step{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-weight:800;margin-bottom:14px}
.step h4{font-size:16px;margin-bottom:6px}
.step p{font-size:14px;color:#52625a}
.step small{display:inline-block;margin-top:10px;background:var(--cream-2);padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px}
/* workshop */
.workshop-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-top:8px}
.checklist{list-style:none;margin-top:18px;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:14.5px}
.badge-ico{width:36px;height:36px;border-radius:10px;background:var(--sage-light);display:grid;place-items:center;flex-shrink:0;font-weight:800}
.spec-table{width:100%;border-collapse:collapse;margin-top:24px;background:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--line);font-size:14.5px}
.spec-table th,.spec-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.spec-table th{background:var(--ink);color:var(--cream);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.spec-table tr:last-child td{border-bottom:0}
/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.review{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px}
.stars{color:var(--brass);letter-spacing:2px;margin-bottom:10px}
.review p{font-size:14.8px}
.review footer{margin-top:14px;display:flex;gap:12px;align-items:center}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--white)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}
.stats strong{font-family:var(--font-serif);font-size:32px;display:block}
.stats span{font-size:13px;color:var(--muted)}
/* faq */
.faq{max-width:760px;margin:28px auto 0}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;background:none;border:0;text-align:left;padding:18px 20px;font-size:15.5px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-sans);color:var(--ink)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-a div{padding:0 20px 18px;color:#4a5a4f;font-size:14.8px}
.faq-item.open .faq-a{max-height:300px}
.plus{width:28px;height:28px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;flex-shrink:0;transition:.2s}
.open .plus{transform:rotate(45deg);background:var(--ink);color:var(--cream)}
/* booking */
.booking-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:28px;margin-top:30px}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px}
.form-card{background:var(--ink);color:var(--cream);border-radius:18px;padding:28px}
label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px;letter-spacing:.02em}
input,select,textarea{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:var(--cream);padding:13px 14px;font-size:15px;font-family:var(--font-sans)}
input::placeholder,textarea::placeholder{color:rgba(250,247,240,.5)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);border-color:var(--amber)}
select option{color:#111}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.error{font-size:12.5px;color:#ff9d9d;margin-top:5px;display:none}
.success{display:none;background:#1d3a28;border:1px solid #2d6a44;border-radius:12px;padding:16px;margin-top:16px;font-size:14.5px}
footer{background:var(--ink);color:#cbc4b3;padding:48px 0 24px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-grid h5{color:var(--cream);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.foot-grid a,.foot-grid p{display:block;font-size:14px;margin-bottom:8px;opacity:.85}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;opacity:.7}
.reveal{opacity:0;transform:translateY(18px);transition:.6s}
.reveal.visible{opacity:1;transform:none}
.modal{position:fixed;inset:0;background:rgba(10,15,12,.6);display:none;place-items:center;padding:20px;z-index:100}
.modal.open{display:grid}
.modal-box{background:var(--cream);border-radius:20px;max-width:520px;width:100%;padding:30px;position:relative}
.close-x{position:absolute;top:14px;right:14px;border:1px solid var(--line);background:var(--white);border-radius:50%;width:34px;height:34px;cursor:pointer}
@media(max-width:960px){
.hero-grid,.config,.workshop-grid,.booking-grid{grid-template-columns:1fr}
.grid-3,.reviews{grid-template-columns:1fr}
.steps{grid-template-columns:1fr 1fr}
.stats{grid-template-columns:1fr 1fr}
.nav-links{display:none}
.nav-links.mobile-open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--cream);flex-direction:column;padding:18px 24px 24px;border-bottom:1px solid var(--line);gap:16px}
.hamburger{display:block}
.foot-grid{grid-template-columns:1fr 1fr}
section{padding:52px 0}
}
@media(max-width:560px){.steps,.form-row,.hero-specs{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="topbar">Handbuilt in Copenhagen · <strong>6–8 week build time</strong> · Free test rides at Refshaleøen — Sat 10–16</div>
<header class="site">
<div class="container nav">
<a class="brand" href="#top" aria-label="Lumen Cycles home">
<span class="brand-mark" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#e8b44a" stroke-width="1.6"/><path d="M12 6.5V12l4 2.6" stroke="#faf7f0" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="12" r="1.4" fill="#e8b44a"/></svg>
</span>
<span class="brand-name">Lumen Cycles <small>COPENHAGEN</small></span>
</a>
<nav class="nav-links" id="navLinks">
<a href="#models">Models</a>
<a href="#configurator">Configure</a>
<a href="#workshop">Workshop</a>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
<a href="#visit">Visit</a>
</nav>
<div class="nav-cta">
<a href="#configurator" class="btn btn-light btn-sm">From €3,950</a>
<button class="btn btn-dark btn-sm" data-open-modal>Book test ride</button>
<button class="hamburger" id="hamburger" aria-label="Menu">☰</button>
</div>
</div>
</header>
<main id="top">
<!-- HERO -->
<div class="container hero">
<div class="hero-grid">
<div>
<span class="eyebrow"><span class="dot"></span> Workshop No. 14 — Refshaleøen · Est. 2016</span>
<h1>A cargo bike built <em>for your life,</em> not for the shelf.</h1>
<p class="lead">We build custom steel cargo bikes to order — sized to you, wired for your kids, your dog, your deliveries. Bosch-powered, Danish-welded, guaranteed for 5 years.</p>
<div class="hero-actions">
<button class="btn btn-dark" data-open-modal>Book a free test ride →</button>
<a class="btn btn-light" href="#configurator">Configure yours</a>
</div>
<div class="trust-row">
<span class="trust-item"><svg width="18" height="18" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#2d9d5b"/><path d="M6.5 10.2l2.4 2.4 4.6-5" stroke="#fff" stroke-width="1.8" fill="none" stroke-linecap="round"/></svg> 5-year frame warranty</span>
<span class="trust-item"><svg width="18" height="18" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#2d9d5b"/><path d="M6.5 10.2l2.4 2.4 4.6-5" stroke="#fff" stroke-width="1.8" fill="none" stroke-linecap="round"/></svg> 1,400+ bikes on the road</span>
<span class="trust-item"><svg width="18" height="18" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#2d9d5b"/><path d="M6.5 10.2l2.4 2.4 4.6-5" stroke="#fff" stroke-width="1.8" fill="none" stroke-linecap="round"/></svg> 4.9/5 from 620 reviews</span>
</div>
</div>
<div class="hero-card">
<div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-weight:800"><span>Lumen Byen — Demo No. 212</span><span>● In stock to try</span></div>
<!-- Inline SVG cargo bike illustration, no network request -->
<svg class="bike-svg" viewBox="0 0 520 260" role="img" aria-label="Illustration of Lumen cargo bike">
<rect x="20" y="20" width="480" height="220" rx="18" fill="none" stroke="rgba(255,255,255,.12)" stroke-dasharray="6 6"/>
<rect x="150" y="110" width="180" height="62" rx="10" fill="#e8b44a"/>
<rect x="150" y="110" width="180" height="18" rx="9" fill="#c99734"/>
<rect x="165" y="135" width="150" height="24" rx="6" fill="#101814" opacity=".18"/>
<circle cx="110" cy="194" r="42" fill="none" stroke="#faf7f0" stroke-width="6"/>
<circle cx="110" cy="194" r="6" fill="#e8b44a"/>
<circle cx="410" cy="194" r="42" fill="none" stroke="#faf7f0" stroke-width="6"/>
<circle cx="410" cy="194" r="6" fill="#e8b44a"/>
<path d="M110 194 L190 130 L260 130 L310 194 L410 194 M190 130 L170 80 L250 80 M250 80 L310 194 M170 80 L150 130" stroke="#faf7f0" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="170" cy="74" r="10" fill="none" stroke="#faf7f0" stroke-width="5"/>
<rect x="235" y="64" width="48" height="12" rx="6" fill="#faf7f0"/>
<path d="M60 70 q20 -18 40 0 q20 18 40 0" stroke="rgba(255,255,255,.25)" stroke-width="3" fill="none" stroke-linecap="round"/>
<text x="36" y="48" fill="rgba(250,247,240,.6)" font-size="12" font-family="sans-serif" letter-spacing="2">STEEL · BOSCH · OAK</text>
</svg>
<div class="hero-specs">
<div class="hero-spec"><strong>80 km</strong><span>Bosch range, real city use</span></div>
<div class="hero-spec"><strong>200 kg</strong><span>Max total weight, tested</span></div>
<div class="hero-spec"><strong>6–8 wks</strong><span>From fitting to delivery</span></div>
</div>
<div class="price-line">
<div><div class="from">Custom builds from</div><div class="amount">€3,950</div></div>
<button class="btn btn-amber" data-open-modal>Reserve build slot</button>
</div>
</div>
</div>
<div class="logos"><div class="container logos-inner"><span>As ridden daily by</span><span>☕ Coffee Collective</span><span>✿ Vester Kopi</span><span>◍ Øster Gro Farm</span><span>⌂ Nørrebro Libraries</span><span>✚ Børnehuset Sol</span></div></div>
</div>
<!-- MODELS -->
<section id="models">
<div class="container">
<div class="kicker">01 — The range</div>
<h2>Three platforms. <em>Infinite setups.</em></h2>
<p class="sub">Every Lumen starts from a proven steel platform, then we cut, braze and wire it to your measurements and your week. No compromises, no standard sizes that almost fit.</p>
<div class="grid-3">
<article class="card reveal">
<div class="card-visual v1">
<svg width="220" height="120" viewBox="0 0 220 120"><rect x="55" y="48" width="85" height="28" rx="6" fill="#1a2620"/><circle cx="40" cy="88" r="20" fill="none" stroke="#1a2620" stroke-width="5"/><circle cx="180" cy="88" r="20" fill="none" stroke="#1a2620" stroke-width="5"/><path d="M40 88 L75 54 L110 54 L135 88 L180 88 M75 54 L68 30 L105 30" stroke="#1a2620" stroke-width="4" fill="none" stroke-linecap="round"/></svg>
</div>
<div class="card-body">
<span class="tag">Family favourite · 68% of builds</span>
<h3>Byen Family</h3>
<p>Two kids, groceries, rain covers and nap-friendly benches. Low step-through, stable at walking pace.</p>
<ul><li>Box for 2 kids + 60 L cargo</li><li>Bosch Cargo Line, 85 Nm</li><li>Gates belt + Enviolo stepless</li></ul>
</div>
<div class="card-foot"><span class="price">€3,950 <small>from, incl. VAT</small></span><a href="#configurator" class="btn btn-dark btn-sm" data-model="byen">Configure →</a></div>
</article>
<article class="card reveal">
<div class="card-visual v2">
<svg width="220" height="120" viewBox="0 0 220 120"><rect x="50" y="42" width="95" height="34" rx="4" fill="none" stroke="#e8b44a" stroke-width="3" stroke-dasharray="6 4"/><circle cx="40" cy="88" r="20" fill="none" stroke="#faf7f0" stroke-width="5"/><circle cx="180" cy="88" r="20" fill="none" stroke="#faf7f0" stroke-width="5"/><path d="M40 88 L80 50 L120 50 L135 88 L180 88" stroke="#faf7f0" stroke-width="4" fill="none" stroke-linecap="round"/></svg>
</div>
<div class="card-body">
<span class="tag">For business · Lease-ready</span>
<h3>Handel Pro</h3>
<p>Insulated or flatbed box, 150 kg payload, lockable shutters. Built for cafés, florists and last-mile fleets.</p>
<ul><li>Payload 150 kg, Euro-box compatible</li><li>Dual-battery 1,250 Wh option</li><li>GPS + fleet service contract</li></ul>
</div>
<div class="card-foot"><span class="price">€5,400 <small>from, ex. VAT</small></span><a href="#configurator" class="btn btn-dark btn-sm" data-model="handel">Configure →</a></div>
</article>
<article class="card reveal">
<div class="card-visual v3">
<svg width="220" height="120" viewBox="0 0 220 120"><circle cx="45" cy="88" r="20" fill="none" stroke="#5a2c12" stroke-width="5"/><circle cx="175" cy="88" r="20" fill="none" stroke="#5a2c12" stroke-width="5"/><path d="M45 88 L85 45 L125 45 L150 88 L175 88 M85 45 L78 28" stroke="#5a2c12" stroke-width="4" fill="none" stroke-linecap="round"/><rect x="98" y="52" width="40" height="22" rx="5" fill="#5a2c12"/></svg>
</div>
<div class="card-body">
<span class="tag">Gravel & weekend</span>
<h3>Friluft Tour</h3>
<p>Lighter, longer, faster. Drop-bar option, suspension fork and 120 km range for Kredsløbet and summer houses.</p>
<ul><li>29 kg light build, 100 km+ range</li><li>Fox / Cane Creek options</li><li>Thru-axle + 4-piston brakes</li></ul>
</div>
<div class="card-foot"><span class="price">€4,600 <small>from, incl. VAT</small></span><a href="#configurator" class="btn btn-dark btn-sm" data-model="friluft">Configure →</a></div>
</article>
</div>
</div>
</section>
<!-- CONFIGURATOR -->
<section id="configurator" style="padding-top:0">
<div class="container">
<div class="config">
<div style="position:relative">
<div class="kicker" style="color:var(--amber)">02 — Build yours in 30 seconds</div>
<h2 style="color:var(--cream)">Configure your <em style="color:var(--amber)">Lumen.</em></h2>
<p style="opacity:.75;max-width:440px">Transparent pricing, no surprises. This is the exact logic we use in the workshop — pick, see the price, book a fitting.</p>
<div class="opt-group" style="margin-top:24px">
<h4>1 · Model</h4>
<div class="pills" id="optModel">
<button class="pill active" data-price="3950" data-name="Byen Family">Byen — €3,950</button>
<button class="pill" data-price="5400" data-name="Handel Pro">Handel — €5,400</button>
<button class="pill" data-price="4600" data-name="Friluft Tour">Friluft — €4,600</button>
</div>
</div>
<div class="opt-group">
<h4>2 · Box & finish</h4>
<div class="pills" id="optBox">
<button class="pill active" data-price="0" data-name="Oiled oak">Oiled oak +0</button>
<button class="pill" data-price="290" data-name="Thermo-ash">Thermo-ash +€290</button>
<button class="pill" data-price="590" data-name="Insulated Pro">Insulated Pro +€590</button>
</div>
</div>
<div class="opt-group">
<h4>3 · Colour — powder-coated in-house</h4>
<div class="swatches" id="optColor">
<span class="swatch active" title="Forest" data-name="Forest green" style="background:#22382c"></span>
<span class="swatch" title="Cream" data-name="Harbour cream" style="background:#ece5d3"></span>
<span class="swatch" title="Clay" data-name="Burnt clay" style="background:#c96a3b"></span>
<span class="swatch" title="Midnight" data-name="Midnight blue" style="background:#1e2e4a"></span>
<span class="swatch" title="Ochre" data-name="Ochre" style="background:#e8b44a"></span>
</div>
</div>
<div class="opt-group">
<h4>4 · Motor & extras</h4>
<div class="pills" id="optMotor">
<button class="pill active" data-price="0" data-name="Bosch Cargo 500Wh">Bosch 500 Wh</button>
<button class="pill" data-price="650" data-name="Bosch Dual 1,000Wh">Dual battery +€650</button>
</div>
<div class="pills" id="optExtras" style="margin-top:8px">
<button class="pill" data-price="340" data-name="Rain cover">Rain cover +€340</button>
<button class="pill" data-price="180" data-name="Child seats">2× child seats +€180</button>
<button class="pill" data-price="220" data-name="GPS">GPS + alarm +€220</button>
</div>
</div>
</div>
<div class="summary">
<h3>Your build</h3>
<p style="font-size:13px;color:var(--muted)" id="sumDesc">Byen Family · Oiled oak · Forest green · Bosch 500 Wh</p>
<div id="sumRows" style="margin-top:12px"></div>
<div class="sum-total"><span style="font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase">Total incl. VAT</span><strong id="sumTotal">€3,950</strong></div>
<div class="delivery">✓ Build slot available: <strong id="deliveryDate">late November 2026</strong> · Free delivery in Greater Copenhagen · 5-yr warranty included</div>
<button class="btn btn-dark" style="width:100%" data-open-modal>Reserve this build — €200 deposit →</button>
<p style="font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center">Refundable for 14 days. Remaining balance on delivery. 0% financing from €112/mo.</p>
</div>
</div>
</div>
</section>
<!-- WORKSHOP -->
<section id="workshop" style="padding-top:20px">
<div class="container">
<div class="kicker">03 — The workshop</div>
<h2>Welded 800 metres <em>from where you'll ride it.</em></h2>
<div class="workshop-grid">
<div>
<p class="sub">We're 11 framebuilders, mechanics and one very serious coffee machine in a former shipyard hall at Refshaleøen. You can watch your frame being brazed if you like — most customers do.</p>
<ul class="checklist">
<li><span class="badge-ico">◍</span><span><strong>Reynolds 725 steel, TIG + fillet-brazed.</strong> Repairable for decades, not disposable aluminium.</span></li>
<li><span class="badge-ico">⚡</span><span><strong>Bosch eBike Systems Expert.</strong> Certified diagnostics, firmware and battery service on-site.</span></li>
<li><span class="badge-ico">✓</span><span><strong>EN 17860 cargo-bike certified + ISO 4210 tested</strong> to 200 kg. Insurance-approved locks included.</span></li>
<li><span class="badge-ico">♻</span><span><strong>FSC oak from Dalarna, linseed finish.</strong> Spare parts guaranteed for 10 years, in writing.</span></li>
</ul>
</div>
<div>
<table class="spec-table">
<tr><th>Component</th><th>Standard on every Lumen</th></tr>
<tr><td>Frame</td><td>Reynolds 725, custom geometry, 5-yr warranty</td></tr>
<tr><td>Motor</td><td>Bosch Cargo Line 85 Nm, 500 Wh PowerTube</td></tr>
<tr><td>Gears</td><td>Gates CDX belt + Enviolo Heavy Duty</td></tr>
<tr><td>Brakes</td><td>Magura CMe 4-piston, 203 mm</td></tr>
<tr><td>Lights</td><td>Supernova M99, daytime running + brake light</td></tr>
<tr><td>Lock</td><td>AXA Defender + plug-in chain, GPS optional</td></tr>
<tr><td>Weight</td><td>38–46 kg depending on build</td></tr>
</table>
</div>
</div>
<div class="steps">
<div class="step"><div class="step-num">1</div><h4>Fitting & test ride</h4><p>45 minutes with a builder. We measure you, load the demo with sandbags / kids, ride the bridge.</p><small>Free · Sat & weekdays</small></div>
<div class="step"><div class="step-num">2</div><h4>Drawing & deposit</h4><p>You get a CAD drawing + fixed quote in 3 days. €200 reserves steel and a build week.</p><small>Fixed price promise</small></div>
<div class="step"><div class="step-num">3</div><h4>Build & photos</h4><p>Welding, powder-coat, wiring. Weekly photos from the jig to your inbox.</p><small>4–5 weeks</small></div>
<div class="step"><div class="step-num">4</div><h4>Delivery & service</h4><p>Handover at the hall or your door. First service free at 500 km, yearly check €89.</p><small>5-yr warranty</small></div>
</div>
</div>
</section>
<!-- REVIEWS -->
<section id="reviews" style="background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
<div class="container">
<div class="kicker">04 — Owners</div>
<h2>Trusted with school runs <em>and payrolls.</em></h2>
<div class="reviews">
<div class="review"><div class="stars">★★★★★</div><p>“We sold our second car after two weeks. Two kids, dog, groceries up to Fælledparken — it just eats hills. The fitting alone was worth it.”</p><footer><span class="avatar" style="background:#22382c">MK</span><span><strong>Mette K.</strong><br><small>Byen Family · Østerbro · 8,200 km</small></span></footer></div>
<div class="review"><div class="stars">★★★★★</div><p>“We run three Handel Pros for bread delivery. 14 months, zero downtime. When a shutter broke they fixed it same day. That’s why it’s €5k and not €3k.”</p><footer><span class="avatar" style="background:#b78a2e">JO</span><span><strong>Johan O.</strong><br><small>Handel Pro ×3 · Bageriet Ruga</small></span></footer></div>
<div class="review"><div class="stars">★★★★★</div><p>“I compared Bullitt, Urban Arrow and Lumen for months. Lumen was the only one that sized the bike to me (196 cm) and let me choose everything.”</p><footer><span class="avatar" style="background:#1e2e4a">AS</span><span><strong>Anders S.</strong><br><small>Friluft Tour · Vesterbro</small></span></footer></div>
</div>
<div class="stats">
<div><strong>1,400+</strong><span>bikes delivered since 2016</span></div>
<div><strong>4.9 / 5</strong><span>from 620 verified reviews</span></div>
<div><strong>96%</strong><span>would buy again</span></div>
<div><strong>48h</strong><span>service turnaround, guaranteed</span></div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="container">
<div class="kicker" style="text-align:center">05 — Honest answers</div>
<h2 style="text-align:center">Before you spend €4,000.</h2>
<div class="faq">
<div class="faq-item"><button class="faq-q">Why does a Lumen cost more than an Urban Arrow? <span class="plus">+</span></button><div class="faq-a"><div>Mass-produced boxes use standard aluminium frames and one geometry. We cut Reynolds steel to your body, lace stronger wheels, fit a belt drive as standard and warranty the frame for 5 years. Over 8 years the total cost is usually lower — belts last 3× chains, steel can be repaired, parts are stocked for 10 years.</div></div></div>
<div class="faq-item"><button class="faq-q">How long does it really take? <span class="plus">+</span></button><div class="faq-a"><div>6–8 weeks from deposit right now. That includes drawing approval, welding, powder-coating and 60 km of test riding. Need it faster? We keep 4–6 ready-built stock bikes each month — ask about “hall bikes” for 7-day delivery.</div></div></div>
<div class="faq-item"><button class="faq-q">What about theft, insurance and winter? <span class="plus">+</span></button><div class="faq-a"><div>Every bike ships with an insurance-approved AXA lock + GPS preparation. We partner with GF Forsikring (from ~€18/mo, theft + assistance). Salt-proof coating, sealed Bosch wiring and Schwalbe Winter tyres available — Danes ride year-round, your Lumen will too.</div></div></div>
<div class="faq-item"><button class="faq-q">Can I finance or lease through my company? <span class="plus">+</span></button><div class="faq-a"><div>Yes. Private: 0% for 12 months or from €112/mo over 36 months via Spar Nord. Business: operational leasing from €129/mo ex. VAT, service included. We handle the paperwork in the shop.</div></div></div>
<div class="faq-item"><button class="faq-q">What if something breaks? <span class="plus">+</span></button><div class="faq-a"><div>48-hour repair promise in Copenhagen, loaner cargo bike free. 5-year frame + fork warranty, 2-year Bosch warranty extendable to 4. After that, fixed-price service menu — no surprises.</div></div></div>
</div>
</div>
</section>
<!-- VISIT / BOOKING -->
<section id="visit" style="padding-top:0">
<div class="container">
<div class="kicker">06 — Visit</div>
<h2>Come ride one <em>in the rain if you like.</em></h2>
<p class="sub">That's the real test. We'll have a Byen, Handel and Friluft warmed up, helmets in all sizes, and coffee.</p>
<div class="booking-grid">
<div class="info-card">
<h3 style="font-family:var(--font-serif);font-size:22px">Lumen Cycles — Hal 14</h3>
<p style="font-size:14.5px;color:#4a5a4f;margin:8px 0">Refshalevej 167, 1432 Copenhagen K<br>Sat 10–16 · Tue–Fri 9–17 · CVR 38271944</p>
<div style="background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14px;margin:14px 0">🚲 <strong>Next free test slots:</strong><br><span id="slots">Sat 11:20 · Sat 13:40 · Tue 15:00 · Wed 10:30</span><br><small style="color:var(--muted)">Live from the workshop calendar — updated on load.</small></div>
<p style="font-size:14px">📞 +45 33 12 44 80<br>✉ hej@lumencycles.dk</p>
<hr style="border:0;border-top:1px solid var(--line);margin:16px 0">
<p style="font-size:13.5px;color:#4a5a4f">Parking: cars at Gate B, bikes everywhere. Metro: Christianshavn + 8 min on our loaner. Kids and dogs welcome — we have a ramp, not stairs.</p>
</div>
<div class="form-card">
<h3 style="font-family:var(--font-serif);font-size:24px">Book a test ride</h3>
<p style="font-size:14px;opacity:.75">No sales pitch. 45 min, with a builder.</p>
<form id="bookForm" novalidate>
<div class="form-row">
<div><label for="fName">Name</label><input id="fName" placeholder="Freja Nielsen" autocomplete="name"><div class="error" id="eName">Please enter your name.</div></div>
<div><label for="fPhone">Phone</label><input id="fPhone" placeholder="+45 …" autocomplete="tel"><div class="error" id="ePhone">Enter a valid phone (6+ digits).</div></div>
</div>
<label for="fEmail">Email</label><input id="fEmail" type="email" placeholder="you@mail.dk" autocomplete="email"><div class="error" id="eEmail">Enter a valid email.</div>
<div class="form-row">
<div><label for="fModel">Model to try</label><select id="fModel"><option>Byen Family</option><option>Handel Pro</option><option>Friluft Tour</option><option>Not sure yet</option></select></div>
<div><label for="fDay">Preferred day</label><select id="fDay"><option>Saturday</option><option>Tuesday</option><option>Wednesday</option><option>Thursday</option><option>Friday</option></select></div>
</div>
<label for="fMsg">Anything we should prepare? (kids’ ages, hill, dog weight…)</label><textarea id="fMsg" rows="3" placeholder="2 kids (3 and 5), live on 3rd floor, need stair solution…"></textarea>
<button type="submit" class="btn btn-amber" style="width:100%;margin-top:16px">Request test ride →</button>
<div class="success" id="formSuccess">Tak! Request received. We’ll SMS you within 4 working hours to confirm. — Team Lumen</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="foot-grid">
<div><div class="brand" style="color:var(--cream)"><span class="brand-mark" style="background:var(--amber)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#101814" stroke-width="1.6"/><path d="M12 6.5V12l4 2.6" stroke="#101814" stroke-width="1.8" stroke-linecap="round"/></svg></span><span class="brand-name">Lumen Cycles <small style="color:var(--amber)">COPENHAGEN</small></span></div><p style="margin-top:12px;max-width:280px">Custom cargo bikes, welded and wired in Refshaleøen since 2016. Built to be repaired, not replaced.</p></div>
<div><h5>Shop</h5><a href="#models">Byen Family</a><a href="#models">Handel Pro</a><a href="#models">Friluft Tour</a><a href="#configurator">Configure</a></div>
<div><h5>Workshop</h5><a href="#workshop">Service & prices</a><a href="#workshop">Warranty</a><a href="#faq">Financing</a><a href="#visit">Find us</a></div>
<div><h5>Contact</h5><p>Refshalevej 167<br>1432 Copenhagen K</p><p>+45 33 12 44 80<br>hej@lumencycles.dk</p></div>
</div>
<div class="legal"><span>© 2026 Lumen Cycles ApS · CVR 38271944 · All prices incl. 25% Danish VAT unless noted.</span><span>EN 17860 certified · Bosch eBike Expert · Member of Cykelbranchen Danmark</span></div>
</div>
</footer>
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-label="Book test ride">
<div class="modal-box">
<button class="close-x" id="modalClose" aria-label="Close">✕</button>
<h3 style="font-family:var(--font-serif);font-size:28px">Reserve your build slot</h3>
<p style="color:#4a5a4f;font-size:15px;margin:8px 0 16px">Leave your email and we’ll hold a build week for 7 days — no payment now. Current build: <strong id="modalBuild">Byen Family — €3,950</strong></p>
<label for="mEmail" style="color:var(--ink)">Email</label>
<input id="mEmail" type="email" placeholder="you@mail.dk" style="background:#fff;border-color:var(--line);color:var(--ink)">
<div class="error" id="eModal" style="color:#a12c2c">Enter a valid email.</div>
<button class="btn btn-dark" id="modalSubmit" style="width:100%;margin-top:14px">Hold my slot →</button>
<p id="modalDone" style="display:none;background:#eef4ee;border:1px solid #cfe0cf;border-radius:10px;padding:12px;margin-top:12px;font-size:14px">✓ Slot held! Check your inbox — Maja from the workshop will write within a day.</p>
</div>
</div>
<script>
(function(){
var nav = document.getElementById('navLinks');
document.getElementById('hamburger').addEventListener('click', function(){ nav.classList.toggle('mobile-open'); });
nav.addEventListener('click', function(e){ if(e.target.tagName==='A') nav.classList.remove('mobile-open'); });
// Reveal on scroll
var io = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('visible'); io.unobserve(e.target);} }); }, {threshold:.12});
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
// FAQ
document.querySelectorAll('.faq-item').forEach(function(item){
item.querySelector('.faq-q').addEventListener('click', function(){
var open = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(function(o){ o.classList.remove('open'); });
if(!open) item.classList.add('open');
});
});
// Configurator
var state = { model:{name:'Byen Family',price:3950}, box:{name:'Oiled oak',price:0}, color:'Forest green', motor:{name:'Bosch 500 Wh',price:0}, extras:[] };
function fmt(n){ return '€' + n.toLocaleString('en-IE').replace(/,/g,'.'); }
function singleSelect(id, key){
var wrap = document.getElementById(id);
wrap.addEventListener('click', function(e){
var b = e.target.closest('.pill'); if(!b) return;
wrap.querySelectorAll('.pill').forEach(function(p){ p.classList.remove('active'); });
b.classList.add('active');
state[key] = { name: b.getAttribute('data-name'), price: parseInt(b.getAttribute('data-price'),10)||0 };
render();
});
}
singleSelect('optModel','model'); singleSelect('optBox','box'); singleSelect('optMotor','motor');
document.getElementById('optExtras').addEventListener('click', function(e){
var b = e.target.closest('.pill'); if(!b) return;
b.classList.toggle('active');
var name = b.getAttribute('data-name'), price = parseInt(b.getAttribute('data-price'),10)||0;
var i = state.extras.findIndex(function(x){ return x.name===name; });
if(i>=0) state.extras.splice(i,1); else state.extras.push({name:name,price:price});
render();
});
document.getElementById('optColor').addEventListener('click', function(e){
var s = e.target.closest('.swatch'); if(!s) return;
document.querySelectorAll('.swatch').forEach(function(x){ x.classList.remove('active'); });
s.classList.add('active'); state.color = s.getAttribute('data-name'); render();
});
// Model shortcut buttons
document.querySelectorAll('[data-model]').forEach(function(a){
a.addEventListener('click', function(){
var m = a.getAttribute('data-model');
var map = {byen:0,handel:1,friluft:2};
var pills = document.querySelectorAll('#optModel .pill');
if(pills[map[m]]) pills[map[m]].click();
});
});
function render(){
var rows = [
{n: state.model.name, p: state.model.price},
{n: 'Box — ' + state.box.name, p: state.box.price},
{n: 'Motor — ' + state.motor.name, p: state.motor.price}
].concat(state.extras.map(function(x){ return {n:x.name, p:x.price}; }));
var total = rows.reduce(function(s,r){ return s+r.p; },0);
document.getElementById('sumRows').innerHTML = rows.map(function(r){
return '<div class="sum-row"><span>'+r.n+'</span><span><strong>'+(r.p===0?'incl.':'+ '+fmt(r.p))+'</strong></span></div>';
}).join('') + '<div class="sum-row"><span>Colour — '+state.color+'</span><span><strong>incl.</strong></span></div>';
document.getElementById('sumTotal').textContent = fmt(total);
document.getElementById('sumDesc').textContent = state.model.name+' · '+state.box.name+' · '+state.color+' · '+state.motor.name + (state.extras.length ? ' · '+state.extras.map(function(x){return x.name;}).join(', ') : '');
document.getElementById('modalBuild').textContent = state.model.name+' — '+fmt(total);
// delivery date ~7 weeks out
var d = new Date(); d.setDate(d.getDate()+52);
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
document.getElementById('deliveryDate').textContent = (d.getDate()<15?'early ':'late ') + months[d.getMonth()] + ' ' + d.getFullYear();
}
render();
// Booking form validation (no network)
document.getElementById('bookForm').addEventListener('submit', function(e){
e.preventDefault();
var ok = true;
var name = document.getElementById('fName').value.trim();
var phone = document.getElementById('fPhone').value.replace(/\D/g,'');
var email = document.getElementById('fEmail').value.trim();
document.getElementById('eName').style.display = name.length<2 ? 'block':'none'; if(name.length<2) ok=false;
document.getElementById('ePhone').style.display = phone.length<6 ? 'block':'none'; if(phone.length<6) ok=false;
var emOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
document.getElementById('eEmail').style.display = emOk ? 'none':'block'; if(!emOk) ok=false;
if(ok){ document.getElementById('formSuccess').style.display='block'; this.querySelector('button[type=submit]').textContent='Request received ✓'; }
});
// Modal
var modal = document.getElementById('modal');
document.querySelectorAll('[data-open-modal]').forEach(function(b){ b.addEventListener('click', function(){ modal.classList.add('open'); }); });
document.getElementById('modalClose').addEventListener('click', function(){ modal.classList.remove('open'); });
modal.addEventListener('click', function(e){ if(e.target===modal) modal.classList.remove('open'); });
document.addEventListener('keydown', function(e){ if(e.key==='Escape') modal.classList.remove('open'); });
document.getElementById('modalSubmit').addEventListener('click', function(){
var v = document.getElementById('mEmail').value.trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
document.getElementById('eModal').style.display = ok?'none':'block';
if(ok) document.getElementById('modalDone').style.display='block';
});
})();
</script>
</body>
</html>Muse Spark 1.3 Contributor: other attempts
- Muse Spark 1.3 Contributor, Pelican: Not run: no OpenRouter route
- Muse Spark 1.3 Contributor, Watch: Not run: no OpenRouter route


- About · 157 words