# Front marketing SEO Insight — Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Transformer le template Agenforce en front marketing SEO Insight bilingue (FR/EN), réorganisé en 11 sections selon le brief, avec pricing 4 tiers, en gardant le design du template. **Architecture:** i18n natif Next.js 16 (`app/[lang]/` + dictionnaires JSON server-only + `proxy.ts`). Tout le copy vit dans `fr.json`/`en.json` (source de vérité unique). Les composants serveur lisent le dict et passent les strings aux composants client via props. Pas de lib i18n. **Tech Stack:** Next.js 16.2.9 (App Router), React 19.2.7, TypeScript 5, Tailwind v4, motion, shadcn, `next/font`. **Convention de vérification :** le projet n'a pas de harnais de tests unitaires (et un site marketing présentationnel n'en justifie pas — YAGNI). La vérification de chaque tâche = `bun run build` (typecheck + compile) + `browser_eval` pour le rendu. Les seules logiques testables (détection locale, chargement dict, calcul prix) sont vérifiées par assertion inline ou rendu navigateur. **Pré-requis utilisateur (bloque la Phase 4 & 5) :** - Télécharger 5 blocs Aceternity → déposer dans `components/_downloaded/` : `problem.tsx`, `pipeline.tsx`, `mcp.tsx`, `pricing-4col.tsx`, `cta.tsx`. - Fournir le logo SVG SEO Insight → `public/brands/seo-insight.svg` (+ favicon `app/favicon.ico`). - Les screenshots/logos sources sont produits plus tard ; placeholders = les 2 webp existants. **Git :** travail sur la branche `feature/marketing-front-seo-insight` (déjà créée). Commits Conventional Commits après chaque tâche. --- ## File Structure ``` proxy.ts # NEW — détection locale + redirect app/ globals.css # unchanged (importé via ../globals.css) favicon.ico # remplacé par le favicon SEO Insight [lang]/ # NEW segment layout.tsx # NEW root layout (html lang dynamique, fonts, theme, generateStaticParams) dictionaries.ts # NEW getDictionary + hasLocale + types dictionaries/ fr.json # NEW copy FR (source de vérité) en.json # NEW copy EN sitemap.ts # NEW robots.ts # NEW (marketing)/ layout.tsx # MOVED — Navbar+Footer reçoivent dict page.tsx # MOVED — réordonné 11 sections pricing/page.tsx # MOVED (auth)/ layout.tsx # MOVED login/page.tsx # MOVED signup/page.tsx # MOVED lib/ pricing.ts # NEW data plans + add-ons i18n.ts # NEW constantes locales components/ logo.tsx # MODIFY — SEO Insight navbar.tsx # MODIFY — dict + libellés footer.tsx # MODIFY — rebrand + dict hero.tsx # MODIFY — dict logo-cloud.tsx # MODIFY — logos sources features/index.tsx # MODIFY — 3 modules features/shared.tsx # NEW — Card* factorisés features-secondary/index.tsx # MODIFY — multi-source+GSC + import shared features-tertiary/index.tsx # MODIFY — multi-org + import shared faqs.tsx # MODIFY — dict mode-toggle.tsx # MODIFY — retirer console.log problem/index.tsx # NEW (intègre bloc téléchargé) pipeline/index.tsx # NEW mcp/index.tsx # NEW pricing.tsx # REWRITE — 4 tiers + toggle cta/index.tsx # NEW json-ld.tsx # NEW next.config.ts # MODIFY — retirer remotePatterns en fin ``` --- # PHASE 1 — Infrastructure i18n ### Task 1: Constantes locales + dictionnaires **Files:** - Create: `lib/i18n.ts` - Create: `app/[lang]/dictionaries.ts` - Create: `app/[lang]/dictionaries/fr.json` - Create: `app/[lang]/dictionaries/en.json` - [ ] **Step 1: Créer `lib/i18n.ts`** ```ts export const locales = ["fr", "en"] as const; export type Locale = (typeof locales)[number]; export const defaultLocale: Locale = "fr"; ``` - [ ] **Step 2: Créer `app/[lang]/dictionaries.ts`** ```ts import "server-only"; import type { Locale } from "@/lib/i18n"; const dictionaries = { fr: () => import("./dictionaries/fr.json").then((m) => m.default), en: () => import("./dictionaries/en.json").then((m) => m.default), }; export const hasLocale = (lang: string): lang is Locale => lang in dictionaries; export const getDictionary = async (lang: Locale) => dictionaries[lang](); export type Dictionary = Awaited>; ``` - [ ] **Step 3: Créer `app/[lang]/dictionaries/fr.json`** (source de vérité du copy) ```json { "nav": { "features": "Fonctionnalités", "modules": "Modules", "pricing": "Tarifs", "faqs": "FAQ", "login": "Connexion", "signup": "Inscription" }, "hero": { "title_line1": "Tout votre SEO, du mot-clé à la publication", "title_line2": "et prêt pour vos agents IA.", "subtitle": "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_primary": "Démarrer l'essai gratuit", "cta_secondary": "Voir les forfaits", "trial_note": "14 jours, sans carte bancaire" }, "logocloud": { "title": "Importez vos données depuis vos outils SEO", "subtitle": "Semrush, Ahrefs, Mangools, SE Ranking, Google Search Console." }, "problem": { "title": "Votre stack SEO est éclatée en 5 outils.", "subtitle": "Jongler entre des SaaS qui ne se parlent pas vous coûte du temps et de la donnée propre.", "points": [ { "title": "5 abonnements, 0 cohérence", "description": "Mots-clés ici, backlinks là, contenu ailleurs — rien n'est relié." }, { "title": "Données écrasées", "description": "Vos imports s'écrasent sans garder ni la source ni la date de mise à jour." }, { "title": "Invisibles pour vos agents IA", "description": "Aucun de ces outils n'expose sa donnée à Claude ou ChatGPT." }, { "title": "Reporting fragmenté", "description": "Recoller les performances entre outils est un travail manuel sans fin." } ] }, "pipeline": { "title": "Un seul pipeline, du mot-clé à l'article publié.", "subtitle": "SEO Insight couvre toute la chaîne dans un seul produit, multi-sites et multi-organisations.", "steps": [ { "title": "Réservoir", "description": "Tous vos mots-clés, multi-source, par date de MAJ." }, { "title": "Recherche", "description": "Position GSC, quick-wins, couverture par pays." }, { "title": "Planning", "description": "Chambre de briefing : SERP, on-page, briefs." }, { "title": "Dispatch", "description": "Validation avant production, par pays." }, { "title": "Contenu", "description": "Pipeline Kanban Idée → Brief → Rédaction → Publié." }, { "title": "En ligne", "description": "Perf GSC : clics, impressions, position, CTR." } ] }, "modules": { "title": "Tout le pipeline SEO, un seul outil", "subtitle": "Mots-clés, backlinks et contenu reliés — plus de jonglage entre 5 SaaS.", "keywords": { "title": "Keywords — Réservoir multi-source", "description": "Volume, KD, CPC, tendances 12 mois, intent, quick-wins GSC (positions 11–20)." }, "backlink": { "title": "Backlink — Sources curées", "description": "~380 sources curées, profil entrant, DA, dofollow, import par fournisseur." }, "content": { "title": "Contenu — Pipeline éditorial", "description": "Kanban Idée → Brief → Rédaction → Relecture → Publié, briefs par pays." } }, "mcp": { "title": "Branchez Claude et vos agents sur votre donnée SEO.", "subtitle": "Serveur MCP intégré : votre donnée SEO accessible à Claude, ChatGPT et tout client MCP. Quota mensuel par forfait, packs de crédits, clés API.", "bullets": [ "Serveur MCP intégré, natif", "Quota de requêtes MCP par forfait", "Packs de crédits à l'achat", "Clés API (Paramètres → API Keys)" ] }, "multisource": { "card_source_title": "Multi-source par date de MAJ", "card_source_description": "Chaque métrique garde sa source et sa date de mise à jour — pas d'écrasement aveugle. Bascule de vue par source.", "card_gsc_title": "Google Search Console intégré", "card_gsc_description": "Connexion par propriété, quick-wins, matrice de couverture par pays.", "items": [ { "title": "Import multi-fournisseurs", "description": "Semrush, Ahrefs, Mangools, SE Ranking, GSC." }, { "title": "Performance Rust", "description": "Parsers CSV/HTML Rust→WASM, import lourd Bun + DuckDB." }, { "title": "Sparklines par source", "description": "Tendances 12 mois conservées par fournisseur." } ] }, "team": { "items": [ { "title": "Multi-organisations", "description": "Gérez plusieurs orgs depuis un seul compte." }, { "title": "Rôles", "description": "Owner, admin, membre — accès contrôlé." }, { "title": "Invitations d'équipe", "description": "Invitez vos collègues et clients en quelques clics." }, { "title": "Sièges extensibles", "description": "Ajoutez des sièges sur Pro et Agency à 19 $/mo." } ] }, "pricing": { "eyebrow": "Tarifs", "title": "Tarification simple et transparente", "subtitle": "Essai 14 jours, sans carte bancaire. Annuel : −20 % minimum vs mensuel.", "toggle_monthly": "Mensuel", "toggle_yearly": "Annuel", "yearly_badge": "−20 %", "per_month": "/mo", "popular": "Le plus populaire", "cta": "Démarrer l'essai gratuit", "feature_labels": { "keywords": "Mots-clés", "projects": "Projets (sites)", "seats": "Sièges inclus", "integrations": "Intégrations", "backlinks": "Lignes backlink", "mcp": "Requêtes MCP / mois" }, "addons_title": "Add-ons", "addons": [ "Siège supplémentaire (Pro & Agency) : 19 $/mois (≈ 15,20 $/mo en annuel).", "Pack de crédits MCP : 25 $ pour 25 000 requêtes (ponctuel, cumulable)." ], "unlimited": "illimité" }, "faqs": { "title": "Questions fréquentes", "items": [ { "question": "Y a-t-il un essai gratuit ?", "answer": "Oui, 14 jours gratuits sans carte bancaire. Les limites de l'essai correspondent à Pro divisé par deux (750 mots-clés, 50 000 requêtes MCP)." }, { "question": "Puis-je ajouter des sièges ?", "answer": "Oui, sur les forfaits Pro et Agency : 19 $/mois par siège supplémentaire (≈ 15,20 $/mo en annuel)." }, { "question": "Comment fonctionnent les packs de crédits MCP ?", "answer": "Chaque forfait inclut un quota mensuel de requêtes MCP. Vous pouvez acheter des packs ponctuels et cumulables : 25 $ pour 25 000 requêtes." }, { "question": "Quelles intégrations sont disponibles ?", "answer": "Import multi-fournisseurs : Semrush, Ahrefs, Mangools, SE Ranking et Google Search Console. Le nombre d'intégrations dépend du forfait (illimité en Agency)." }, { "question": "Puis-je annuler à tout moment ?", "answer": "Oui, l'abonnement est sans engagement et résiliable depuis le portail client Stripe." } ] }, "cta": { "title": "Démarrez votre essai gratuit", "subtitle": "Tout votre SEO, du mot-clé à la publication — et prêt pour vos agents IA.", "button": "Démarrer l'essai gratuit", "note": "14 jours, sans carte bancaire" }, "footer": { "tagline": "La plateforme SEO tout-en-un, multi-source et prête pour les agents IA.", "cta": "Démarrer l'essai gratuit", "product": "Produit", "company": "Société", "newsletter": "Newsletter", "newsletter_note": "Les nouveautés produit et les coulisses, sans spam.", "email_placeholder": "Votre email", "rights": "Tous droits réservés.", "privacy": "Confidentialité", "terms": "Conditions" } } ``` - [ ] **Step 4: Créer `app/[lang]/dictionaries/en.json`** (même structure, traduction EN) ```json { "nav": { "features": "Features", "modules": "Modules", "pricing": "Pricing", "faqs": "FAQ", "login": "Login", "signup": "Sign up" }, "hero": { "title_line1": "All your SEO, from keyword to publish", "title_line2": "and ready for your AI agents.", "subtitle": "Multi-source keyword reservoir, backlinks, content pipeline and a built-in MCP server. One platform, multi-site, multi-team.", "cta_primary": "Start your free trial", "cta_secondary": "See pricing", "trial_note": "14 days, no credit card" }, "logocloud": { "title": "Import your data from your SEO tools", "subtitle": "Semrush, Ahrefs, Mangools, SE Ranking, Google Search Console." }, "problem": { "title": "Your SEO stack is scattered across 5 tools.", "subtitle": "Juggling SaaS that don't talk to each other costs you time and clean data.", "points": [ { "title": "5 subscriptions, 0 cohesion", "description": "Keywords here, backlinks there, content elsewhere — nothing is connected." }, { "title": "Overwritten data", "description": "Your imports overwrite each other without keeping source or update date." }, { "title": "Invisible to your AI agents", "description": "None of these tools expose their data to Claude or ChatGPT." }, { "title": "Fragmented reporting", "description": "Stitching performance across tools is endless manual work." } ] }, "pipeline": { "title": "One pipeline, from keyword to published article.", "subtitle": "SEO Insight covers the whole chain in a single product, multi-site and multi-organization.", "steps": [ { "title": "Reservoir", "description": "All your keywords, multi-source, by update date." }, { "title": "Research", "description": "GSC position, quick-wins, coverage by country." }, { "title": "Planning", "description": "Briefing room: SERP, on-page, briefs." }, { "title": "Dispatch", "description": "Validation before production, by country." }, { "title": "Content", "description": "Kanban pipeline Idea → Brief → Writing → Published." }, { "title": "Online", "description": "GSC perf: clicks, impressions, position, CTR." } ] }, "modules": { "title": "The whole SEO pipeline, one tool", "subtitle": "Keywords, backlinks and content connected — no more juggling 5 SaaS.", "keywords": { "title": "Keywords — Multi-source reservoir", "description": "Volume, KD, CPC, 12-month trends, intent, GSC quick-wins (positions 11–20)." }, "backlink": { "title": "Backlink — Curated sources", "description": "~380 curated sources, inbound profile, DA, dofollow, import per provider." }, "content": { "title": "Content — Editorial pipeline", "description": "Kanban Idea → Brief → Writing → Review → Published, briefs per country." } }, "mcp": { "title": "Plug Claude and your agents into your SEO data.", "subtitle": "Built-in MCP server: your SEO data accessible to Claude, ChatGPT and any MCP client. Monthly quota per plan, credit packs, API keys.", "bullets": [ "Built-in, native MCP server", "MCP request quota per plan", "Credit packs available to purchase", "API keys (Settings → API Keys)" ] }, "multisource": { "card_source_title": "Multi-source by update date", "card_source_description": "Every metric keeps its source and update date — no blind overwrite. Switch view by source.", "card_gsc_title": "Google Search Console built-in", "card_gsc_description": "Connect per property, quick-wins, coverage matrix by country.", "items": [ { "title": "Multi-provider import", "description": "Semrush, Ahrefs, Mangools, SE Ranking, GSC." }, { "title": "Rust performance", "description": "Rust→WASM CSV/HTML parsers, heavy import with Bun + DuckDB." }, { "title": "Sparklines per source", "description": "12-month trends kept per provider." } ] }, "team": { "items": [ { "title": "Multi-organization", "description": "Manage several orgs from a single account." }, { "title": "Roles", "description": "Owner, admin, member — controlled access." }, { "title": "Team invitations", "description": "Invite teammates and clients in a few clicks." }, { "title": "Extensible seats", "description": "Add seats on Pro and Agency at $19/mo." } ] }, "pricing": { "eyebrow": "Pricing", "title": "Simple, transparent pricing", "subtitle": "14-day free trial, no credit card. Annual: at least −20% vs monthly.", "toggle_monthly": "Monthly", "toggle_yearly": "Annual", "yearly_badge": "−20%", "per_month": "/mo", "popular": "Most popular", "cta": "Start your free trial", "feature_labels": { "keywords": "Keywords", "projects": "Projects (sites)", "seats": "Included seats", "integrations": "Integrations", "backlinks": "Backlink rows", "mcp": "MCP requests / month" }, "addons_title": "Add-ons", "addons": [ "Extra seat (Pro & Agency): $19/month (≈ $15.20/mo annually).", "MCP credit pack: $25 for 25,000 requests (one-time, stackable)." ], "unlimited": "unlimited" }, "faqs": { "title": "Frequently asked questions", "items": [ { "question": "Is there a free trial?", "answer": "Yes, 14 days free with no credit card. Trial limits match Pro divided by two (750 keywords, 50,000 MCP requests)." }, { "question": "Can I add seats?", "answer": "Yes, on Pro and Agency plans: $19/month per extra seat (≈ $15.20/mo annually)." }, { "question": "How do MCP credit packs work?", "answer": "Each plan includes a monthly MCP request quota. You can buy one-time, stackable packs: $25 for 25,000 requests." }, { "question": "Which integrations are available?", "answer": "Multi-provider import: Semrush, Ahrefs, Mangools, SE Ranking and Google Search Console. The number of integrations depends on your plan (unlimited on Agency)." }, { "question": "Can I cancel anytime?", "answer": "Yes, the subscription is commitment-free and can be cancelled from the Stripe customer portal." } ] }, "cta": { "title": "Start your free trial", "subtitle": "All your SEO, from keyword to publish — and ready for your AI agents.", "button": "Start your free trial", "note": "14 days, no credit card" }, "footer": { "tagline": "The all-in-one SEO platform, multi-source and AI-agent ready.", "cta": "Start your free trial", "product": "Product", "company": "Company", "newsletter": "Newsletter", "newsletter_note": "Product news and behind the scenes, no spam.", "email_placeholder": "Your email", "rights": "All rights reserved.", "privacy": "Privacy", "terms": "Terms" } } ``` - [ ] **Step 5: Commit** ```bash git add lib/i18n.ts "app/[lang]/dictionaries.ts" "app/[lang]/dictionaries/fr.json" "app/[lang]/dictionaries/en.json" git commit -m "feat(i18n): add locale constants and FR/EN dictionaries" ``` --- ### Task 2: Restructurer les routes sous `[lang]` **Files:** - Move: `app/(marketing)/*` → `app/[lang]/(marketing)/*` - Move: `app/(auth)/*` → `app/[lang]/(auth)/*` - Delete: `app/layout.tsx` - Create: `app/[lang]/layout.tsx` - [ ] **Step 1: Déplacer les dossiers de routes (git mv)** ```bash mkdir -p "app/[lang]" git mv "app/(marketing)" "app/[lang]/(marketing)" git mv "app/(auth)" "app/[lang]/(auth)" ``` - [ ] **Step 2: Créer le nouveau root layout `app/[lang]/layout.tsx`** (déplace fonts + theme depuis l'ancien `app/layout.tsx`, rend `lang` dynamique) ```tsx import type { Metadata } from "next"; import { Inter, Manrope } from "next/font/google"; import "../globals.css"; import { ThemeProvider } from "@/providers/theme-provider"; import { locales, type Locale } from "@/lib/i18n"; import { hasLocale } from "./dictionaries"; import { notFound } from "next/navigation"; const manrope = Manrope({ variable: "--font-manrope", subsets: ["latin"], weight: ["400", "500", "600", "700"], }); const inter = Inter({ variable: "--font-inter", subsets: ["latin"], weight: ["400", "500", "600", "700"], }); export const metadata: Metadata = { title: "SEO Insight — La plateforme SEO tout-en-un, prête pour vos agents IA", description: "Réservoir de mots-clés multi-source, backlinks, pipeline de contenu et serveur MCP intégré. Une seule plateforme, multi-sites, multi-équipes.", }; export function generateStaticParams() { return locales.map((lang) => ({ lang })); } export default async function RootLayout({ children, params, }: LayoutProps<"/[lang]">) { const { lang } = await params; if (!hasLocale(lang)) notFound(); return (
{children}
 ); } ``` - [ ] **Step 3: Supprimer l'ancien root layout** ```bash git rm "app/layout.tsx" ``` - [ ] **Step 4: Vérifier la compilation** Run: `bun run build` Expected: build PASS. Les routes affichées doivent être `/[lang]`, `/[lang]/pricing`, `/[lang]/login`, `/[lang]/signup`. Si erreur "params should be awaited", vérifier le `await params`. (`favicon.ico` et `globals.css` restent dans `app/`.) - [ ] **Step 5: Commit** ```bash git add -A git commit -m "feat(i18n): move routes under [lang] segment with dynamic root layout" ``` --- ### Task 3: Proxy de détection de locale **Files:** - Create: `proxy.ts` (racine du projet — ex-`middleware.ts`, renommé en Next 16) - [ ] **Step 1: Créer `proxy.ts`** ```ts import { NextResponse, type NextRequest } from "next/server"; import { locales, defaultLocale } from "@/lib/i18n"; function getLocale(request: NextRequest): string { const accept = request.headers.get("accept-language") ?? ""; const preferred = accept .split(",") .map((part) => part.split(";")[0].trim().slice(0, 2).toLowerCase()); const match = preferred.find((code) => (locales as readonly string[]).includes(code), ); return match ?? defaultLocale; } export function proxy(request: NextRequest) { const { pathname } = request.nextUrl; const hasLocale = locales.some( (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`, ); if (hasLocale) return; const locale = getLocale(request); request.nextUrl.pathname = `/${locale}${pathname}`; return NextResponse.redirect(request.nextUrl); } export const config = { matcher: ["/((?!_next|.*\\..*).*)"], }; ``` - [ ] **Step 2: Vérifier le build** Run: `bun run build` Expected: PASS, et le terminal liste `proxy` comme compilé (Next 16 reconnaît `proxy.ts`). - [ ] **Step 3: Vérifier le redirect au runtime** ```bash bun run dev ``` Puis avec `browser_eval` : `navigate` vers `http://localhost:3000/` → l'URL finale doit être `/fr` (ou `/en` selon Accept-Language). `navigate` vers `/pricing` → redirige vers `/fr/pricing`. Expected: redirection effective, page rendue sans erreur console. - [ ] **Step 4: Commit** ```bash git add proxy.ts git commit -m "feat(i18n): add proxy for Accept-Language locale detection" ``` --- # PHASE 2 — Branding ### Task 4: Logo SEO Insight **Files:** - Modify: `components/logo.tsx` - Asset attendu: `public/brands/seo-insight.svg` (fourni par l'utilisateur) - [ ] **Step 1: Réécrire `components/logo.tsx`** (wordmark SEO Insight ; utilise le SVG fourni s'il existe, sinon fallback `LogoIcon` actuel conservé) ```tsx import { cn } from "@/lib/utils"; import Link from "next/link"; import React from "react"; export const Logo = ({ className, lang = "fr", }: { className?: string; lang?: string; }) => { return ( SEO Insight ); }; export const LogoIcon = (props: React.SVGAttributes) => { return ( ); }; ``` > Note : si l'utilisateur fournit `public/brands/seo-insight.svg`, remplacer le `` inline par ``. Le placeholder loupe ci-dessus reste valide pour le build. - [ ] **Step 2: Build** Run: `bun run build` Expected: PASS. - [ ] **Step 3: Commit** ```bash git add components/logo.tsx git commit -m "feat(branding): replace Agenforce logo with SEO Insight" ``` --- ### Task 5: Navbar (dict + libellés localisés) **Files:** - Modify: `components/navbar.tsx` - [ ] **Step 1: Réécrire `components/navbar.tsx`** pour recevoir `dict` + `lang` et préfixer les liens par la locale ```tsx "use client"; import React, { useState } from "react"; import { Logo } from "./logo"; import { Container } from "./container"; import Link from "next/link"; import { Button } from "./ui/button"; import { IconLayoutSidebar, IconX } from "@tabler/icons-react"; import { AnimatePresence, motion } from "motion/react"; import type { Dictionary } from "@/app/[lang]/dictionaries"; type NavProps = { dict: Dictionary["nav"]; lang: string }; const useNavlinks = (dict: Dictionary["nav"], lang: string) => [ { title: dict.features, href: `/${lang}#modules` }, { title: dict.modules, href: `/${lang}#product` }, { title: dict.faqs, href: `/${lang}#faqs` }, { title: dict.pricing, href: `/${lang}/pricing` }, ]; export const Navbar = ({ dict, lang }: NavProps) => { return (
); }; const MobileNavbar = ({ dict, lang }: NavProps) => { const [open, setOpen] = useState(false); const navlinks = useNavlinks(dict, lang); return (
{open && (
{navlinks.map((item, index) => ( setOpen(false)} className="text-2xl text-neutral-600 dark:text-neutral-400 font-medium" > {item.title} ))}
{dict.login}
)}
); }; const DesktopNavbar = ({ dict, lang }: NavProps) => { const navlinks = useNavlinks(dict, lang); return (
{navlinks.map((item) => ( {item.title} ))}
{dict.login}
); }; ``` - [ ] **Step 2: Build** — `bun run build` (échouera tant que le layout marketing ne passe pas `dict`/`lang` ; corrigé en Task 14. Vérifier seulement l'absence d'erreur de type dans `navbar.tsx` via** `bunx tsc --noEmit`** si besoin, sinon committer et continuer.) - [ ] **Step 3: Commit** ```bash git add components/navbar.tsx git commit -m "feat(branding): localize navbar via dictionary" ``` --- ### Task 6: Footer (rebrand + dict) **Files:** - Modify: `components/footer.tsx` - [ ] **Step 1: Modifier `components/footer.tsx`** — signature `({ dict, lang }: { dict: Dictionary["footer"]; lang: string })`, remplacer : - `import type { Dictionary } from "@/app/[lang]/dictionaries";` en tête. - `Safe, observable, outcome-driven AI` → `{dict.tagline}` - `` → `{dict.cta}` - les titres de colonnes `Product`/`Company`/`Newsletter` → `{dict.product}` / `{dict.company}` / `{dict.newsletter}` - le copyright `Agenforce AI` → `SEO Insight` et `All rights reserved.` → `{dict.rights}` - placeholder email → `{dict.email_placeholder}`, note newsletter → `{dict.newsletter_note}` - liens `Privacy Policy`/`Terms of Service` → `{dict.privacy}` / `{dict.terms}` et `href={`/${lang}/privacy`}` / `href={`/${lang}/terms`}` - `` → `` - garder les listes `product`/`company` (liens `#` inchangés pour l'instant). - [ ] **Step 2: Commit** ```bash git add components/footer.tsx git commit -m "feat(branding): rebrand footer to SEO Insight with dictionary" ``` --- # PHASE 3 — Sections réutilisées (refill depuis le dict) ### Task 7: Hero **Files:** - Modify: `components/hero.tsx` - [ ] **Step 1: Réécrire `components/hero.tsx`** (reçoit `dict`/`lang`) ```tsx import React from "react"; import { Container } from "./container"; import { Heading } from "./heading"; import { Subheading } from "./subheading"; import { Button } from "./ui/button"; import Link from "next/link"; import { LandingImages } from "./landing-images"; import { GradientDivider } from "./gradient-divider"; import type { Dictionary } from "@/app/[lang]/dictionaries"; export const Hero = ({ dict, lang, }: { dict: Dictionary["hero"]; lang: string; }) => { return (
{dict.title_line1}
{dict.title_line2} {dict.subtitle}

{dict.trial_note}
); }; ``` - [ ] **Step 2: Commit** ```bash git add components/hero.tsx git commit -m "feat(home): refill hero with SEO Insight copy via dict" ``` --- ### Task 8: LogoCloud (logos sources) **Files:** - Modify: `components/logo-cloud.tsx` - [ ] **Step 1: Réécrire `components/logo-cloud.tsx`** — titre depuis dict, liste de logos = sources SEO. Utiliser des placeholders locaux qui pointeront vers `public/brands/*` (créés en Task 18). Tant que les fichiers n'existent pas, garder les URLs aceternity en commentaire et afficher les **noms** en attendant pour ne pas casser le build. ```tsx "use client"; import Image from "next/image"; import React from "react"; import { motion } from "motion/react"; import type { Dictionary } from "@/app/[lang]/dictionaries"; const sources = [ { title: "Semrush", src: "/brands/semrush.webp" }, { title: "Ahrefs", src: "/brands/ahrefs.webp" }, { title: "Mangools", src: "/brands/mangools.webp" }, { title: "SE Ranking", src: "/brands/se-ranking.webp" }, { title: "Google Search Console", src: "/brands/gsc.webp" }, ]; export const LogoCloud = ({ dict }: { dict: Dictionary["logocloud"] }) => { return (

{dict.title}
{dict.subtitle}

{sources.map((logo, index) => ( {logo.title} ))}
); }; ``` > Dépendance : les fichiers `public/brands/*.webp` sont ajoutés en Task 18. Si absent au moment du build, le build passe (next/image ne vérifie pas l'existence à la compilation) mais l'image sera cassée au runtime → c'est attendu jusqu'à Task 18. - [ ] **Step 2: Commit** ```bash git add components/logo-cloud.tsx git commit -m "feat(home): logo cloud shows SEO data sources" ``` --- ### Task 9: Features — 3 modules **Files:** - Modify: `components/features/index.tsx` - [ ] **Step 1: Modifier `components/features/index.tsx`** — signature `({ dict }: { dict: Dictionary["modules"] })`. Remplacer le `Heading`/`Subheading` par `dict.title`/`dict.subtitle`, et les 3 `CardTitle` par `dict.keywords.title`, `dict.backlink.title`, `dict.content.title`. (Garder les 3 `SkeletonOne/Two/Three` et la structure des cartes inchangées.) Ajouter `import type { Dictionary } from "@/app/[lang]/dictionaries";`. - [ ] **Step 2: Commit** ```bash git add components/features/index.tsx git commit -m "feat(home): map feature bento to Keywords/Backlink/Content modules" ``` --- ### Task 10: Factoriser les Card* partagés **Files:** - Create: `components/features/shared.tsx` - Modify: `components/features-secondary/index.tsx` - Modify: `components/features-tertiary/index.tsx` - [ ] **Step 1: Créer `components/features/shared.tsx`** (extrait les 3 helpers dupliqués à l'identique entre secondary & tertiary) ```tsx import React from "react"; import { cn } from "@/lib/utils"; export const CardContent = ({ children }: { children: React.ReactNode }) => { return
{children}
; }; export const CardDescription = ({ children, }: { children: React.ReactNode; }) => { return (

{children}

); }; export const CardSkeleton = ({ className, children, }: { className?: string; children?: React.ReactNode; }) => { return (
{children}
); }; ``` - [ ] **Step 2: Build** Run: `bun run build` Expected: PASS. - [ ] **Step 3: Commit** ```bash git add components/features/shared.tsx git commit -m "refactor(home): extract shared Card helpers" ``` --- ### Task 11: FeaturesSecondary — Multi-source & GSC **Files:** - Modify: `components/features-secondary/index.tsx` - [ ] **Step 1: Modifier `components/features-secondary/index.tsx`** : - Remplacer les helpers locaux `CardContent`/`CardDescription`/`CardSkeleton` par l'import `import { CardContent, CardDescription, CardSkeleton } from "@/components/features/shared";` (supprimer les définitions en bas de fichier). - Signature : `({ dict }: { dict: Dictionary["multisource"] })`. - Carte 1 titre → `dict.card_source_title`, desc → `dict.card_source_description`. - Carte 2 titre → `dict.card_gsc_title`, desc → `dict.card_gsc_description`. - Les 3 items du bas (Workflow/Integration/Human icons) : titres/desc → `dict.items[0..2]` (garder les icônes `WorkflowIcon`/`IntegrationIcon`/`HumanIcon`). - Ajouter `import type { Dictionary } from "@/app/[lang]/dictionaries";`. - [ ] **Step 2: Commit** ```bash git add components/features-secondary/index.tsx git commit -m "feat(home): map secondary features to Multi-source & GSC" ``` --- ### Task 12: FeaturesTertiary — Multi-org **Files:** - Modify: `components/features-tertiary/index.tsx` - [ ] **Step 1: Modifier `components/features-tertiary/index.tsx`** : - Remplacer les helpers locaux par l'import depuis `@/components/features/shared` (supprimer définitions en bas). - Signature : `({ dict }: { dict: Dictionary["team"] })`. - 4 cartes : titres → `dict.items[0..3].title`, desc → `dict.items[0..3].description` (Orgs / Rôles / Invitations / Sièges). Garder `SkeletonOne..Four` et les bordures. - Ajouter l'import `Dictionary`. - [ ] **Step 2: Commit** ```bash git add components/features-tertiary/index.tsx git commit -m "feat(home): map tertiary features to multi-org & teams" ``` --- ### Task 13: FAQs **Files:** - Modify: `components/faqs.tsx` - [ ] **Step 1: Modifier `components/faqs.tsx`** : - Signature : `({ dict }: { dict: Dictionary["faqs"] })`. - Supprimer le tableau `questions` hardcodé, utiliser `dict.items`. - Titre `Frequently Asked Questions` → `{dict.title}`. - Ajouter import `Dictionary`. (Garder le sous-composant `Question` et `UserChatIcon`.) - [ ] **Step 2: Commit** ```bash git add components/faqs.tsx git commit -m "feat(home): refill FAQs from dictionary" ``` --- ### Task 14: Marketing layout + home page (câblage dict) **Files:** - Modify: `app/[lang]/(marketing)/layout.tsx` - Modify: `app/[lang]/(marketing)/page.tsx` - Modify: `components/mode-toggle.tsx` (retirer `console.log`) - [ ] **Step 1: Réécrire `app/[lang]/(marketing)/layout.tsx`** (récupère dict, passe à Navbar/Footer) ```tsx import { Navbar } from "@/components/navbar"; import { Footer } from "@/components/footer"; import { getDictionary, hasLocale } from "@/app/[lang]/dictionaries"; import { notFound } from "next/navigation"; export default async function MarketingLayout({ children, params, }: LayoutProps<"/[lang]">) { const { lang } = await params; if (!hasLocale(lang)) notFound(); const dict = await getDictionary(lang); return ( <> {children}