irfanfaraaz/constructeur-de-site-web

Constructeur de site web — Modification de modèle + Déploiement Netlify

Objectif

Prendre une brève description de ce que l'utilisateur souhaite et produire une page d'accueil époustouflante et prête pour la production en modifiant un modèle existant éprouvé — sans construire à partir de zéro. Ensuite, la pousser en ligne sur Netlify et renvoyer l'URL.

Entrées

• Nom de la marque : Le nom de l'entreprise/projet
• Thèse centrale : Une phrase sur ce qu'est (ou une URL à vérifier)
• Ambiance/esthétique : Toute direction (par ex. "tech sombre", "luxe clinique", "brutaliste")
• Objectif de conversion : Ce que le CTA doit être (par défaut : réserver un appel)

Emplacement du modèle

Le modèle de base se trouve dans website-template/ à la racine de l'espace de travail. C'est un site complet et fonctionnel utilisant React + Vite + Tailwind v3 + GSAP.

Structure

website-template/
├── src/
│   ├── App.jsx              # Layout racine (importe toutes les sections)
│   ├── index.css            # Imports Tailwind, superposition de bruit, barre de défilement
│   ├── main.jsx             # Point d'entrée
│   └── components/
│       ├── Navbar.jsx        # Navigation flottante, réactive au défilement
│       ├── Hero.jsx          # Hero pleine hauteur, image de fond, texte dévoilé GSAP
│       ├── Features.jsx      # Section fond clair avec 3 micro-UIs interactives
│       ├── DiagnosticShuffler.jsx  # Widget de cartes empilées à rotation automatique
│       ├── TelemetryTypewriter.jsx # Widget de machine à écrire style terminal
│       ├── AdaptiveRegimen.jsx     # Sélecteur de calendrier avec curseur animé
│       ├── Philosophy.jsx    # Fond parallaxe, dévoilement de texte mot par mot
│       ├── Protocol.jsx      # Cartes de défilement empilées (ancrage ScrollTrigger GSAP)
│       ├── Membership.jsx    # Tarification à 3 niveaux avec effets de survol
│       └── Footer.jsx        # Pied de page sombre avec colonnes
├── tailwind.config.js        # Tokens de couleurs, polices, bordures
├── postcss.config.js         # PostCSS standard + autoprefixer
├── vite.config.js            # Plugin Vite + React
├── package.json              # React 19, GSAP, Lucide, Tailwind v3
└── index.html

Stack technique (NE PAS CHANGER)

• React 19 + Vite 7
• Tailwind CSS v3 (utilise tailwind.config.js + directives @tailwind — PAS v4)
• GSAP 3 avec ScrollTrigger
• Icônes Lucide React
• PostCSS + Autoprefixer

Système de design (dans tailwind.config.js)

couleurs :
  moss: '#070707'      — accent noir profond
  clay: '#0026FF'      — tech bleu primaire
  cream: '#EAEAEA'     — texte blanc cassé
  charcoal: '#070707'  — fond sombre principal

polices :
  sans: Plus Jakarta Sans, Outfit
  serif: Cormorant Garamond
  mono: monospace système

Processus

Étape 1 : Copier le modèle

cp -R website-template/ nom-site/
cd nom-site
rm -rf node_modules
npm install

Étape 2 : Personnaliser pour la marque

Modifiez ces fichiers — NE RESTRUCTUREZ PAS et NE RÉÉCRIVEZ PAS à partir de zéro :

1. tailwind.config.js — Changez les tokens de couleurs (moss, clay, cream, charcoal) et les polices pour correspondre à l'esthétique de la marque. Les noms de classes restent les mêmes, seules les valeurs hexadécimales changent.

2. index.css — Mettez à jour l'URL d'import des Google Fonts pour correspondre aux nouveaux choix de polices.

3. index.html — Mettez à jour <title>.

4. Contenu des composants — Recherchez et remplacez le texte spécifique à la marque dans chaque composant :

   • Navbar.jsx — Nom de la marque, liens de navigation, texte du bouton CTA
   • Hero.jsx — Titre, sous-titre, accroche, URL de l'image de fond
   • Features.jsx — En-tête de section, sous-en-tête
   • DiagnosticShuffler.jsx — Titres des cartes, valeurs, tendances (rendez-les pertinentes pour la marque)
   • TelemetryTypewriter.jsx — Tableau des messages de la machine à écrire, étiquettes de statut
   • AdaptiveRegimen.jsx — Étiquettes des widgets, texte du bouton
   • Philosophy.jsx — Les deux déclarations contrastées, étiquettes de section, image de fond
   • Protocol.jsx — Titres des étapes, descriptions, en-tête de section
   • Membership.jsx — Noms des niveaux, prix, fonctionnalités, descriptions (ou remplacez par une section CTA si non nécessaire)
   • Footer.jsx — Nom de la marque, accroche, colonnes de liens, copyright

5. Images Unsplash — Remplacez les URL des images de fond dans Hero.jsx et Philosophy.jsx par des images correspondant à la marque. Utilisez le format https://images.unsplash.com/photo-ID?w=2000&q=80.

Étape 3 : Construire et déployer

npm run build
npx netlify-cli deploy --prod --dir=dist --create-site nom-site

Si le site est déjà lié à Netlify :

npm run build
npx netlify-cli deploy --prod --dir=dist

Remarque : La commande interactive sites:create se bloque en non-TTY. Utilisez toujours le flag --create-site.

Étape 4 : Renvoyer l'URL en direct

Ce qu'il NE FAUT PAS faire

• NE RÉÉCRIVEZ PAS les composants à partir de zéro. Le modèle fonctionne. Modifiez uniquement le contenu, les couleurs et les images.
• NE PASSEZ PAS à Tailwind v4. Le modèle utilise v3 avec tailwind.config.js. Conservez-le.
• NE SUPPRIMEZ PAS les micro-UIs interactives (DiagnosticShuffler, TelemetryTypewriter, AdaptiveRegimen). Ce sont les différenciateurs visuels. Adaptez leur contenu à la marque.
• NE CHANGEZ PAS la disposition structurelle (transitions de sections arrondies, cartes empilées au défilement, section philosophie en parallaxe). Ce sont ces détails qui rendent le beau rendu.
• N'AJOUTEZ PAS de nouvelles dépendances npm sauf si absolument nécessaire.

Aide-mémoire de personnalisation

Changer l'ambiance

L'ensemble de l'esthétique change en modifiant 4 tokens de couleur dans tailwind.config.js :

Ambiance	charcoal (fond)	clay (accent)	cream (texte)	moss (accent sombre)
Tech Bleu (par défaut)	#070707	#0026FF	#EAEAEA	#070707
Luxe Or	#070707	#C9A84C	#F5F0E8	#0A0A0A
Cyber Néon	#0A0A0A	#00FFD1	#E0E0E0	#0A0A0A
Blanc Clinique	#FAFAFA	#2563EB	#1A1A1A	#F5F5F5
Organique Terre Cuite	#1A1410	#CC5833	#F2F0E9	#2E4036
Contenu Émeraude	#090909	#10B981	#F0F0F0	#0A0A0A

Si le client n'a pas besoin de tarifs

Remplacez le contenu de Membership.jsx par une section CTA pleine largeur (conservez le fichier du composant, changez simplement son JSX).

Exemple : 1SecondCopy (service de rédaction SEO)

C'est la référence de référence pour la profondeur des modifications nécessaires. Le contenu textuel de chaque composant change, mais aucune modification structurelle/de disposition n'est effectuée.

Couleurs (tailwind.config.js)

moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'

Modifications composant par composant

Composant	Ce qui a changé	Ce qui est resté identique
Navbar.jsx	Marque → "1SECONDCOPY_", liens → Processus/Plateforme/Tarifs, CTA → "Commencer"	Navigation flottante, flou au défilement, menu hamburger mobile
Hero.jsx	Titre → "Des mots qui se classent.", accroche → "Rédaction de contenu, avec une touche", sous-titre sur les 1% meilleurs rédacteurs, fond Unsplash → thème rédaction	Dévoilement GSAP, mise en page, superpositions de dégradé
Features.jsx	Titre → "Votre Centre de Commande de Contenu", sous-titre sur les tableaux de bord en temps réel	Grille de 3 micro-UIs, structure de section
DiagnosticShuffler.jsx	Cartes → "Vitesse du contenu : 48 articles", "Position SERP moy. : #4.2", "Délai de traitement : 2.1 jours", étiquette → "Analytiques de contenu"	Animation de rotation automatique, structure de carte
TelemetryTypewriter.jsx	Messages → étapes du pipeline de contenu ("Recherche des mots-clés cibles...", "Appariement du rédacteur au brief..."), étiquettes → "File d'attente en direct", stats → "En attente : 3 briefs" / "Livraison moy. : 2.1 jours"	Effet de machine à écrire, style terminal
AdaptiveRegimen.jsx	Étiquette → "Planificateur de contenu", titre → "Sélectionner le jour de publication", bouton → "Soumettre", couleur GSAP → #10B981	Grille de calendrier, curseur animé, pastilles de date
Philosophy.jsx	Ancienne méthode → "Embauchez des freelances. Gérez les révisions. Priez pour bien se classer." vs Nouvelle méthode → "Soumettez un brief. Obtenez du contenu SEO qui convertit.", fond Unsplash changé	Parallaxe, dévoilement mot par mot, mise en page
Protocol.jsx	Étapes → "Brief & Recherche" / "Rédaction experte" / "SEO & Livraison", titre → "Le processus.", description de leur flux de travail	Cartes empilées au défilement, ancrage GSAP, graphiques SVG
Membership.jsx	Niveaux → Starter 0,09$/mot, Volume 0,08$/mot, Entreprise Personnalisé, toutes les fonctionnalités réécrites pour le service de contenu	Grille de 3 colonnes, effets de survol, badge populaire
Footer.jsx	Marque → "1SECONDCOPY_", accroche → "Contenu SEO à la demande", colonnes → Services/Entreprise, statut → "Rédacteurs en ligne"	Mise en page, animation de point pulsant, copyright

Leçon clé

~200 lignes de changements de texte sur 10 fichiers. Aucun changement de mise en page, d'animation ou de structure. Le site a l'air complètement différent car les couleurs et le contenu font tout le travail lourd.

Environnement

Nécessite :

• Node.js 18+
• npx netlify-cli (s'installe automatiquement)
• Compte Netlify authentifié via netlify login

Configuration initiale

Avant d'exécuter, vérifiez si l'espace de travail a un fichier .gitignore. Si ce n'est pas le cas, supposez que l'utilisateur est nouveau avec cette compétence. Dans ce cas :

1. Demandez à l'utilisateur si c'est sa première utilisation de cette compétence
2. Si oui, guidez-le sur son fonctionnement et sur ce qu'il doit configurer/mettre en place (clés API, variables d'environnement, dépendances, etc.)
3. Faites-lui savoir que Nick lui souhaite le meilleur !