React frontend for the SLP Software marketing site. Ported 1-to-1 from the static reference designs in References/ (slp-software.html = purple accent, slp-software-rood.html = red accent), with an added visible theme switcher (red default, purple selectable).

Tech Stack

Vite + React + TypeScript
Tailwind CSS for styling (theme tokens via CSS custom properties)
TanStack Router (hash-based history, for FTP/static hosting compatibility)
TanStack Query (placeholder query hook, prepared for future backend integration)
Vitest + React Testing Library
ESLint + Prettier

Getting Started

npm install
npm run dev

The app runs at http://localhost:5173/ by default.

Available Scripts

Script	Description
`npm run dev`	Start the Vite dev server
`npm run build`	Type-check and build a production bundle to `dist/`
`npm run preview`	Preview the production build locally
`npm run test`	Run the test suite once (Vitest)
`npm run test:watch`	Run the test suite in watch mode
`npm run lint`	Run ESLint
`npm run format`	Format the codebase with Prettier

Project Structure

src/
  components/       Presentational React components (Nav, Hero, PackagesSection, ...)
  data/             Static site content (content.ts) — current source of truth for copy/data
  hooks/            usePackagesQuery — placeholder TanStack Query hook
  routes/           TanStack Router route definitions (__root.tsx, index.tsx)
  theme/            Theme system (ThemeProvider, theme tokens)
  test/             Test setup (Vitest + Testing Library)
  fonts.ts          Self-hosted font imports (@fontsource)
  index.css         Global styles + red/purple theme CSS variables
  main.tsx          Application entry point
  router.tsx        Router instance (hash history)
  queryClient.ts    Shared TanStack Query client

Theming

The site defaults to the red theme; visitors can switch to purple via the toggle button in the navigation bar. The chosen theme is persisted in localStorage and restored on future visits. See aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/business-rules.md for the full theme business rules.

Deployment Notes

This app builds to a plain static bundle (npm run build → dist/), intended for upload to a traditional web host via FTP. TanStack Router uses hash-based history (/#/route) so that client-side routing keeps working even on hosts without server-side rewrite rules configured. See the feature's NFR Requirements/Design documentation under aidlc-docs/features/react-frontend/ for the rationale.