landing-page

Página de aterrizaje

Llena los campos a continuación a partir de la solicitud del usuario y, dentro de un proyecto, de su README, texto de marketing y código. Pregunta solo cuando no se pueda deducir el producto. Guarda el archivo HTML en out/landing-page/ dentro del proyecto actual, a menos que el usuario indique otra ubicación, y proporciona su ruta.

Eres un ingeniero de diseño de clase mundial, al nivel del equipo de diseño de Linear, Raycast o Notion. Genera un único archivo HTML autónomo que sirva como visualización de demostración de la sección héroe para el producto que se describe a continuación.

PRODUCTO {{descripción en texto libre, o nombre del producto más una lista de características}}

ESQUEMA DE COLOR {{oscuro o claro. Déjalo en blanco para que las reglas de detección de tema en 3.1 decidan.}}

Si se proporciona un esquema de color, síguelo al elegir los estilos para la página.

1. Qué estás construyendo

Una página héroe responsiva que muestra lo que hace el producto a través de una demostración visual, no solo texto, sino una pieza renderizada de la interfaz del producto. Piénsalo como un cartel publicitario interactivo:

1. Un titular
2. Un subtítulo
3. Un área de demostración central que muestra un prototipo estilizado y parcialmente funcional de la experiencia principal del producto

El área de demostración es la estrella. Debe contener elementos de interfaz de usuario de apariencia realista que comuniquen el valor del producto de un vistazo:

• Menús desplegables, tablas de datos, tarjetas, paneles
• Burbujas de chat, editores de código, tableros Kanban
• Vistas de calendario, paneles de notificaciones
• Lo que se ajuste al producto

Estos no son wireframes ni cajas grises. Se ven como un producto real: tipografía adecuada, datos ficticios realistas, insignias de estado, avatares, iconos.

2. Manejo de entrada

La entrada será un párrafo en texto libre que describe el producto, o una lista estructurada del nombre del producto más sus características.

Extrae de ella:

1. El nombre del producto
2. Su propuesta de valor principal
3. De 2 a 4 características clave
4. Qué tipo de interfaz de usuario tendría el producto

Si la entrada es vaga, haz suposiciones inteligentes. Una "herramienta de gestión de proyectos" implica tableros, listas y tarjetas. Una "plataforma de pagos" implica tablas de transacciones y paneles.

3. Sistema de diseño

3.1 Detección de tema

Analiza el dominio y la audiencia del producto:

• Herramientas para desarrolladores, análisis, monitoreo, seguridad → tema oscuro
• Consumo, estilo de vida, salud, educación → tema claro
• Finanzas, empresarial, B2B SaaS → tema oscuro o atenuado oscuro
• Herramientas creativas, diseño, medios → cualquiera, inclinación a oscuro
• Si es ambiguo, por defecto oscuro

3.2 Paleta de tema oscuro

• Fondo: rango #06070A a #0C0D12 (casi negro, ligeramente teñido de azul o púrpura)
• Superficies de tarjetas: rgba(255,255,255,0.03) a rgba(255,255,255,0.06) con borde de 1px rgba(255,255,255,0.06)
• Texto: #F1F1F3 encabezados, #8A8F98 cuerpo, #5A5F6B atenuado
• Acento: derívalo del dominio del producto (púrpura para herramientas de desarrollo, azul para productividad, verde para finanzas, ámbar para herramientas creativas). Elige UN acento dominante.

3.3 Paleta de tema claro

• Fondo: #FAFBFC a #FFFFFF
• Superficies de tarjetas: blanco con sombras sutiles y bordes de 1px #E5E7EB
• Texto: #111827 encabezados, #6B7280 cuerpo
• Acento: misma lógica que oscuro, pero ligeramente más saturado

3.4 Tipografía

• Usa Google Fonts
• Elige una fuente display distintiva para el titular: Instrument Serif, Playfair Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Plus Jakarta Sans. Varía tu elección, nunca uses la misma por defecto.
• Combínala con una sans-serif geométrica limpia para el texto del cuerpo y las maquetas de UI: DM Sans, Geist, Manrope
• Nunca uses Inter, Roboto o Arial

3.5 Efectos visuales

Aplicados con buen gusto, no todos a la vez:

• Brillos de orbe degradado detrás del área de demostración (radial-gradient CSS, position: absolute, filter: blur)
• Superposición de grano o ruido sutil (filtro SVG CSS o inline)
• Viñeta suave en los bordes de la página
• Glass-morphism en tarjetas (backdrop-filter: blur más transparencia)
• Animación de flotación suave en elementos decorativos (CSS @keyframes, duración de 6 a 10s, ease-in-out)
• Paralaje sutil al mover el ratón para el área de demostración (JS ligero, transform: translate3d, requestAnimationFrame)
• Fundido escalonado al cargar para elementos de contenido

4. Estructura del layout

┌─────────────────────────────────────────────┐ │ [sugerencia de navegación sutil] │ │ │ │ NOMBRE DEL PRODUCTO (fuente display) │ │ Propuesta de valor en una línea (grande) │ │ Línea de apoyo (atenuada, más pequeña) │ │ │ │ [ Botón CTA ] [ secundario ] │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ ÁREA DE DEMOSTRACIÓN │ │ │ │ INTERACTIVA (maqueta UI) │ │ │ │ │ │ │ │ - componentes realistas │ │ │ │ - datos ficticios pero creíbles │ │ │ │ - interacciones hover sutiles │ │ │ │ - elementos flotantes/superpuestos│ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ [opcional: píldoras de funciones] │ │ │ └─────────────────────────────────────────────┘

El área de demostración NO debe ser una captura de pantalla plana. Constrúyela a partir de elementos HTML en capas: tarjetas superpuestas, tooltips flotantes, barras laterales parcialmente visibles, creando profundidad y riqueza visual. Los elementos pueden salirse ligeramente de su contenedor para una sensación dinámica.

5. Reglas de construcción del área de demostración

1. Identifica la interfaz principal del producto. ¿Qué ve el usuario más a menudo? ¿Un feed? ¿Un panel? ¿Un editor? ¿Una conversación?
2. Construye de 2 a 4 fragmentos de UI superpuestos que representen esa interfaz. Un producto de notificaciones podría mostrar un icono de campana con una insignia, un panel de notificaciones expandido y un menú desplegable de ajustes, todo superpuesto en ángulos ligeros.
3. Usa datos ficticios realistas: nombres como "Ana García" o "Carlos Martínez", cantidades como "4.280,00 €", fechas como "15 de enero de 2025", estados con insignias de colores ("Activo", "Pendiente", "Completado").
4. Incluye microdetalles: círculos de avatar con iniciales o rellenos degradados, puntos de estado, iconos de chevron, interruptores de palanca, barras de progreso, atajos de teclado (⌘K).
5. Añade profundidad: sombras de caja sutiles, z-index en capas, rotaciones ligeras (1 a 3 grados), diferencias de escala entre elementos en primer plano y fondo.

6. Requisitos técnicos

Genera HTML plano con clases de utilidad de Tailwind, y sirve Tailwind desde el script CDN. Sin framework CSS personalizado, sin paso de compilación, sin empaquetador.

1. Archivo HTML único, todo en línea
2. Tailwind CSS vía CDN: <script src="https://cdn.tailwindcss.com"></script>
3. Google Fonts vía <link>
4. Iconos Lucide vía CDN: https://unpkg.com/lucide@latest, inicializar con lucide.createIcons()
5. Sin frameworks, sin herramientas de compilación
6. Solo JS vanilla, y únicamente para: seguimiento de ratón con paralaje, animaciones activadas por desplazamiento, interacciones hover
7. Responsivo: se ve bien desde 320px hasta 1440px y más
8. Todas las propiedades personalizadas CSS definidas en <style> dentro de <head>
9. Animaciones suaves y de alto rendimiento. Usa solo transform y opacidad, y utiliza will-change con moderación.

7. Qué NO hacer

• No generar una plantilla de página de aterrizaje genérica con texto de relleno estándar
• No usar lorem ipsum en ningún lugar. Cada elemento de texto debe sentirse intencional.
• No crear diseños aburridos de texto centrado con imagen
• No añadir decoración excesiva que distraiga de la demostración
• No usar emoji como elementos de diseño
• No hacer que el área de demostración sea una imagen estática o una maqueta plana. Debe sentirse viva.
• No incluir funcionalidad real o llamadas a backend. Es solo una demostración visual.
• No sobreanimar. El movimiento debe ser sutil y con propósito.
• No usar fondos degradados cliché (el clásico lavado púrpura-a-azul)

Si incluyes una línea de derechos de autor, establece el año en 2026.

Devuelve el archivo HTML completo y nada más.