Seven Lux Auto
The public face of the 7cars client: a dark, editorial one-page showroom that loads fast and puts every contact one tap away.
- Branded intro
- Auto-scrolling collection
- Six concierge services
- AutoDealer JSON-LD
- Client
- Seven Lux Auto, Moscow
- Year
- 2026
- Authorship
- Own build
- Status
- Role
- Design and front end: visual system, build, SEO, analytics and deployment.
- Surfaces
- One-page website · desktop and mobile
- Languages
- RU
- Stack
- HTML · CSS · Vanilla JavaScript · JSON-LD · Vercel · Vercel Web Analytics
Survey — context and problem.
The problem
A luxury dealer needed a public face that feels like a showroom, loads fast on phones and turns interest into contact.
Seven Lux Auto sells luxury and premium cars in Moscow — Rolls-Royce, Ferrari, Maybach, G-Class and others — and offers concierge services around the purchase: sourcing abroad, logistics, registration, trade-in, leasing and service. The same company runs its back office on 7cars.
The dealer needed a public face that matched the cars: something that feels like a showroom rather than a classifieds page, loads fast on a phone and makes the next step — a call, a WhatsApp or Telegram message, a route to the showroom — obvious. It had to be found in both Google and Yandex, and the owners wanted to know which contact channels people actually use, without tracking individuals. Everything had to be in Russian, with the dealer’s contact and legal details always within reach.
None of that needed a heavy stack. The answer was a single page, dark and editorial, with photography doing the selling and every contact one tap away.
Plan — the system, drawn first.
The solution
A single static page with a branded intro, an auto-scrolling collection and concierge services, AutoDealer structured data and privacy-safe lead analytics.
One page, five movements: a branded intro with the chrome 7, a hero over a Rolls-Royce, the “closed collection” carousel that drags and auto-scrolls, six numbered concierge services, and a philosophy block that ends in contacts. Everything is hand-written HTML, CSS and vanilla JavaScript in a single file — no framework — with scroll reveals on IntersectionObserver and the carousel on requestAnimationFrame. For search, the page ships canonical and Open Graph tags, a sitemap and AutoDealer structured data with coordinates and opening hours. For the owners, Vercel Web Analytics records lead events — phone, WhatsApp, Telegram and email clicks, gallery opens, route requests — without identifying anyone.
Module key
- Branded intro animation with the chrome 7 logo
- Hero with stock and viewing-hours highlights
- Draggable, auto-scrolling collection of five cars
- Six numbered concierge services
- Contacts with a route link and messenger channels
- Canonical, Open Graph, sitemap, robots.txt and AutoDealer JSON-LD
- Lead events on Vercel Web Analytics
- Security headers via vercel.json
Key decisions
-
Why one static page
A showroom site is mostly photography and a few decisions. One HTML file of about 37 KB with inline CSS and JS has nothing to hydrate and very little to maintain.
-
Why track leads, not people
The owners need to know which channel brings enquiries. Named events on privacy-friendly analytics answer that without personal data.
-
Why structured data for a dealer
AutoDealer JSON-LD with address, coordinates and opening hours helps search engines treat the showroom as a place, not just a page.
Elevations — the desktop screens.
All elevations 01
-
Fig. 4.1 The “More than a drive” philosophy block with brand copy, a contact button and a framed Rolls-Royce photograph.
Details — the mobile screens.
Materials schedule — the stack, and why.
| Layer | Material | Why |
|---|---|---|
| 01Data | AutoDealer JSON-LD · sitemap · Open Graph | The dealer as a place in search: address, coordinates, hours. |
| 02Logic | Vanilla JS · IntersectionObserver · requestAnimationFrame | Reveals and an auto-scrolling carousel without a framework. |
| 03Intelligence | Lead-event analytics (Vercel) | Which channel brings contact — measured without identifying visitors. |
| 04Interface | Static HTML / CSS · Unbounded + Inter | Editorial display type and photography carry the brand. |
| 05Infra | Vercel · security headers | Edge-cached static hosting with a hardened header set. |
Stack
Completion — outcome and links.
Want to see it running?
I can walk you through the live system on demo data and explain the decisions behind it.
Request a walkthrough
