War Dungeon — Homepage Build Brief — Engraved-Illustration Catalogue

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 — Engraved-Illustration Catalogue

This Build Brief renders ONCE, against the Frontier styleguide (SWD1) only. The visual treatment trials a single deliberate aesthetic methodology: 1880s mail-order catalogue book — ornament comes through line-art illustration, not chrome. The aesthetic question this run answers: “What does the brand look like if illustration carries the ornament load?”

• Imagery — every imagery slot is rendered as line-art / woodcut-style illustration. Hero is a single etched scene (multiple miniatures composed as if hand-drawn at high detail). Product cards show etched line-art product silhouettes (NOT photography). Category cards have illustrated banner ribbons or scroll cartouches as decoration. Photography is reserved exclusively for the Painting Showcase / UGC section — where real customer work earns the only photographic surface on the page.
• Ornament — illustrated dividers: banner ribbons across sections, scroll cartouches around section heads, illustrated horizontal rules with central decoration (compass roses, dice icons, hammer-and-anvil). Section headings sit inside illustrated frames (open scroll, banner, etched plaque). No rivets. No ridge borders. All decoration is rendered illustration via inline SVG or CSS line-art.
• Surface treatment — flat rodeo throughout. No inverted-panel dark mode. Occasional rodeo-tinted “parchment” panels where copy needs separation (lighter cream-tinted variant of rodeo, with a faint illustrated rule frame). The whole page reads as one continuous illustrated catalogue spread.
• Hierarchy — modesto-condensed for section heads inside illustrated frames. Body in palatino-linotype with a slightly-letterpressed feel (tight kerning at large sizes, generous tracking at small sizes). Eyebrow tags as illustrated banner micro-elements.
• Component shape language — illustrated cards (line-art frames in 1.5px caput stroke). CTAs as illustrated ribbon-stamps (e.g. “Build Your Army” rendered as if printed on a brass banner with curled ends). Loyalty roundels are illustrated brass coins. The hero CTA is itself an illustrated cartouche, not a button.
• Constraint to accept — illustrations must be authored as inline SVG or pure CSS line-art (no raster illustration assets exist). The agent will need to construct each illustrated element from primitive SVG paths. Visual fidelity will trade off against ornament density. The mockup must STILL read as a coherent designed page even when individual illustrations are simple.

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.