Agendar Test Drive

Design System / Banners e imágenes

Banners e imágenes

Medidas reales en px de cada banner y cada imagen usada en el sitio — escritorio y móvil, para el equipo de diseño. Ver también el design system completo(colores, tipografía, espaciado, botones).

Banners / Heroes

Medidas ancho × alto reales, medidas en el sitio corriendo (getBoundingClientRect), no estimadas. Referencia de escritorio: viewport 1440×900. Referencia de móvil: viewport 390×844. Los banners full-bleed ocupan el 100% del ancho del viewport — por eso el ancho cambia entre columnas.

MuestraSecciónComponenteMedida — escritorioMedida — móvilNotas
PDP Hero (carrusel)PDP Hero (carrusel)PdpHero.astro1440 × 640px390 × 560pxMismo video que el Hero de Home (video-kaiyi.mp4, fuente 1920×1080) + 2 imágenes de submodelos, rotación automática. Poster real por modelo (ver modeloPdp.ts → hero.poster), no un archivo fijo
Home Hero (carrusel)Home Hero (carrusel)HeroCarrusel.css1440 × 900px (100vh)390 × 844px (100vh)Pantalla completa — el alto es siempre el del viewport. Video fuente (video-kaiyi.mp4): 1920 × 1080px (16:9)
Encabezado de páginaEncabezado de páginaEncabezadoPagina.astro1440 × 350px390 × 280pxNosotros, Posventa, Sucursales, etc.
Especificaciones (banda oscura)Especificaciones (banda oscura)PdpEspecificaciones.astro1440 × 290px390 × 396pxMás alto en móvil: specs pasan de 1 fila a grid 2×2. Fondo real por modelo (ver modeloPdp.ts → especificaciones.fondo), no un archivo fijo. Alto aproximado (depende del contenido, no medido en vivo)
Destacados — 1 tile (de 3)Destacados — 1 tile (de 3)PdpDestacados.astro474 × 480px390 × 380px3 columnas de 474px c/u en escritorio (full-bleed, sin contenedor) → 1 columna apilada en móvil. Cada modelo trae sus propias 3 fotos (ver modeloPdp.ts → destacados)
Galería PDP — celda grandeGalería PDP — celda grandePdpGaleria.astro853 × 540px390 × 219px (16:9)Celda izquierda, ocupa 2 filas en escritorio (full-bleed, sin contenedor). Cada modelo trae sus propias 3 fotos (ver modeloPdp.ts → galeria)
Galería PDP — celda chicaGalería PDP — celda chicaPdpGaleria.astro569 × 269px390 × 219px (16:9)2 celdas apiladas a la derecha en escritorio
PDP — CTA finalPDP — CTA finalPdpCta.astro1440 × 435px390 × 298pxFondo oscuro + scrim. Fondo real por modelo (ver modeloPdp.ts → cta.fondo). Alto aproximado (depende del texto, no medido en vivo)
Posventa — CTA finalPosventa — CTA finalPosventaCta.astro1440 × 435px390 × 298pxMismo componente/estilo que el CTA del PDP, pero con su propio fondo fijo (ver posventaServiceCta.ts). Alto aproximado (depende del texto, no medido en vivo)
Posventa — Garantía (fondo)Posventa — Garantía (fondo)PosventaGarantia.astrofull-bleed, alto variablefull-bleed, alto variableVa después de "Talleres". Fondo oscurecido con overlay fuerte (grayscale + brightness 0.4) detrás de texto + lista de coberturas — no tiene una relación de aspecto fija, el alto lo define el contenido. Cualquier panorámica de buena calidad sirve: recomendado 1920×1080px o más, motivo centrado (la composición no es crítica por el overlay)
Noticia destacadaNoticia destacadaNoticiasDestacada.astro1136 × 480px347 × 360pxNo es full-bleed: va dentro del contenedor (máx. 1280px)
Home — Showroom (video)Home — Showroom (video)SeccionShowroom.astro1440 × 648px (72vh, full-bleed)390 × 439px (52vh, ≤560px)Última sección de la Home, va después de "Posventa". Es el mismo video-kaiyi.mp4 del Hero (fuente 1920×1080) con otro recorte: clamp(440px, 72vh, 680px) en escritorio, clamp(340px, 52vh, 480px) en móvil. Con filtro grayscale + oscurecido. Medida calculada desde el CSS, no medida en vivo
Nosotros — CTA finalNosotros — CTA finalNosotrosCta.astro1440 × 435px390 × 298pxÚltima sección de /nosotros, mismo patrón que el CTA del PDP/Posventa (full-bleed, fondo oscuro + scrim). Alto aproximado (depende del texto, no medido en vivo)

Imágenes

Dimensión del archivo fuente tal como está en /public (el tamaño real del asset, no el de despliegue en pantalla). Formato y peso incluidos para referencia de exportación.

Tarjeta de modelo

Tarjeta de modelo

/img/modelos/kaiyi-x3.webp

Tamaño original
1800 × 796px
Formato
WEBP · 86KB
Despliegue — escritorio
aspect-ratio: 16 / 9
Despliegue — móvil
igual

Grid de modelos (home, /modelos/)

TarjetaModelo.astro

Mega menú — imagen de modelo

Mega menú — imagen de modelo

/img/x3/side.webp

Tamaño original
1600 × 900px
Formato
WEBP · 47KB
Despliegue — escritorio
aspect-ratio: 16 / 6.8
Despliegue — móvil
menú oculto (hamburguesa)

Con máscara radial

NavegacionPrincipal.astro

Colorizer PDP (auto sin fondo)

Colorizer PDP (auto sin fondo)

/img/x3/colors/negro.png

Tamaño original
1440 × 788px
Formato
PNG-24 (alpha) · 411KB
Despliegue — escritorio
width: 92% del contenedor, contain
Despliegue — móvil
igual

Canal alpha real — cambia según versión + color

PdpVersiones.astro

Home — carrusel de modelo

Home — carrusel de modelo

/img/x3/colors/rojo.png

Tamaño original
1440 × 788px
Formato
PNG-24 (alpha) · 597KB
Despliegue — escritorio
aspect-ratio: 16 / 9
Despliegue — móvil
aspect-ratio: 16 / 10 (≤860px)

"Elegí tu Kaiyi"

SelectorModelos.css

Noticia — tarjeta

Noticia — tarjeta

/img/noticias/noticia1.webp

Tamaño original
1000 × 666px
Formato
WEBP · 30KB
Despliegue — escritorio
height: 210px
Despliegue — móvil
igual (columna única)

Grid 3 → 1 columna, centrado

SeccionNoticias.astro

Nosotros — Stats (imagen)

Nosotros — Stats (imagen)

/img/x7/hero.webp

Tamaño original
2200 × 1237px
Formato
WEBP · 80KB
Despliegue — escritorio
aspect-ratio: 4 / 3 — recorta ~12,5% de cada costado (la fuente actual es 16:9 nativo)
Despliegue — móvil
aspect-ratio: 16 / 9 (≤900px) — se ve completa, sin recortar

Va justo después del banner, al lado del contador animado ("150.000 km o 5 años de garantía"). Para que el recorte a 4:3 de escritorio no corte lo importante: subí la foto en 16:9 (mínimo ≈1600×900px) con el motivo principal centrado dentro del 75% central del ancho

NosotrosStats.astro

Home — Sobre Nosotros (carrusel)

Home — Sobre Nosotros (carrusel)

/img/x7/interior-asientos.webp

Tamaño original
1400 × 787px
Formato
WEBP · 80KB
Despliegue — escritorio
aspect-ratio: 4 / 3, width: 420px (→ 420×315px)
Despliegue — móvil
300×225px (≤900px) · 240×180px (≤480px)

Va justo después de "Elegí tu Kaiyi". Carrusel infinito con 6 fotos reutilizadas de otras secciones (tamaños originales entre 1200×675 y 2200×1237px) — el recorte final siempre es 4:3, object-fit: cover

SeccionNosotros.astro

Logo — header

Logo — header

/logos/Nuevo%20logo%20Kaiyi-01.png

Tamaño original
4000 × 1550px
Formato
PNG-24 (alpha) · 53KB
Despliegue — escritorio
width: 176px
Despliegue — móvil
igual

Swap claro/oscuro según scroll

Encabezado.astro

Posventa — Talleres (imagen)

Posventa — Talleres (imagen)

/img/x3-pro/media-banner.webp

Tamaño original
2000 × 1125px
Formato
WEBP · 44KB
Despliegue — escritorio
aspect-ratio: 4 / 3
Despliegue — móvil
aspect-ratio: 4 / 3 (igual, solo cambia el ancho del contenedor)

Va después de "Intro". La fuente actual es 16:9 — se recorta al 75% central del ancho (mismo recorte 4:3 en todos los tamaños). Si subís una nueva, mejor ya en 4:3 con el motivo centrado

PosventaSplit.astro

Posventa — Pasos (3 fotos)

Posventa — Pasos (3 fotos)

/img/x3/hero.webp

Tamaño original
2200 × 1237px
Formato
WEBP · 128KB
Despliegue — escritorio
fondo de tarjeta, ancho ≈363px (grid de 3, alto según contenido)
Despliegue — móvil
1 columna (≤900px)

Va después de "Garantía", antes del CTA final. 3 fotos reutilizadas de otras secciones (tamaños originales entre 1200×675 y 2200×1237px) — cada una es el fondo de un paso ("Agendá tu cita" / "Diagnóstico" / "Retirá tu vehículo"), invisible por defecto y solo se ve oscurecida al hacer hover. Recomendado 1600×900px (16:9) o más — la composición no es crítica

PosventaPasos.astro