Client famille2026·~2 h portail-à-portail·Dev full-stack + DA + copywriting + scraping Wix

Un Wix de 2007 refondu en Next 14 luxe, en un jour.

SARL Archimaides — refonte from scratch d’un Wix moisi de 2007 en site Next 14 luxe en 1 jour de build.

  • 98/93/100/100Lighthouse desktop
  • 24 pagesApp Router générées
  • ~2 hBuild portail-à-portail
  • ~750 €/hROI horaire deal famille
Contexte

Refonte d’un Wix de 2007 pour un cabinet d’archi d’intérieur.

Client : Alain. Architecte d’intérieur, Toulouse.

Build-day 2026-04-27 : ~2 heures portail-à-portail, 24 pages générées, refonte from scratch d’un Wix lazy-load qu’aucun scraper (même Playwright) n’arrivait à attaquer proprement. Photos remplacées par des placeholders typographiques quand la qualité Wix scrape ne passait pas.

Architecture

Trois couches, source unique de vérité.

Tout le contenu typé en TS, motion / SEO factorisés, App Router 24 pages structurées par intention.

  1. L1

    Source unique lib/company.ts

    SIREN, SIRET, capital, équipe, stats, coordonnées — un seul fichier typé. Tous les composants importent depuis là. Modif info légale = 1 patch, jamais 24.

  2. L2

    Motion + SEO factorisés

    lib/motion.ts pour les variants Framer Motion réutilisables. lib/seo.ts expose buildPageMetadata et buildLocalBusinessJsonLd — chaque page n’écrit que ses overrides.

  3. L3

    App Router 24 pages

    5 marketing + 6 détails projets + 3 prestations + 3 légales + sitemap + robots + manifest + OG dynamique. Tout en RSC sauf les composants motion isolés dans des fichiers voisins client.

Stack

Next 14 luxe, Inter only, lavande poudré.

01

Runtime

  • Next.js 14.2.35 App Router
  • TypeScript strict
  • Node 20
02

Frontend

  • Tailwind 3.4
  • Framer Motion 12
  • Lucide-react
  • react-hook-form
03

Backend

  • Resend API
  • next/og
04

DA

  • Inter / Inter Tight uniquement
  • ivoire #FAFAF7
  • ink #18181B
  • accent lavande #B5AFD0
  • deep #8E87B5
Décisions clés

Quatre choix qui ont défini la DA.

  1. 01

    DA Lumière

    Palette serrée : ivoire #FAFAF7 + ink #18181B + accent lavande poudré #B5AFD0 + deep #8E87B5. Le deep est arrivé pour résoudre un problème de luminance trop proche du fond ivoire sur les barres scaleX.

  2. 02

    Inter only — règle absolue

    Inter et Inter Tight uniquement. Jamais d’italique. Jamais d’autre fonte. Geist Mono indispo dans next/font à la date du build : remplacé par JetBrains Mono là où nécessaire.

  3. 03

    ProjectPlaceholder typographique

    Photos client en lazy-load Wix : qualité scrape insuffisante. Remplacement par un composant ProjectPlaceholder typographique (lettrage projet + accent lavande) en attendant un shoot HD propre.

  4. 04

    SectionLabel distinct de MetaLabel

    Barre lavande scaleX tracée sur SectionLabel uniquement. MetaLabel reste plat. Évite la confusion hiérarchique sur les pages projets denses.

Métriques

Ce qui s’est mesuré, pas ce qui se raconte.

98/93/100/100
Lighthouse desktop
perf · a11y · best practices · SEO
0,3 KB
Bundle First Load JS
shared chunks compressés
0,9 s
FCP
2,3 s
LCP
0
Pages App Router
5 marketing + 6 projets + 3 prestations + 3 légales + utilitaires
0
Projets HD intégrés
fiches détaillées + galeries
18 - 96 k€
Estim. CA additionnel an 1
conv 0.5 - 2 % sur « architecte intérieur Toulouse »
Code

lib/seo.ts · LocalBusiness JSON-LD

Source unique pour le SEO local — réutilisée par chaque page concernée.

typescript
import type { Metadata } from "next";
import { COMPANY } from "./company";

export function buildPageMetadata(over: Partial<Metadata> = {}): Metadata {
  return {
    title: { default: COMPANY.name, template: `%s · ${COMPANY.name}` },
    description: COMPANY.tagline,
    metadataBase: new URL(COMPANY.url),
    openGraph: { type: "website", siteName: COMPANY.name },
    ...over,
  };
}

export function buildLocalBusinessJsonLd() {
  return {
    "@context": "https://schema.org",
    "@type": "InteriorDesignStudio",
    name: COMPANY.name,
    url: COMPANY.url,
    telephone: COMPANY.phone,
    address: {
      "@type": "PostalAddress",
      streetAddress: COMPANY.address.street,
      addressLocality: COMPANY.address.city,
      postalCode: COMPANY.address.zip,
      addressCountry: "FR",
    },
    geo: { "@type": "GeoCoordinates", latitude: COMPANY.geo.lat, longitude: COMPANY.geo.lng },
    areaServed: COMPANY.areaServed,
  };
}

Lessons / Next

Ce que ce projet a gravé.

  1. Geist Mono indispo dans next/font à la date du build → fallback JetBrains Mono. Toujours checker la dispo next/font avant figer la DA.
  2. Page avec `export const metadata` ne peut pas être 'use client' — extraire les composants motion dans un fichier voisin client.
  3. Lazy-load Wix : impossible à scraper proprement, même Playwright timeout. Reshoot HD plutôt que s’acharner sur le scrape.
  4. Accent lavande poudré trop proche du fond ivoire en luminance — swap vers accent-deep #8E87B5 pour la visibilité des barres scaleX.