• Updated 23 Oct, 19:41 UTC
  • Next run 24 Oct, 05:17 UTCNext 24 Oct 05:17
  • Last 7 days: 5 new models, 196 runs7 d: 5 models, 196 runs
Landing page for a cargo bike workshop

Hy4 PreviewTencent

Network offOpen alone (new tab)

Run details

Model
tencent/hy4-preview
Route
OpenRouter API, one user message
Served by
DeepInfra
Effort
high, OpenRouter's default for this model
Limits
60 min · 64,000 output tokens (the model's limit)
Date
23 Oct 2026
Time
7 min 45 s
Size
26 kB
Tokens
107 in, 24,596 out (16,358 of them thinking)
List price
$0.055 at today's price ($0.751 in / $2.25 out per M)
Paid
$0.062

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

26 kB 940 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</title>
  <style>
    :root {
      --bg-color: #f4f3ef;
      --text-main: #1c1c1a;
      --text-muted: #666663;
      --accent: #d94f30;
      --dark-bg: #1c1c1a;
      --border: #dcdad3;
      --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-serif: "Georgia", "Times New Roman", serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-text);
      background-color: var(--bg-color);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img, svg {
      display: block;
      max-width: 100%;
    }

    /* Typography */
    h1, h2, h3, h4, .logo, .btn {
      font-family: var(--font-sans);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    h1 {
      font-size: clamp(3rem, 5vw, 5.5rem);
      margin: 1.5rem 0;
    }

    h2 {
      font-size: clamp(2rem, 3vw, 3rem);
      margin-bottom: 1rem;
    }

    .overline {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--accent);
      display: block;
      margin-bottom: 1rem;
    }

    /* Layout */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .section {
      padding: 8rem 0;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4rem;
    }

    .text-center { text-align: center; }
    .max-w-600 { max-width: 600px; }
    .max-w-800 { max-width: 800px; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    
    .bg-light { background-color: #EAE8E3; }
    .bg-dark { background-color: var(--dark-bg); color: var(--bg-color); }
    .bg-accent { background-color: var(--accent); color: #fff; }
    
    .text-white { color: #fff; }
    .text-muted { color: var(--text-muted); }
    .opacity-80 { opacity: 0.8; }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--text-main);
      color: #fff;
      padding: 1rem 2.5rem;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      border: none;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .btn::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; width: 100%; height: 100%;
      background: var(--accent);
      z-index: -1;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.3s ease;
    }

    .btn:hover::after {
      transform: scaleY(1);
    }

    .btn-light {
      background: #fff;
      color: var(--text-main);
    }

    .btn-light:hover {
      color: #fff;
    }

    .btn-small {
      padding: 0.75rem 1.5rem;
      font-size: 0.75rem;
    }

    /* Navigation */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 1.5rem 0;
      z-index: 100;
      transition: all 0.3s ease;
      border-bottom: 1px solid transparent;
    }

    nav.scrolled {
      background: rgba(244, 243, 239, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 1rem 0;
      border-bottom: 1px solid var(--border);
    }

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: 2.5rem;
      align-items: center;
    }

    .nav-links a:not(.btn) {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:not(.btn):hover {
      color: var(--accent);
    }

    /* Hero */
    .hero {
      position: relative;
      padding-top: 8rem;
      min-height: 90vh;
      display: flex;
      align-items: center;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
      align-items: center;
    }

    .hero-sub {
      font-size: 1.25rem;
      color: var(--text-muted);
      max-width: 480px;
      margin-bottom: 2.5rem;
      line-height: 1.6;
    }

    .hero-visual {
      width: 100%;
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }

    .scroll-indicator {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      opacity: 0.4;
    }

    .mouse {
      width: 22px;
      height: 34px;
      border: 2px solid var(--text-main);
      border-radius: 12px;
      position: relative;
    }

    .mouse::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      background: var(--text-main);
      border-radius: 50%;
      animation: scrollWheel 2s infinite;
    }

    @keyframes scrollWheel {
      0% { top: 6px; opacity: 1; }
      100% { top: 18px; opacity: 0; }
    }

    /* Marquee */
    .marquee-container {
      overflow: hidden;
      white-space: nowrap;
      background: var(--text-main);
      color: var(--bg-color);
      padding: 1rem 0;
    }

    .marquee-content {
      display: inline-block;
      animation: marquee 25s linear infinite;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
    }

    .marquee-content span {
      margin: 0 2rem;
    }

    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Manifesto */
    .manifesto-text {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-style: italic;
      line-height: 1.3;
      color: var(--text-main);
    }

    /* Specs */
    .section-header {
      margin-bottom: 4rem;
    }

    .spec-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 1.5rem;
      color: var(--accent);
    }

    .spec-card h3 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      letter-spacing: 0.02em;
    }

    .spec-card p {
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    /* Process */
    .process-grid .process-step {
      border-top: 1px solid #333;
      padding-top: 2rem;
      transition: border-color 0.3s ease;
    }

    .process-grid .process-step:hover {
      border-color: var(--accent);
    }

    .process-num {
      font-size: 4rem;
      font-weight: 300;
      font-family: var(--font-serif);
      color: #444;
      margin-bottom: 1rem;
      display: block;
      transition: color 0.3s ease;
    }

    .process-grid .process-step:hover .process-num {
      color: var(--accent);
    }

    .process-step h3 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #fff;
    }

    .process-step p {
      color: #A0A09D;
    }

    /* Testimonial */
    .quote-icon {
      margin: 0 auto 1.5rem auto;
      opacity: 0.8;
    }

    .quote-text {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-style: italic;
      line-height: 1.4;
      margin: 2rem 0;
      color: var(--text-main);
    }

    .quote-author {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .quote-author strong {
      display: block;
      color: var(--text-main);
      margin-bottom: 0.25rem;
    }

    /* Configure Form */
    .config-form {
      display: flex;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      margin-top: 2.5rem;
    }

    .config-select {
      padding: 1rem 1.5rem;
      font-family: inherit;
      font-size: 0.85rem;
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 0;
      outline: none;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .config-select option {
      color: var(--text-main);
      background: #fff;
    }

    .price-display {
      margin-top: 3rem;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      opacity: 0.8;
    }

    .price-tag {
      font-size: 1.75rem;
      font-weight: 500;
      display: block;
      margin-top: 0.5rem;
      color: #fff;
      font-family: var(--font-sans);
    }

    /* Footer */
    .footer {
      background: var(--text-main);
      color: var(--bg-color);
      padding: 6rem 0 2rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 2rem;
      margin-bottom: 5rem;
    }

    .footer-brand p {
      color: #A0A09D;
      margin-top: 1.5rem;
      font-size: 0.9rem;
    }

    .footer h4 {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.85rem;
      color: #666;
      margin-bottom: 1.5rem;
    }

    .footer a {
      display: block;
      margin-bottom: 0.75rem;
      color: #A0A09D;
      font-size: 0.9rem;
      transition: color 0.2s;
    }

    .footer a:hover {
      color: #fff;
    }

    .news-form {
      display: flex;
      border-bottom: 1px solid #444;
      padding-bottom: 0.5rem;
      margin-top: 1rem;
    }

    .news-form input {
      background: transparent;
      border: none;
      color: #fff;
      flex: 1;
      outline: none;
      font-family: inherit;
      font-size: 0.9rem;
    }

    .news-form input::placeholder {
      color: #666;
    }

    .news-form button {
      background: transparent;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 1.2rem;
      transition: color 0.2s;
    }

    .news-form button:hover {
      color: var(--accent);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #333;
      padding-top: 2rem;
      font-size: 0.8rem;
      color: #666;
    }

    /* Animations */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 900px) {
      .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
      }
      .hero-sub {
        margin-left: auto;
        margin-right: auto;
      }
      .hero-visual {
        max-width: 500px;
        margin: 0 auto;
      }
      .grid-3 {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .hide-mobile {
        display: none;
      }
      .section {
        padding: 5rem 0;
      }
      .config-form {
        flex-direction: column;
      }
      .config-select {
        width: 100%;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }
      .scroll-indicator {
        display: none;
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <div class="container nav-container">
      <a href="#" class="logo">LUMEN</a>
      <div class="nav-links">
        <a href="#manifesto" class="hide-mobile">Manifesto</a>
        <a href="#specs" class="hide-mobile">Specifications</a>
        <a href="#process" class="hide-mobile">The Workshop</a>
        <a href="#configure" class="btn btn-small">Configure</a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <div class="container hero-grid">
      <div class="hero-content fade-up">
        <span class="overline">Copenhagen • Est. 2018</span>
        <h1>The everyday vehicle,<br>perfected.</h1>
        <p class="hero-sub">We build custom cargo bikes to order. Hand-welded chromoly steel frames, silent belt drives, and a fit tailored precisely to you. Built to carry what matters.</p>
        <div class="hero-action">
          <a href="#configure" class="btn">Configure Yours</a>
        </div>
      </div>
      
      <div class="hero-visual fade-up" style="transition-delay: 0.2s;">
        <svg class="hero-svg" viewBox="0 0 1000 600" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="blueprintGrid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--border)" stroke-width="0.5" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#blueprintGrid)" opacity="0.6" />
          <circle cx="500" cy="350" r="300" fill="var(--bg-color)" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 8" />
          <ellipse cx="500" cy="590" rx="400" ry="10" fill="var(--text-main)" opacity="0.05" />
          
          <g fill="none" stroke="var(--text-main)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
            <!-- Rear Wheel -->
            <circle cx="180" cy="450" r="140" stroke-width="2" />
            <circle cx="180" cy="450" r="138" />
            <circle cx="180" cy="450" r="4" fill="var(--text-main)" />
            <path d="M 180 310 L 180 590 M 40 450 L 320 450 M 80 350 L 280 550 M 80 550 L 280 350" stroke="var(--border)" stroke-width="1" />

            <!-- Front Wheel -->
            <circle cx="850" cy="450" r="140" stroke-width="2" />
            <circle cx="850" cy="450" r="138" />
            <circle cx="850" cy="450" r="4" fill="var(--text-main)" />
            <path d="M 850 310 L 850 590 M 710 450 L 990 450 M 750 350 L 950 550 M 750 550 L 950 350" stroke="var(--border)" stroke-width="1" />
            
            <!-- Frame Geometry -->
            <path d="M 450 450 L 180 450" /> <!-- Chainstay -->
            <path d="M 450 450 L 370 230" /> <!-- Seat tube -->
            <path d="M 370 230 L 180 450" /> <!-- Seatstay -->
            <path d="M 370 230 L 530 200" /> <!-- Top tube -->
            <path d="M 450 450 L 530 200" /> <!-- Down tube -->
            
            <!-- Head tube & Fork -->
            <path d="M 530 200 L 550 240" /> <!-- Head tube -->
            <path d="M 550 240 L 850 450" /> <!-- Fork -->
            <path d="M 530 200 L 470 130" /> <!-- Stem -->
            <path d="M 470 130 C 440 110, 410 120, 390 150" /> <!-- Handlebar -->
            <path d="M 390 150 L 370 145" stroke-width="6" /> <!-- Grip -->
            
            <!-- Saddle -->
            <path d="M 340 220 C 360 210, 380 210, 400 220 C 380 225, 360 225, 340 220 Z" fill="var(--text-main)" />
            <path d="M 370 230 L 370 220" stroke-width="8" /> <!-- Seatpost -->
            
            <!-- Crankset -->
            <circle cx="450" cy="450" r="45" stroke-width="2" />
            <circle cx="450" cy="450" r="4" fill="var(--text-main)" />
            <path d="M 450 450 L 450 520" stroke-width="8" /> <!-- Crank arm -->
            <path d="M 430 520 L 470 520" stroke-width="8" /> <!-- Pedal -->
            
            <!-- Belt drive -->
            <path d="M 450 405 L 180 405" stroke-width="4" stroke-dasharray="8 6" />
            <path d="M 450 495 L 180 495" stroke-width="4" stroke-dasharray="8 6" />
            
            <!-- Cargo Platform -->
            <path d="M 570 320 L 800 320" />
            <path d="M 570 320 L 570 450" />
            <path d="M 570 450 L 450 450" />
            <path d="M 800 320 L 800 450" />
            <path d="M 800 450 L 850 450" />
            <path d="M 570 320 L 630 385" /> <!-- Cross bracing -->
            <path d="M 570 385 L 630 320" /> <!-- Cross bracing -->
            
            <!-- Box Outline -->
            <path d="M 570 320 L 570 220 L 800 220 L 800 320 Z" stroke-width="2" stroke-dasharray="6 4" stroke="var(--accent)" />
          </g>
        </svg>
      </div>
    </div>
    
    <div class="scroll-indicator">
      <div class="mouse"></div>
    </div>
  </header>

  <!-- Marquee Ticker -->
  <div class="marquee-container">
    <div class="marquee-content">
      <span>HANDMADE IN COPENHAGEN</span> • 
      <span>LIFETIME WARRANTY</span> • 
      <span>GATES CARBON DRIVE</span> • 
      <span>ALL-WEATHER READY</span> • 
      <span>HANDMADE IN COPENHAGEN</span> • 
      <span>LIFETIME WARRANTY</span> • 
      <span>GATES CARBON DRIVE</span> • 
      <span>ALL-WEATHER READY</span> •
      <span>HANDMADE IN COPENHAGEN</span> • 
      <span>LIFETIME WARRANTY</span> • 
      <span>GATES CARBON DRIVE</span> • 
      <span>ALL-WEATHER READY</span>
    </div>
  </div>

  <!-- Manifesto -->
  <section id="manifesto" class="section bg-light fade-up">
    <div class="container text-center max-w-800">
      <h2 class="manifesto-text">"We believe the best car for the city is a bicycle."</h2>
    </div>
  </section>

  <!-- Specs -->
  <section id="specs" class="section fade-up">
    <div class="container">
      <div class="section-header text-center max-w-600 mx-auto">
        <span class="overline">Anatomy</span>
        <h2>Uncompromising Utility.</h2>
        <p class="text-muted">Every component is meticulously selected for a lifetime of daily use in harsh urban environments.</p>
      </div>
      
      <div class="grid-3">
        <div class="spec-card">
          <svg class="spec-icon" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round">
            <circle cx="25" cy="70" r="15" />
            <circle cx="75" cy="70" r="15" />
            <path d="M 25 70 L 45 40 L 75 70" />
            <path d="M 45 40 L 65 40 L 50 70" />
            <path d="M 65 40 L 55 25" />
            <path d="M 50 25 L 60 25" />
          </svg>
          <h3>TIG-Welded Chromoly</h3>
          <p>Aircraft-grade steel tubing offers the perfect balance of stiffness for heavy loads, and vertical compliance for cobblestone comfort. Built to absorb the city.</p>
        </div>
        
        <div class="spec-card">
          <svg class="spec-icon" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="3">
            <circle cx="30" cy="50" r="15" />
            <circle cx="75" cy="50" r="25" />
            <path d="M 30 35 L 75 25" stroke-dasharray="4 4" />
            <path d="M 30 65 L 75 75" stroke-dasharray="4 4" />
          </svg>
          <h3>Gates Carbon Drive</h3>
          <p>Rust-free, grease-free, and virtually silent. A carbon fiber belt lasts three times longer than a traditional chain and requires zero maintenance.</p>
        </div>
        
        <div class="spec-card">
          <svg class="spec-icon" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="3">
            <circle cx="50" cy="50" r="30" />
            <circle cx="50" cy="50" r="20" stroke-dasharray="4 4" />
            <circle cx="50" cy="50" r="5" />
            <path d="M 50 20 L 50 10 M 50 80 L 50 90 M 20 50 L 10 50 M 80 50 L 90 50" />
          </svg>
          <h3>Enviolo CVT Hub</h3>
          <p>Infinitely variable planetary gears enclosed within the rear hub. Shift seamlessly at a standstill, even when fully loaded with groceries or children.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Process -->
  <section id="process" class="section bg-dark fade-up">
    <div class="container">
      <div class="section-header text-center">
        <span class="overline text-white opacity-80">The Workshop</span>
        <h2 class="text-white">Built to Order.</h2>
      </div>
      
      <div class="grid-3 process-grid">
        <div class="process-step">
          <span class="process-num">01</span>
          <h3>The Fitting</h3>
          <p>We measure your inseam, arm length, and torso to determine your ideal frame geometry. No two Lumen bikes are exactly alike.</p>
        </div>
        <div class="process-step">
          <span class="process-num">02</span>
          <h3>The Frame</h3>
          <p>Your frame is cut, mitered, and TIG-welded by hand in our Copenhagen studio. It takes roughly 14 hours of skilled labor per frame.</p>
        </div>
        <div class="process-step">
          <span class="process-num">03</span>
          <h3>The Handover</h3>
          <p>Once assembled with your chosen components, we invite you to the workshop for a final test ride and personalized adjustments.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonial -->
  <section id="testimonial" class="section fade-up">
    <div class="container text-center max-w-800">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="var(--accent)" class="quote-icon">
        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
      </svg>
      <blockquote class="quote-text">
        "We sold our car last year. The Lumen carries our two kids, the weekly groceries, and our dreams for a greener city. It is, without a doubt, the best investment we've ever made."
      </blockquote>
      <div class="quote-author">
        <strong>Mette & Jonas</strong>
        <span>Nørrebro, Copenhagen</span>
      </div>
    </div>
  </section>

  <!-- Configure CTA -->
  <section id="configure" class="section bg-accent fade-up">
    <div class="container text-center max-w-800">
      <span class="overline text-white opacity-80">Your Move</span>
      <h2 class="text-white">Ready to build yours?</h2>
      <p class="opacity-80 max-w-600 mx-auto" style="margin-top: 1.5rem;">
        Configure your drivetrain, color, and cargo box options today. Hand-built and delivered directly to your door in 4-6 weeks.
      </p>
      
      <form class="config-form">
        <select class="config-select" aria-label="Select Drivetrain">
          <option>Choose your drivetrain...</option>
          <option value="enviolo">Enviolo CVT (Stepless)</option>
          <option value="alfine">Shimano Alfine 11</option>
          <option value="singlespeed">Singlespeed</option>
        </select>
        <button type="button" class="btn btn-light btn-config">Start Configuration</button>
      </form>
      
      <div class="price-display">
        Estimated Price
        <span class="price-tag" id="dynamic-price">From €4,000</span>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container footer-grid">
      <div class="footer-brand">
        <h2 class="logo text-white">LUMEN</h2>
        <p>Refshalevej 153A<br>1432 København K<br>Denmark</p>
      </div>
      
      <div class="footer-links">
        <h4>Explore</h4>
        <a href="#manifesto">Manifesto</a>
        <a href="#specs">Specifications</a>
        <a href="#process">The Workshop</a>
        <a href="#configure">Configure</a>
      </div>
      
      <div class="footer-links">
        <h4>Legal</h4>
        <a href="#">Terms of Service</a>
        <a href="#">Privacy Policy</a>
        <a href="#">Lifetime Warranty</a>
      </div>
      
      <div class="footer-news">
        <h4>Newsletter</h4>
        <p style="color: #A0A09D; font-size: 0.9rem;">Build slots & workshop updates.</p>
        <form class="news-form">
          <input type="email" placeholder="Email Address" aria-label="Email Address" required>
          <button type="button" aria-label="Subscribe">→</button>
        </form>
      </div>
    </div>
    
    <div class="container footer-bottom">
      <p>&copy; 2023 Lumen Cycles ApS. All rights reserved.</p>
      <p>Handcrafted in Denmark.</p>
    </div>
  </footer>

  <script>
    // Smooth scrolling for navigation anchors
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth'
          });
        }
      });
    });

    // Navbar background blur on scroll
    const nav = document.querySelector('nav');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        nav.classList.add('scrolled');
      } else {
        nav.classList.remove('scrolled');
      }
    });

    // Intersection Observer for scroll animations
    window.addEventListener('DOMContentLoaded', () => {
      const elements = document.querySelectorAll('.fade-up');
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
          }
        });
      }, { 
        threshold: 0.1,
        rootMargin: "0px 0px -50px 0px"
      });
      
      elements.forEach(el => observer.observe(el));
    });

    // Interactive Pricing Configuration
    const select = document.querySelector('.config-select');
    const priceTag = document.getElementById('dynamic-price');
    const btnConfig = document.querySelector('.btn-config');

    if (select) {
      select.addEventListener('change', (e) => {
        const val = e.target.value;
        if (val === 'enviolo') {
          priceTag.innerText = '€4,850';
          btnConfig.innerText = 'Configure Enviolo Build';
        } else if (val === 'alfine') {
          priceTag.innerText = '€4,400';
          btnConfig.innerText = 'Configure Alfine Build';
        } else if (val === 'singlespeed') {
          priceTag.innerText = '€4,000';
          btnConfig.innerText = 'Configure Singlespeed Build';
        } else {
          priceTag.innerText = 'From €4,000';
          btnConfig.innerText = 'Start Configuration';
        }
      });
    }
  </script>
</body>
</html>

Compare with

Hy4 Preview: other attempts