Crea una página web basada en el contenido proporcionado por el usuario. Los requisitos de estilo de la página web son los siguientes:

### I. Posicionamiento del estilo visual - **Estilo artístico dibujado a mano**: Adoptando un estilo de arte lineal, mezclando el diseño digital moderno con la estética tradicional dibujada a mano. - **Esquema de color**: Usando colores neutros (blanco roto/gris claro) como base, combinados con texto principal gris oscuro y usando rojo anaranjado (color de acento) como color focal visual. - **Tono de marca**: Refinado, artístico y cálido, dirigido a un grupo de usuarios exigentes. ### II. Principios de la estructura de diseño **Sección principal (diseño de la primera pantalla)** - Diseño de columna izquierda-derecha (proporción áurea 60:40) - Lado izquierdo: - Título de gran tamaño (fuente de visualización, 72-96px), fuente oscura, fuerte impacto visual - Datos clave resaltados en color de acento (por ejemplo, "15 ciudades, 4749 ubicaciones") - Texto de subtítulo conciso y potente, que indica la propuesta de valor principal - Amplio espacio en blanco, que crea una sensación de alta gama - Lado derecho: - Ilustraciones personalizadas dibujadas a mano, que ocupan el 50% del espacio visual - Estilo de ilustración consistente: dibujo lineal + acentos de color local - Contenido de la ilustración profundamente integrado con la historia de la marca - **Diseño de la barra de navegación** - Navegación superior minimalista, posicionamiento fijo - Logotipo + 2-3 elementos del menú principal - Grupo de iconos del lado derecho (búsqueda/favoritos/menú) - Fondo transparente o blanco puro con sombras sutiles - **Área de la tarjeta de contenido** - Diseño de cuadrícula de tarjetas (3-4 columnas, responsivo) - Cada tarjeta incluye: - Título (encabezado 3, 32-40px) - Descripción (2-3 líneas, 16-18px, altura de línea 1.6) - Ilustración dibujada a mano que la acompaña (consistente con el estilo visual principal) - Fondo claro (#F5F3F0), esquinas redondeadas (8-12px) - Estado al pasar el ratón: Ligeramente ascendente + sombra más profunda - ### III. Especificaciones del sistema de ilustración **Pautas para la creación de ilustraciones** 1. 2. **Procesamiento de líneas**: - Utilice líneas irregulares dibujadas a mano de 1-2px para simular una textura de pintura realista - Mantenga líneas suaves con un toque de artificialidad, evitando la excesiva mecanicidad. 3. **Uso del color:** - 80% líneas grises + 20% relleno del color de la marca - El rojo anaranjado se usa solo para enfatizar elementos (personas, ventanas, edificios clave) - El fondo usa un degradado beige (#FDFBF7 → #F5F1EB) - 5. **Composición de la escena:** - Escenas urbanas: mezcla de edificios emblemáticos + escenas de la vida cotidiana - Perspectiva superior o isométrica - Agregar figuras pequeñas para realzar la narrativa y la intimidad - 7. **Densidad de detalles:** - Detalles ricos en primer plano, plano medio moderadamente simplificado y fondo delineado - Mantener la jerarquía visual, guiando la vista hacia la información clave - 9. ### IV. Sistema de fuentes - **Fuente de visualización (Título):** Fuente serif, pesada y potente (p. ej., Freight Display, Tiempos) - **Fuente de cuerpo (Texto de cuerpo):** Sans-serif, altamente legible (p. ej., Inter, Manrope) - **Relación de tamaño de fuente**: Utiliza una escala modular (1.25 o 1.333) - - **Niveles de peso de fuente**: Ligero (300) / Regular (400) / Medio (500) / Negrita (700) - ### V. Detalles de interacción - - **Micro-animaciones**: Las tarjetas flotan hacia arriba 4-8px al pasar el ratón por encima, tiempo de transición 300-400ms - - **Estado de carga**: Utiliza una pantalla de esqueleto para mantener el tono de la marca - - **Puntos de interrupción responsivos**: - - Escritorio: 1440px+ - - Tableta: 768-1439px - - Móvil: 375-767px - - ### VI. Requisitos de salida del diseño Cada salida del diseño debe incluir: 1. 2. Jerarquía visual clara (lograda a través del tamaño/color/espacio en blanco) 3. 4. Al menos una ilustración personalizada (profundamente relacionada con el contenido, generada usando Nano Banana Pro) 5. 6. 2-3 resaltados de color de acento (no excediendo 7. 8. Amplio espacio para respirar (espaciado de sección ≥ 120px) 9. 10. Ruta de acción clara del usuario 11. --- **Filosofía de diseño**: Usar un lenguaje visual artístico para transmitir la singularidad y calidez de la marca. Cada píxel sirve para contar una historia, no simplemente para mostrar la funcionalidad. El diseño debe hacer que los usuarios sientan, "Esto es para personas que aprecian la vida", en lugar de un producto frío y comercial.

Todas las ilustraciones de la página web fueron generadas por nano banana pro.