AndrewTaras/profpak-landing

Réusinage d'un composant HTML

Quand l'utiliser

• L'utilisateur envoie un code HTML et demande de l'améliorer.
• L'utilisateur demande de vérifier l'adaptabilité, l'accessibilité, la performance.
• L'utilisateur demande d'ajouter des animations, de modifier la typographie, de renforcer le visuel.

Processus

1. Récupère le composant HTML actuel.
2. Récupère la liste d'améliorations demandées par l'utilisateur. Si aucune n'est donnée, travaille selon les priorités ci-dessous.
3. Conserve la structure existante — ne récris pas à partir de zéro.
4. Renvoie le HTML mis à jour + le CSS/JS nécessaire (si besoin).

Priorités d'amélioration (par ordre d'importance)

1. Typographie

• Titres : font-heading font-black tracking-tight, tailles text-4xl md:text-6xl
• Texte : leading-relaxed text-slate-600
• Évite les « lignes orphelines » — utilise text-balance si nécessaire
• Vérifie le contraste : texte sombre sur fond clair, texte clair sur fond sombre

2. Micro-animations

• Apparition au défilement : classe section-reveal (déjà présente dans le modèle)
• Survol des cartes : hover:-translate-y-1 hover:shadow-xl transition-all
• Survol des boutons : hover:-translate-y-0.5 transition
• Icônes au survol : group-hover:scale-110 transition-transform

3. Adaptivité

• Vérification sur 360px : pas de barre de défilement horizontale, tous les éléments tiennent
• Vérification sur 768px : les grilles passent à 2 colonnes
• Vérification sur 1440px : le contenu ne s'étire pas au-delà de max-w-7xl
• Si nécessaire, utilise clamp() pour les tailles de police

4. Accessibilité (a11y)

• Balises sémantiques au lieu de <div>
• aria-label sur les boutons d'icônes
• Styles de focus : focus:ring-2 focus:ring-industrial-orange focus:outline-none
• alt sur toutes les images, aria-hidden="true" sur les icônes décoratives

5. Performance

• Supprimer les classes Tailwind inutilisées
• Vérifier que toutes les images ont loading="lazy"
• Ajouter width et height aux images (prévient le CLS)
• Ne pas dupliquer le CSS — utiliser les utilitaires Tailwind

Format de la réponse

Renvoie dans cet ordre :

1. Bloc HTML — code du composant mis à jour (dans une enveloppe ```html pour faciliter la copie)
2. Liste des modifications — brève, 3 à 5 points, ce qui a été amélioré
3. CSS/JS supplémentaire — si ajouté, un bloc séparé avec indication de l'endroit où le placer

Exemple d'appel

Utilisateur :

Améliore le composant Hero : typographie plus puissante, animation d'apparition des bullets, adaptativité sur 360px. Voici le code : [HTML]

Toi :

<section>...code mis à jour...</section>

Modifications :

• Titre : renforcé avec text-5xl md:text-7xl font-black tracking-tight
• Ajouté section-reveal sur les bullets avec un délai via style="animation-delay: Xms"
• Refonte de la grille des bullets en grid-cols-1 sm:grid-cols-2 md:grid-cols-4
• Vérifié sur 360px — pas de défilement
• Ajouté aria-label sur les boutons CTA

CSS supplémentaire (dans src/styles/custom.css) :

.hero-bullet { animation: reveal .8s ease-out both; }