Brief de site — CABINET DENTAIRE CHANTAVRIL 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 CHANTAVRIL SA
• Lieu : Nyon, canton de VD
• Activité : dentist
• IDE Zefix : CHE420111679
• 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 CHANTAVRIL SA à Nyon. 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 Nyon 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 Chantavril 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) — 3 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 Chantavril SA",
    "tagline": "Soins dentaires à Nyon",
    "primary_color": "#0f3a4a",
    "accent_color": "#c8a96a"
  },
  "seo": {
    "title": "Cabinet dentaire Chantavril SA — Nyon",
    "description": "Cabinet dentaire à Nyon : soins généraux, esthétique, implantologie et prévention. Une équipe à l'écoute, des soins adaptés à chaque patient.",
    "schema_type": "Dentist",
    "language": "fr"
  },
  "hero": {
    "title": "Votre cabinet dentaire au cœur de Nyon",
    "subtitle": "Des soins dentaires précis et un suivi personnalisé, dans un cadre serein.",
    "cta_label": "Prendre rendez-vous",
    "cta_href": "#contact"
  },
  "about": {
    "title": "Le cabinet",
    "body": "Le Cabinet dentaire Chantavril réunit à Nyon une équipe de praticiens engagés dans une dentisterie moderne et respectueuse. Nous prenons le temps d'écouter, d'expliquer et de proposer des solutions adaptées à chaque situation.\n\nDe la consultation de routine aux traitements plus complexes, notre approche reste la même : des soins de qualité, une information claire et un environnement où chaque patient se sent en confiance.\n\nNous accueillons adultes et enfants, en français comme dans plusieurs autres langues, et collaborons avec un réseau de spécialistes pour assurer une prise en charge complète."
  },
  "services": [
    {
      "name": "Soins généraux",
      "description": "Contrôles, détartrages et traitements des caries pour préserver votre santé bucco-dentaire.",
      "icon": "🦷"
    },
    {
      "name": "Dentisterie esthétique",
      "description": "Facettes, blanchiment et restaurations pour un sourire harmonieux et naturel.",
      "icon": "✨"
    },
    {
      "name": "Implantologie",
      "description": "Remplacement des dents manquantes par des implants durables et bien intégrés.",
      "icon": "🔩"
    },
    {
      "name": "Orthodontie",
      "description": "Alignement des dents pour adultes et enfants, y compris solutions par gouttières transparentes.",
      "icon": "😁"
    },
    {
      "name": "Prophylaxie",
      "description": "Hygiène professionnelle et prévention pour garder des dents saines sur la durée.",
      "icon": "🪥"
    },
    {
      "name": "Urgences dentaires",
      "description": "Prise en charge rapide des douleurs et incidents pendant les heures d'ouverture.",
      "icon": "🚨"
    }
  ],
  "team": [
    {
      "name": "À COMPLÉTER",
      "role": "Médecin-dentiste",
      "bio": null
    },
    {
      "name": "À COMPLÉTER",
      "role": "Hygiéniste dentaire",
      "bio": null
    },
    {
      "name": "À COMPLÉTER",
      "role": "Assistante dentaire",
      "bio": null
    }
  ],
  "testimonials": [
    {
      "quote": "Une équipe à l'écoute et des explications claires à chaque étape du traitement. Je recommande sans hésiter.",
      "author": "Patient du cabinet",
      "role": null
    },
    {
      "quote": "Accueil chaleureux et soins très soignés. On sent que le travail est fait avec rigueur.",
      "author": "Patiente du cabinet",
      "role": null
    }
  ],
  "contact": {
    "phone": "À COMPLÉTER",
    "email": "À COMPLÉTER",
    "address": "À COMPLÉTER, Nyon",
    "hours": "Lu-Ve 8h-18h",
    "google_maps_url": null
  },
  "city": "Nyon",
  "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 CHANTAVRIL SA",
  "description": "Cabinet dentaire à Nyon : soins généraux, esthétique, implantologie et prévention. Une équipe à l'écoute, des soins adaptés à chaque patient.",
  "url": "https://cabinet-dentaire-chantavril-sa.preview.mtth.agency",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "À COMPLÉTER, Nyon",
    "addressLocality": "Nyon",
    "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-chantavril-sa-qc0x72
• Local path : ~/sites/clients/cabinet-dentaire-chantavril-sa-qc0x72
• Deploy target (sur VPS agency) : /var/www/copy-paste/previews/cabinet-dentaire-chantavril-sa/
• Preview URL : https://cabinet-dentaire-chantavril-sa.preview.mtth.agency

# 1. Bootstrap le projet (utilise EXACTEMENT ce nom de dossier)
mkdir -p ~/sites/clients/cabinet-dentaire-chantavril-sa-qc0x72
cd ~/sites/clients/cabinet-dentaire-chantavril-sa-qc0x72
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-chantavril-sa/

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

Le sous-domaine cabinet-dentaire-chantavril-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).