AntikorPro — landing page for an automotive rust-proofing service

The brief

Design and build a high-conversion landing page for an automotive anti-corrosion service. Key requirements: communicate the value (stop rust) within 5 seconds, lead with concrete numbers (protection lifespan, warranty, vehicles treated), present 4 packages with transparent pricing and a quick inspection-booking CTA.

Stylistically — premium industrial aesthetic of “serious mechanical work”: dark graphite, acid-orange accent like molten metal, brutal condensed typography. No stock photos with smiling people and no pastel “leave a request” buttons.

The build

A fully static one-page landing in plain HTML + Tailwind CSS (via CDN, no local build pipeline), with minimal vanilla JS for accordions and the calculator. Zero React, zero bundler. Bots see complete content from the first byte.

9 meaningful blocks on one page

• Hero with a background photo of a vehicle on a lift, accent chip “Full body protection”, headline “Stop rust before it stops your car. Add 10+ years to your body’s life” and two CTAs — primary “Book an inspection” and secondary “Get a quote”
• Problem: three “Before/After” cards (underbody, sills, wheel arches) with “Unprotected / AntikorPro” labels and real photos
• Services: 4 packages (Underbody, Hidden cavities, Full complex, Anti-corrosion + sound deadening) priced from 8,900 ₽ to 24,900 ₽ with scope of work and turnaround
• Process in 5 steps: horizontal timeline from underbody wash to QC, each step with a photo
• Materials: four certified compounds (Dinitrol, Tectyl, Mercasol, Noxudol) with application zones and protection lifespan
• Why us: 4 tiles with metrics (heated indoor bay, 10 years of expertise, 3-year written warranty, 2,400+ treated vehicles)
• Cases: three cards with real models (Porsche 911 1988, Toyota Land Cruiser 2015, BMW M3 2004), duration and pricing
• Calculator: vehicle type × age × protection tier = instant cost
• Reviews: 3 cards with a 4.9/5 rating from 312 reviews and “Verified service” badges
• FAQ: 8 key questions (warranty, winter, EV-safe, existing rust, timing)
• Contact form + map: 4 fields, operating hours, messengers

Design system: industrial premium

A custom palette in the spirit of Material Design 3 — but with a radically muted neutral scale and a single bright accent. Base background #0c0e10 (almost-black graphite), surfaces from #121415 to #37393b for bento cards, acid-orange #FF5A1F exclusively for CTAs and active states. Outlines in cool gray #919095.

Typography: Oswald condensed at weights 500–700 for headlines (importantly — full Cyrillic support, unlike the popular Bebas Neue), Inter for body text, JetBrains Mono for labels and numerics. All three families loaded via Google Fonts with display=swap.

Conversion-focused copy

Headlines built on the “benefit + specifics” formula:

• “Stop rust before it stops your car. Add 10+ years to your body’s life.”
• “Every second car older than 5 years already has active corrosion.”
• “3-year written warranty. Transferable to the new owner when you sell the car.”

CTAs in imperative mood (“Book an inspection”, “Get a quote”, “Order”), prices everywhere with “from” and in rubles with thin separators. The “Full complex” package gets a “Bestseller” badge — not “recommended”, calibrated to local audience expectations.

All images local

External CDNs like Google User Content frequently get blocked in certain regions. So all 27 source images are downloaded into the site’s img/ folder and references rewritten. In the case-studies section, the original AI-generated images are swapped for real-model photos from Wikimedia Commons (Porsche 911 G-series Carrera, Toyota Land Cruiser J200, BMW E46) — each gets a CSS brightness/contrast/saturate filter to align tonally with the dark palette.

Calculator and form

Cost calculator — three inputs (vehicle type as radio cards, age as a select, package as radio cards) plus a large total with “Book at this price” CTA. Booking form — 4 fields (name, phone, date, vehicle) with a phone mask.

Minimal interactivity, no bundle

JS is literally a few inline blocks: mobile menu toggle, FAQ accordion open/close, calculator state switching, form submission. No bundler — Tailwind via CDN, fonts from Google Fonts.

Outcome

The landing runs on a dedicated subdomain with Let’s Encrypt SSL. TTFB under 100 ms — Nginx serves the 86 KB HTML directly. All 27 images with aggressive cache headers. Full content indexability by Google bots from the first byte, no JavaScript execution required.

This is a demonstration of what a service-business landing should look like in 2026: not another WordPress with ten plugins, but lightweight static delivery with an honest “proof → packages → process → trust → form” structure that just works.

Tech stack

• Framework: static HTML, no build step
• Styles: Tailwind CSS via CDN with custom config (colors, fonts, spacing, font sizes — all in one place)
• Fonts: Oswald (headlines), Inter (body), JetBrains Mono (labels) — Google Fonts
• Icons: Material Symbols Outlined via web font (also Google Fonts)
• JS: vanilla, inline scripts only
• Images: local JPG files in img/, 27 files totalling ~11 MB
• Deploy: rsync over SSH to a VPS, Nginx + Let’s Encrypt