Dymo Base — Sci-Fi HUD Agency

Build a stunning, production-ready landing page for "Dymo Base", a creative agency.

ART DIRECTION — Sci-Fi HUD: holographic HUD frames, animated data readouts, targeting brackets, and cyan-on-dark interface chrome. Color system: background #F8FAFC, primary accent #0F766E, secondary accent #F59E0B. Typography: Unbounded for headlines, Karla for body. Keep contrast WCAG AA and use an 8px spacing scale.

HERO: a hero with a rotating word in the headline cycling through three value props. Headline should communicate the core promise of a creative agency in under 8 words, with a supporting subline and a primary CTA labeled "Explore now" plus a quiet secondary link.

PAGE STRUCTURE: After the hero, include: benefits grid of six cards, an interactive product tour section, customer story spotlight, comparison table, and newsletter capture. Every section needs real, benefit-led copy written for agency customers — no lorem ipsum.

MOTION: A progress-linked scroll animation drives the hero visual through three states as the user moves down the page. Respect prefers-reduced-motion.

DETAILS: Sticky translucent navbar that gains a blur + border after 40px of scroll. Custom hover states on all interactive elements. A footer with sitemap columns, social icons, and a subtle brand watermark. Fully responsive from 360px to 1440px+, with the hero recomposing gracefully on mobile.

TECH: Single-page React component styled with Tailwind CSS. Use semantic HTML, lazy-load imagery, and keep Lighthouse performance above 90. No placeholder text anywhere — everything should read like a real Agency brand shipped it.

Paste into Lovable, Bolt, Cursor, v0 or Claude. Licensed for personal & client work. — Dymo Base — Sci-Fi HUD Agency