Brief de site — Cabinet dentaire Carlsson SA

Pour Claude Code (ou agent dev équivalent) — ce prompt est self-contained. Colle-le tel quel après avoir bootstrappé un Next.js 16. Tout le contenu, l'architecture, les images et les contraintes sont dedans.

Identifiants du projet

Contexte commercial

• Client : Cabinet dentaire Carlsson SA
• Lieu : Moudon, canton de VD
• Activité : dentist
• IDE Zefix : CHE463524073
• Site actuel : —
• Template de référence : pro-cabinet-01 (cabinet pro — sobre, institutionnel)

Analyse du site existant (score 85/100)

Création complète d'un site vitrine pour Cabinet dentaire Carlsson SA à Moudon. Aucun site existant — opportunité greenfield, autonomie totale sur l'identité visuelle. Mettre en avant : présentation du cabinet, services, équipe (à compléter), prise de contact (téléphone + formulaire), horaires.

Cible : Habitants de Moudon et environs cherchant un dentist de confiance

Pourquoi le refaire :

• Aucun site web détecté — l'entreprise n'a pas de présence en ligne propre
• Cible commerciale prioritaire (no-site = besoin maximal)
• Greenfield : autonomie totale sur le design et la stratégie SEO

Identité visuelle

Configurer Tailwind v4 dans app/globals.css :

@import "tailwindcss";

@theme {
  --color-primary: #0f3a4a;
  --color-accent: #c8a96a;
  --color-ink: #1a1a1a;
  --color-ink-soft: #4a4a4a;
  --color-paper: #fafaf7;
  --color-line: #e6e3da;

  --font-serif: var(--font-display);
  --font-sans: var(--font-body);
}

Importer les fonts via next/font/google dans app/layout.tsx.

Stack technique imposée

• Next.js 16 (App Router, React 19, RSC, Turbopack)
• TypeScript 5 strict mode
• Tailwind CSS v4 (config dans app/globals.css avec @theme)
• TinaCMS auto-hébergé pour l'édition inline du client (config tina/config.ts, content sous content/)
• Fonts via Google Fonts (next/font/google)
• Schema.org JSON-LD dans app/layout.tsx
• Sitemap + robots + llms.txt (app/sitemap.ts, app/robots.ts, public/llms.txt)
• Build static : output: 'export' dans next.config.ts
• Déploiement : rsync out/ agency:/var/www/copy-paste/previews/{slug}/ puis URL = https://{slug}.preview.mtth.agency

Standards de qualité (non négociables)

• Lighthouse mobile : perf ≥ 90, SEO ≥ 95, a11y ≥ 95
• Mobile-first, max 3 breakpoints (md, lg, parfois xl)
• Touch targets ≥ 44px
• Contraste AA partout
• Pas de shadcn/ui générique — composants custom alignés sur l'identité visuelle
• Animations Framer Motion uniquement quand intentionnelles (pas de "fade in" automatique)
• Toutes les images en <Image> (next/image) avec alt rempli

Architecture du site

Le site est composé des sections suivantes, dans cet ordre :

1. Header sticky — logo (Cabinet dentaire Carlsson SA), nav (#about, #services, #team, #contact), CTA "Prendre rendez-vous"
2. Hero — headline + subtitle + CTA primaire + téléphone visible
3. À propos (#about) — narrative en 2-3 paragraphes
4. Services (#services) — grid de cartes (6 services)
5. Équipe (#team) — 1 membres avec rôle
6. Témoignages — 2 citations
7. Contact (#contact) — adresse, téléphone, email, horaires
8. Footer — copyright + lien discret mtth.agency

Contenu complet (à utiliser tel quel)

{
  "brand": {
    "name": "Cabinet dentaire Carlsson SA",
    "tagline": "Soins dentaires à Moudon",
    "primary_color": "#0f3a4a",
    "accent_color": "#c8a96a"
  },
  "seo": {
    "title": "Cabinet dentaire Carlsson SA — Dentiste à Moudon",
    "description": "Cabinet dentaire à Moudon : soins généraux, prévention, esthétique et urgences. Une équipe à l'écoute pour une santé bucco-dentaire durable.",
    "schema_type": "Dentist",
    "language": "fr"
  },
  "hero": {
    "title": "Votre cabinet dentaire au cœur de Moudon",
    "subtitle": "Des soins attentifs, dans un cadre apaisant, pour toute la famille.",
    "cta_label": "Prendre rendez-vous",
    "cta_href": "#contact"
  },
  "about": {
    "title": "Le cabinet",
    "body": "Le Cabinet dentaire Carlsson SA accueille les patients de Moudon et de la Broye dans un environnement moderne et chaleureux. Nous prenons le temps d'expliquer chaque traitement et de construire avec vous un suivi adapté.\n\nNotre approche repose sur la prévention, la transparence et l'usage de techniques actuelles. Adultes, enfants, situations d'urgence : nous adaptons nos soins à chaque besoin, avec rigueur et bienveillance."
  },
  "services": [
    {
      "name": "Médecine dentaire générale",
      "description": "Contrôles, soins de caries, traitements de routine et suivi régulier.",
      "icon": "🦷"
    },
    {
      "name": "Prévention et hygiène",
      "description": "Détartrage, conseils personnalisés et prophylaxie pour préserver vos dents.",
      "icon": "✨"
    },
    {
      "name": "Esthétique dentaire",
      "description": "Blanchiment, facettes et restaurations discrètes pour un sourire harmonieux.",
      "icon": "😊"
    },
    {
      "name": "Prothèses et implants",
      "description": "Solutions fixes ou amovibles pour remplacer une ou plusieurs dents.",
      "icon": "🔧"
    },
    {
      "name": "Endodontie",
      "description": "Traitements de racine pour conserver vos dents naturelles.",
      "icon": "🩺"
    },
    {
      "name": "Urgences dentaires",
      "description": "Prise en charge rapide en cas de douleur ou de traumatisme.",
      "icon": "🚨"
    }
  ],
  "team": [
    {
      "name": "Dr Carlsson",
      "role": "Médecin-dentiste, responsable du cabinet",
      "bio": null
    }
  ],
  "testimonials": [
    {
      "quote": "Accueil très professionnel et explications claires à chaque étape du traitement.",
      "author": "Patiente du cabinet",
      "role": null
    },
    {
      "quote": "Une équipe attentive qui met vraiment à l'aise, même les enfants.",
      "author": "Patient de Moudon",
      "role": null
    }
  ],
  "contact": {
    "phone": "À COMPLÉTER",
    "email": "À COMPLÉTER",
    "address": "À COMPLÉTER, 1510 Moudon",
    "hours": "Lu-Ve 8h-18h",
    "google_maps_url": null
  },
  "city": "Moudon",
  "canton": "VD"
}

Pour chaque section, le texte ci-dessus est définitif : copie-le tel quel dans le code (échappage HTML/JSX près des apostrophes). Pas de paraphrase, pas de "version courte". Si quelque chose te semble trop long, demande-moi avant de couper.

SEO et métadonnées

À inclure dans app/layout.tsx ou pages dédiées :

• <title> + <meta name="description">
• Open Graph (og:title, og:description, og:image, og:locale=fr_CH)
• Twitter Card summary_large_image
• JSON-LD LocalBusiness (cf. structure ci-dessous)

{
  "@context": "https://schema.org",
  "@type": "Dentist",
  "name": "Cabinet dentaire Carlsson SA",
  "description": "Cabinet dentaire à Moudon : soins généraux, prévention, esthétique et urgences. Une équipe à l'écoute pour une santé bucco-dentaire durable.",
  "url": "https://cabinet-dentaire-carlsson-sa.preview.mtth.agency",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "À COMPLÉTER, 1510 Moudon",
    "addressLocality": "Moudon",
    "addressRegion": "VD",
    "addressCountry": "CH"
  },
  "telephone": "À COMPLÉTER",
  "email": "À COMPLÉTER",
  "openingHours": "Lu-Ve 8h-18h"
}

Fichiers obligatoires :

• app/sitemap.ts listant la home + ancres principales
• app/robots.ts : Allow * pour la version live, Disallow tout pour la preview (X-Robots-Tag est déjà géré par Caddy)
• public/llms.txt : description courte + adresse + horaires (pour les LLM crawlers)

Images à utiliser

Logo

• Aucun logo détecté sur le site original
• Solution : composer un wordmark typographique avec la font display, lettres espacées, couleur primary

Image hero

• Pour cabinet pro : pas d'image hero photographique, le titre seul + un fond paper suffit (cf. template pro-cabinet-01)
• Si tu insistes pour une image : photo d'intérieur de cabinet (lumière naturelle, pas de visage), Unsplash query "dental clinic clean modern interior natural light"

OG image

• Générer un /opengraph-image.tsx (Next.js convention) qui rend une carte 1200×630 avec :
  • le nom de marque en grand (font display)
  • la tagline en petit dessous
  • couleur de fond paper, accent en bordure ou trait

Contenu détecté sur le site original (pour référence)

{
  "team": [],
  "hours": null,
  "contact": {},
  "has_blog": false,
  "services": [],
  "languages": [
    "fr"
  ],
  "has_booking": false
}

Workflow de livraison

Identifiants à respecter exactement — utilisés par tout le pipeline (DB, Caddy wildcard, dashboard).

• Repo name : cabinet-dentaire-carlsson-sa-jnpeg9
• Local path : ~/sites/clients/cabinet-dentaire-carlsson-sa-jnpeg9
• Deploy target (sur VPS agency) : /var/www/copy-paste/previews/cabinet-dentaire-carlsson-sa/
• Preview URL : https://cabinet-dentaire-carlsson-sa.preview.mtth.agency

# 1. Bootstrap le projet (utilise EXACTEMENT ce nom de dossier)
mkdir -p ~/sites/clients/cabinet-dentaire-carlsson-sa-jnpeg9
cd ~/sites/clients/cabinet-dentaire-carlsson-sa-jnpeg9
npx create-next-app@latest . --typescript --tailwind --app --no-src-dir --import-alias '@/*'

# 2. Lance Claude Code et colle ce PROMPT.md tel quel
claude

# 3. Une fois le site généré, configure le static export dans next.config.ts:
#    output: 'export'
# Puis build et déploie sur le VPS:
npm run build
rsync -az --delete out/ agency:/var/www/copy-paste/previews/cabinet-dentaire-carlsson-sa/

# 4. Vérifier en live
open https://cabinet-dentaire-carlsson-sa.preview.mtth.agency

Le sous-domaine cabinet-dentaire-carlsson-sa.preview.mtth.agency est déjà routé vers le VPS via wildcard Caddy + on-demand TLS — aucun config DNS à faire. Caddy émet le cert Let's Encrypt automatiquement à la première requête.

Checklist de revue avant livraison client

• Lighthouse mobile perf ≥ 90, SEO ≥ 95, a11y ≥ 95
• Test mobile réel (iPhone + Android) — pas juste DevTools
• Tous les CTA mènent quelque part (ancre, mailto, tel:, Cal.com)
• Schéma JSON-LD validé sur https://search.google.com/test/rich-results
• Pas de référence à mtth.agency visible (sauf footer discret)
• Favicon SVG + PNG fallback
• Toutes les images ont alt rempli en français
• X-Robots-Tag: noindex, nofollow sur la preview (Caddy le fait, mais vérifier)
• Form de contact si présent → POST vers Resend ou mailto:

Brief généré par mtth.agency — pipeline copy-paste. Données issues de l'analyse Claude Sonnet 4.6 (vision) sur (site original).