Summer Drive Event Landing Page

Overview

This single-page site is a retro-inspired event landing page that uses bold, high-contrast typography and motion to create a sense of energy and celebration. It is an excellent clone reference for developers looking to master scroll-triggered layouts (Locomotive Scroll), CSS-based marquee animations, and the integration of video-as-illustration for a polished brand experience.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast "electric blue" (#0066FF) on a warm off-white/cream background. This pairing provides a modern twist on classic poster design. The blue is used consistently for all critical information: headers, dates, CTAs, and the primary focal point (the car animation).
• Typography System: A sophisticated mix of two extremes. Headlines use a heavily extended, ultra-bold sans-serif for impact. Secondary information (subtitles, dates, and buttons) uses a delicate, high-contrast serif font with thin hairlines and vertical emphasis. This juxtaposition creates a clear hierarchy where the event name dominates, and the details provide elegant texture.
• Page Structure & Flow:
  • Hero Section: Split-screen layout featuring a massive split headline ("THE SUMMER / DRIVE") flanking the date and time.
  • Engagement Section: A three-column layout with a looping video car animation in the center, flanked by location details and ticket CTAs.
  • Amenities List: A full-width horizontal list of features (Dinner, Drinks, etc.).
  • Content & Social Proof: A central text block followed by a continuous logo marquee and a structured schedule grid.
• Reusable Components:
  • Outline Buttons: Pills with blue borders and centered text that transition on hover.
  • Logo Marquee: A CSS/JS powered infinite slider for portfolio or partner logos.
  • Scroll-Triggered Sections: The HTML indicates a data-scroll-section attribute, suggesting the use of Locomotive Scroll for smooth, parallax-like movement.
• Interaction Patterns: The core interaction is the smooth vertical scroll, which likely influences the entrance of text and the speed of the car animation. The custom cursor wrapper (cursor-wrapper) indicates a tailored pointer experience typical of high-end boutique sites.
• Implementation Clues: Built using Next.js (evident from id="__next") and Locomotive Scroll for the data-scroll-container and matrix transformation styling. Transitions are handled via CSS transforms (matrix3d).

Use Cases

• Who should clone this: Designers building event-specific landing pages, conference portfolios, or product launch "teasers" that need a high-impact, low-content density layout.
• Remix Directions:
  • Architecture Adaption: Scale the layout for a product launch by replacing the car video with a 3D product render and the "Standard Hall" text with pricing or feature tiers.
  • Visual Swap: Change the electric blue to a neon green or hot pink to shift from a "summer drive" theme to a "tech night" or "cyberpunk" aesthetic while keeping the layout integrity.
• Suggested Clone Scope:
  • Full-page clone: Recommended for those wanting to learn how to sync a custom cursor and smooth scroll container with Next.js.
  • Section clone: The 3-column "Hero Action" area (buttons flanking a center media element) is highly reusable for any landing page CTA section.