GlowQueen: Header Hero para SPA & Beauty - CSS Avanzado

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 era replicar con la máxima fidelidad posible 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 más allá e implementar una solución completamente responsive con arquitectura SASS modular. Esta decisión me permitió profundizar en técnicas avanzadas de organización CSS, sistemas de capas superpuestas y metodologías como BEM, creando un componente profesional y escalable que mantiene su integridad visual en todos los dispositivos.

El Desafío Técnico

El diseño presentaba varios retos interesantes que requerían un enfoque cuidadoso:

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 manteniendo la flexibilidad responsive fue uno de los mayores desafíos.

Diseño Adaptativo Complejo

Las tarjetas testimoniales tenían posiciones absolutas con transformaciones específicas en desktop (transform: translateX(130px) translateY(180px)) que debían transformarse en un flujo natural en móvil. Esto requería una estrategia de media queries cuidadosamente planificada.

Componentes Visualmente Ricos

El diseño incluía:

• Grid de características con iconos SVG circulares
• Tarjetas testimoniales con efecto blur y sombras
• Botones con estados hover personalizados
• Navegación compleja con iconos y divisores

Solución Implementada

Arquitectura SASS Modular

Opté por una estructura de archivos SASS completamente modular que separa las responsabilidades:

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
├── _hero.scss               # Hero section y feature grid
├── _testimonials.scss       # Tarjetas testimoniales
└── _responsive.scss         # Todos los media queries

Esta organización permite:

• Mantenibilidad: Cada componente tiene su propio archivo
• Reutilización: Variables y mixins centralizados
• Escalabilidad: Fácil añadir nuevos componentes

Sistema de Variables Robusto

// _variables.scss
$primary-dark: #264065;
$primary-green: #A9D6CB;
$background-beige: #FAF8F5;
$breakpoint-xl: 1400px;
$breakpoint-lg: 992px;
$shadow-card: 0 18px 30px -12px rgba(0,0,0,0.15);

Mixins Inteligentes

// _mixins.scss
@mixin respond-to($breakpoint) {
    @if $breakpoint == sm {
        @media (max-width: $breakpoint-sm) { @content; }
    } @else if $breakpoint == lg {
        @media (max-width: $breakpoint-lg) { @content; }
    } @else if $breakpoint == xl {
        @media (max-width: $breakpoint-xl) { @content; }
    }
}

Estrategia Responsive

Implementé 4 breakpoints clave:

• 1920px+: Diseño fijo con ancho de 1920x1080 (fiel al diseño original)
• 1400px: Transición a layout fluido, testimonios reposicionados
• 992px: Mobile-first, capas de fondo ocultas, testimonios apilados
• 576px: Ajustes para móviles pequeños (tipografía reducida, botones apilados)

Gestión de Capas

// Sistema de z-index organizado
.bg-beige { z-index: 1; }
.bg-green { z-index: 1; }
.bg-white-bottom { z-index: 2; }
.flower-svg-bg { z-index: 5; }
.main-content { z-index: 10; }
.testimonial-card.card1 { z-index: 30; }

Tecnologías Implementadas

Frontend

• HTML5: Estructura semántica con header, nav, section y article implícitos
• CSS3 Avanzado: Flexbox, Grid, posicionamiento absoluto, backdrop-filter
• SASS/SCSS: Arquitectura modular, variables, mixins, anidamiento

Herramientas de Diseño

• Figma: Análisis y extracción de medidas, colores y tipografías
• SVG Optimizados: Todos los iconos en formato vectorial

Metodologías

• BEM: Nomenclatura consistente de clases
• Arquitectura CSS: Separación de concerns
• Mobile First: Aunque el diseño era desktop-first, apliqué principios mobile-first en la transición

Características Principales

• Fidelidad Pixel-Perfect: Recreación exacta del diseño Figma
• Arquitectura SASS Modular: 7 archivos parciales bien organizados
• Sistema de Capas Complejo: 3 fondos superpuestos + imagen decorativa
• Diseño Completamente Responsive: 4 breakpoints para todos los dispositivos
• Componentes Reutilizables: Sistema de diseño coherente
• Iconos SVG: Todos los iconos en formato vectorial optimizado
• Semántica HTML: Estructura correcta y accesible
• Estados Hover: Todos los elementos interactivos tienen feedback visual
• Sistema de Variables: Colores, tipografías, sombras y breakpoints centralizados
• Mixins Eficientes: Código DRY y mantenible

Enlaces

Conclusión

GlowQueen representa mi enfoque hacia el desarrollo CSS profesional: ir más allá de los requisitos mínimos para crear soluciones robustas, mantenibles y escalables. Aunque la tarea solo pedía un diseño estático, la implementación de SASS, arquitectura modular y responsive design demuestra mi compromiso con las buenas prácticas y la calidad del código.

Este proyecto, aunque pequeño en alcance, incorpora principios fundamentales que aplico en desarrollos más complejos: organización modular, sistemas de diseño coherentes, atención al detalle en la implementación visual y una mentalidad de mejora continua. Es la base sobre la que construyo proyectos full-stack más ambiciosos como AnGoTest.