AndrewTaras/profpak-landing

Refactorización de componente HTML

Cuándo aplicar

• El usuario envía un HTML completo y pide mejorarlo.
• El usuario solicita verificar adaptabilidad, accesibilidad o rendimiento del componente.
• El usuario pide agregar animaciones, cambiar la tipografía o mejorar el aspecto visual.

Proceso

1. Obtén el HTML actual del componente.
2. Obtén la lista de mejoras del usuario. Si no se especifica, trabaja según las prioridades a continuación.
3. Conserva la estructura existente — no reescribas desde cero.
4. Devuelve el HTML actualizado junto con el CSS/JS necesario (si aplica).

Prioridades de mejora (por importancia)

1. Tipografía

• Títulos: font-heading font-black tracking-tight, tamaños text-4xl md:text-6xl
• Texto: leading-relaxed text-slate-600
• Evita líneas huérfanas: usa text-balance donde sea necesario
• Verifica el contraste: texto oscuro sobre fondo claro, texto claro sobre fondo oscuro

2. Microanimaciones

• Aparición al hacer scroll: clase section-reveal (ya existe en la plantilla)
• Hover en tarjetas: hover:-translate-y-1 hover:shadow-xl transition-all
• Hover en botones: hover:-translate-y-0.5 transition
• Iconos en hover: group-hover:scale-110 transition-transform

3. Adaptabilidad (Responsive)

• Verificar en 360px: sin scroll horizontal, todos los elementos caben
• Verificar en 768px: las cuadrículas se reorganizan en 2 columnas
• Verificar en 1440px: el contenido no se estira más allá de max-w-7xl
• Si es necesario, usa clamp() para los tamaños de fuente

4. Accesibilidad (a11y)

• Etiquetas semánticas en lugar de <div>
• aria-label en botones de icono
• Estilos de foco: focus:ring-2 focus:ring-industrial-orange focus:outline-none
• alt en todas las imágenes, aria-hidden="true" en iconos decorativos

5. Rendimiento

• Elimina clases de Tailwind no utilizadas
• Asegúrate de que todas las imágenes tengan loading="lazy"
• Agrega width y height a las imágenes (previene CLS)
• No dupliques CSS: usa utilidades de Tailwind

Formato de respuesta

Devuelve en este orden:

1. Bloque HTML — código actualizado del componente (dentro de ```html para facilitar copia)
2. Lista de cambios — breve, de 3 a 5 puntos, qué se mejoró exactamente
3. CSS/JS adicional — si se agregó, en un bloque separado indicando dónde colocarlo

Ejemplo de invocación

Usuario:

Mejora el componente Hero: tipografía más potente, animación de aparición de los bullets, adaptabilidad a 360px. Aquí está el código: [HTML]

Tú:

<section>...código actualizado...</section>

Cambios:

• Título: mejorado a text-5xl md:text-7xl font-black tracking-tight
• Agregado section-reveal en los bullets con retardo mediante style="animation-delay: Xms"
• Rediseñada la cuadrícula de bullets a grid-cols-1 sm:grid-cols-2 md:grid-cols-4
• Verificado en 360px — sin scroll
• Agregado aria-label en los botones CTA

CSS adicional (en src/styles/custom.css):

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