Sistema de Diseño

Layout

Carrusel auto-play 6.5s con 3 slides; columna izquierda tipográfica y producto a la derecha; flechas centradas verticalmente con glass.

Estilo

Borde blanco de 4px, esquinas inferiores rounded-[120px] que se aplanan al hacer scroll. Sombra inset suave por la imagen full-bleed.

Animación · Transición

border-radius scroll-driven (1100ms · cubic-bezier(0.16,1,0.3,1)), parallax+zoom scrub (scale 1→1.18), cross-fade de fondo 1400ms, entrada hero-fade 900ms.

Colores

Cada slide define accent / soft / text propios; fondo dinámico transition-[background-color] 1200ms.

Layout

Carrusel arrastrable con padding interno; cards 1/2/3/4 columnas responsive; última card CTA gradient al catálogo.

Estilo

Cards rounded-[20px], shadow-sm → shadow-xl al hover; chip 8–11px sobre imagen; precio en bloque bg-primary con tipografía black 20px.

Animación · Transición

Hover lift -translate-y-1 (500ms), zoom interior de imagen scale 1.04 en 1200ms, flecha CTA translate-x-1.

Colores

Card blanca, chip wire-ink/80, precio bg-primary + primary-foreground.

Layout

Mismo patrón que productos; ratio 281/359; chip dificultad arriba; meta inferior con categoría y 'Preparación aprox. XX min'.

Estilo

Imagen full-bleed con overlay sutil; tipografía display 16–18px; tiempo en muted-foreground.

Animación · Transición

Hover lift -translate-y-1 (500ms) + zoom de imagen 1200ms + sombra que crece a xl.

Colores

Chip text-foreground sobre white/80 backdrop-blur; meta en text-muted-foreground.

Layout

3 columnas con desfase vertical en la columna central para romper el ritmo y dar aire editorial.

Estilo

Sin sombras, esquinas rounded-2xl, gap generoso (gap-6 md:gap-8).

Animación · Transición

Solo hover-scale 1.02 en imágenes (300ms ease-out).

Colores

Fondo background, imágenes sin tinte.

Layout

Card 2 columnas con fondo #fef3e7 (cálido); copy + CTA a la izquierda, imagen real de tienda a la derecha.

Estilo

Card rounded-3xl, sombra suave; tipografía display 32–40px con primary acentuando 'punto de venta'.

Animación · Transición

Botón con hover -translate-y-0.5 + shadow-md (500ms); icono ArrowRight translate-x-1 al hover del grupo.

Colores

Fondo #fef3e7, texto wire-ink, acento primary.

Layout

Card 2 columnas con fondo #fbe6e2 (rosado) para diferenciarse de distribuidores; estructura espejo.

Estilo

Mismo lenguaje que distribuidores pero paleta más rosada para señalizar contenido editorial.

Animación · Transición

Idéntica a distribuidores; consistencia entre banners contiguos.

Colores

Fondo #fbe6e2, primary para CTA.

Layout

Marquee infinito 30s con pausa en hover; ubicado al final del home antes del footer.

Estilo

Tipografía display semibold; íconos lineales del mismo trazo; máscara lateral gradient para fade.

Animación · Transición

animate-[cert-scroll_30s_linear_infinite], hover dispara group-hover:[animation-play-state:paused]; cada item hover-scale 1.05.

Colores

Foreground sobre background; máscara con linear-gradient to right transparent → black → transparent.

Layout

Fixed top con grid 1fr_auto_1fr; nav centrada, logo sobresale, utility icons a la derecha.

Estilo

Backdrop blanco, borde sutil inferior; logo con caja roja al tope, monograma compacto al hacer scroll.

Animación · Transición

transition-[height] 500ms · cubic-bezier(0.22,1,0.36,1); search overlay slide-in-from-top-2 + fade-in 200–500ms; mega-menú fade-in 200ms con sombra 0 24px 48px -12px rgba(20,20,15,0.18).

Colores

bg-card/95 + backdrop-blur; logo container bg-primary; links text-foreground hover:text-primary.

Layout

Grid md:grid-cols-12; columna derecha (col-span-4 text-right) con login/registro y contacto de oficinas.

Estilo

Tema dark wire-ink; tipografía sans 13–14px; separadores hairline border-border/40.

Animación · Transición

Links hover underline-offset-2 con transition-colors 300ms; social icons hover-scale 1.1.

Colores

bg-wire-ink, text-wire-10, primary para CTAs principales.