Brief de site — Cabinet dentaire Barthelemy 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 Barthelemy SA
• Lieu : Nyon, canton de VD
• Activité : dentist
• IDE Zefix : CHE331033942
• 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 Barthelemy 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 Barthelemy 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. Contact (#contact) — adresse, téléphone, email, horaires
7. Footer — copyright + lien discret mtth.agency

Contenu complet (à utiliser tel quel)

{
  "brand": {
    "name": "Cabinet dentaire Barthelemy SA",
    "tagline": "Médecine dentaire à Nyon",
    "primary_color": "#0f3a4a",
    "accent_color": "#c8a96a"
  },
  "seo": {
    "title": "Cabinet dentaire Barthelemy SA – Dentiste à Nyon",
    "description": "Cabinet dentaire à Nyon : soins, esthétique, implantologie et prévention. Prise de rendez-vous au +41 22 363 11 00. Équipe à votre écoute.",
    "schema_type": "Dentist",
    "language": "fr"
  },
  "hero": {
    "title": "Votre cabinet dentaire au cœur de Nyon",
    "subtitle": "Des soins dentaires complets, dans un cadre rassurant, pour toute la famille.",
    "cta_label": "Prendre rendez-vous",
    "cta_href": "#contact"
  },
  "about": {
    "title": "Le cabinet",
    "body": "Le Cabinet dentaire Barthelemy SA accueille à Nyon des patients de tous âges pour l'ensemble des soins de médecine dentaire. Nous prenons le temps d'écouter, d'expliquer chaque traitement et d'établir avec vous un plan de soins clair.\n\nNotre approche conjugue rigueur clinique et confort du patient. Du contrôle de routine aux interventions plus complexes, nous travaillons avec des équipements modernes et des matériaux éprouvés.\n\nLe cabinet est ouvert aux nouveaux patients et collabore avec les principaux assureurs maladie en Suisse."
  },
  "services": [
    {
      "name": "Contrôle et prévention",
      "description": "Examens réguliers, détartrage et conseils d'hygiène pour préserver votre santé bucco-dentaire.",
      "icon": "🦷"
    },
    {
      "name": "Soins conservateurs",
      "description": "Traitement des caries, restaurations esthétiques et soins des racines.",
      "icon": "🪥"
    },
    {
      "name": "Esthétique dentaire",
      "description": "Blanchiment, facettes et restaurations pour un sourire harmonieux.",
      "icon": "✨"
    },
    {
      "name": "Implantologie",
      "description": "Remplacement des dents manquantes par des implants pour retrouver confort et fonction.",
      "icon": "🔩"
    },
    {
      "name": "Prothèses dentaires",
      "description": "Couronnes, bridges et prothèses sur mesure réalisés avec des laboratoires partenaires.",
      "icon": "👑"
    },
    {
      "name": "Urgences dentaires",
      "description": "Prise en charge rapide en cas de douleur, traumatisme ou infection.",
      "icon": "🚨"
    }
  ],
  "team": [
    {
      "name": "Dr Barthelemy",
      "role": "Médecin-dentiste, responsable du cabinet",
      "bio": null
    }
  ],
  "testimonials": [],
  "contact": {
    "phone": "+41223631100",
    "email": "mail@dentistebarthelemy.ch",
    "address": "À COMPLÉTER",
    "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 Barthelemy SA",
  "description": "Cabinet dentaire à Nyon : soins, esthétique, implantologie et prévention. Prise de rendez-vous au +41 22 363 11 00. Équipe à votre écoute.",
  "url": "https://cabinet-dentaire-barthelemy-sa.preview.mtth.agency",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "À COMPLÉTER",
    "addressLocality": "Nyon",
    "addressRegion": "VD",
    "addressCountry": "CH"
  },
  "telephone": "+41223631100",
  "email": "mail@dentistebarthelemy.ch",
  "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-barthelemy-sa-5y97tx
• Local path : ~/sites/clients/cabinet-dentaire-barthelemy-sa-5y97tx
• Deploy target (sur VPS agency) : /var/www/copy-paste/previews/cabinet-dentaire-barthelemy-sa/
• Preview URL : https://cabinet-dentaire-barthelemy-sa.preview.mtth.agency

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

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

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