KeWang0622/agent-zero-to-hero

Página de aterrizaje — la estructura canónica

Una página de aterrizaje que convierte tiene cinco secciones, en orden:

1. Héroe — promesa en una oración + visual + UNA llamada a la acción principal.
2. Tres destacados — tres beneficios en tres tarjetas. Nada más.
3. Horarios / detalles — información práctica sobre el pliegue de la segunda pantalla.
4. Mapa / contacto — iframe o enlace incrustado.
5. Pie de página — mínimo: copyright, enlaces a redes sociales.

Reglas técnicas (las partes de ingeniería)

• Un solo archivo. index.html con <style> y <script> inline. Sin paso de compilación.
• Tailwind vía CDN — <script src="https://cdn.tailwindcss.com"></script>. No uses npm.
• Fotos de stock mediante URLs de Unsplash source — https://source.unsplash.com/featured/?keyword.
• Móvil primero. Pruébalo con un ancho de 375px.
• Sin animaciones de más de 200ms. Sin carruseles. Sin ventanas emergentes.

Guía de color

• Elige UN color primario y UN acento. Usa neutros para el resto.
• Para negocios cálidos (comida, hospitalidad): primario naranja/rojo, neutro crema.
• Para tecnología: primario azul/índigo, neutro pizarra.
• Nunca uses negro puro sobre blanco puro — suaviza ambos.

Procedimiento

Cuando te pidan construir una página de aterrizaje:

1. Identifica el tipo de negocio a partir de la solicitud.
2. Elige una paleta de colores usando la guía anterior.
3. Escribe index.html con las cinco secciones.
4. Usa contenido de sensación real (sin "Lorem ipsum"). Hazlo específico para la solicitud.
5. Después de escribir, usa la herramienta bash para open index.html (macOS) o xdg-open index.html (Linux).
6. Si el usuario pide cambios, usa Editar para hacer cambios precisos — no reescribas.