Nomad – Outdoor Gear Single Product Landing Page

The design takes the visitor on a “trail map” journey. The page is framed as a hike from trailhead (12 m) to summit (1,240 m), with a live altitude and temperature readout that climbs as you scroll, GPS coordinates, waypoint labels and an elevation-profile line. It pairs a sandstone-beige and forest-green palette with burnt-orange accents, condensed Archivo display type with Inter, technical “FIG.” captions, a luggage-tag-style buy box, and four self-hosted background videos (tram, pine forest, city, alps).

Pages: a long one-page product landing (Pack, Field Notes, Ascent, Fit, Guarantee, Reviews, FAQ, Buy) plus Checkout and policy pages (Warranty, Shipping, Returns, Privacy).

Key features:

• Scroll-driven “route” storytelling with a sticky altitude and temperature HUD, waypoint navigation and an elevation profile

• Luggage-tag buy box in the hero: rating, colour swatches, size choice (20 L or 28 L with laptop fit), price and add to cart

• “A place for each thing” packing diagram: a five-step illustrated walkthrough (open flap, laptop sleeve, bottle, hidden passport pocket, clothes) with a capacity gauge

• “Field notes” photo journal of real-world use, with captions and timestamps

• “Same bag, different weather” section with video and changing conditions, plus performance stats (rain test, buckle temperature rating, taped seams)

• Interactive anatomy and fit: numbered photo hotspots for each detail, a size switcher that redraws scale drawings, and a 20 L vs 28 L comparison table

• Feature grid and full spec sheet (materials, hardware, pockets, carry system, origin)

• Guarantee section (lifetime warranty, 100-day trial, free repairs)

• “Trail log” reviews styled as a logbook (date, route, distance, note, owner)

• FAQ accordion, a closing summit call-to-action and a sticky buy bar

• Slide-out cart with a free-shipping progress message

• Four-step checkout: contact, delivery (multi-country), shipping (Standard or Express) and payment, with coupon codes (demo: NOMAD10, FIRSTTRIP). The payment step is a placeholder to connect Stripe Checkout or Shopify Buy Button.

• Newsletter signup and policy pages; fully responsive; built with Next.js and Tailwind CSS