Pre-Order Campaign

Pre-Order Campaign is a landing page for a product that does not exist yet — a single production run, a deposit instead of a purchase, and a date after which nothing more can be reserved. It is built around the one objection every pre-order meets: why pay now and wait.
Sections, in order

Sticky navbar with anchors and a deposit button that states the amount.
Hero — a run-closing badge, the scarcity stated as a fact rather than a threat, a live countdown, a reservation form with a colour picker, and a stock bar showing places taken out of the total.
Figures strip — reservations so far, the saving against retail, months of prototyping, tester rating.
Why pre-order — six cards that answer the objection directly: the price never returns, your variant is genuinely held, the deposit is refundable, you see the factory, repairs are free for five years, the size is checked against real limits.
Specification — a measured spec table beside a detail photograph and an itemised list of what arrives in the box.
Production timeline — six steps with two already marked complete, so the page shows progress rather than promises, including what happens if a date slips.
Reservation tiers — three cards including a sold-out tier left visible, which is what makes the remaining count believable.
Test-season gallery — a six-image mosaic from the field testers.
Reviews — three testers, one of them four stars, printed with the criticism intact.
FAQ — six questions on charging, delays, colour changes, refunds, second runs and shipping.
Closing reservation form — deposit form with tier and colour selectors, plus a WhatsApp button for questions.

Design and style. Deep green and burnt amber on a cream ground, Fraunces display type over Inter, generous white space and soft card shadows — an unhurried, made-to-order feel rather than a countdown-clock panic. Countdown, FAQ accordion, scroll reveal and mobile menu are vanilla JavaScript with no libraries.
Before you publish. Set the deadline in the countdown script and keep it identical to the date printed in the hero badge, the timeline and the refund terms — a countdown that disagrees with the copy is the fastest way to lose a deposit. Update the stock bar width and the "of" numbers together, and replace the WhatsApp number. The forms use named inputs with no action attribute, so PageHub attaches the submit handler on publish and every reservation arrives in Form Submissions.
Best suited to limited production runs, crowdfunded hardware, made-to-order furniture and apparel, first print runs, a new coffee harvest, or any launch where you take a deposit before the stock physically exists.