GlowQueen: Header Hero responsive para SPA & Beauty

Visión General

GlowQueen es un pequeño proyecto de maquetación web que forma parte del módulo de CSS Experto del Máster en Desarrollo Web Full Stack. El objetivo principal era replicar con la máxima fidelidad el header-hero de una página web para un negocio de SPA (Salud y Belleza) a partir de un diseño proporcionado en Figma.

Aunque los requisitos de la tarea solicitaban únicamente un diseño estático no responsive, decidí ir mucho más allá, transformando este ejercicio en un componente profesional, interactivo y completamente funcional. El resultado es un header que no solo es visualmente idéntico al diseño original, sino que incorpora características avanzadas de usabilidad propias de un sitio web moderno: un menú sticky, un dropdown interactivo y una experiencia móvil perfecta con un menú hamburguesa. Esta iniciativa demuestra mi compromiso con la calidad y mi capacidad para anticiparme a las necesidades reales de un proyecto.

El Desafío Técnico

El diseño, aunque hermoso, presentaba varios retos complejos que requerían un enfoque técnico avanzado:

Sistema de Capas Superpuestas

El diseño incluía tres capas de fondo superpuestas (beige, verde y blanco) además de una imagen decorativa de flor de loto y la fotografía principal de la modelo. Gestionar correctamente el z-index y el posicionamiento absoluto de todas estas capas, manteniendo la flexibilidad para el responsive, fue uno de los primeros desafíos.

Interactividad Avanzada

El mayor reto fue implementar todas las mejoras interactivas que no estaban en los requisitos:

• Menú Sticky: La barra de navegación se vuelve “pegajosa” al hacer scroll, con un sutil efecto de desenfoque (backdrop-filter) y una animación de entrada.
• Dropdown Interactivo: El enlace “More” despliega un submenú al hacer clic, con un icono que rota para indicar el estado abierto/cerrado. La lógica incluye cerrar el menú al hacer clic fuera de él.
• Menú Hamburguesa: En móviles, la navegación se transforma en un panel deslizante desde la derecha, con una animación suave. Se integra con los enlaces móviles y se gestiona el estado del botón.

Diseño Adaptativo Complejo

Las tarjetas testimoniales tenían posiciones absolutas con transformaciones específicas en desktop (transform: translateX(130px) translateY(180px)). El reto fue crear una estrategia de media queries que transformara este layout complejo en un flujo vertical natural en móvil, sin perder la jerarquía de la información.

Solución Implementada

Arquitectura SASS Modular y Escalable

Opté por una estructura de archivos SASS completamente modular que separa las responsabilidades y facilita el mantenimiento:

scss/
├── main.scss                # Archivo principal (importaciones)
├── _variables.scss          # Variables globales (colores, breakpoints, sombras)
├── _mixins.scss             # Mixins reutilizables (flex-center, respond-to, button-base)
├── _base.scss               # Estilos base y reset
├── _layout.scss             # Estructura de página y capas de fondo
├── _navigation.scss         # Estilos de navegación, menú sticky, dropdown y hamburguesa
├── _hero.scss               # Hero section, botones y feature grid
├── _testimonials.scss       # Tarjetas testimoniales
└── _responsive.scss         # Todos los media queries

Interactividad con JavaScript Vanilla

Para la capa de interacción, implementé una solución robusta y ligera con JavaScript puro:

// Lógica del menú sticky con detección de scroll
function handleScroll() {
    if (window.scrollY > 50) {
        siteHeader.classList.add('sticky');
    } else {
        siteHeader.classList.remove('sticky');
    }
}

// Toggle del menú hamburguesa con gestión de estados
menuToggle.addEventListener('click', function() {
    const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
    menuToggle.setAttribute('aria-expanded', !isExpanded);
    navMenu.classList.toggle('open');
    menuToggle.classList.toggle('open');
});

// Dropdown con cierre al hacer clic fuera
moreWrapper.addEventListener('click', function(e) {
    e.stopPropagation();
    this.classList.toggle('open');
});

document.addEventListener('click', function(e) {
    if (!moreWrapper.contains(e.target)) {
        moreWrapper.classList.remove('open');
    }
});

// Cerrar menú al hacer clic fuera o en un enlace
document.addEventListener('click', function(e) {
    if (navMenu.classList.contains('open') && 
        !navMenu.contains(e.target) && 
        !menuToggle.contains(e.target)) {
        navMenu.classList.remove('open');
        menuToggle.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
    }
});

menuLinks.forEach(link => {
    link.addEventListener('click', function() {
        navMenu.classList.remove('open');
        menuToggle.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
    });
});

Estrategia Responsive

Implementé 4 breakpoints clave para una experiencia fluida en todos los dispositivos, utilizando el mixin respond-to:

• 1920px+: Diseño fijo, anclado al lienzo original de Figma con todas las capas de fondo visibles.
• 1400px: El layout se vuelve fluido. La tipografía comienza a escalar y aparece el menú hamburguesa, transformando la navegación.
• 992px (Tablets): Punto de inflexión. Se ocultan todas las capas de fondo absolutas y la imagen de la modelo. El layout pasa a una sola columna.
• 576px (Móviles Pequeños): Ajustes finos de tipografía, espaciado y optimización del grid de características.

Sistema de Componentes Reutilizables

El diseño se construyó con componentes claramente definidos:

• Tarjetas Testimoniales: Con efecto de desenfoque (backdrop-filter), sombra suave y posicionamiento absoluto en escritorio que se transforma en flujo natural en móvil.
• Feature Grid: Grid de 3 columnas con iconos SVG circulares y fondo verde.
• Botones: Sistema completo con estilos base, primario (Book Now) y secundario (Watch Video), todos con estados hover.
• Navegación: Sistema que integra logo, menú con dropdown, acciones (buscar, bolsa) y enlaces de sign in/up, con transición fluida entre desktop y móvil.

Tecnologías Implementadas

Frontend

• HTML5: Estructura semántica con header, nav, main, section, article y atributos ARIA para accesibilidad.
• CSS3 Avanzado: Flexbox, Grid, posicionamiento absoluto, backdrop-filter, transiciones, transformaciones.
• SASS/SCSS: Arquitectura modular, variables, mixins, anidamiento, funciones y partials.
• JavaScript (Vanilla): Manipulación del DOM para menú sticky, dropdown y menú hamburguesa.

Herramientas de Diseño

• Figma: Análisis y extracción de medidas, colores y tipografías.
• SVG Optimizados: Iconos (masaje, loto, mortero, comillas) en formato vectorial.
• Font Awesome: Para iconografía adicional (búsqueda, bolsa, chevron, play).

Metodologías

• BEM: Nomenclatura consistente de clases (.hero-buttons, .btn-book, .feature-item).
• Arquitectura CSS: Separación de concerns con archivos parciales.
• Progressive Enhancement: Funcionalidad base sin JavaScript, experiencia mejorada con él.

Características Principales

• Fidelidad Pixel-Perfect: Recreación exacta del diseño Figma.
• Arquitectura SASS Modular: Código mantenible con 8 archivos parciales.
• Menú Sticky: Navegación fija al hacer scroll con efecto blur.
• Dropdown Interactivo: Submenú para “More” con indicador visual de estado.
• Menú Hamburguesa: Panel deslizante con integración de enlaces móviles.
• Sistema de Capas: 3 fondos superpuestos + imagen decorativa SVG.
• Diseño Responsive: 4 breakpoints estratégicos.
• Componentes Reutilizables: Sistema de diseño coherente.
• Iconos SVG y Vectoriales: Formato ligero y escalable.
• Accesibilidad: Atributos ARIA en elementos interactivos.
• Estados Hover: Feedback visual en todos los elementos interactivos.
• Sistema de Variables: Colores, tipografías y breakpoints centralizados.
• Mixins Eficientes: Código DRY para botones, transiciones y media queries.

Enlaces

Conclusión

GlowQueen es la materialización de mi filosofía de desarrollo: superar las expectativas y construir para el mundo real. Lo que comenzó como un ejercicio de maquetación estática se ha convertido en un componente de header profesional, interactivo y totalmente funcional.

Este proyecto demuestra mi capacidad para:

1. Ejecutar con precisión: Lograr un pixel-perfect del diseño original.
2. Pensar como un arquitecto front-end: Diseñar una estructura de código (SASS modular) mantenible y escalable.
3. Añadir valor con interactividad: Implementar con JavaScript vanilla características (sticky nav, dropdown, menú hamburguesa) que transforman la experiencia de usuario.
4. Priorizar la experiencia en todos los dispositivos: Crear un diseño responsive fluido.
5. Considerar la accesibilidad: Integrar atributos ARIA en elementos clave.

GlowQueen no es solo un header bonito; es un ejemplo tangible de mi enfoque para construir componentes web completos, robustos y listos para integrarse en cualquier proyecto profesional.