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 + 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.