# UI/UX Master Document – Puerto Agua Verde & Rancho San Cosme ## 1. Layout Overview El proyecto presenta una experiencia mobile‑first inspirada en interfaces como Airbnb, Uber Eats y Rappi. Utiliza una estructura basada en tarjetas, navegación intuitiva y un estilo ligero, turístico y enfocado en la exploración. El sitio se construye en Astro, con una subpágina dinámica para detalles, hidratada con React para contenido offline-first. ### 1.1 Home Layout * **Header transparente** que se vuelve sólido al hacer scroll. * **Hero** con título, descripción, CTA y opción de carrusel. * **Menú de categorías** (mini tarjetas / iconos): Todo, Experiencias, Sitios de interés, Alojamiento, Restaurantes, Servicios, Internet. * **Galería filtrable** con tarjetas visuales. * **Sección narrativa** sobre el Puerto y el Rancho. * **Secciones destacadas**: Experiencias, Alojamiento, Restaurantes. * **Mapa general**. * **CTA final**. * **Footer minimalista**. ### 1.2 Página de Detalles * **Header minimalista** con back, favoritos y transparencia dinámica. * **Galería/hero** tipo carrusel. * **Bloque de título** y datos esenciales. * **Descripción completa**. * **Información práctica** (precios, horarios, duración, restricciones, servicios, etc.). * **Mapa ligero** y punto de encuentro. * **CTA principal** (contactar, reservar, llamar). * **Contacto** (teléfono, WhatsApp, redes, dirección). * **Contenido relacionado**. * **Footer**. --- ## 2. Design Directives ### 2.1 Identidad visual * Estética moderna, cálida, inspirada en paisajes costeros de Baja California Sur. * Paleta sugerida: tonos arena, beige claro, azules suaves, verdes apagados. * Uso de fotografía como elemento protagonista. ### 2.2 Interacción * Animaciones suaves: fade-in, microinteracciones, deslizamientos cortos. * Navegación simple, sin sobrecargar la pantalla. * Tarjetas con sombras tenues y bordes redondeados. * Botones grandes y visibles. ### 2.3 Tipografía * Títulos limpios y amigables. * Cuerpo legible con buen interlineado. * Jerarquía clara sin barroquismo. ### 2.4 Componentes clave * Tarjetas (servicios, experiencias, lugares). * Menú de categorías. * Carrusel de imágenes. * Header dinámico. * Modal / vista de detalle (single dynamic page). * Favoritos persistentes. --- ## 3. Sitemap ### Home (/) * Hero * Categorías * Galería filtrable * Sobre el Puerto y el Rancho * Destacados (experiencias, alojamiento, restaurantes) * Mapa * CTA final ### El Puerto (/el-puerto) * Historia * Cultura * Actividades * Galería * Mapa ### El Rancho (/el-rancho) * Historia * Actividades * Galería * Mapa interno ### Experiencias (/experiencias) * Listado each: /experiencias/:slug ### Sitios de Interés (/sitios-de-interes) * Listado each: /sitios-de-interes/:slug ### Alojamiento (/alojamiento) * Listado each: /alojamiento/:slug ### Restaurantes (/restaurantes) * Listado each: /restaurantes/:slug ### Servicios (/servicios) * Listado each: /servicios/:slug ### Internet (/internet) ### Favoritos (/favoritos) ### Contacto (/contacto) ### Acerca (/acerca) ### Mapa (/mapa) ### Aviso de privacidad (/aviso-de-privacidad) ### Términos (/terminos-y-condiciones) --- ## 4. Design System ### 4.1 Grid * Mobile-first. * Estructura fluida. * Tarjetas en 1 columna (mobile) y 2-4 columnas (desktop). ### 4.2 Componentes **Tarjeta estándar** * Imagen principal. * Título. * Subcategoría. * Favorito. * Mini descripción. **Header dinámico** * Transparente al inicio. * Fondo sólido al hacer scroll. * Botón menú (mobile). * Traductor. * Redes sociales. **Botones** * Primarios: CTA (reservar, contactar). * Secundarios: favoritos, compartir. **Galería** * Carrusel táctil. * Modos de pantalla completa. **Filtros y categorías** * Iconos simples. * Estados activos claros. ### 4.3 Iconografía * Estilo lineal. * Inspirado en apps contemporáneas. * Coherencia visual entre categorías. ### 4.4 Animaciones * Duración entre 150–250ms. * Easing suave. * Comportamiento discreto. --- ## 5. Contenido Dinámico Todos los detalles individuales (servicios, restaurantes, experiencias, etc.) serán cargados desde una única subpágina dinámica, usando React para manejar vistas, transiciones y funcionamiento offline-first. Estructura del contenido en la página de detalles: * Hero / galería * Título y metadata * Descripción * Información práctica * Mapa * CTA principal * Contacto * Relacionados --- Este documento reúne los lineamientos generales del proyecto de UI/UX, el diseño, el sitemap y el sistema visual que guiarán las siguientes fases de wireframes, prototipado y diseño final.