Bodega familiar · Arribes del Duero · Zamora
Sitio web oficial diseñado y desarrollado como proyecto fin de ciclo de DAW
Rediseño completo del sitio WordPress original de la bodega. Construido en Astro 6 con generación estática (SSG), componentes React con Islands Architecture y un diseño editorial propio — rápido, accesible y bilingüe.
El Hato y el Garabato es una bodega familiar del municipio de Formariz, en el Parque Natural Arribes del Duero (Zamora). Sus vinos, elaborados con variedades autóctonas como Juan García, Bruñal y Puesta en Cruz, tienen una marcada personalidad de territorio.
Este proyecto migra el sitio WordPress + Astra original a una arquitectura JAMstack moderna: Astro 6 genera HTML estático por ruta, React 18 gestiona la interactividad mediante islas aisladas, y Sanity CMS centraliza el contenido sin requerir conocimientos técnicos.
| 🍾 | Catálogo de vinos Ficha completa por botella: notas de cata visual, olfativa y gustativa, datos analíticos y precio. Animación de revelado al hacer scroll. |
| 🛒 | Tienda con carrito Selector de cantidad, resumen del pedido, subtotales y formulario de envío a Formspree. Estado compartido entre islas con Nanostores. |
| 📰 | Blog y prensa Artículos propios y apariciones en medios, con filtro multi-selección por categoría, AnimatePresence por tarjeta y soporte de vídeo. |
| 🗺️ | Enoturismo Página de visitas con formularios de reserva independientes para cada experiencia (visita bodega / visita viña + bodega) y mapa embebido. |
| 🌐 | Bilingüe ES / EN Cambio de idioma en tiempo real sin recarga de página. Persistencia en localStorage. Títulos de página actualizados por ruta en ambos idiomas. |
| 🌙 | Modo oscuro / claro Tema completo con variables CSS y atributo data-theme. Activable desde la barra de navegación, persistente entre sesiones. |
| ♿ | Accesibilidad WCAG 2.1 AA Skip link, focus-visible global, ARIA semántico, labels accesibles, jerarquía de headings correcta y contraste AA verificado en toda la interfaz. |
| ⚡ | Rendimiento HTML estático por ruta, JS de React cargado solo donde hace falta. Scroll suave con Lenis, animaciones con Framer Motion 12. |
| 📱 | Diseño responsivo Adaptado a móvil, tablet y escritorio. Navegación con menú hamburguesa, tipografía fluida con clamp() y layouts adaptativos. |
El diseño es completamente personalizado, sin frameworks de estilos, construido sobre variables CSS globales para garantizar coherencia visual en toda la aplicación.
| Tipografía editorial | Cormorant Garamond — serif de alto contraste para títulos y precios |
| Tipografía de caps | Cinzel — versalitas para etiquetas y navegación |
| Tipografía de interfaz | Jost — sans-serif limpia para cuerpo y UI técnica |
| Color base | #faf8f3 — blanco roto cálido (papel verjurado) |
| Acento dorado | #c8a255 — inspirado en el color del vino añejo |
| Fondo oscuro | #15110e — marrón casi negro para el modo noche |
Las animaciones acompañan el scroll sin entorpecerlo: parallax en heroes con useScroll + useTransform, gris-a-color en fotos de bodega y equipo, tilt 3D en tarjetas, CountUp animado en estadísticas y scroll reveals escalonados en listas.
Los vinos, artículos del blog, apariciones en prensa y textos del sitio se gestionan desde Sanity CMS (headless) sin necesidad de tocar código. El sitio incluye datos de respaldo para garantizar que siempre hay contenido visible, incluso sin conexión al CMS.