# SLP Software — React Frontend

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](https://vitejs.dev/) + React + TypeScript
- [Tailwind CSS](https://tailwindcss.com/) for styling (theme tokens via CSS custom properties)
- [TanStack Router](https://tanstack.com/router) (hash-based history, for FTP/static hosting compatibility)
- [TanStack Query](https://tanstack.com/query) (placeholder query hook, prepared for future backend integration)
- [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/react)
- ESLint + Prettier

## Getting Started

```bash
pnpm install
pnpm dev
```

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

## Available Scripts

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

## Project Structure

```text
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 (`pnpm 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.