Saltar al contenido
Gataca Sites

GATACA / PÁGINA

Aureon V12 Landing

Una campaña completa a pantalla completa

Aureon V12 Landing transforma el recurso hero en una landing editorial de automoción compuesta por tres paneles a pantalla completa, uno por modelo, usando las tres imágenes indicadas como narrativa principal. Cada bloque ocupa el 100% del viewport y el desplazamiento se resuelve con scroll-snap para que el usuario avance de un modelo al siguiente de forma limpia y contundente.

La experiencia mantiene el lenguaje visual premium: header fijo con navegación propia, fotografía protagonista, overlays contenidos, copy en inglés y llamadas a la acción elegantes. Cada panel cambia de modelo, titular, texto y metadatos sin necesidad de sobrecargar la interfaz, mientras el footer remata la pieza dentro del último bloque con una presentación coherente y profesional.

El código prioriza rendimiento y SEO: la primera imagen se trata como recurso prioritario, las siguientes se cargan de forma optimizada, el movimiento se apoya principalmente en CSS, y la página respeta prefers-reduced-motion reduciendo transiciones y desactivando efectos no esenciales cuando corresponde.

GATACA / PÁGINA

Aureon V12 HERO

Prestaciones visuales con carga inmediata

Aureon V12 HERO evoluciona a un carrusel editorial de tres imágenes de fondo para presentar varios deportivos exclusivos dentro de un mismo Hero. Cada imagen conserva un zoom progresivo tipo hero y se alterna con transición de opacidad y desenfoque, manteniendo la primera imagen como LCP prioritaria para rendimiento y SEO.

El copy visible del Hero permanece en inglés y cambia de manera sincronizada con cada modelo, aplicando también una transición de desenfoque suave para reforzar la sensación de campaña automovilística premium. Bruno Ace se utiliza en H1 y H2 para sostener el carácter futurista del diseño, mientras Lato resuelve navegación, párrafo, botones y metadatos con buena legibilidad.

El código sigue priorizando HTML semántico, CSS optimizado y un JavaScript muy ligero para el menú móvil y la rotación del contenido. También respeta prefers-reduced-motion, desactiva el carrusel cuando corresponde y mantiene una experiencia fluida, rápida y optimizada para SEO.