SlpSoftware/aidlc-docs/features/react-frontend/inception/requirements/requirements.md

Requirements — React Frontend (SLP Software Marketing Site)

Intent Analysis Summary

• User Request: Build a React frontend for SLP Software. Two static HTML reference designs exist in References/ (slp-software.html = purple accent, slp-software-rood.html = red accent) that are the same design with only a different accent color. Red must become the primary/default theme; the purple theme must remain selectable (this selectability is new, not present in the original static designs). All other content/layout must be ported 1-to-1 into React. Start with a static site, but built as React. For later use: TanStack Router and TanStack Query should be used where needed. The AI-DLC workflow must be used to set this up.
• Request Type: New Project (Greenfield)
• Scope Estimate: Single Component — one marketing/landing page rebuilt as a React application, plus supporting theming infrastructure
• Complexity Estimate: Simple to Moderate — the visual/content scope is a single static page, but a full modern tooling skeleton (Vite, TypeScript, TanStack Router, TanStack Query, Tailwind CSS, theming) is being set up for future growth
• Requirements Depth: Standard

Reference Design Analysis

Both reference files were compared byte-for-byte (Compare-Object). They are identical in structure, markup, and copy; the only differences are CSS custom property values used for theming:

Variable	Purple (slp-software.html)	Red (slp-software-rood.html)
--bg	#0E1220	#140C0E
--surface	#151A2C	#1F1315
--surface-2	#1B2138	#291719
--line	#262E4A	#402226
--text	#E9EBF5	#F5EAEB
--muted	#98A0BA	#B69C9F
--accent	#8B7CFF	#E04848
--accent-soft	rgba(139,124,255,.14)	rgba(224,72,72,.16)
--accent-line	rgba(139,124,255,.35)	rgba(224,72,72,.40)
Hero radial gradients, badge/button text color, #pakketten gradient	purple-tinted values	red-tinted values

Page structure (both files, identical):

1. Nav — logo ("SLP.Software"), links (Pakketten / Werkwijze / Over), CTA ("Start project")
2. Hero — eyebrow label, H1, lead paragraph, animated code line with blinking caret, two CTA buttons
3. Pakketten (Packages) — 3 pricing cards (Landingspagina €300, Website €750 — featured, Maatwerk — quote-based)
4. Werkwijze (Process) — 3-step process (intake, bouwen, live)
5. Over (About) — company description + tech stack panel
6. Contact — contact box with mailto CTA
7. Footer — copyright + mono tagline

Functional Requirements

FR-1: Page Content Parity

The React application MUST reproduce all sections, copy, structure, and visual layout of the reference designs 1-to-1: Nav, Hero, Pakketten, Werkwijze, Over, Contact, Footer. All Dutch marketing copy, package prices (€300 / €750 / "Op maat"), and the contact e-mail address (info@slpsoftware.nl) are copied exactly as-is from the reference HTML for this iteration; this content is expected to be replaced by dynamically fetched data in a future iteration (see FR-5).

FR-2: Componentization

The page MUST be decomposed into reusable React components (e.g. Nav, Hero, PackagesSection, PackageCard, ProcessSection, AboutSection, ContactSection, Footer) rather than a single monolithic page component.

FR-3: Theme Switching

• The site MUST default to the red theme on first load.
• The purple theme MUST remain selectable by the visitor via a visible UI control (e.g. a toggle/switcher in the nav).
• The chosen theme MUST be persisted in the browser (localStorage or equivalent) so it is remembered on return visits; if no stored preference exists, red is used.
• Theme values MUST be implemented so that both palettes (and any future palette) can be added without duplicating component markup — i.e. only the color tokens change, not the structure.

FR-4: Preserved Micro-Interactions

All existing micro-interactions from the reference designs MUST be preserved: the blinking caret animation in the hero code line, :hover / :focus-visible states on links, cards and buttons, and smooth-scroll behavior for in-page anchor navigation (respecting prefers-reduced-motion).

FR-5: Forward-Looking Data Layer (Preparation Only)

• TanStack Router MUST be set up and wired into the application shell, even though the initial scope has effectively a single route (/). Route structure should be organized so that adding routes later is straightforward.
• TanStack Query MUST be installed and configured (e.g. QueryClientProvider at the app root) as part of this iteration's skeleton, in preparation for a future iteration where package/content data is fetched from a backend instead of being hardcoded. No actual network data-fetching is required yet — static data (matching FR-1) is used as the source for now, structured so it can be swapped for a TanStack Query hook later with minimal changes.

Non-Functional Requirements

NFR-1: Tooling & Language

• Build tool: Vite
• Language: TypeScript
• UI library: React

NFR-2: Styling

• Tailwind CSS is used as the utility CSS framework to re-implement the reference visuals.
• The color palette (red default / purple alternate) MUST be modeled as design tokens (e.g. CSS custom properties consumed via Tailwind theme config, or a Tailwind theme extension keyed by a data-theme attribute/class) so that switching a single token set changes the whole site's palette, mirroring how the reference designs use :root CSS variables.

NFR-3: Browser Support

Modern evergreen browsers only (latest Chrome, Firefox, Edge, Safari). No legacy/IE-adjacent support required. This matches the reference design's use of modern CSS features (backdrop-filter, clamp(), CSS custom properties).

NFR-4: Deployment Target

The build output MUST remain a plain static bundle (HTML/CSS/JS, no Node.js server required at runtime) so it can be deployed to a traditional web host via FTP/manual upload. This has a design implication for TanStack Router: once more than one route exists, either hash-based routing or host-level rewrite rules (e.g. .htaccess) will be needed for direct-link/deep-link support on a plain static FTP host — to be finalized during Application Design / Infrastructure Design when routing needs are concrete.

NFR-5: Operations Phase

This feature WILL go through the Operations phase after Construction (deployment setup + monitoring setup + production readiness validation).

Extension Configuration

Extension	Enabled	Notes
Security Baseline	Yes	Enforced as blocking constraints. Most backend-oriented rules (auth, API validation, network config, encryption at rest, etc.) are expected to be N/A for this static, no-backend marketing site — applicability will be re-assessed rule-by-rule at each stage (e.g. HTTP security headers via hosting/CDN config, dependency lock file & vulnerability scanning, Subresource Integrity for the Google Fonts CDN links).
Property-Based Testing	No	Skipped — this is a largely static, UI-only marketing site with no significant business logic.

Out of Scope (for this iteration)

• Real backend/API integration for package/content data (prepared for via TanStack Query, but not implemented)
• Multiple routes/pages beyond the single landing page
• CMS or admin interface for editing content
• Analytics/tracking integration
• Automated deployment pipeline details (handled in the Operations phase)

Open Design Considerations (to resolve later, not blocking)

• Exact mechanism for FTP-safe client-side routing once multiple routes exist (hash routing vs. .htaccess rewrites) — Application Design / Infrastructure Design.
• Exact shape of the future data-fetching layer (API contract) that TanStack Query will eventually call — deferred until a backend exists.

Summary

This is a greenfield React frontend for SLP Software's marketing site. The visual and content scope is a straightforward 1-to-1 port of an existing static HTML/CSS design (available in two color variants). The key net-new requirement beyond the reference designs is a red-default / purple-selectable theme switcher with persisted preference. The project is set up with Vite + React + TypeScript + Tailwind CSS, and is scaffolded from day one with TanStack Router and TanStack Query to support future growth, even though the current scope has a single route and static data. Security Baseline is enforced; Property-Based Testing is skipped; the Operations phase will run after Construction.