GESTIONS UO_
Sys_Status: OnlineTarget: elígete_johana

Conceptos Visuales

> Exploración de 4 vectores de diseño para el retiro Elígete con Amor. > Responsable de proyecto: Johana. Seleccione un módulo para revisión.

Clásico Orgánico

MinimalistaCálidoLanding

Diseño minimalista de una sola página. Tonos cálidos (crema y cuarzo rosa), tipografía suave y un flujo natural centrado en la conversión directa.

Stack_Params

  • [Core / Fullstack]
    Next.js (App Router):Framework de React con SSR para SEO óptimo y tiempos de carga instantáneos.
  • [Frontend / UI]
    Tailwind CSS v4:Motor utilitario configurado con variables CSS nativas para la paleta de colores orgánicos.
  • [Assets]
    Next/Image:Optimización automática de imágenes fotográficas con formato WebP/AVIF y desenfoque (blur) de carga.
  • [Renderizado]
    SVGs Inline:Iconografía (flor de loto, corazón) inyectada directamente en el DOM para evitar latencia.
Ejecutar Previsualización

Elegancia Boutique

BoutiquePremiumAsimétrico

Estructura asimétrica premium. Pantalla dividida (Split-screen) combinando fotografía envolvente con tipografía serif itálica muy refinada.

Stack_Params

  • [Core / Fullstack]
    React Server Components:Arquitectura que renderiza la estructura principal en el servidor, enviando cero JS al cliente.
  • [Frontend / UI]
    CSS Grid Complex:Uso avanzado de cuadrículas para lograr el efecto de imagen desalineada y solapamiento tipográfico.
  • [Tipografía]
    Next/Font:Carga optimizada de fuentes Serif (ej. Playfair Display) sin Layout Shift (CLS).
  • [Motor Gráfico]
    Mix-Blend-Modes:Filtros CSS nativos (multiply/overlay) para fusionar las fotografías con la paleta de color de la marca.
Ejecutar Previsualización

Carta Abierta

StorytellingEditorialNarrativo

Enfoque de Storytelling. Simula una invitación personal en papel con una línea de tiempo vertical (Journey) que explica la experiencia paso a paso.

Stack_Params

  • [Core / UX]
    Intersection Observer:Animaciones de revelado al hacer scroll (Fade-in-up) aplicadas a los nodos de la línea de tiempo.
  • [Frontend / UI]
    Tailwind CSS v4:Uso intensivo de espaciado matemático y tracking tipográfico amplio para estética de lujo silencioso.
  • [Arquitectura CSS]
    Pseudo-elementos:Generación de la línea de tiempo y marcadores dinámicos usando ::before y ::after para un DOM limpio.
  • [Performance]
    Data URIs (SVG Patterns):Fondos con texturas sutiles (ruido/papel) generados por algoritmos base64 sin peticiones externas.
Ejecutar Previsualización

Bento Grid

ModernoBentoConversión

Diseño moderno y estructurado. Los pilares del retiro se presentan en "cajas" de distintos tamaños con bordes redondeados y una barra de reserva flotante.

Stack_Params

  • [Core / UI]
    Sticky Positioning:Implementación de barra de CTA inferior persistente optimizada para ecosistemas móviles.
  • [Frontend / UX]
    CSS Backdrop Filters:Efectos de cristal (glassmorphism) en la barra de navegación y tarjetas con blur nativo.
  • [Arquitectura CSS]
    CSS Grid Auto-fit:Adaptación fluida de las cajas bento sin media queries complejas, garantizando responsividad total.
  • [Interacción]
    React Hooks (State):Gestión de estados locales ligeros para el comportamiento de hover direccional en las imágenes.
Ejecutar Previsualización
Hub