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.
| Muestra | Sección | Componente | Medida — escritorio | Medida — móvil | Notas |
|---|---|---|---|---|---|
| PDP Hero (carrusel) | PdpHero.astro | 1440 × 640px | 390 × 560px | Mismo 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) | HeroCarrusel.css | 1440 × 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ágina | EncabezadoPagina.astro | 1440 × 350px | 390 × 280px | Nosotros, Posventa, Sucursales, etc. | |
| Especificaciones (banda oscura) | PdpEspecificaciones.astro | 1440 × 290px | 390 × 396px | Má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) | PdpDestacados.astro | 474 × 480px | 390 × 380px | 3 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 grande | PdpGaleria.astro | 853 × 540px | 390 × 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 chica | PdpGaleria.astro | 569 × 269px | 390 × 219px (16:9) | 2 celdas apiladas a la derecha en escritorio | |
| PDP — CTA final | PdpCta.astro | 1440 × 435px | 390 × 298px | Fondo oscuro + scrim. Fondo real por modelo (ver modeloPdp.ts → cta.fondo). Alto aproximado (depende del texto, no medido en vivo) | |
| Posventa — CTA final | PosventaCta.astro | 1440 × 435px | 390 × 298px | Mismo 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) | PosventaGarantia.astro | full-bleed, alto variable | full-bleed, alto variable | Va 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 destacada | NoticiasDestacada.astro | 1136 × 480px | 347 × 360px | No es full-bleed: va dentro del contenedor (máx. 1280px) | |
| Home — Showroom (video) | SeccionShowroom.astro | 1440 × 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 final | NosotrosCta.astro | 1440 × 435px | 390 × 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
/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
/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)
/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
/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
/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)
/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)
/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
/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)
/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)
/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

.webp)

