Defender 110 sales landing page shown in a browser window

Defender 110 – A Landing Page Built to Sell One Truck

A hand-coded sales landing page for a restored 2005 Land Rover Defender 110. Three languages, real photos, privacy-first tracking, built and shipped in three days.

CASE STUDY

Defender 110 – A Landing Page Built to Sell One Truck

A sales landing page for a restored 2005 Land Rover Defender 110 Crew Cab pick-up. Hand-coded, in three languages, built with real photos and the owner’s own story, and shipped in three days.

View the live site
Start a conversation

PROJECT AT A GLANCE

  • TypeSales landing page
  • BuiltOctober 20-22, 2026
  • StackHTML, CSS, vanilla JavaScript, PHP
  • LanguagesEnglish, Bulgarian, German
  • StatusLive

THE BRIEF

One page that answers a serious buyer’s questions before the first call.

Selling a restored Defender privately means competing with dealer listings: a showroom, a warranty, a brand name behind every car. A private seller has none of that.

What a private seller does have is the full story of the build and hundreds of real photos. The job was to turn that into one page that answers a serious buyer’s questions before the first call.

THE PROCESS

Five steps, three days

01

STEP 01 OF 05

Design

Started in Google Stitch. The style and fonts didn’t fit, so the design moved to Claude Design: three directions, one picked, then refined.

REFINEMENTS

  • No brown
  • Charcoal background
  • Sand accent
  • Bigger navigation
  • 8px corners
  • Archivo + DM Sans, self-hosted

WHY

A restored Defender has its own character. The page had to look like the truck, not like a template.

First draft of the Defender landing page made in Google Stitch
Starting point: the Google Stitch draft.
The picked design direction shown next to the refined final design
The picked direction next to the refined final design.

02

STEP 02 OF 05

Content

The filterable photo gallery on the Defender landing page
The 41-photo gallery, with filters.

Hundreds of photos. Only real ones kept: no stock, no AI images. 41 became a filterable gallery.

THE STORY, IN 8 CHAPTERS

Taken from the build-film voiceover.

  1. Found
  2. Stripped
  3. Rebuilt
  4. Assembled
  5. Tested
  6. Stalled
  7. Equipped
  8. Finished

An owner’s statement instead of a fake inspection report.

WHY

Buyers of a restored car are buying the work behind it.

The Stripped chapter of the build story on the Defender landing page
Story chapter: Stripped.

03

STEP 03 OF 05

Build

Hand-coded HTML, CSS and vanilla JS. No framework, no page builder.

Claude Opus for direction and review, Sonnet subagents for coding.

WHY STATIC

Loads fast, light, no plugins or updates to patch.

WHAT’S ON THE PAGE

  • Ken Burns hero
  • 8-chapter build story with film
  • Before-after slider
  • Build accordion: 52 upgrades in 5 systems
  • “Hear it idle” engine sound player
  • 41-photo gallery with filters and lightbox
  • “This is for you if” section, buying-made-easy band, owner’s statement, 9-question FAQ
  • Contact: WhatsApp, Viber, Call, form, live video walkaround
  • 3-page spec sheet PDF in 3 languages
Build accordion listing 52 upgrades grouped into 5 systems
Build accordion: 52 upgrades in 5 systems.
The Defender landing page hero on a phone
The hero on a phone.

THREE LANGUAGES

  • Auto-detects browser language
  • ?lang= campaign links
  • Price per locale
  • EN€60,000
  • BG60 000 €
  • DE60.000 €
The same price shown in English, Bulgarian and German number formats
One price, shown the way each locale writes it.
The Hear it idle engine sound player on the Defender landing page
“Hear it idle”: the engine sound player.

04

STEP 04 OF 05

Wiring

Tracking

GTM loads only after cookie consent (Consent Mode v2), GA4 + LinkedIn Insight Tag. Nothing loads before Accept.

Contact form

PHP mailer to two inboxes, honeypot, rate limiting, WhatsApp fallback.

Canonical, Car/Offer JSON-LD, sitemap, IndexNow, share image.

Privacy and sale-notes popups, holding-deposit rules.

05

STEP 05 OF 05

Launch and QA

10 versions in about 3 days. An early release showed raw translation keys because browsers cached old files.

THE FIX

  • Versioned file names
  • Server cache rules
  • A translation fallback
  • Checking every release in a real browser

SPEC CHECK

Spec details cross-checked against the build film:

  • Springs
  • Tire type
  • Limited-slip diffs vs lockers

Check every release in a real browser, not just in the code.

What this means for you

Take away the truck and this is a process for any page that sells one thing: a product, a service, a property, an event.

  • Real material
  • A clear story
  • Every question answered on the page
  • Every contact channel one tap away
  • Tracking you can trust

Tools used

DESIGN

Google Stitch, Claude Design

BUILD

HTML, CSS, JS, PHP, Claude Opus and Sonnet

FONTS

Archivo, DM Sans

DEPLOY

Hostinger, Hostinger MCP, .htaccess

TRACKING

GTM, GA4, LinkedIn Insight, Consent Mode v2

SEO

JSON-LD, sitemap, IndexNow

STATUS

The page is live and the truck is still for sale. Results will be added once there are real numbers.

Have one offer that deserves its own page?

Tell us what you’re selling. We’ll tell you honestly what the page needs.

Start a conversation

Related Posts

Expert insights, delivered!

Stay informed with the latest updates and exclusive resources for high-growth teams.