BolaChat

A rebuild of the BolaChat marketing site (https://bolachat.africa) - the WhatsApp-native AI sports betting product from Bola Group / Bolabet, live in Zambia with Zimbabwe and Malawi planned. This repo replaces the original one-off page with a maintainable, multi-market Next.js app.

This is not a redesign. It reproduces the live product's structure and copy, on a clean architecture that can add new countries without touching presentation code.

Brand system

Visual design follows the Bolabet Corporate Identity Manual v1.0 (the parent brand's CI, applied here to the BolaChat sub-brand):

• Colour (CI 3.1/3.2): Pitch Black #231F20 background, Action Yellow #F5E500 as the single accent, Chalk White #FFFFFF text. This is the CI's "Home Kit" (3.3) - the black/yellow combination specified for core sports betting product UI.
• Two deliberate exceptions: WhatsApp CTA buttons use WhatsApp's own green (--whatsapp) and Telegram CTA buttons use Telegram's blue (--telegram), both in globals.css, so they still read as "this opens WhatsApp / Telegram" at a glance. Every other accent on the site - links, badges, focus states, the wordmark split - is Action Yellow. See Button.tsx: the whatsapp and telegram variants are reserved for wa.me / t.me links only.
• Typography (CI 2.1/2.2): Archivo (weight 900, italic, uppercase, tight tracking) for headlines via the .font-heading utility class; Inter for body/UI text, with tabular lining numerals turned on site-wide (font-feature-settings: "tnum") so odds and amounts align in columns - apply the tabular-nums class directly to any new numeric display. Both fonts are self-hosted via @fontsource-variable/* (no runtime call to Google's font CDN).
• The Bola Angle (CI 4.1): -9.45deg, stored as --bola-angle. Applied to graphic elements only (the BolaSlash component, the Responsible Gaming badge's plates, the half-tone texture) - never to running text, which gets its slant from the italic headline typeface instead.
• The Bola Half-tone (CI 4.4): a faded dot-matrix texture, implemented as the .bola-halftone CSS utility (see SportArt.tsx for usage).
• The 18+ badge (CI 2.4) is a defined graphic asset, not just body copy - see ResponsibleGamingBadge.tsx, used in the Footer.
• The wordmark split (CI 1.1): BolaWordmark.tsx reproduces the BOLA/BET colour-split pattern for BOLA/CHAT.

New brand-system components live in src/components/ui/: BolaWordmark.tsx, BolaSlash.tsx, ResponsibleGamingBadge.tsx.

Stack

• Next.js 16 (App Router, static generation)
• TypeScript
• Tailwind CSS v4
• ESLint (eslint-config-next)
• Archivo and Inter (self-hosted via @fontsource-variable/*) for brand typography - see "Brand system" above
• Zero UI/animation libraries beyond the fonts above - everything else is hand-built Tailwind + plain SVG

No Google Fonts CDN dependency: fonts are bundled as static files through npm (@fontsource-variable/archivo, @fontsource-variable/inter) rather than loaded via next/font/google, so the build never depends on reaching fonts.googleapis.com at request time - one less thing that can fail in a locked-down CI/build environment, and one fewer third-party network request for visitors.

Project structure

src/
  app/
    layout.tsx        Root HTML shell, global metadata defaults
    page.tsx           "/" - choose-your-country fallback (see below)
    robots.ts           /robots.txt
    sitemap.ts           /sitemap.xml, generated from the market registry
    zm/page.tsx         Zambia route - metadata + <MarketPage market={zm} />
    mw/page.tsx         Malawi route
    zw/page.tsx         Zimbabwe route
  components/
    MarketPage.tsx      The one page template every market route renders
    layout/             Header, Footer
    sections/           Hero, PowerPlays, HowItWorks, WhyMessaging, SportsGrid, FinalCta
  content/
    powerplays/         <code>.json - weekly PowerPlays, edited via /admin
    ui/                 Button, ChannelButtons, Container, Badge, SectionHeading, SportArt, ChatMockup, WhatsAppIcon, TelegramIcon
  config/
    markets/            zm.ts / mw.ts / zw.ts / index.ts - see "Market configuration" below
  lib/
    whatsapp.ts         wa.me URL builder (single source of truth for WhatsApp links)
    telegram.ts         t.me URL builder (single source of truth for Telegram links)
    channels.ts         channelNames(): "WhatsApp" vs "WhatsApp and Telegram" copy per market
    utils.ts            cx() class-name helper
  types/
    market.ts           MarketConfig contract every market file must satisfy
  styles/
    globals.css         Design tokens (CSS variables) + Tailwind import
public/
  images/sports/        Drop real photography here (see below)
  icons/

Nothing in components/ imports a market-specific value directly - every component that needs one receives a market: MarketConfig prop and reads from it. That's what makes /zm, /mw, and /zw three routes over one codebase instead of three separate sites.

Market configuration

Each market is one file in src/config/markets/ implementing the MarketConfig type (src/types/market.ts): currency, WhatsApp number, optional Telegram bot username (omit telegram for markets without Telegram), optional comingSoon flag, registration/login/deposit URLs, legal links, support details, SEO metadata, and analytics IDs (left empty until you're ready to enable them).

Known placeholders you must replace before a market goes live - each is marked // TODO in its config file:

This is the beginning of the README. Read the rest at the original. Read the full README ↗