--- URL de la captura de referencia: https://www.designprompting.com/themes/blog-aurora/theme.jpg IMPORTANTE — Verificación previa (hazla ANTES de cualquier otra cosa): Comprueba si tienes la imagen de referencia ADJUNTA como archivo (no como URL en texto). - Si NO hay imagen adjunta y solo ves la URL → DETENTE. No generes nada. Responde únicamente: "⚠️ Solo tengo la URL, no la captura. Descárgala desde aquí y adjúntala al chat para que pueda replicar el diseño con fidelidad: https://www.designprompting.com/themes/blog-aurora/theme.jpg" - Si la imagen SÍ está adjunta → continúa con las instrucciones de abajo. --- ## Fase 0 — Spec medida de la captura (OBLIGATORIA antes de codificar) Antes de escribir una sola línea de código, analiza la captura adjunta y escribe una spec con: - Lista ordenada de secciones tal y como aparecen de arriba a abajo. No añadas secciones que no estén en la captura (si no se ve header de navegación o footer, no los inventes). - Por sección: altura aproximada (px sobre ancho 1440), nº de columnas, gap, color de fondo (hex), border-radius dominante, ratio de las imágenes y % de overlay si lo hay. - Tipografía: tamaños aproximados de H1/H2/cuerpo en px y pesos. Esta spec manda durante toda la generación: el código se escribe contra ella. --- ## Referencia visual Replica fielmente el diseño de la captura adjunta (estructura, paleta, tipografía). Si necesitas la imagen como recurso real en la web, está disponible en la URL indicada arriba. --- Crea un sitio web para la marca ficticia **Blog Aurora** (dominio blogaurora.com, sector SaaS IA) usando **HTML único, Tailwind CSS vía CDN y JavaScript vanilla**. Utiliza la siguiente paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul primario), #F9FAFB (blanco), #6B7280 (gris medio), #10B981 (verde acento). Tipografía: **Inter** para títulos y body, peso 400‑600, importada desde Google Fonts. **Header** (fijo, fondo blanco, sombra ligera): logo SVG a la izquierda, menú de navegación con dropdowns para Home, Pricing, Blogs, Contact, Resources. Cada enlace tiene efecto hover que cambia de color a #3B82F6 y muestra una flecha SVG. A la derecha, enlaces "Login" (texto) y botón "Contact us" (bg‑#3B82F6, hover bg‑#2563EB, texto blanco). Menú colapsable en móvil con botón hamburguesa. **Home** 1. **Hero**: container centrado, título h1 con clase `text-5xl font-semibold text-gray-900`, subtítulo p `text-xl text-gray-600`, dos botones CTA: "Empieza ahora" (bg‑#3B82F6) y "Ver demo" (border‑2 border‑#3B82F6, text‑#3B82F6). Imagen decorativa a la derecha que entra con animación fade‑in‑up. 2. **Características**: grid `grid-cols-1 md:grid-cols-3 gap-8`. Cada tarjeta con icono SVG, título `text-2xl font-medium`, descripción `text-gray-600`. Fondo blanco, sombra `shadow-lg`, hover `shadow-xl`. 3. **Testimonios**: carrusel simple (JS) con 3 testimonios, cada uno con foto circular, nombre, cargo y cita. Fondo `bg-gray-100`. 4. **CTA secundaria**: sección de ancho completo con fondo `bg-Teal-600` (hex #10B981), texto centrado blanco, botón "Solicita una demo" (bg‑white, text‑teal-600). 5. **Footer**: fondo `bg-gray-900`, texto `text-gray-400`. Tres columnas: Navegación (enlaces principales), Recursos (blog, changelog, licencia), Contacto (email, dirección ficticia, iconos sociales). Pequeño copyright. **Requisitos técnicos** - Incluir `` y `` para interacciones simples (dropdowns, mobile menu, carrusel). - Todas las clases deben ser de Tailwind, sin CSS personalizado externo. - Usar `data-` attributes para animaciones (ej. `data-aos="fade-up"`). - El HTML debe estar perfectamente anidado y validado, sin referencias a la web original. - Mantener la estructura de páginas (Home, About, Features, Pricing, Contact) según la tabla, replicando los bloques descritos. - Optimizar imágenes con `loading="lazy"` y tamaños apropiados. - Asegurar accesibilidad: `alt` en imágenes, `aria-label` en botones, contraste de colores. Entrega el código listo para copiar‑pegar en un fichero `index.html` que incluya todas las secciones y navegación funcional. --- ## Protocolo de construcción por bloques Construye el HTML sección a sección, en el orden exacto de la captura. Tras cada bloque, compáralo con su zona de la imagen (estructura, columnas, espaciados, radios, colores) y corrígelo antes de pasar al siguiente. No avances con un bloque que no coincida. ## Regla anti-invención Si la captura y este prompt se contradicen en algo visual, manda la captura. Si un dato visual no está especificado, derívalo de la captura; nunca lo inventes. Los textos sin sentido de la captura (errores tipográficos de IA) NO se copian: redacta textos coherentes en español manteniendo longitud y jerarquía visual equivalentes. Única excepción: el footer obligatorio de Design Prompting del final de este prompt se añade siempre. ## Checklist de fidelidad (antes de entregar) - Orden y número de secciones = captura - Paleta y contraste = captura - Columnas, gaps y border-radius = spec de la Fase 0 - Ratios de imagen y alturas de sección ≈ captura - Densidad de texto similar a la captura (sin párrafos inflados) ## Protocolo de iteración Si el usuario señala diferencias tras la primera generación, corrige únicamente los deltas indicados sin regenerar las secciones ya validadas. --- ## Instrucción obligatoria — Footer Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting: ```html ```