War Dungeon — Homepage Build Brief — Product-Page-Grounded

Page intent

The War Dungeon homepage is the brand statement. A first-time visitor leaves it knowing three things: that this is a Warhammer + Dungeons & Dragons specialty retailer; that it commits fully to a distinctive Steampunk + Old-West aesthetic that no other UK Warhammer specialist attempts; and that there are tools and content here (Army Builder, How-To Guides, Tutorials, Creator content, Painting Showcase) that they will not find at Element Games, Wayland, or Goblin Gaming. The primary visitor action is buy a product — but the homepage achieves that conversion path by establishing trust, surfacing curated discovery routes, and demonstrating depth of value.

Mandatory sections (top to bottom)

Every homepage concept MUST include all of these sections in this order. The visual treatment varies per styleguide evolution (Frontier / Gaslamp / Apothecary) but the content requirements are non-negotiable.

1. Pre-header announcement bar — rotating messages: free UK shipping threshold (“Free UK shipping over £75”), current campaign (“New 40K Combat Patrols in stock”), cross-brand loyalty reminder (“Earn loyalty points at War Dungeon — redeem at Nerdworks, ArtSabers, Paragon”). Sienna or liquourice background per styleguide; modesto-condensed in caps with widest tracking; rotates every 6-8 seconds.
2. Global header — Nerdworks pattern (inherited from camcom-v2): logo (left), primary nav (5 top-level items, NOT 7 — earlier 7-item nav caused overflow): Warhammer (mega-menu containing 40K, Age of Sigmar, The Old World, Hobby Supplies, Paints), Dungeons & Dragons, Tools, Learn (mega-menu containing How-To Guides, Tutorials), Creators, search, account, wishlist, mini-basket with loyalty points badge.
3. Hero — single bold cinematic composition. NOT a rotating carousel. Painted miniature diorama lit dramatically (warm side-lighting, smoke/fog atmosphere). Headline in modesto-condensed display (“Battle on Your Tabletop. Crafted on Ours.” or similar — copy TBC by Lily). One-line subhead in palatino-linotype body. Single primary CTA (“Build Your Army” leading to Army Builder, or “Shop New Releases” leading to shop archive — operator’s call on which dominates). Etched plate border frame around the composition.
4. Trust strip — 4 cells: free UK shipping over threshold; 30-day returns; multi-game expertise (“40K · AoS · The Old World · D&D”); “A Nerdworks Brand” credibility marker. Engraved gear divider between cells. Rivet borders on each cell. Icons in engraved line-art steampunk register.
5. Tools teaser — Army Builder (launch) and Battle Simulator (Phase 2, surface anyway with “Coming soon” treatment). Two cards side-by-side, each with diorama photo, 1-line description, CTA into the respective landing page. Brass plate frame on the cards; steampunk-mechanical visual treatment with gears as decoration.
6. Choose Your Game — 6 visual category cards in a 3+3 grid: Warhammer 40,000, Age of Sigmar, The Old World, Dungeons & Dragons, Hobby Supplies, Paints. Each is a clickable curated category mini-homepage entry (NOT a grid). Lit-diorama imagery dominant; category name in modesto-condensed; 1-line positioning; CTA. Cards have rivet borders and etched-frame ornament.
7. Fan Favourites — 4 featured products in a row: cover image (on-white catalogue shot), title, star rating, price, “Quick view” CTA. Mixed across games (one 40K, one AoS, one D&D, one hobby/paint). Loyalty points badge on each card — small brass roundel showing earnable points.
8. How-To Guides + Tutorials editorial strip — 3 large content cards: cover image (lit diorama or in-progress mini photo), difficulty badge (Beginner / Intermediate / Advanced), read or watch time, CTA (“Read Guide” or “Watch Tutorial”). Cross formats: one painting how-to, one rules tutorial, one terrain-building piece.
9. Creator Partner spotlight — featured creator card: avatar, name, game tags (40K / AoS / D&D), 2-sentence positioning, “Visit Creator” CTA. Below: scrollable strip of 4–6 additional creator thumbnails. Sourced from AffiliateWP-powered creator profiles.
10. Painting Showcase / UGC — 6-tile masonry gallery of customer painted miniatures. Each tile clickable to a single showcase post. Submit-your-painting CTA at the end of the gallery.
11. Loyalty programme cross-brand strip — full-width band: “Earn here. Redeem anywhere.” Logos of sister brands (Nerdworks, ArtSabers, Paragon, War Dungeon). CTA: “Sign in to see your balance” (logged-in users) or “Learn how loyalty points work” (visitors).
12. Newsletter signup — themed name TBC by Lily (“Join the Garrison” working hypothesis). Email input + subscribe CTA. Incentive: 10% off first order OR equivalent in loyalty points. Steampunk-typewriter visual treatment on the form.
13. Global footer — 4-column shape per Design Brief: Shop (top-level categories) / Discover (Tools, Learn, Creators, Community) / Help (Contact, Shipping, Returns, FAQ, Track Order) / Brand & Loyalty (About, Sister Brands cross-redemption block, Loyalty programme, Affiliate). Newsletter strip + baseline utility strip (payment icons, social icons, copyright, policies, “A Nerdworks Brand” badge).

Excluded from homepage (belongs elsewhere)

• Endless product grid — category mini-homepages and leaf categories own that surface.
• Battle reports / blog posts in full — Learn hub owns this.
• Affiliate enrollment / creator application form — Creators landing owns this.
• Detailed loyalty points rules table — Loyalty programme page owns this.
• Game-system rules explanation — How-To Guides own this.

Conversion principles

• Hero leads with intent, not promotion. The hero composition tells the visitor what kind of place they’re in, not what’s on sale today. Promotional messaging lives in the announcement bar.
• Tools + content are conversion accelerators, not distractions. Army Builder enters the buying funnel (configure → cart). How-To and Creator content seed return visits, which are the highest-converting traffic.
• Loyalty point earning is visible. Every product card shows earnable points (small brass roundel). Reinforces value at decision moment.
• Trust strip is above-fold-adjacent. First-time visitors need shipping + returns + multi-game expertise as quickly as they can scroll.
• Curated categories carry the brand voice. The “Choose Your Game” cards are mini-positioning statements, not generic taxonomy links.

Voice notes

Headline + microcopy voice is Old-West saloon-shopkeeper register per the Design Brief — earthy, knowledgeable, atmospheric. Not jokey; not corporate. Treats the visitor as a fellow hobbyist who knows the games. Specific copy is TBC by Lily; the mockup should use placeholder copy that READS in this register so the operator can evaluate fit. Example fits: “Forge your army.” “From the workbench.” “Ten thousand years of war, and yours to command.” Example anti-fits: “Shop now!”, “Best prices guaranteed!”, “Click here for amazing deals!”

Render direction — Product-Page-Grounded

This Build Brief renders ONCE, against the Frontier styleguide (SWD1) only. The visual treatment trials a single deliberate aesthetic methodology: the lived vocabulary of the existing War Dungeon v1 product page — applied to the homepage. The product page methodology has been built and validated; this run asks: “What does the brand homepage look like if it’s constructed from the same visual moves that already worked on a real working template?”

Methodology derived from the v1 product page

• Inverted panels — the page surface is flat rodeo (tan). Every content panel reverses to dark cowboy (#2B1B1C) with rodeo–light (#D8C3B1) text. Hero, header, trust strip, tools teaser, category cards, footer all sit on inverted dark plates.
• Set-in panel geometry — every dark panel has sharp top corners and 7px rounded bottom corners (border-radius: 0 0 7px 7px). This produces a “set into the page from above” effect — the lived header’s signature move. Apply consistently to all dark panels.
• Bronze gear-pattern SVG background fill — every dark panel carries the gear-pattern SVG at bronze stroke, 10% opacity, as an integral background. NOT decorative — it’s the surface texture of the panel.
• Imagery treatment — large photographic. Hero is two-column (image left, content right) with a hard linear-gradient overlay fading image into the dark panel (linear-gradient(90deg, cowboy 5%, transparent 55%)). Other photographic surfaces sit on dark panels with the same gradient fade.
• CSS border-style: ridge for depth — buttons are sienna with 2px ridge bronze borders. Cards are dark cowboy with 4px ridge bronze borders. No drop shadows anywhere — every dimensional cue is from ridge. This is the signature CSS move from the lived theme.
• Promo blocks as compact badges — small dark inverted blocks containing a bronze gear icon (“wd-big-gear”) plus a short condensed-caps caption. Used for trust-strip cells, tool teaser sub-points, loyalty-strip beats. Each is a stamped marker, NOT a wall of text.
• Hierarchy — modesto-condensed for titles at 36–72px on dark panels. Palatino-linotype body at 20px (NOT 18px — lived theme uses 20px). Eyebrow tags as small condensed-caps in bronze.
• Sienna CTAs only — primary CTAs use sienna (#832D15) with 2px ridge bronze border. Hover shifts to liquourice. NO brass, NO copper, NO alternative accent metals — Frontier discipline.
• Ornament restraint — NO rivets at panel corners. NO etched plate frames around imagery. NO engraved gear dividers between sections. Depth comes from inverted panels + ridge borders + gear-pattern fills. Section breathing room is from generous vertical gutters (60–120px), NOT from ornamental dividers.

Technical constraints

• Page max-width 1440px (global setting).
• Base font size 18px (larger than CamCom default).
• No mobile simplification — rivets, gear dividers, etched ornament stay below 480px.
• Performance stack carries the imagery payload: Object Cache Pro, WP Rocket, ShortPixel (WebP + compression).
• Hero diorama photo is the single largest image — use the largest responsive size + lazy-load below-the-fold imagery.
• No rotating carousels anywhere (hero is single composition; product strip is static grid; creator strip is horizontal scroll, not auto-rotate).
• AJAX add-to-cart from any product card via quick-view modal.