System Requirements Document for football-match

1. Introduction

football-match is a complete, modern, mobile-responsive ticket-selling website for a single marquee football fixture: Harry Kane's team vs AFC Ajax, played on 5 January 2027 at Talanta Stadium, Nairobi, Kenya, with kick-off at 7:00 PM EAT. The site exists to turn big-match anticipation into a ticket purchase: it presents the fixture with real, licensed photography of Harry Kane, an AFC Ajax star player and Talanta Stadium, carries a live countdown to kick-off, spotlights both players, offers VIP, Premium and Regular ticket tiers priced in KES, shows the venue with a seating map and directions, and walks a buyer through a cart, a buyer-details checkout with a demo/test payment, and a printable confirmation ticket carrying a QR code.

The audience is football fans and event-goers in Kenya and beyond who want spectacle, urgency and trust in the purchase, plus the event organizer who owns the match listing, ticket inventory, venue information, contact details and terms that buyers rely on.

The site is delivered as a first-party web application with a shared backend and database, and is designed for free static-style deployment of the front end on Netlify, Vercel or GitHub Pages, with a README documenting that deployment and sample ticket data included in the project.

2. System Overview

2a. Product Interpretation and Delivery Boundary

The product is a single-fixture ticketing site, not a general marketplace. Every page serves one match and one purchase lifecycle: discover the fixture, understand it (countdown, preview, players, venue), choose tiers and quantities, review a cart, enter buyer details, complete a demo/test payment, and receive a printable ticket with a QR code.

Delivery is first-party: the React front end renders all buyer-facing pages, and a shared FastAPI backend process serves the application APIs and domain modules (match content, ticket tiers and inventory, cart, orders, demo payment, ticket issuance and QR payloads). MariaDB stores application-owned persistent data — ticket tier definitions and prices in KES, sample ticket data, cart contents, buyer details and issued tickets. The front end is deployable for free on Netlify, Vercel or GitHub Pages per the README; the backend and database run as the provisioned services.

Access is public throughout: every page in the current contract is anonymously reachable, and no account, login or identity establishment is required to browse, select tickets, check out or retrieve a confirmation. Payment is explicitly demo/test only — no real payment integration, no card processing, no money movement. Imagery is real and licensed: no placeholders and no illustrations anywhere in the product.

Current scope is the match site and its purchase lifecycle. Future ideas (for example real payment processing or multi-match listings) are not part of this delivery and appear only in the future section.

Removed from scope

• Real payment processing or live card acquiring (demo/test payment only).
• Placeholder or illustrated player and stadium imagery.
• Multi-match or season-long ticketing catalogues.

2c. Page Content and Component Coverage

Landing

• Information/state: full-width split hero with Harry Kane's real photograph on the left and the AFC Ajax star player's real photograph on the right, separated by a curved gold seam; match title "Harry Kane's Team vs AFC Ajax"; date "5 Jan 2027"; venue "Talanta Stadium, Nairobi"; kick-off "7:00 PM EAT"; gold uppercase micro-label above the title; footer with contact info, social links and terms.
• Primary action: bold gold capsule Buy Tickets call-to-action that leads to the Tickets page.
• Supporting actions: navigation to Match Info, Players, Tickets and Venue; footer social links; terms link.
• Domain entities: Match (title, date, venue, kick-off), Player (Kane, Ajax star), Media asset (licensed hero photographs).
• Component responsibilities: hero split-panel with curved seam and match block; floodlight-sweep highlight layer; primary CTA; site navigation; footer with contact block, social links and terms.
• States: loading — hero photographs load progressively with a navy ground and the match block visible immediately; empty — not applicable (match content is fixed); success — hero, match block and CTA render fully; error — if a hero photograph fails to load, the panel keeps its navy ground and the match block and CTA remain fully readable; recovery — retry image load on next visit, no broken-image icon.

Match Info

• Information/state: live countdown timer to kick-off (days, hours, minutes, seconds), date and time (5 January 2027, 7:00 PM EAT), venue with a real Talanta Stadium photograph, and a short match preview.
• Primary action: proceed to Tickets via the persistent Buy Tickets CTA.
• Supporting actions: navigate to Venue for directions.
• Domain entities: Match (kick-off timestamp), Venue (Talanta Stadium), Media asset (stadium photograph), Match preview text.
• Component responsibilities: countdown component with tabular gold numerals and 200 ms digit slide on tick; date/time block; venue block with photograph; preview paragraph.
• States: loading — countdown shows placeholder dashes until the kick-off timestamp resolves; empty — not applicable; success — countdown ticks each second and reaches zero at kick-off; error — if the kick-off timestamp cannot be resolved, the static date/time text remains authoritative and the countdown area shows the date/time instead of digits; recovery — countdown resumes when the timestamp resolves.

Players

• Information/state: two spotlight cards — Harry Kane and the AFC Ajax star player — each with a real photograph, name, position and short bio.
• Primary action: proceed to Tickets via the persistent Buy Tickets CTA.
• Supporting actions: none beyond navigation.
• Domain entities: Player (name, position, bio, photograph).
• Component responsibilities: tall portrait panels meeting on a curved seam; name, position label and bio text; parallax portrait layers.
• States: loading — portrait panels hold their navy ground with name and position visible; empty — not applicable; success — both cards render with photograph, name, position and bio; error — a failed portrait keeps the navy ground and the name, position and bio remain readable; recovery — image retried on next visit.

Tickets

• Information/state: VIP, Premium and Regular tiers, each with a price in KES, a quantity selector and an Add to cart button.
• Primary action: Add to cart for a chosen tier and quantity.
• Supporting actions: adjust quantity with the stepper; navigate to Cart.
• Domain entities: Ticket tier (name, price in KES), Cart line (tier, quantity).
• Component responsibilities: capsule-ended tier rows with curved left notch; gold tabular price figures; quantity stepper; Add-to-cart button; cart indicator.
• States: loading — tier rows show their names with prices resolving; empty — if no tiers are available, a clear message states that tickets are unavailable and the CTA is disabled; success — adding a tier shows confirmation and updates the cart indicator; error — adding with a quantity of zero or an unavailable tier shows an inline message and does not change the cart; recovery — the buyer adjusts quantity or tier and retries.

Cart

• Information/state: selected tiers, quantities and KES totals, with a path to proceed to checkout.
• Primary action: Proceed to checkout.
• Supporting actions: change quantity, remove a line, return to Tickets.
• Domain entities: Cart line (tier, quantity, line total in KES), Cart total in KES.
• Component responsibilities: line-item list with quantity steppers and remove controls; totals block in KES; checkout CTA.
• States: loading — cart contents resolve from the session; empty — an empty-cart message with a link back to Tickets; success — lines and totals render and checkout is enabled; error — if a line cannot be updated, the previous quantity is restored with an inline message; recovery — retry the change or remove the line.

Checkout

• Information/state: buyer details form and a demo/test payment step, with the order summary and KES total.
• Primary action: Pay (demo) to complete the purchase.
• Supporting actions: edit buyer details; return to Cart.
• Domain entities: Buyer details (name, email, phone), Order (lines, total in KES, status), Demo payment (test result).
• Component responsibilities: buyer-details form with validation; order summary; demo payment control clearly labelled as a test payment; submit and error messaging.
• States: loading — submit shows a pending state while the demo payment is processed; empty — checkout with an empty cart redirects to Cart with a message; success — a completed demo payment leads to Confirmation; error — invalid buyer details show field-level messages and block submission, and a failed demo payment shows a retry message without losing entered details; recovery — correct the fields or retry the demo payment.

Confirmation

• Information/state: printable confirmation ticket containing a QR code, with the match details, tier, quantity and buyer details.
• Primary action: Print ticket.
• Supporting actions: return to Landing.
• Domain entities: Issued ticket (match, tier, quantity, buyer, QR payload).
• Component responsibilities: pearl-white ticket card with curved perforation line; QR code; print stylesheet; match and buyer summary.
• States: loading — the ticket resolves after the demo payment completes; empty — direct access without a completed order shows a message with a link to Tickets; success — the ticket and QR code render and print cleanly; error — if the ticket cannot be resolved, a message offers a retry; recovery — retry resolution or restart from Tickets.

Venue

• Information/state: real Talanta Stadium exterior and interior/pitch photographs, a seating map, location and directions.
• Primary action: proceed to Tickets via the persistent Buy Tickets CTA.
• Supporting actions: read directions; view the seating map.
• Domain entities: Venue (name, location, directions), Seating map, Media assets (exterior and pitch photographs).
• Component responsibilities: full-bleed exterior photo band; interior/pitch inset; curved parametric seating map in gold line on navy; location and directions block.
• States: loading — photo bands hold navy ground while images load; empty — not applicable; success — photographs, seating map, location and directions render; error — a failed photograph keeps its navy ground and the location and directions remain readable; recovery — image retried on next visit.

3. Functional Requirements

FR-1 — Split hero with match block and Buy Tickets CTA (explicit) As a Ticket buyer I should see a full-width hero banner with Harry Kane on one side and the AFC Ajax star player on the other, showing the match title, the date 5 Jan 2027, the venue Talanta Stadium, and a bold "Buy Tickets" button, so that I immediately understand the fixture and can start buying.

• Trigger/input: opening the Landing page.
• Observable result: the split hero renders with both real player photographs, the match title, date, venue and a gold capsule Buy Tickets CTA.
• Access state: anonymous, no account required.
• Failure/recovery: if a hero photograph fails, the panel keeps its navy ground and the match block and CTA stay fully readable.
• Continuation: the CTA leads to the Tickets page.

FR-2 — Real, licensed cover imagery (explicit) As a Ticket buyer I should see real, high-quality, properly licensed photographs of Harry Kane and one AFC Ajax star player as the main cover images, so that the page shows real people rather than placeholders or illustrations.

• Trigger/input: loading the Landing and Players pages.
• Observable result: real licensed photographs render in the hero and player spotlight; no placeholders or illustrations appear anywhere.
• Access state: anonymous.
• Failure/recovery: a failed image keeps its navy ground and surrounding text remains readable; the image is retried on next visit.
• Continuation: the buyer continues to Match Info, Players or Tickets.

FR-3 — Match info with countdown, date/time, venue photo and preview (explicit) As a Ticket buyer I should see a countdown timer to kick-off, the date and time, the venue with a real Talanta Stadium photo, and a short match preview, so that I know exactly when and where the match happens.

• Trigger/input: opening the Match Info page.
• Observable result: the countdown ticks toward 5 January 2027, 7:00 PM EAT; the date/time, venue photograph and preview render.
• Access state: anonymous.
• Failure/recovery: if the kick-off timestamp cannot be resolved, the static date/time text remains authoritative and replaces the digits.
• Continuation: the buyer proceeds to Tickets or Venue.

FR-4 — Player spotlight cards (explicit) As a Ticket buyer I should see cards for Harry Kane and the AFC Ajax star player with their real photos, names, positions and short bios, so that I can connect the fixture to the players on the pitch.

• Trigger/input: opening the Players page.
• Observable result: two spotlight cards render with photograph, name, position and bio.
• Access state: anonymous.
• Failure/recovery: a failed portrait keeps the navy ground and the name, position and bio remain readable.
• Continuation: the buyer proceeds to Tickets.

FR-5 — Ticket tiers with KES prices, quantity selectors and Add to cart (explicit) As a Ticket buyer I should see VIP, Premium and Regular tiers with prices in KES, quantity selectors and "Add to cart" buttons, so that I can choose and add the tickets I want.

• Trigger/input: opening the Tickets page and choosing a tier and quantity.
• Observable result: the chosen tier and quantity are added to the cart and the cart indicator updates.
• Access state: anonymous.
• Failure/recovery: adding with a quantity of zero or an unavailable tier shows an inline message and leaves the cart unchanged.
• Continuation: the buyer proceeds to the Cart.

FR-6 — Cart review with KES totals (required_inference) As a Ticket buyer I should review my selected tiers, quantities and KES totals in a cart and proceed to checkout, so that I can confirm my order before paying.

• Trigger/input: opening the Cart page after adding tickets.
• Observable result: line items, quantities and KES totals render; checkout is enabled.
• Access state: anonymous.
• Failure/recovery: an empty cart shows a message with a link back to Tickets; a failed line update restores the previous quantity with an inline message.
• Continuation: the buyer proceeds to Checkout.

FR-7 — Checkout with buyer details and demo/test payment (explicit) As a Ticket buyer I should enter my buyer details and complete a demo/test payment, so that I can finish my purchase without a real charge.

• Trigger/input: submitting the buyer-details form and the demo payment control.
• Observable result: the order is recorded and the buyer is taken to Confirmation.
• Access state: anonymous.
• Failure/recovery: invalid buyer details show field-level messages and block submission; a failed demo payment shows a retry message without losing entered details.
• Continuation: the buyer reaches Confirmation.

FR-8 — Printable ticket with QR code (explicit) As a Ticket buyer I should receive a printable confirmation ticket with a QR code after the demo payment, so that I have a ticket to show at the match.

• Trigger/input: completing the demo payment, or opening Confirmation after an order.
• Observable result: a pearl-white ticket card renders with the match details, tier, quantity, buyer details and a QR code, and prints cleanly.
• Access state: anonymous.
• Failure/recovery: direct access without a completed order shows a message with a link to Tickets; a failed ticket resolution offers a retry.
• Continuation: the buyer prints the ticket or returns to Landing.

FR-9 — Venue section with real stadium images, seating map, location and directions (explicit) As a Ticket buyer I should see real Talanta Stadium exterior and interior/pitch images, a seating map, the location and directions, so that I know how to get there and where I will sit.

• Trigger/input: opening the Venue page.
• Observable result: exterior and pitch photographs, the curved seating map, location and directions render.
• Access state: anonymous.
• Failure/recovery: a failed photograph keeps its navy ground and the location and directions remain readable.
• Continuation: the buyer proceeds to Tickets.

FR-10 — Footer with contact info, social links and terms (explicit) As a Ticket buyer I should find contact info, social links and terms in the footer, so that I can reach the organizer and understand the terms.

• Trigger/input: scrolling to the footer on any page.
• Observable result: contact info, social links and terms link render.
• Access state: anonymous.
• Failure/recovery: not applicable beyond standard link behavior.
• Continuation: the buyer follows a link or returns to the purchase flow.

FR-11 — Responsive, fast-loading, accessible presentation (explicit) As a Ticket buyer I should use the site comfortably on mobile, tablet and desktop with fast loading and accessible contrast, so that I can buy tickets on any device.

• Trigger/input: viewing the site at mobile, tablet and desktop widths.
• Observable result: layouts stack to a single column on mobile, readable text and controls stay whole inside the viewport, and contrast meets accessibility expectations.
• Access state: anonymous.
• Failure/recovery: with reduced motion, the floodlight sweep and parallax are removed and dividers remain fully drawn.
• Continuation: the buyer completes the purchase on any device.

FR-12 — SEO-friendly meta tags (explicit) As an Event organizer I should have SEO-friendly meta tags on the site, so that the fixture is discoverable in search.

• Trigger/input: loading any page.
• Observable result: page titles, descriptions and social meta tags describe the fixture, date and venue.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: search visitors land on the Landing page.

FR-13 — Sample ticket data and deployment README (explicit) As an Event organizer I should have sample ticket data and a README covering free deployment on Netlify, Vercel or GitHub Pages, so that the site can be deployed and demonstrated.

• Trigger/input: reading the project files.
• Observable result: sample ticket data and a README with deployment steps for Netlify, Vercel and GitHub Pages are present.
• Access state: not applicable (project artifact).
• Failure/recovery: not applicable.
• Continuation: the organizer deploys the site.

FR-14 — Match listing and ticket inventory ownership (required_inference) As an Event organizer I should have the match details, ticket tiers and KES prices, venue, seating map, directions, contact and terms content defined as the listing buyers rely on, so that the site presents one consistent fixture.

• Trigger/input: the organizer's listing content being available to the site.
• Observable result: the match details (Harry Kane's team vs AFC Ajax, 5 January 2027, Talanta Stadium, Nairobi, Kenya, 7:00 PM EAT), tiers and KES prices, venue content, contact and terms render consistently across pages.
• Access state: content is public; no organizer-facing editing surface is in current scope.
• Failure/recovery: if listing content is unavailable, the site shows the static match details and a clear unavailable message for affected sections.
• Continuation: buyers see a consistent listing.

4. User Personas

Ticket buyer

Product context. A football fan or event-goer who has heard about Harry Kane's team vs AFC Ajax on 5 January 2027 at Talanta Stadium, Nairobi, and lands on the site to decide whether to go and to buy tickets. They may be on a phone in Nairobi traffic or on a desktop at home, and they expect a big-match feel with real faces and a real stadium.

Primary goal. Secure tickets to the match at a tier and price in KES that suits them, with a printable ticket they can show at the gate.

Distinct accepted responsibilities. The buyer is the sole human actor in the purchase lifecycle: they read the hero and match info, watch the countdown, look at the player spotlight, compare VIP, Premium and Regular tiers and prices in KES, set quantities, add to cart, review the cart, enter buyer details, complete the demo/test payment, and print the confirmation ticket with its QR code. They also use the venue section to plan travel and seating.

Relevant inputs or decisions. Which tier and how many tickets; their buyer details (name, email, phone); whether to proceed from cart to checkout; whether to print the ticket.

Interactions with other accepted participants. The buyer consumes the Event organizer's listing — match details, tiers and KES prices, venue, seating map, directions, contact and terms — and relies on it being consistent. The buyer does not interact with the organizer directly through the site beyond the footer contact info.

Observable success. A printable ticket with a QR code for the chosen tier and quantity, showing the match, date, venue and buyer details, reached without a real charge.

Event organizer

Product context. The party responsible for the match listing and ticket inventory for Harry Kane's team vs AFC Ajax at Talanta Stadium. They define what buyers see and rely on: the match details, the ticket tiers and prices in KES, and the venue, seating map, directions, contact and terms content.

Primary goal. Present one consistent, trustworthy fixture listing that lets buyers purchase confidently and arrive at the right place.

Distinct accepted responsibilities. The organizer owns the listing content and inventory facts — match title, date 5 January 2027, venue Talanta Stadium, Nairobi, Kenya, kick-off 7:00 PM EAT, the VIP/Premium/Regular tiers with KES prices, the venue photographs, seating map, location, directions, contact info, social links and terms. They also own the sample ticket data and the deployment README that make the site demonstrable and deployable.

Relevant inputs or decisions. The exact match details, tier names and KES prices, venue content, contact and terms text, and the licensed imagery choices.

Interactions with other accepted participants. The organizer supplies the content the Ticket buyer consumes; the buyer's purchase depends on that content being accurate and consistent across pages.

Observable success. Buyers see a consistent listing across Landing, Match Info, Players, Tickets, Venue and the footer, and can complete a purchase and print a ticket that matches the organizer's listing.

5. Core User Flows

Flow A — Ticket buyer discovers the fixture and buys a ticket

1. The Ticket buyer opens the Landing page anonymously. The split hero renders with Harry Kane's real photograph on the left, the AFC Ajax star player's real photograph on the right, the match title, "5 Jan 2027", "Talanta Stadium, Nairobi" and "7:00 PM EAT", with a gold capsule Buy Tickets button.
2. The buyer optionally opens Match Info to watch the countdown to kick-off, read the date/time, see the real Talanta Stadium photograph and read the short match preview.
3. The buyer optionally opens Players to view the Harry Kane and AFC Ajax star spotlight cards with real photos, names, positions and bios.
4. The buyer optionally opens Venue to see the real Talanta Stadium exterior and pitch photographs, the seating map, location and directions.
5. The buyer selects Buy Tickets and lands on Tickets. They compare VIP, Premium and Regular tiers with prices in KES, set a quantity with the stepper, and press Add to cart. The cart indicator updates and an inline confirmation appears.
6. The buyer opens Cart and reviews the selected tiers, quantities and KES totals. They may change quantities or remove a line; if a line update fails, the previous quantity is restored with an inline message.
7. The buyer presses Proceed to checkout and lands on Checkout. They enter buyer details (name, email, phone) and review the order summary and KES total.
8. The buyer presses Pay (demo). The control shows a pending state while the demo/test payment is processed. If buyer details are invalid, field-level messages appear and submission is blocked; if the demo payment fails, a retry message appears without losing entered details.
9. On success the buyer lands on Confirmation, where a pearl-white printable ticket renders with the match details, tier, quantity, buyer details and a QR code.

10. The buyer presses Print ticket and the ticket prints cleanly, or returns to Landing. If they open Confirmation without a completed order, a message links them back to Tickets.

Failure/recovery and continuation. A failed hero or stadium photograph keeps its navy ground and surrounding text readable. An empty cart shows a message with a link back to Tickets. A failed ticket resolution on Confirmation offers a retry. With reduced motion, the floodlight sweep and parallax are removed and dividers remain fully drawn, so the flow works identically.

Flow B — Event organizer's listing reaches the buyer

1. The Event organizer defines the match details exactly — Harry Kane's team vs AFC Ajax, 5 January 2027, Talanta Stadium, Nairobi, Kenya, kick-off 7:00 PM EAT — together with the VIP, Premium and Regular tiers and their KES prices, the venue photographs, seating map, location, directions, contact info, social links and terms.
2. The organizer ensures the licensed, high-resolution photographs of Harry Kane, the AFC Ajax star player and Talanta Stadium (exterior and pitch) are in place, with no placeholders or illustrations.
3. The organizer includes sample ticket data and a README covering free deployment on Netlify, Vercel or GitHub Pages.
4. The Ticket buyer sees the organizer's listing consistently across Landing, Match Info, Players, Tickets, Venue and the footer, and completes Flow A.
5. The organizer's observable result is a consistent listing and a buyer who can purchase and print a ticket that matches it. If listing content is unavailable, the site shows the static match details and a clear unavailable message for affected sections.

6. Visuals Colors and Theme

The creative direction is authoritative: Fluid parametric grandeur for a night under stadium lights, after the muse Zaha Hadid — sweeping continuous curves, luminous surfaces and motion frozen in form, the feeling of a stadium at kick-off.

Mode: dark.

Colour tokens (exact hex by role):

• Background: #0A1428 (deep navy — the ground for hero, match info and venue).
• Surface: #12203A (raised surface for player cards, ticket tiers and the checkout panel).
• Text: #F4F1EA (warm pearl-white, ~13:1 on navy).
• Primary / accent: #E8B44A (gold — the single hot accent: CTAs, countdown digits, price figures, the curved rule between sections).
• Muted: #8FA0BC (secondary labels, ~5.4:1 on #0A1428).
• White #FFFFFF appears only as the printable ticket ground and inside the seating map, never as a page background.
• Gold is never used for long body copy; it is reserved for figures, labels and controls.

Typography: headings and body Jost (wide modern geometric sans, light weights 300–400). Display sizes with tight leading 0.92–0.96 and slight positive tracking on small-caps labels. The match title is set in a single line where possible and breaks into two stacked lines on mobile, always in sentence case with club names in uppercase gold micro-caps above it. Scale is a 1.333 modular scale: display clamp(2.75rem, 9vw, 8.25rem) (44px mobile → 132px desktop), section heads 32px → 64px, card names 24px → 36px, body 16px → 18px, labels 12px uppercase with 0.18em tracking. Countdown numerals use Jost with tabular-figure styling at 40px mobile → 88px desktop.

Shape language: sweeping continuous curves as the structural motif — hero panels clipped by large asymmetric arcs rather than rectangles, curved section boundaries (a shallow gold arc dividing hero from match info, a deeper reverse arc before the venue section), full-capsule buttons, cards with one 40–80px curved corner paired with three tight corners, and the seating map drawn as concentric curved stands. No hard 90° card grids, no floating blobs.

Spacing rhythm: full-bleed vertical sequence with generous section breathing room; curved dividers carry the rhythm between sections.

Imagery style: real photography only — licensed high-resolution portraits of Harry Kane and the AFC Ajax star player cropped tall and lit against dark grounds, a real Talanta Stadium exterior shot full-bleed as the venue band and a pitch/interior shot as the match-info inset, with a subtle navy duotone wash at the edges so images sit inside the palette. No illustrations, no placeholders, no stock-looking cut-outs.

7. Signature Design Concept

The public entry is a match poster built from a curved gold seam. The Landing hero is a full-width dark-navy composition: Harry Kane's real photograph occupies the left 42% cropped from the waist up, the AFC Ajax star's real photograph occupies the right 42%, and a large sweeping gold arc separates them. That seam is not decoration — it is the navigation idea: it carries the match block, a gold uppercase micro-label, the oversized title "HARRY KANE'S TEAM vs AFC AJAX" at clamp(2.75rem, 9vw, 8.25rem) in light Jost, then "5 JAN 2027", "TALANTA STADIUM, NAIROBI" and "7:00 PM EAT" on one ruled line, with a single gold capsule Buy Tickets button pinned beneath. A soft gold floodlight sweep drifts across the seam on a 14s loop. On mobile the match block sits above two cropped portraits side by side at 50% width each. The same curved seam repeats as the divider between every section, so the confirmation ticket — a pearl-white card with a curved perforation line and a real QR code — feels like the same object as the hero.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief

• Focal subject: the split hero of Harry Kane's real portrait (left) and the AFC Ajax star's real portrait (right), divided by the curved gold seam that carries the match block and the Buy Tickets CTA.
• Input → transformation → outcome thesis: as the page loads and the buyer scrolls, the floodlight sweep drifts across the seam and the two portrait layers shift 12–20px on separate parallax planes; the curved dividers draw themselves in as they enter the viewport; the countdown digits tick with a 200 ms vertical slide. The outcome is a hero that reads as a stadium at kick-off, with the match block and CTA always fully readable and never covered.
• Motion vocabulary: one slow floodlight sweep (soft gold radial highlight, 14s loop), separate portrait parallax layers (12–20px on scroll), self-drawing curved section dividers, 200 ms countdown digit slide. Cinematic but restrained in count.
• Composed first frame: dark navy ground; Kane's portrait left, Ajax star's portrait right; the gold seam sweeping between them; the gold micro-label, oversized match title, date, venue and kick-off on one ruled line; the gold capsule Buy Tickets button beneath; the floodlight highlight resting on the seam.
• Reduced-motion state: prefers-reduced-motion removes the floodlight sweep and parallax and leaves the dividers fully drawn; the hero, match block and CTA remain complete and readable.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

A real-time WebGL/R3F hero subject: a single crafted curved gold ribbon — the seam — rendered as a luminous parametric surface sweeping between the two portrait planes, with a soft gold floodlight highlight drifting across it on a 14s loop. The scene shows the product's defining state: two real players divided by the arc that carries the match and the CTA. The ribbon is dimensional but never covers readable text or controls; the match block and Buy Tickets button sit above it in the DOM layer. Under reduced motion the ribbon holds a static composed pose with the highlight fixed.

9. Non-Functional Requirements

• Responsiveness (explicit): fully responsive across mobile, tablet and desktop; every split stacks to a single column on mobile; readable text and controls stay whole inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling with clamp(...) to fit; no element covers readable text or controls.
• Performance (explicit): fast-loading; hero and stadium photographs load progressively with the match block visible immediately; imagery is high-resolution but delivered efficiently.
• Accessibility (explicit): accessible contrast — pearl-white #F4F1EA on navy #0A1428 (~13:1) and muted #8FA0BC (~5.4:1); gold reserved for figures, labels and controls, never long body copy; prefers-reduced-motion removes the floodlight sweep and parallax and leaves dividers fully drawn.
• Imagery licensing (explicit): real, high-quality photographs of Harry Kane, the AFC Ajax star player and Talanta Stadium (exterior and interior/pitch), sourced from free/licensed stock or official press sources, properly licensed for web use and high-resolution; no placeholders or illustrations.
• Payment safety (explicit): demo/test payment only — no real payment integration, no card processing, no money movement; the demo control is clearly labelled as a test payment.
• Currency (explicit): all ticket prices and totals are in KES.
• SEO (explicit): SEO-friendly meta tags describing the fixture, date and venue.
• Code quality (explicit): clean, well-commented code (HTML/CSS/JS or a free framework).
• Deployment (explicit): a README covering free deployment on Netlify, Vercel or GitHub Pages, plus sample ticket data.

• Data persistence (required_inference): MariaDB stores application-owned persistent data — ticket tier definitions and KES prices, sample ticket data, cart contents, buyer details and issued tickets — so that a cart and a confirmation survive page navigation within the purchase lifecycle.

10. Tech Stack

• Frontend: React application UI, deployable for free on Netlify, Vercel or GitHub Pages per the README.
• Backend: shared FastAPI process for application APIs and domain modules (match content, ticket tiers and inventory, cart, orders, demo payment, ticket issuance and QR payloads).
• Database: MariaDB for application-owned persistent data.
• Infrastructure: docker-compose with the backend, database and frontend services; Kubernetes only if deployment requires it.
• Imagery: real, licensed high-resolution photographs of Harry Kane, the AFC Ajax star player and Talanta Stadium, sourced from free/licensed stock or official press sources.
• Fonts: Jost for headings and body.
• Project artifacts: sample ticket data and a README covering free deployment on Netlify, Vercel or GitHub Pages.

11. Assumptions and Constraints

• Match details are exact (explicit): Harry Kane's team vs AFC Ajax, 5 January 2027, Talanta Stadium, Nairobi, Kenya.
• Kick-off time (required_inference): 7:00 PM EAT is used as the kick-off time, per the source example, and is displayed consistently across the hero, match info and confirmation.
• Colour scheme (required_inference): deep navy + gold + white, per the source example, realized as the exact tokens in Section 6.
• Payment is demo/test only (explicit): no real payment integration.
• Prices are in KES (explicit).
• Imagery is real and licensed (explicit): no placeholders or illustrations.
• Access is public (required_inference): every page is anonymously reachable; no account, login or identity establishment is required for browsing, checkout or confirmation.
• Single fixture (explicit): the site serves one match; multi-match catalogues are out of current scope.
• Organizer content is supplied (required_inference): the match listing, tiers and KES prices, venue content, contact and terms are provided as listing content; no organizer-facing editing surface is in current scope.
• Deployment target (explicit): free deployment on Netlify, Vercel or GitHub Pages for the front end, with the shared backend and MariaDB as provisioned services.

12. Glossary

• Fixture / Match: the football match Harry Kane's team vs AFC Ajax on 5 January 2027 at Talanta Stadium, Nairobi, Kenya, kick-off 7:00 PM EAT.
• Ticket tier: a ticket category — VIP, Premium or Regular — with a price in KES.
• Cart: the buyer's selected tiers and quantities before checkout.
• Demo/test payment: a simulated payment step that completes an order without a real charge.
• Confirmation ticket: the printable pearl-white ticket with a QR code issued after the demo payment.
• QR code: the scannable code on the confirmation ticket.
• Seating map: the curved parametric diagram of Talanta Stadium's stands shown in the venue section.
• KES: Kenyan shilling, the currency of all ticket prices and totals.
• EAT: East Africa Time, the time zone of the 7:00 PM kick-off.