FESLA
A premium landing page for a fictional electric-vehicle brand - a cinematic night-drive hero, a two-model lineup, and a scroll-revealed story through technology, charging and ownership.
- Role
- Design + build
- Services
- UI/UX design · Frontend engineering · Motion design
- Year
- 2026
- Status
- Concept build
Overview
The brief
Premium EV pages lean on the same glossy tropes. The goal was a pixel-faithful build of a high-end design reference that still felt fast and hand-made, on plain CSS with no framework crutches.
An original concept project. Brand and content created for the build.
Approach
How I built it
Rebuilt a supplied design reference 1:1 in Next.js with one component per section and plain CSS plus inline styles - no Tailwind and no animation library.
Anchored the hero on a night-drive scene with floating holographic UI cards, then told the story across eleven sections: lineup, energy core, charging, performance, cockpit, app, sustainability and ownership.
Wrote a two-model lineup (Lumina sedan, Terra SUV) with spec stats as data, and a single IntersectionObserver reveal for staggered entrances.
Loaded Sora and Manrope through next/font and built a pure-CSS mobile menu at the 820px breakpoint.
Key features
What makes it work
- Pixel-faithful build of a premium design reference
- One component per section, plain CSS + inline styles
- Two-model lineup with spec stats as data
- IntersectionObserver stagger; pure-CSS 820px mobile menu
Gallery
A closer look
Build
Under the hood
- Build and type-check clean; console clean (recorded)
- Verified at 1440 / 390; no horizontal overflow
Reflection
Looking back
Proof that a framework-free page can still feel premium and move well. The brand is fictional, but the layout reproduces a third-party design reference and uses rendered vehicle imagery - both should be cleared before any public or commercial use.