Hobby & Passion Supplies Portfolio Website Template

Quick summary

Componentcraft is a single-page landing page template designed for hobby and tabletop supply retail. It opens with a hero-width bundle deal spread, flows into an animated bento grid of shoppable product cells, and closes the loop with a persistent floating cart and bundle configurator. Every section is built to convert browsers into buyers without losing the playful spirit of indie game design.

Who this template is for

This template is made for anyone selling the raw materials that tabletop games are made from. Whether you run a small-batch supply shop or a growing hobby retail brand, the layout gives your products room to shine and your customers a reason to keep scrolling.

• Indie tabletop designers prototyping their first deck-builder or card game
• Small publishers ordering component runs for convention demos
• Hobbyist crafters building custom inserts or painting miniatures

What problem this template solves

Selling game components online is tricky. Products like blank hex tiles, meeple molds, and linen-finish card stock are tactile and sensory by nature. A flat product list does not communicate that. This template solves the gap between physical delight and digital browsing.

• Buyers struggle to feel the value of physical components from a generic grid layout
• Stores lose shoppers who cannot easily bundle items into a complete prototype kit
• The checkout path feels cold when the product itself is creative and hands-on

What you get with this template

You get a fully structured landing page layout that makes a board game supply store feel as exciting as opening a new game box. Every section is purposefully placed to guide visitors from discovery to purchase.

• A hero bundle deal section with three starter kits, each in its own gradient card with a ribbon price tag and a clear call to action
• An animated bento grid with category-organized cells for Wood, Paper, Plastic, and Finishing materials, plus hidden Easter egg cells
• A floating cart with a free-shipping progress bar, a custom bundle configurator, and coral-pink shoppable buttons throughout

Feature list

This template includes a focused set of built-in layout features drawn directly from the design brief. Each one serves a specific role in moving a visitor through the page.

Hero Bundle Deal Showcase

Three curated starter kits sit in the header like a mid-play board game spread. Each kit, "The Card Crafter," "The World Builder," and "The Full Prototype," has its own gradient card, a ribbon price tag, a one-line hook, and a prominent "Grab This Kit" button with the price shown upfront.

Animated Bento Grid

The main product grid uses micro-interactions tied to scroll entry. A meeple cell wobbles into view, a card stock swatch flips like a playing card, and a dice cell tumbles and lands on a random face. The grid reorganizes by material category so shoppers can browse with intent.

Easter Egg Discovery Cells

Hidden cells appear unpredictably inside the bento grid. These include a free downloadable playtesting scoresheet, a spinning wheel for a random discount, and a short embedded video of a satisfying punchboard pop. They turn browsing into a light game of discovery.

Floating Cart with Progress Bar

A persistent floating cart sits in the corner and updates in real time with a soft bounce animation on every addition. A playful progress bar near the cart displays the free shipping threshold with game-themed copy, turning the spending goal into a small challenge worth completing.

Custom Bundle Configurator

A secondary conversion path lets shoppers design their own kit. The step-by-step configurator asks for component type, quantity, and finish level. It opens from a "Design Your Own Bundle" prompt and gives buyers who want more control a clear path to a tailored order.

Shoppable Grid Cells

Every bento cell carries an "Add to Kit" button in coral-pink. The consistent button placement across the grid means shoppers never have to hunt for a way to act. The cart icon and sale badges also use the same coral-pink accent for instant visual recognition.

Page sections overview

Design & branding system

The visual identity uses a Soft Gradient theme built on the Lavender Dream color palette. The look feels like watercolor paint bleeding gently across thick paper. Gradients drift from misty lilac to cream parchment inside each bento cell, giving the grid a soft, dimensional quality.

• Misty lilac (#C3AED6) for card backgrounds, deep plum (#4A2040) for headlines and navigation, and cream parchment (#FAF5EF) for the main canvas
• Coral-pink (#F2A7B0) used consistently on hover states, cart icons, sale badges, and all primary action buttons
• Typography mimics the sharp legibility of rules text printed on a matte finish, keeping plum headings clear against light gradient backgrounds

Mobile & speed optimization

The bento grid layout is designed with responsive stacking in mind. Cells that animate on scroll are built to reflow gracefully into single-column or two-column arrangements on smaller screens.

• Gradient cards and bundle showcases resize cleanly so price tags and call-to-action buttons stay visible on mobile
• The floating cart and free-shipping progress bar are positioned to remain accessible without blocking product content on narrow screens

How this template helps you convert

Every layout decision in this template points toward a purchase. The page layers multiple conversion paths so different types of shoppers all find a way to act.

1. The hero section removes price uncertainty by showing kit costs upfront, reducing hesitation before a visitor even scrolls
2. The animated bento grid keeps visitors engaged longer through discovery, which increases the chance they add items to their cart
3. The dual conversion path, pre-built bundles alongside the custom configurator, captures both quick buyers and deliberate planners in the same session

Other information about this template

This template is part of the Componentcraft design system, built specifically for the board game design supply store niche within the broader hobby and passion supplies retail category. It is a single landing page layout, not a multi-page site.

• The template style is a bento grid, a modern layout pattern that groups content into visually distinct cells of varying sizes
• It falls under the Retail and E-Commerce category, with a Marketplace and Multi conversion goal that supports both direct bundle sales and custom order paths
• The Soft Gradient theme and Surprise and Delight creative direction are intentional design choices that match the emotional experience of the hobby itself
• The overhead flat-lay photography direction suggested in the brief, shot on a linen tablecloth with dice and pencil shavings, fits naturally with the cream parchment background and warm gradient palette
• This template is well suited to indie game designers preparing a product for crowdfunding, small publishers running limited print runs, and craft hobbyists looking to stock up on finishing materials

Show more