Project Documents
Foundational documents the build is anchored on. Design system for visual direction, SEO playbook for content strategy.
Design System
Brand palette, typography, section architecture, CTA system, motion, effects, and accessibility. Source of truth for all visual decisions.
Open document HTMLSEO / GEO Playbook
Title formulas, meta descriptions, Schema.org markup map, heading hierarchy, copy tone, and generative-engine optimisation strategy.
Open documentPage Mockups for Review
Static HTML mockups using the Topserve design system. Product images from supplied assets, lifestyle shots from stock photography.
Homepage
Hero, featured products, category cards, services callout, heritage block, brands row, and contact CTA.
View mockup 02 · ShopShop All
All 16 products with horizontal pill filters for category sorting. Grid layout with staggered card reveal.
View mockup 03 · PDPProduct Page
Toalson HD Aster Poly 1.25mm. Gallery with thumbnail swap, specs, quantity stepper, tabbed content, and related products.
View mockup 04 · CollectionStrings
5 products with brand and gauge sidebar filters. Dark slim hero with collection description.
View mockup 05 · CollectionRackets
3 products with brand and weight filters. Training and competition rackets from Toalson and Macro Spin.
View mockup 06 · CollectionGrips & Overgrips
5 products combining replacement grips and overgrips with brand and type filters.
View mockup 07 · CollectionBall Hoppers
2 Ballmate products. Compact collection with no sidebar needed.
View mockup 08 · ServicesServices
Stringing, customisation, analysis, and demo programme. Pricing block, FAQ accordion, and contact CTA.
View mockup 09 · AboutAbout
Our story, MRT credentials, values grid, and visit-us section with map placeholder.
View mockup 10 · ContactContact
Two-column layout with contact form, shop details, opening hours, and map.
View mockup 11 · AccountAccount
Simple login shell with email, password, sign-in button, and create-account link.
View mockup