# MERKANTO — site web

Implementation of the **MERKANTO** marketing site, recreated from the Claude Design
handoff bundle in `project/` (see `Dossier MERKANTO.dc.html` and the Charte graphique).

MERKANTO is a consulting firm (financial engineering, tax engineering, digital
transformation) operating in Bénin, Côte d'Ivoire and France. The site is bilingual
(FR/EN) and follows the brand's charte graphique exactly.

## Stack

- **React 18 + Vite** — SPA
- **React Router** — page navigation
- Lightweight **i18n context** with `localStorage` persistence (key `mk_lang`)
- Design tokens as **CSS variables** in `src/styles.css` (copied from the charte)
- No UI library — styles mirror the original prototypes pixel-for-pixel

## Run

```bash
npm install
npm run dev      # dev server
npm run build    # production build -> dist/
npm run preview  # preview the production build
```

## Routes

| Path                   | Page                                            |
| ---------------------- | ----------------------------------------------- |
| `/`                    | Accueil (home)                                  |
| `/a-propos`            | À propos (about)                                |
| `/services`            | Services hub                                    |
| `/services/:slug`      | Service detail — `ingenierie`, `fiscalite`, `digital` |
| `/solutions`           | Solutions                                       |
| `/contact`             | Contact (form with success state, email only)   |
| `/charte`              | Charte graphique — standalone reference doc     |

## Structure

```
src/
  main.jsx            # entry: Router + LanguageProvider
  App.jsx             # routes
  i18n.jsx            # FR/EN context (localStorage)
  styles.css          # design tokens + base + hover/focus classes
  components/
    Logo.jsx          # MERKANTO symbol (navy on light, white on dark)
    Header.jsx        # sticky nav, active underline, FR/EN toggle
    Footer.jsx        # 4-column footer + legal links (RGPD)
    Layout.jsx        # Header + <Outlet/> + Footer, scroll reset
    ui.jsx            # Container, Eyebrow, GoldRule, Placeholder
  pages/              # Home, About, Services, ServiceDetail, Solutions, Contact, Charte
```

## Design fidelity notes

- **Colors / type / spacing / radii** come straight from the charte graphique
  (navy `#0A2540`, blue `#0E7CC7`, blue-dark `#0A5C94`, blue-light `#5BB4E8`,
  gold `#D4A017`; Manrope + JetBrains Mono; container 1240px / 40px gutter).
- The prototype's `style-hover` / `style-focus` pseudo-states are real CSS classes
  in `styles.css` (`.mk-cta-primary`, `.mk-card-hover`, `.mk-input`, …).
- Image areas are the same **striped placeholders** as the prototype — replace
  `.mk-placeholder` blocks with real photography (rounded 14–18px).
- Content matches the final state of the design chat: founded **2019**, **+100
  clients**, three countries, the three services **Ingénierie financière /
  Ingénierie fiscale / Transformation digitale**, and the full client reference list.

## To do for production (out of scope of the design)

- Wire the contact form to a real endpoint / email service (currently client-side success state only).
- Replace placeholder images with real photos.
- Add real legal pages behind the footer links (Mentions légales, Confidentialité, Cookies).
- Replace example Solutions content with real product info if desired.
