AndrewTaras/profpak-landing

Generación de Módulo HTML

Cuándo aplicar

El usuario solicita crear un nuevo módulo del landing: Header, Hero, Problems, Products, Offer, Stats, Process, About, FAQ, ContactForm, Footer o ChatWidget.

Proceso

1. Obtén del usuario el contrato del módulo (bloque «Data In → HTML Out»).
2. Verifica que todas las clases Tailwind del contrato existan en el sistema de diseño (consulta AGENTS.md).
3. Si el contrato hace referencia a colores — usa solamente las clases del sistema de diseño:
   • bg-industrial-blue, bg-industrial-orange, bg-stretch-cyan, bg-polymer-silver
   • Nada de bg-blue-500, bg-orange-500 ni otras paletas estándar de Tailwind.
4. Genera el código HTML siguiendo estrictamente el contrato.
5. Devuelve solo HTML — sin envoltorios markdown, sin explicaciones.

Reglas de generación

Imágenes placeholder

Si en el contrato se indica «Imagen de fondo — placeholder», utiliza:

• Para fondo de hero: https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• Para tarjetas de producto: https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• Para galería «Sobre el fabricante»: https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

Iconos

Todos los iconos mediante Lucide:

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

Iconos populares para el proyecto: shield, truck, package, droplet, zap, check-circle-2, phone, message-circle, map-pin, factory, microscope, globe-2, leaf, apple, pill, settings-2, hand.

Botones CTA (principales)

<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">
  Texto <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

Botones secundarios

<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">
  Texto
</a>

Tarjetas de producto

<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 / CATEGORÍA</p>
    <h3 class="text-xl font-extrabold text-slate-900">Nombre</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">Descripción</p>
  </div>
</article>

Secciones (envoltorios)

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

Cuadrículas

• Productos: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• Estadísticas: grid grid-cols-2 md:grid-cols-4 gap-6
• Proceso: grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ: grid grid-cols-1 md:grid-cols-2 gap-4
• Problemas: grid grid-cols-1 md:grid-cols-3 gap-8

Lista de verificación antes de la salida

• Todas las clases del contrato están utilizadas
• Se usan solo clases del sistema de diseño (nada de bg-blue-500)
• Hay prefijos responsivos (sm:, md:, lg:)
• Imágenes con alt y loading="lazy"
• Elementos interactivos con aria-label o texto significativo
• Sin estilos inline
• Sin envoltorios markdown alrededor del HTML
• Sin explicaciones antes o después del código

Ejemplo de llamada

Usuario:

Genera el componente Hero según el contrato: bgImage — placeholder, headline — «Película stretch — protección confiable para tu carga», bullets — [shield: Fijación segura, droplet: Protección contra humedad, zap: Alta resistencia, package: Consumo económico], ctaPrimary — «Calcular lote» → https://wa.me/79064680377

Tú:

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

(solo HTML, sin explicaciones)