Confidential — Internal Use Only
Business Requirements & Functional Specification
Version
1.0
Status
MVP Complete
Prepared
March 2026
Pages Built
42
Planetworld is South Africa's leading distributor of premium audio-visual, smart home automation, and commercial AV technology. The business represents globally recognised brands — Control4, McIntosh, Klipsch, Lutron, Trinnov, Crestron and others — to a network of certified installers and integrators serving the residential and commercial markets.
The current digital presence does not reflect the calibre of the business or the brands it represents. It presents Planetworld as a product catalogue rather than what it is: a design-led technology partner with deep technical expertise, a world-class brand portfolio, and a physical experience centre where clients can encounter these technologies in situ.
This MVP website addresses that gap. It establishes Planetworld's digital identity as a premium, architecture-grade technology brand — building the credibility required to attract high-value residential clients, architects, developers, and interior designers, while simultaneously serving the commercial integrator and dealer network.
These define what the website must achieve commercially. They are technology-agnostic and set the acceptance criteria for the MVP.
Build the Planetworld brand as a premium, design-led technology partner — not a catalog distributor.
The existing site presents Planetworld as a product listing business. The rebrand must communicate curation, expertise, and design leadership to attract high-value clients, architects, and developers.
Drive qualified demo bookings to the Johannesburg and Cape Town Experience Centres.
The Experience Centre is the single highest-converting touchpoint. The website must funnel discovery traffic into demo requests through consistent, prominent CTAs.
Generate qualified leads for new dealer partnerships and pre-sales enquiries.
Dealer network growth is a core commercial objective. The website must serve both end-consumers and trade visitors (integrators, architects, developers) with distinct but integrated conversion paths.
Surface all distributed brand partners with appropriate credibility and visibility.
Supplier agreements require brand presence. The architecture must give each brand a quality page while maintaining editorial hierarchy — brands follow applications, not vice versa.
Rank for high-intent search terms in South Africa's luxury residential and commercial AV category.
Organic search is the primary growth channel. The site must be built to SEO and AI-search standards from day one, not retrofitted later.
Enable the marketing team to update content (copy, projects, brands) without engineering involvement.
Post-MVP, content velocity is a competitive advantage. The architecture must support a headless CMS connection for zero-code content updates.
Help end-users discover the right dealer or integrator for their project.
Users who arrive on site but cannot find a local installer will not convert. A dealer locator with regional filtering is a core conversion requirement.
Present Planetworld as an authority — not just a retailer — in AV, smart home, and luxury technology.
Editorial content (projects, insights, application guides) differentiates Planetworld from distributors and builds long-term SEO equity.
These define how the business requirements are delivered. All items marked below are implemented in the current MVP build.
Applications-led information architecture: primary navigation built around real-world outcomes (Home Cinema, Smart Home, etc.), not brand or product categories.
✓Applications mega menu on desktop with three groups: Residential, Commercial, Specialty. Mobile-equivalent accordion in the navigation drawer.
✓Brands mega menu on desktop with three groups: Control & Automation, Audio & Acoustics, Video & Display. Each entry links to a dedicated brand detail page.
✓Consistent global CTAs across all pages: "Book a Demo" (primary, gold) and "Find a Dealer" (secondary, outlined). No page should be a dead end.
✓Homepage: Hero → Positioning strip → Featured Applications (6) → Featured Brands (logo grid) → Featured Projects (3) → Why Planetworld (4 proof points) → CTA strip.
✓Applications Index: cards grouped by Residential, Commercial, and Specialty categories.
✓Application Detail template (reused for all 8 applications): Hero → What It Is → System Breakdown → Related Brands → Related Projects → Who It's For → CTA.
✓Brands Index: featured brands hero section + filterable, searchable, alphabetically grouped full brand listing.
✓Brand Detail template: Hero → Brand intro → Relevant Applications → CTA.
✓Projects Index: filterable by application. Projects shown as cards with hero images.
✓Project Detail: full-bleed hero + 2-column layout (content left, sidebar right with project facts and brand tiles).
✓Experience Centre: spaces showcase, what to expect section, and a booking enquiry form.
✓Partners: overview hub → Find a Dealer (dealers grouped by region) → Become a Dealer (benefits, eligibility, application form).
✓Contact: enquiry form with type selector + sidebar contact details and office hours.
✓MVP data layer: typed JSON files for Applications (8), Brands (12), Projects (8), and Dealers (10). All structured to match a future headless CMS schema (Sanity/Contentful).
✓TypeScript interfaces for all content types (Application, Brand, Project, Dealer, SystemBlock, SEOMeta) providing type safety and CMS-readiness.
✓Server-side data functions (getData.ts) providing a clean abstraction layer between pages and data sources — single point of change when CMS is connected.
✓Static site generation for all content pages using generateStaticParams — all 42 routes pre-rendered at build time for maximum performance and crawlability.
✓Unique generateMetadata() per page — title, description, Open Graph, and canonical URL for every indexable route.
✓JSON-LD structured data: Organization schema (root layout), BreadcrumbList (all detail pages), and WebPage schema on key pages.
✓XML sitemap (sitemap.ts) dynamically generated from all content slugs. Robots.txt blocking /api/ and pointing to sitemap.
✓Semantic HTML: one H1 per page, logical H2/H3 hierarchy, aria-labels on all interactive elements, aria-current on active breadcrumb items.
✓Tailwind v4 CSS-based design tokens via @theme in globals.css: pw-black, pw-dark, pw-charcoal, pw-subtle, pw-border, pw-gold, pw-gold-light, pw-gold-dark, pw-white, pw-muted, pw-dim.
✓Two typefaces: Inter (body) via next/font, Playfair Display (display headings) via next/font. Font variables injected globally.
✓Reusable UI component library: Button, Badge, SectionHeader, CTAStrip, BreadcrumbNav, ApplicationCard, BrandCard, BrandLogoTile, ProjectCard.
✓Sticky header: transparent at top → bg-pw-black/95 backdrop-blur after 20px scroll. Responds to route changes (closes menus on navigation).
✓Next.js App Router with React Server Components for all pages. Client components only where interactivity is required (Header, brand/project filter components).
✓All images use next/image (or static SVG for brand wordmarks). Brand SVG wordmarks served from /public — swappable with real brand assets without code changes.
✓Keyboard navigable mega menus with aria-expanded, aria-haspopup, aria-controls, and Escape key dismissal on all dropdowns.
✓All forms: associated labels, required field indicators, noValidate attribute, accessible select elements.
✓Framework
Next.js 16 (App Router, React Server Components)
Language
TypeScript — strict mode, full type coverage
Styling
Tailwind CSS v4 with CSS-based design tokens
Typography
Inter (body) + Playfair Display (headings) via next/font
Icons
lucide-react
Data (MVP)
Typed JSON files — structured for CMS migration
Data (Post-MVP)
Sanity or Contentful (headless CMS)
Forms
HTML forms → /api/* routes (CRM integration pending)
SEO
generateMetadata + generateStaticParams + JSON-LD
Hosting
Vercel (recommended)
Analytics
GA4 + CTA event tracking (Phase 5)
Images
next/image + SVG brand wordmarks (real assets: Phase 5)
This document is prepared for internal Planetworld use. It describes the MVP website build completed in March 2026. All functional requirements listed are implemented in the current codebase and verified against a production build (42 static routes, zero TypeScript errors). For questions, contact the development team.
