Landing Page Redesign

Landing Page Redesign

The landing page has been completely redesigned with an aesthetic that emphasizes verticality, depth, and motion.

Key Features

• Marathon city slider in the hero – Swipe through upcoming races with parallax city imagery, highlighting each marathon’s date, location, and registration status.
• Glassmorphism card effects – Frosted glass panels float above a blurred, atmospheric background, improving readability while preserving the altitude-inspired visuals.
• Animated gradient borders – Featured sections use subtle animated gradient borders to draw attention to registration CTAs, featured races, and highlight content.
• Custom typography pairing – An editorial-style heading font is paired with a clean, legible body typeface to create a premium, magazine-like feel.
• Fully responsive layout – The design adapts seamlessly across mobile, tablet, and desktop breakpoints, with touch-friendly sliders and optimized spacing.
• Framer Motion animations – Entrance animations are powered by Framer Motion and respect the user’s prefers-reduced-motion setting for accessibility.

This redesign focuses on storytelling around each marathon city while keeping performance, accessibility, and responsiveness at the core of the experience.