Homepage for the Nerdworks site. The page opens on a hero and resolves on the newsletter. Sixteen sections in total, following the section rhythm defined in the design brief.
Full-width anchor section. Two-column composition. Left column holds the brand headline, a one-sentence sub-copy, and a single primary CTA (primary fill with bright text, per the hero exception in the styleguide). Right column holds a TCG product image bleeding to the right edge, with a gradient overlay fading from anchor at the left edge into the image around 60% across.
Below the CTA in the left column, contained to left-column width, sits a frosted-glass USP panel — semi-transparent anchor fill with backdrop-filter blur 20px, 1px hairline rule per styleguide, product card radius. The panel anchors to the bottom of the left column with generous vertical spacing from the CTA.
USP panel holds 4 cells in a row. Each cell has a primary-coloured icon on the left and a bold label with muted subtext on the right. The four trust signals are authenticity, shipping, security, and community.
Image: a TCG product or gaming setup image bleeding right, with strong composition and collector-appropriate subject matter.
Full-width bright section. Navigation grid of 6 tiles in a 3×2 grid. Each tile is full-tile image fill with game system name overlaid. Each tile links to its game-filtered shop archive.
Tiles in exact order: “Pokémon”, “Magic: The Gathering”, “Lorcana”, “One Piece”, “Star Wars Unlimited”, “Riftbound”.
Image per tile: a card, pack, or set image representing the game system.
Full-width primary section. Large single-product showcase promoting a pre-order or new arrival. Two-column composition with the product image on one side carrying the visual weight, and on the other side a heading, editorial short description (2-3 sentences), price in label font, and a primary CTA.
Image: the featured product’s primary marketing or photography asset.
Full-width anchor section. 4-column product grid of standard product cards. Each card: product image at 4:5 aspect, name, price in label font, secondary CTA (“Add to cart” or “View product”). Section title and “View all new arrivals” link in the section header row.
Image per card: product photography.
Full-width bright section. Centred single-column composition introducing an upcoming release. Sections include the release artwork, short editorial narrative (2-3 sentences) hooking the reader on what the release is and why it matters, key release info (release date, format, edition) laid out in label font, and a primary CTA to the pre-order product page.
Image: the release’s marketing artwork or product shot.
Full-width primary section. Three editorial cards across desktop. Each card holds a large card image at 4:5 aspect, the card name as a heading, set + rarity + condition metadata in label font, price in label font, and 2-3 sentences of editorial commentary on why the card is hot — “why we love this”, collectibility, format relevance, or scarcity angle.
The section introduces the Nerdworks Singles vertical by showcasing the rarest or most expensive cards currently in stock.
Image per card: the trading card itself.
Full-width anchor section. Entry point to the Singles vertical. Centred heading and 2-3 sentence description of the singles offer sits above a grid of 4-6 featured single card tiles. Each tile: card image, card name, set, condition badge, price in label font.
Two CTAs in a row below the grid. Primary CTA text: “Browse all singles”. Secondary CTA text: “Search by card name”.
Image per tile: the trading card itself.
Full-width bright section — compact horizontal band, not a full-height section. Centred row of 4 metrics. Each metric is an icon on the left, a figure in label font, and a short label beneath.
The four metrics: orders shipped, years trading, review score (with source), team descriptor (“a team of specialists” or similar). Figures are filled with real Nerdworks numbers at render time.
Full-width primary section. Two-column composition. One side: large set artwork or product photography at editorial scale. Other side: section title (set name), TCG system eyebrow label above the title, and 3-4 sentences of editorial copy on the set — what’s in it, why it matters, collector appeal.
One CTA with contextual text: “Shop the set” if released, “Pre-order now” if upcoming. The section slot flexes for new releases, active promotions, or editorial features.
Image: set key-art or hero product photography from the TCG publisher.
Full-width anchor section. Centred composition. Heading and 2-3 sentence explanation of the sale-or-return model: customers bring in cards or games, Nerdworks lists and sells on their behalf, customer receives payment on sale minus commission.
Below the intro: a three-step horizontal process row. Each step has a numbered eyebrow (“Step 1”, “Step 2”, “Step 3”), a short title, and a sentence of body copy beneath. Exact titles in order:
Step 1 title exact text: “Bring it in”.
Step 2 title exact text: “We list it at an agreed price”.
Step 3 title exact text: “You get paid on sale”.
Primary CTA below the process row. CTA text: “Start a sale or return”.
Full-width bright section. Heading and 2-3 sentence intro: customers book a private game session on a fully modelled Warhammer table. Customers choose the map and terrain layout; the store configures the table for their session.
Below the intro: a grid of 3-4 terrain layout thumbnails, each with a name label beneath. Each thumbnail is a map render or photograph at 4:5 aspect.
Two CTAs. Primary CTA text: “Book a session”. Secondary CTA text: “Browse maps”.
Image per thumbnail: a terrain map photograph or render.
Full-width primary section. Section header with title and “View all events” link aligned right. Below the header: a grid of 3-4 upcoming event cards. Each card holds a small event-type image, event name, game system eyebrow, date in label font, one-line description, and a “Book” or “Details” secondary CTA.
“View all events” link exact text: “View all events”.
Image per card: event photography or game system artwork.
Full-width anchor section. Single-event spotlight. Image-driven composition with the event image bleeding strong, event name and date overlaid or adjacent at editorial scale. Short editorial paragraph (2-3 sentences) selling the event — what it is, what makes it worth attending. One primary CTA to the event booking page.
Image: a strong photograph of the event or its subject matter.
Full-width bright section. 4-6 images from previous events arranged in a dynamic asymmetric mosaic — varied sizes, overlapping or tiled tightly. UGC-style photography creating the digital-to-physical connection.
Short caption line beneath the gallery tying it to an “attend events” or “follow Nerdworks” prompt. No per-image captions.
Images: photographs from previous in-store events, gaming sessions, tournaments, painting competitions.
Full-width primary section. Section header with title and one-sentence editorial statement about the Nerdworks journal — set breakdowns, buying desk notes, deck tech.
Below the header: 2 or 3 cards with blog post excerpts. Each card: image at 3:2 aspect, post title, post date in label font, 1-2 sentence hook. Each card links to its post.
“View all posts” link below the card grid.
Image per card: post header image.
Full-width anchor section. Centred composition. Heading and one sentence on what subscribers receive — new stock drops, event announcements, market notes. Inline email input and submit button below the sentence. No secondary copy, no imagery.
Submit button text: “Subscribe”.
No carousels or sliders anywhere on the homepage — all content is statically laid out.
Hero holds a single focused composition — one image, one headline, one CTA, one USP panel. No rotating content, no additional teasers or product cards within the hero.
Product imagery is always real photography or trading-card artwork. No gradient placeholders, no illustrative stand-ins.