# Spec — Front marketing SEO Insight (sbinnovate)

> Cadrage de la home page marketing. Réutilise le template **Agenforce AI** (Aceternity UI Pro) en gardant le design, réorganise en 11 sections selon `docs/brief-site-front.md`, passe le site en **FR + EN (i18n)**, et optimise le code.
> Date : 2026-06-14 · Stack : Next.js 16.2.9 (App Router), React 19.2.7, Tailwind v4, motion, shadcn.

---

## 1. Objectif & contraintes

- **Garder le design du template tel quel** : réutiliser les composants existants, télécharger des blocs Aceternity pour les sections manquantes (même design system).
- **Réorganiser** en 11 sections suivant la structure recommandée du brief (§5).
- **i18n FR + EN** via le pattern natif Next.js 16 (`[lang]` + dictionnaires + `proxy.ts`).
- **Pricing** étendu à 4 tiers + toggle mensuel/annuel + tableau comparatif (brief §4).
- **Assets** : on n'a que `dashboard-keywords.webp` + `dashboard-overview.webp` ; lister le reste à produire, réutiliser les 2 existants comme placeholders.
- **Optimiser le code** : rapatrier les images distantes, factoriser les duplications, soigner `next/image`.

### Décisions actées (brainstorming)
| Sujet | Décision |
|---|---|
| Langue | FR + EN (i18n) |
| Structure | Réorganiser selon les 11 sections du brief |
| i18n | Pattern natif `[lang]` + dictionnaires + `proxy.ts` (zéro dépendance) |
| Pricing | 4 tiers + toggle mensuel/annuel + tableau comparatif |
| Assets | Lister à produire + réutiliser les 2 existants |
| Section MCP | Bloc spotlight code/terminal téléchargé |
| CTA final | Band CTA dédié téléchargé |
| Logo | SVG fourni par l'utilisateur |

---

## 2. Architecture i18n

Pattern natif documenté par Next.js 16 (`/docs/app/guides/internationalization`).

```
app/
  [lang]/
    layout.tsx              # root layout, <html lang>, generateStaticParams [{fr},{en}]
    (marketing)/
      layout.tsx            # Navbar + Footer (reçoivent le dict)
      page.tsx              # Home (11 sections)
      pricing/page.tsx      # Pricing 4 tiers
    (auth)/
      layout.tsx
      login/page.tsx
      signup/page.tsx
    dictionaries/
      fr.json               # source de vérité copy FR
      en.json               # traduction EN
    dictionaries.ts         # getDictionary(lang) + hasLocale (server-only)
proxy.ts                    # ex-middleware : détection Accept-Language → redirect /fr|/en
```

- **Locale par défaut : `fr`**. Locales : `['fr','en']`.
- `proxy.ts` (renommé depuis `middleware.ts` en v16) : redirige `/` et les chemins sans locale vers la locale détectée. `matcher: ['/((?!_next|.*\\..*).*)']`.
- `generateStaticParams` dans `app/[lang]/layout.tsx` → pages prérendues statiques (bon LCP/SEO).
- **Composants serveur** récupèrent `const dict = await getDictionary(lang)` et passent les strings nécessaires aux composants client (navbar mobile, FAQ accordéon, mode-toggle, pricing toggle) **via props** — aucune lib i18n côté client, bundle inchangé.
- `dict` typé : `getDictionary` retourne le type inféré de `fr.json`.

---

## 3. Mapping section par section

Légende : ✅ reuse (composant existant, on refill le copy) · ⬇️ download (bloc Aceternity à télécharger) · 🔧 extend.

| # | Section | Composant | Action | Assets |
|---|---|---|---|---|
| 1 | Hero | `Hero` + `LandingImages` | ✅ | overview ✓ + keywords ✓ |
| 2 | Preuve sociale (sources) | `LogoCloud` | ✅ | 🆕 logos sources |
| 3 | Le problème | *(nouveau)* `components/problem/` | ⬇️ | optionnel illustration |
| 4 | Solution / pipeline | *(nouveau)* `components/pipeline/` | ⬇️ | construit en code (icônes) |
| 5 | Modules (Keywords/Backlink/Contenu) | `Features` (3 bento) | ✅ | keywords ✓ · 🆕 backlinks · 🆕 content |
| 6 | MCP / Agents-Ready ⭐ | *(nouveau)* `components/mcp/` (spotlight code/terminal) | ⬇️ | 🆕 visuel MCP |
| 7 | Multi-source & GSC | `FeaturesSecondary` | ✅ | 🆕 pastilles sources · 🆕 matrice GSC |
| 8 | Équipe / multi-org | `FeaturesTertiary` (4 cards) | ✅ | optionnel org switcher |
| 9 | Pricing | `Pricing` (refait 4 tiers) | ⬇️ + 🔧 | — (data) |
| 10 | FAQ | `FAQs` | ✅ | — |
| 11 | CTA final + footer | *(nouveau band)* `components/cta/` + `Footer` | ⬇️ + ✅ | logo |

Nouvel ordre dans `app/[lang]/(marketing)/page.tsx` :
`Hero → LogoCloud → Problem → Pipeline → Features(modules) → MCP → FeaturesSecondary(multi-source+GSC) → FeaturesTertiary(multi-org) → Pricing → FAQs → CTA`.

### Contenu par section (copy FR — source de vérité dans `fr.json`)

**1. Hero** — H1 « Tout votre SEO, du mot-clé à la publication — et prêt pour vos agents IA. » · Sous-titre « Réservoir de mots-clés multi-source, backlinks, pipeline de contenu et serveur MCP intégré. Une seule plateforme, multi-sites, multi-équipes. » · CTA primaire « Démarrer l'essai gratuit » + secondaire « Voir les forfaits » · note « 14 jours, sans carte bancaire ».

**2. Preuve sociale** — « Importez vos données depuis vos outils SEO » · logos : Semrush, Ahrefs, Mangools, SE Ranking, Google Search Console.

**3. Le problème** — « Votre stack SEO est éclatée en 5 outils. » 3–4 points de douleur : jonglage entre SaaS, données écrasées sans source/date, pas d'accès agents IA, reporting fragmenté.

**4. Solution / pipeline** — « Un seul pipeline, du mot-clé à l'article publié. » 6 étapes : **Réservoir → Recherche → Planning → Dispatch → Contenu → En ligne**.

**5. Modules (3 bento)** — *Keywords* « Réservoir multi-source, KD, tendances 12 mois, quick-wins GSC. » · *Backlink* « Réservoir de ~380 sources curées, profil entrant, DA, dofollow. » · *Contenu* « Pipeline Kanban Idée → Brief → Rédaction → Relecture → Publié. »

**6. MCP / Agents-Ready ⭐** — « Branchez Claude et vos agents sur votre donnée SEO. » Serveur MCP intégré, quota mensuel par forfait, packs de crédits, clés API. (bloc code/terminal)

**7. Multi-source & GSC** — 2 cartes : *Multi-source par date de MAJ* « Chaque métrique garde sa source et sa date — pas d'écrasement aveugle. » · *Google Search Console intégré* « Quick-wins (positions 11–20), matrice de couverture par pays. »

**8. Équipe / multi-org** — 4 cartes : Organisations · Rôles (owner/admin/membre) · Invitations d'équipe · Sièges extensibles. « Pensé pour les agences. »

**9. Pricing** — voir §4 ci-dessous.

**10. FAQ** — essai 14 j sans CB · sièges supplémentaires · packs de crédits MCP · intégrations par forfait · annulation.

**11. CTA final** — « Démarrez votre essai gratuit » · « 14 jours, sans carte bancaire » · bouton.

---

## 4. Pricing (4 tiers + toggle)

Données figées depuis le brief §4 (le repo `seo-insight` `src/lib/billing/plans.ts` n'est pas accessible ici → on hardcode dans `lib/pricing.ts`, à resynchroniser manuellement).

| | Solo | Starter | Pro ⭐ | Agency |
|---|---|---|---|---|
| Mensuel | 9,99 $ | 49 $ | 129 $ | 299 $ |
| Annuel (équiv./mois) | 7,99 $ | 39 $ | 99 $ | 239 $ |
| Mots-clés | 100 | 500 | 1 500 | 5 000 |
| Projets | 1 | 5 | 15 | 40 |
| Sièges | 1 | 1 | 3 | 10 |
| Intégrations | 1 | 2 | 5 | illimité |
| Lignes backlink | 10 000 | 100 000 | 500 000 | 2 000 000 |
| Requêtes MCP/mois | 1 000 | 10 000 | 100 000 | 500 000 |

- **Toggle mensuel/annuel** ; en annuel, afficher l'équivalent /mois + badge **−20 %**.
- **Pro** mis en avant (« Le plus populaire »).
- CTA primaire : **« Démarrer l'essai gratuit »** (14 j, sans CB).
- Sous la grille : add-ons — **Siège supplémentaire** 19 $/mo (Pro & Agency) · **Pack crédits MCP** 25 $ / 25 000 req.
- 4 cartes + tableau comparatif détaillé en dessous.
- La section `Pricing` actuelle (2 cartes) est **remplacée** par le bloc 4 colonnes téléchargé, adapté au design system.

---

## 5. Assets

### Fournis par l'utilisateur
- **Blocs Aceternity à télécharger** : (3) Problème/comparaison · (4) Pipeline/process steps · (9) Pricing 4 colonnes + toggle + tableau · (6) MCP spotlight code/terminal · (11) Band CTA final.
- **Logo SEO Insight** : SVG (+ favicon).

### Déjà présents
- `public/home/dashboard-keywords.webp`, `public/home/dashboard-overview.webp`.

### À produire (placeholders = les 2 existants en attendant)
- **Logos sources** `public/brands/*.{webp,svg}` : `semrush`, `ahrefs`, `mangools`, `se-ranking`, `gsc` (+ `stripe`, `claude` pour MCP).
- **Screenshots modules** `public/home/` : `dashboard-backlinks.webp`, `dashboard-content.webp` (Kanban).
- **Visuels** : vue multi-source (pastilles + tooltip), matrice de couverture GSC, écran MCP (clés API / jauge quota), org switcher (optionnel).
- **Images distantes à rapatrier en local** : `assets.aceternity.com/screenshots/3-6.jpg` (utilisées par `Speed`/`Outcomes` — ces composants seront remplacés/refondus, mais toute image conservée passe en webp local).

---

## 6. Branding & SEO

- Rebrand **Agenforce → SEO Insight** : `components/logo.tsx`, navbar (libellés FR : Fonctionnalités / Modules / Tarifs / FAQ), footer (liens produit/société, copyright sbinnovate).
- `generateMetadata` par locale (title/description ciblant : « suite SEO », « outil SEO MCP », « plateforme SEO agence », « SEO agents IA », « SEO pipeline »).
- **JSON-LD** : `SoftwareApplication` + `Offer` (grille §4) + `Organization`.
- **OpenGraph** : image = `dashboard-overview.webp`.
- `sitemap.ts` + `robots.ts` (les deux locales).
- Optimisation GEO via skill `seo-geo` **après** rédaction du contenu (hors périmètre de ce spec).

---

## 7. Optimisation code

- **Rapatrier les images distantes** en webp local → supprime `images.remotePatterns` de `next.config.ts`, améliore LCP/CLS.
- `next/image` : `priority` sur le Hero, `sizes` corrects, blur placeholder.
- **Factoriser** `CardContent` / `CardDescription` / `CardSkeleton` dupliqués entre `features-secondary` et `features-tertiary` → `components/features/shared.tsx`.
- Centraliser tout le copy dans les dictionnaires (DRY, prêt i18n).
- Hors périmètre (skill dédié `nextjs-oxc`) : oxlint / oxfmt / knip — proposable après.

---

## 8. Découpage en phases (pour le plan d'implémentation)

1. **Infra i18n** : `[lang]` + dictionnaires + `proxy.ts` + `generateStaticParams` + déplacement des routes existantes. *(Vérifier compat `proxy.ts` Next 16 — pas `middleware.ts`.)*
2. **Branding** : logo, navbar, footer, metadata de base.
3. **Sections reuse** (refill copy depuis dict) : Hero, LogoCloud, Features, FeaturesSecondary, FeaturesTertiary, FAQs.
4. **Sections download** (intégration des blocs) : Problème, Pipeline, MCP, Pricing 4 tiers, CTA final.
5. **Assets** : intégrer logos sources + screenshots (placeholders), rapatrier images distantes.
6. **SEO/meta** : JSON-LD, OG, sitemap/robots.
7. **Optimisation** : factorisation, nettoyage `next.config.ts`, audit `next/image`.
8. **Vérif** : build + `browser_eval` FR/EN sur la home, /pricing, /login, /signup.

---

## 9. Hors périmètre

- Rédaction SEO long-form (skill `seo-eeat`/`seo-geo`).
- Connexion réelle billing/Stripe (le front affiche la grille, pas de checkout).
- Production graphique fine des screenshots (placeholders d'abord).
- Pages légales (privacy/terms) — liens présents, contenu ultérieur.