Tesla Landing Page

The challenge

The original landing relies on section-by-section scrolling and a header that changes colour depending on what's underneath it. Both are usually done with scroll listeners and observers; the point here was to get them with CSS alone.

Implementation

• Section scrolling without JavaScript

  Full-screen movement between sections is handled with mandatory CSS scroll snap — not a single scroll listener or carousel library.

• Header that adapts to its section

  The header text colour changes with whatever section sits behind it, leaning on currentColor to inherit from each block instead of computing it at runtime.

• Zero JavaScript by default

  Astro renders everything to static HTML and only hydrates what genuinely needs it, so the page reaches the browser with essentially no bundle.

• Laid out with Tailwind

  The whole visual system — type, spacing, overlays on the background imagery and responsive behaviour — built with Tailwind utilities.