# Aimpress Site

## Commands

```bash
npm run dev        # Start Vite dev server
npm run build      # Type-check (tsc -b) then Vite build
npm run lint       # ESLint
npm run preview    # Preview production build
```

## Architecture

React 19 + TypeScript single-page application built with Vite.

**Entry point:** `src/main.tsx` → `src/App.tsx`

**Page structure** (top to bottom in `App.tsx`):
- `InteractiveBackground` — canvas/animated background layer
- `Header`
- `Hero`, `Benefits`, `Banner1`, `RealResults`, `Timeline`, `Banner2`, `ComparisonTable`, `BlogSection`, `ResourcesSection`, `ContactSection`
- `Footer`

**Firebase:** `src/firebase.ts` — handles form submissions (Firestore/Firebase backend).

## Key Patterns

**Component styling:** Every component has a paired CSS file (`ComponentName.tsx` + `ComponentName.css`). Import the CSS directly in the component file.

**Design tokens** (defined in `src/index.css` `:root`):
- `--light-grey-100: #D3DDDE`
- `--dark-grey-100: #233038` (page background)
- `--dark-teal-100: #075056`
- `--orange-100: #FF5B04` (primary accent)
- `--yellow-100: #FCA82E`
- `--font-primary: 'Inter', sans-serif`

**Animations:** Framer Motion for scroll-triggered and interactive animations. `react-intersection-observer` used alongside Framer Motion for viewport-based triggers.

**Font:** Self-hosted Inter (weights 300–900) loaded via `@font-face` in `src/index.css`, served from `public/font/Inter/`.

**Base styles:** CSS reset in `src/index.css`. Dark background (`--dark-grey-100`), light text (`--light-grey-100`).

## Active Technologies
- TypeScript 5.x, React 19 + None added (custom i18n solution — no library needed for 2 languages + ~200 strings) (001-multi-language)
- localStorage for language preference (001-multi-language)

## Recent Changes
- 001-multi-language: Added TypeScript 5.x, React 19 + None added (custom i18n solution — no library needed for 2 languages + ~200 strings)