AndrewTaras/profpak-landing

Génération de module HTML

Quand l'utiliser

L'utilisateur demande la création d'un nouveau module de landing page : Header, Hero, Problems, Products, Offer, Stats, Process, About, FAQ, ContactForm, Footer ou ChatWidget.

Processus

1. Récupérez le contrat du module auprès de l'utilisateur (bloc « Data In → HTML Out »).
2. Vérifiez que toutes les classes Tailwind du contrat existent dans le système de design (voir AGENTS.md).
3. Si le contrat fait référence à des couleurs — utilisez uniquement les classes du système de design :
   • bg-industrial-blue, bg-industrial-orange, bg-stretch-cyan, bg-polymer-silver
   • Pas de bg-blue-500, bg-orange-500 ni d'autres palettes standard de Tailwind.
4. Générez le code HTML en suivant strictement le contrat.
5. Retournez uniquement le HTML — sans enveloppes markdown, sans explications.

Règles de génération

Images placeholders

Si le contrat spécifie « Image de fond — placeholder », utilisez :

• Pour le fond hero : https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• Pour les fiches produits : https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• Pour la galerie « À propos du fabricant » : https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

Icônes

Toutes les icônes via Lucide :

<i data-lucide="shield" class="h-5 w-5 text-stretch-cyan"></i>

Icônes populaires pour le projet : shield, truck, package, droplet, zap, check-circle-2, phone, message-circle, map-pin, factory, microscope, globe-2, leaf, apple, pill, settings-2, hand.

Boutons CTA (principaux)

<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-industrial-orange px-7 py-3.5 text-sm font-bold text-white shadow-cta transition hover:bg-orange-600 hover:-translate-y-0.5">
  Texte <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

Boutons secondaires

<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 px-7 py-3.5 text-sm font-bold text-white backdrop-blur-sm transition hover:bg-white/10">
  Texte
</a>

Fiches produits

<article class="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  <div class="h-48 overflow-hidden">
    <img src="..." alt="..." class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
  </div>
  <div class="p-7">
    <p class="text-xs font-bold text-stretch-cyan mb-1">01 / CATÉGORIE</p>
    <h3 class="text-xl font-extrabold text-slate-900">Nom</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">Description</p>
  </div>
</article>

Sections (enveloppes)

<section id="nom" class="px-6 py-20 lg:px-8 lg:py-24 bg-polymer-silver">
  <div class="mx-auto max-w-7xl">
    <!-- contenu -->
  </div>
</section>

Grilles

• Produits : grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• Stats : grid grid-cols-2 md:grid-cols-4 gap-6
• Processus : grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ : grid grid-cols-1 md:grid-cols-2 gap-4
• Problèmes : grid grid-cols-1 md:grid-cols-3 gap-8

Liste de contrôle avant affichage

• Toutes les classes du contrat sont utilisées
• Seules les classes du système de design sont utilisées (pas de bg-blue-500)
• Les préfixes responsifs sont présents (sm:, md:, lg:)
• Les images ont un attribut alt et loading="lazy"
• Les éléments interactifs ont un aria-label ou un texte significatif
• Pas de styles inline
• Pas d'enveloppes markdown autour du HTML
• Pas d'explications avant ou après le code

Exemple d'appel

Utilisateur :

Génère le composant Hero selon le contrat : bgImage — placeholder, headline — « Film étirable — protection fiable de votre cargaison », bullets — [shield : Fixation fiable, droplet : Protection contre l'humidité, zap : Haute résistance, package : Consommation économique], ctaPrimary — « Calculer le lot » → https://wa.me/79064680377

Toi :

<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-slate-950">
  ...
</section>

(uniquement HTML, sans explications)