Hatch Website
Le site marketing de Hatch — l'OS AI-native pour les réseaux de franchises.
Ce dépôt contient le code de gethatch.io et ses contenus FR + EN.
🤖 Tu es un agent IA (Claude Code, Cursor) ? Lis CLAUDE.md à la place — c'est la doc faite pour toi.
🚀 Démarrer en local (5 minutes)
Pré-requis
Tu as besoin de trois choses installées sur ta machine :
- Node.js version 22 ou plus — nodejs.org
- pnpm (gestionnaire de paquets) — installation :
npm install -g pnpm
- Claude Code (l'agent qui t'aide à coder) — claude.ai/code
Lancer le site
Ouvre un terminal dans ce dossier et tape :
pnpm install # installe les dépendances (à faire une seule fois)
pnpm dev # lance le site sur http://localhost:4321
Tu devrais voir la landing FR sur http://localhost:4321/ et la version EN sur http://localhost:4321/en. Le navigateur se rafraîchit tout seul quand tu modifies un fichier.
Pour arrêter : Ctrl + C dans le terminal.
✏️ Je veux changer un texte
Tous les textes vivent dans src/content/, un fichier par langue :
- la home : 🇫🇷
src/content/home/fr.yaml et 🇬🇧 src/content/home/en.yaml (un bloc par section) ;
- les agents :
src/content/agents/fr/<agent>.md et src/content/agents/en/<agent>.md.
Workflow
- Crée une branche depuis
main (jamais éditer main directement) :
git checkout -b content/maj-hero
- Ouvre le fichier que tu veux modifier (ex:
src/content/home/fr.yaml)
- Modifie le texte entre les guillemets, sans toucher aux noms des champs (
hero:, h1:…) : le build refuse un champ manquant ou en trop
- Vérifie en local que le rendu te plaît sur
http://localhost:4321/ (pendant que pnpm dev tourne)
- N'oublie pas l'autre langue : si tu modifies le FR, fais l'équivalent en EN (ou demande à Claude
/translate de le faire)
- Commit + push :
git add .
git commit -m "content: maj copy hero"
git push -u origin content/maj-hero
- Ouvre une Pull Request sur GitHub. Vercel va automatiquement créer une URL de preview (ex :
hatch-website-abc123.vercel.app) et la poster en commentaire sur la PR.
- Valide la preview dans ton navigateur. Si tout est bon, merge la PR → la prod se met à jour toute seule en ~30 secondes.
🧱 Je veux ajouter une section
Le plus simple : demande à Claude Code de le faire pour toi.
/new-section Pricing
Il va :
- créer un composant
src/components/sections/Pricing.astro
- ajouter son bloc de texte dans
fr.yaml et en.yaml
- l'afficher sur la home FR et EN
Ensuite tu vérifies en local, tu push, tu mergues.
🌍 Je veux ajouter / corriger une traduction
/translate fr en src/content/home/fr.yaml
Claude lit le fichier FR et met à jour son équivalent EN en gardant le même format. À toi de relire.
🚢 Je veux publier
Le déploiement est automatique via Vercel. Tu n'as rien à faire de spécial — il suffit de :
- Pousser ta branche sur GitHub
- Ouvrir une Pull Request
- Vérifier la preview Vercel (le lien apparaît dans la PR)
- Merger sur
main → la prod est mise à jour
Pour vérifier que ton code est prêt à être mergé sans risque :
/deploy-check
Cette commande lance le build local et vérifie qu'il n'y a pas d'erreur cachée.
🆘 Ça casse, qu'est-ce que je fais ?
- Erreur dans le terminal
pnpm dev : copie-colle le message à Claude Code, il diagnostique.
- Le build échoue dans la PR : ouvre l'onglet "Checks" de la PR sur GitHub, lire l'erreur, la copier à Claude.
- Le rendu est cassé visuellement : regarder la preview Vercel sur Slack.
📚 Pour aller plus loin
