# Homepage section architecture

The localized homepage is assembled in `src/app/[locale]/page.tsx`, but each visible section owns its component and, when needed, its CSS module under `src/components/homepage/sections`.

## Update one section

1. Edit only the matching component, for example `sections/WorkflowSection.tsx`.
2. Edit only its localized copy in `src/content/locales/en/homepage.json`, `fr/homepage.json`, and `ar/homepage.json`.
3. Keep reusable content transformation in `src/content/homepage-model.ts`.
4. Add or update the section-specific test.

Do not move section-specific styling into a global stylesheet. Shared design tokens and primitives remain global; layout and presentation unique to a section stay beside that section.

## Pricing

- UI and interaction: `sections/PricingSection.tsx`
- Section-only styles: `sections/PricingSection.module.css`
- Localized copy: `src/content/locales/{en,fr,ar}/homepage.json`
- Commercial values: `src/content/pricing-config.ts`

Public prices remain unavailable until `publicPricesApproved` is set to `true` and approved monthly prices are supplied for the supported plan and fleet-band combinations.
## Application shell preservation

The modular homepage sections do not own or replace the application shell. The existing `SiteHeader`, complete primary navigation, mobile navigation drawer, locale selector, theme selector, account action, and footer remain independent under `src/components/app-shell/`. The full Product, Workflow, Modules, Pricing, and FAQ navigation remains visible at laptop widths and is preserved in the mobile drawer at narrower widths.

