// Hero variants — 3 different treatments. All use real photography. const HERO_IMAGES = { port: "https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=2400&q=85&auto=format&fit=crop", ship: "https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=2400&q=85&auto=format&fit=crop", container: "https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=2400&q=85&auto=format&fit=crop", crane: "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=2400&q=85&auto=format&fit=crop", truck: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=2400&q=85&auto=format&fit=crop", containerSide: "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=2400&q=85&auto=format&fit=crop", }; // ───────────────────────────────────────────────────────────── // V1 — Editorial full-bleed // ───────────────────────────────────────────────────────────── function HeroFullbleed({ t, anim }) { const { pal, typo, dens } = t; return (
Especialistas en carga líquida a granel · Desde 2014

Líquidos a granel.
Del valle al puerto.

Especialistas en flexitanks e isotanks. Cada gota de aceite, jugo y vino que sale de Cuyo hacia los principales puertos del mundo.

); } // ───────────────────────────────────────────────────────────── // V2 — Split tile (default) // ───────────────────────────────────────────────────────────── function useMobile(bp = 720) { const [mob, setMob] = React.useState(() => window.innerWidth <= bp); React.useEffect(() => { const h = () => setMob(window.innerWidth <= bp); window.addEventListener("resize", h, { passive: true }); return () => window.removeEventListener("resize", h); }, [bp]); return mob; } // ───────────────────────────────────────────────────────────── // V2 mobile — single-viewport editorial cover // Full-bleed photo as background for the WHOLE hero, with all // content (title, body, CTAs, stats, marquee) stacked over a // dark bottom gradient so everything fits in one screen. // ───────────────────────────────────────────────────────────── function HeroSplitMobile({ t, anim }) { const { pal, typo } = t; const { lang } = useLang(); const s = I18N[lang].hero; const NAV_H = 64; return (
{/* ═══════ FULL-BLEED PHOTO BACKGROUND ═══════ */} Contenedor de carga marítima saliendo del puerto {/* top vignette — nav legibility */}
{/* bottom heavy vignette — content legibility */}
{/* ═══════ TOP CHIPS — status + coords ═══════ */}
{s.status}
32°53′S · 68°51′W
{s.vessel}
{/* breathing space — pushes content to the bottom half */}
{/* ═══════ CONTENT STACK — over bottom gradient ═══════ */}
{/* hairline accent rule */} {/* ═══════ STATS RIBBON — 3 cols, transparent ═══════ */}
{s.stats.map(([k, v], i) => (
0 ? 10 : 0, borderLeft: i > 0 ? "1px solid rgba(255,255,255,0.16)" : "none", }}>
{k}
{v}
))}
{/* ═══════ DESTINATIONS MARQUEE — at the very bottom ═══════ */}
{[...DESTINATIONS, ...DESTINATIONS, ...DESTINATIONS].map((d, i) => ( {d} ))}
); } function HeroSplit({ t, anim }) { const { pal, typo, dens } = t; const { lang } = useLang(); const s = I18N[lang].hero; const mobile = useMobile(); const NAV_H = 64; if (mobile) return ; return (
{/* TEXT column */}
{s.eyebrow}

{s.h1a}
{s.h1b}
{s.h1c}

{s.body}

{/* PHOTO column */}
{/* status tag */}
{s.status}
{/* coordinate ticks */}
32°53′S · 68°51′W
{s.vessel}
{/* data strip below photo */}
{s.stats.map(([k, v], i) => (
0 ? `1px solid ${pal.inverseInk}1f` : "none", paddingLeft: i > 0 ? 20 : 0 }}>
{k}
{v}
))}
{/* Desktop-only full-width marquee — bottom of hero, spans both columns */} {!mobile && (
{[...DESTINATIONS, ...DESTINATIONS, ...DESTINATIONS].map((d, i) => ( {d} ))}
)}
); } // ───────────────────────────────────────────────────────────── // V3 — Centered bold // ───────────────────────────────────────────────────────────── function HeroCentered({ t, anim }) { const { pal, typo, dens } = t; return (
Desde 2014 · Mendoza → Mundo

Especialistas en{" "} carga líquida a granel.

Flexitanks, isotanks y dry containers desde Mendoza hacia los principales puertos de Europa, Asia y América. Operamos +3.000 contenedores FCL al año.

SCROLL
); } const HERO_VARIANTS = { fullbleed: { name: "Editorial · Full-bleed", Component: HeroFullbleed }, split: { name: "Split · Foto + Texto", Component: HeroSplit }, centered: { name: "Centered · Bold", Component: HeroCentered }, }; Object.assign(window, { HeroFullbleed, HeroSplit, HeroCentered, HERO_VARIANTS, HERO_IMAGES, useMobile });