/* Home page with 3 hero variants */ const Marquee = () => { const items = [ { i: 'wrench', t: 'Servicio técnico especializado' }, { i: 'shield', t: 'Garantía oficial' }, { i: 'box', t: '+1.400 productos en stock' }, { i: 'nozzle', t: 'Repuestos originales siempre en stock' }, { i: 'award', t: '+15 años en el mercado' }, ]; const doubled = [...items, ...items, ...items]; return (
{doubled.map((it, i) => {it.t} ✕ )}
); }; /* ── Hero variants ────────────────────────────────────────────── */ const HeroIndustrial = ({ onNavigate }) => { const brands = ['HAWK', 'ANNOVI REVERBERI', 'INTERPUMP', 'POWERCLEAN', 'ELSEA', 'IPC']; const headlines = [ { top: 'Alta presión.', bottom: 'Italiana.' }, { top: 'Aspiración.', bottom: 'Industrial.' }, { top: 'Service.', bottom: 'Propio.' }, { top: 'Repuestos.', bottom: 'En stock.' }]; return (
{/* Blueprint grid */}
{/* Red corner accent */}
{/* Top tech strip */}
● ONLINE · Stock en tiempo real Haedo · Buenos Aires · Arg.
EDICIÓN 04 / 2026 +5491125181264
{/* ── LEFT: editorial text block ── */}
Desde 2009 · Equipamiento pro

Limpieza
industrial
sin{' '} excusas.

Hidrolavadoras, aspiradoras y lavatapizados para quienes trabajan cada día. Stock real de +1.400 productos y servicio técnico propio en Haedo.

{/* Brands strip */}
Representamos
{brands.map((b, i) => {b} )}
{/* ── RIGHT: product studio card ── */}
{/* Main product "photo" */}
{/* Corner specs tag */}
DESTACADO · 8% OFF
{/* Product SKU in corner */}
SKU · NX180-11M
{/* Central "product" — silhouette rectangle suggesting the hidrolavadora */}
{/* product decal */}
POWERCLEAN
NX180
180 BAR · 11 L/MIN
{/* nozzle line */}
{/* label stripe */}
{/* Floating spec badges */}
Desde
$1.448.655
6 × $241.443 s/int
{/* Spec annotations — leader lines */}
PRESIÓN
180 bar
CAUDAL
11 L/min
{/* Bottom meta strip */}
{[ { k: 'Stock', v: '1.400+', u: 'productos' }, { k: 'Envío', v: '24hs', u: 'CABA/GBA' }, { k: 'Service', v: 'Propio', u: 'en Haedo' }]. map((s) =>
{s.k}
{s.v}
{s.u}
)}
); }; const HeroEditorial = ({ onNavigate }) =>
EDICIÓN OTOÑO 2026 — N° 04

La potencia
tiene oficio.

Equipos de limpieza industrial seleccionados uno por uno. Especificaciones claras, service propio y stock real — no stock de catálogo.

{(() => { const pick = (catId) => window.RC_DATA.PRODUCTS.find((p) => p.cat === catId && p.image); const hidroHero = pick('hidro'); const aspiHero = pick('aspi'); const lavaHero = pick('lava'); return (
onNavigate('/categoria/hidrolavadoras')} style={{ borderRadius: 'var(--r-lg)', background: 'var(--ink)', position: 'relative', overflow: 'hidden', cursor: 'pointer' }}> {hidroHero?.image && {hidroHero.name}}
Destacado
Hidrolavadoras
Agua caliente a 80°C
onNavigate('/categoria/aspiradoras')} style={{ borderRadius: 'var(--r-lg)', cursor: 'pointer', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}> {aspiHero?.image && {aspiHero.name}}
Aspiradoras
onNavigate('/categoria/lavatapizados')} style={{ borderRadius: 'var(--r-lg)', cursor: 'pointer', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}> {lavaHero?.image && {lavaHero.name}}
Lavatapizados
Consejo del mes

Cómo elegir la hidrolavadora correcta

Potencia, caudal y fase eléctrica: los 3 datos que definen tu próximo equipo. Una guía rápida para no equivocarte.

Leer guía
); })()}
; const HeroBold = ({ onNavigate }) =>
· · · Desde 2009 · · ·

Powerclean.
No apto para tibios.

Hidrolavadoras, aspiradoras industriales y repuestos originales. Service propio. Envío a todo el país.

; /* ── Category strip ─────────────────────────────── */ const CategoryStrip = ({ onNavigate }) => { const { CATEGORIES } = window.RC_DATA; const icons = { hidro: 'pressure', aspi: 'vacuum', lava: 'sofa', vapor: 'steam', rep: 'nozzle' }; return (
01 / Categorías

Todo el equipamiento.
En un solo lugar.

{CATEGORIES.map((c, i) => )}
); }; /* ── Featured products with tabs ─────────────────── */ /** * CategoryTabs — pill row for selecting a category. Multiple visual variants * exposed via the homeTabsStyle tweak. * * Pill-row variants (share the same scrollable layout, differ in affordance): * default — scrollable + hide-scrollbar, no extra cue. * fades — gradient mask on left/right edges (~56px). * scrollbar — custom thin progress track + thumb below the row. * arrow — pulsing chevron at the right edge that hides at scroll end. * peek — active pill auto-centred so prev/next peek in from each side. * wrap — pills wrap to multiple rows; no scroll. * * Visual-restyle variants (same horizontal-scroll mechanic, different look): * underline — text-only labels with an animated underline under active. * chips — outline-style chips; active = filled dark. * icons — pill row with category icon + name. * * Layout-change variants (radically different markup): * dropdown — single button "Hidrolavadoras ▾" opens a list popover. * cards — icon-on-top cards in a swipeable row. */ const CategoryTabs = ({ categories, tab, setTab, variant = 'default' }) => { // Icon mapping shared across icon variants const CAT_ICONS = { hidro: 'pressure', aspi: 'vacuum', lava: 'sofa', vapor: 'steam', rep: 'nozzle' }; // ── Dropdown variant ──────────────────────────────────────────────────── if (variant === 'dropdown') { return ; } // ── Cards variant ─────────────────────────────────────────────────────── if (variant === 'cards') { return ; } // ── Pill-row variants (shared scrollable mechanic) ────────────────────── const scrollRef = React.useRef(null); const itemRefs = React.useRef({}); const [progress, setProgress] = React.useState(0); const [overflows, setOverflows] = React.useState(false); const [atEnd, setAtEnd] = React.useState(false); const measure = React.useCallback(() => { const el = scrollRef.current; if (!el) return; const max = el.scrollWidth - el.clientWidth; setOverflows(max > 4); if (max <= 4) { setProgress(0); setAtEnd(true); return; } setProgress(Math.min(1, Math.max(0, el.scrollLeft / max))); setAtEnd(el.scrollLeft >= max - 4); }, []); React.useEffect(() => { measure(); const el = scrollRef.current; if (!el) return; el.addEventListener('scroll', measure, { passive: true }); window.addEventListener('resize', measure); return () => { el.removeEventListener('scroll', measure); window.removeEventListener('resize', measure); }; }, [measure, variant]); // Peek variant: centre the active pill so prev/next peek in. // Real mobile browsers (iOS Safari especially) can race the initial layout — // the first effect can fire before fonts/text have settled and clientWidth/ // offsetLeft come back wrong. Centre on tab change AND on resize/orientation, // and run an instant initial centre via rAF so the row is already positioned // before paint instead of doing a smooth animation from 0. const didInitialCenter = React.useRef(false); React.useEffect(() => { if (variant !== 'peek') return; didInitialCenter.current = false; const center = (smooth) => { const el = scrollRef.current; const pill = itemRefs.current[tab]; if (!el || !pill) return; const target = pill.offsetLeft - (el.clientWidth - pill.clientWidth) / 2; el.scrollTo({ left: Math.max(0, target), behavior: smooth ? 'smooth' : 'auto' }); }; // Run twice on mount: once immediately on next frame, once on the frame // after, so layout has settled (fonts, images). 'auto' = instant so // there's no visible jump animation. let raf1 = 0, raf2 = 0; raf1 = requestAnimationFrame(() => { center(false); raf2 = requestAnimationFrame(() => { center(false); didInitialCenter.current = true; }); }); const onResize = () => center(false); window.addEventListener('resize', onResize); window.addEventListener('orientationchange', onResize); return () => { if (raf1) cancelAnimationFrame(raf1); if (raf2) cancelAnimationFrame(raf2); window.removeEventListener('resize', onResize); window.removeEventListener('orientationchange', onResize); }; }, [variant]); // Smooth-centre when the user changes tab (after the initial mount centre). React.useEffect(() => { if (variant !== 'peek') return; if (!didInitialCenter.current) return; const el = scrollRef.current; const pill = itemRefs.current[tab]; if (!el || !pill) return; const target = pill.offsetLeft - (el.clientWidth - pill.clientWidth) / 2; el.scrollTo({ left: Math.max(0, target), behavior: 'smooth' }); }, [tab, variant]); const isFades = variant === 'fades'; const isScrollbar = variant === 'scrollbar'; const isWrap = variant === 'wrap'; const isPeek = variant === 'peek'; const isArrow = variant === 'arrow'; const isUnderline = variant === 'underline'; const isChips = variant === 'chips'; const isIcons = variant === 'icons'; const FADE_W = 56; const showScrollbar = isScrollbar && overflows; const showArrow = isArrow && overflows && !atEnd; const outerStyle = { // Use `display: block` (not flex) for the scrollport. `display: flex` + // `overflow-x: auto` + a single child with `marginInline: auto` is a known // iOS Safari/Chrome-mobile gotcha: the auto margin absorbs the scrollable // overflow so the peek effect silently fails on real phones (worked fine // in narrow desktop previews because layout was different). Block + an // inline-flex child renders identically AND keeps scroll behaviour sane. display: 'block', overflowX: isWrap ? 'visible' : 'auto', WebkitOverflowScrolling: 'touch', scrollSnapType: isWrap || isPeek ? 'none' : 'x proximity', padding: '0 16px', scrollBehavior: 'smooth', whiteSpace: 'nowrap', // Centre the inline-flex pill row when it FITS (desktop). When it overflows // (mobile), text-align is ignored for the overflowing inline child and the // row starts at scrollLeft 0 — so peek still works. Best of both. textAlign: 'center', ...(isFades ? { maskImage: `linear-gradient(90deg, transparent 0, #000 ${FADE_W}px, #000 calc(100% - ${FADE_W}px), transparent 100%)`, WebkitMaskImage: `linear-gradient(90deg, transparent 0, #000 ${FADE_W}px, #000 calc(100% - ${FADE_W}px), transparent 100%)` } : {}), ...(isUnderline ? { borderBottom: '1px solid var(--line)' } : {}) }; // Underline + chips swap the filled-pill row background for a transparent one const innerStyle = { display: 'inline-flex', gap: isUnderline ? 0 : (isChips ? 8 : 4), padding: (isUnderline || isChips) ? 0 : 6, background: (isUnderline || isChips) ? 'transparent' : '#EEEEF6', borderRadius: isWrap ? 16 : 999, flexShrink: 0, // For peek: NO marginInline:auto — we want the inner row pinned to the // start so scrollLeft works predictably. For other variants (wrap, fit) // keep auto so it centres when it fits. ...(isPeek ? {} : { marginInline: 'auto' }), ...(isWrap ? { flexWrap: 'wrap', justifyContent: 'center' } : {}) }; const pillStyle = (active) => { // Underline: text only, bottom border on active if (isUnderline) return { padding: '14px 16px', borderRadius: 0, background: 'transparent', color: active ? 'var(--ink)' : 'var(--ink-3)', fontSize: 14, fontWeight: active ? 700 : 500, borderBottom: active ? '2px solid var(--ink)' : '2px solid transparent', marginBottom: -1, // overlap the row borderBottom transition: 'all .2s', whiteSpace: 'nowrap' }; // Chips: outline buttons, filled when active if (isChips) return { padding: '9px 18px', borderRadius: 999, background: active ? 'var(--ink)' : 'transparent', color: active ? '#fff' : 'var(--ink-2)', border: '1.5px solid ' + (active ? 'var(--ink)' : 'var(--line-2)'), fontSize: 13, fontWeight: 600, transition: 'all .2s', whiteSpace: 'nowrap' }; // Default pill (filled active, transparent inactive) return { padding: '10px 22px', borderRadius: 999, fontSize: 13, fontWeight: 600, background: active ? 'var(--ink)' : 'transparent', color: active ? '#fff' : 'var(--ink-3)', transition: 'all .2s', whiteSpace: 'nowrap', scrollSnapAlign: isPeek ? 'center' : 'none', ...(isIcons ? { padding: '8px 16px', display: 'inline-flex', alignItems: 'center', gap: 8 } : {}) }; }; return (
{categories.map((c) => { const active = tab === c.id; return ( ); })}
{/* Scrollbar variant — custom thin progress track */} {showScrollbar && (
)} {/* Arrow variant — pulsing chevron pointing at off-screen content */} {showArrow && ( )}
); }; // ── Dropdown variant ────────────────────────────────────────────────────── const CategoryDropdown = ({ categories, tab, setTab, icons }) => { const [open, setOpen] = React.useState(false); const rootRef = React.useRef(null); const active = categories.find((c) => c.id === tab); React.useEffect(() => { if (!open) return; const onClick = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onClick); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onClick); document.removeEventListener('keydown', onKey); }; }, [open]); return (
{open && (
{categories.map((c) => { const isActive = c.id === tab; return ( ); })}
)}
); }; // ── Cards variant ───────────────────────────────────────────────────────── const CategoryCards = ({ categories, tab, setTab, icons }) => { return (
{categories.map((c) => { const active = c.id === tab; return ( ); })}
); }; const FeaturedTabs = ({ onNavigate, onAdd, home = {} }) => { const { homeCards = 4, homeCardImage = 'clean', homeCardSpecs = 'show', homeCardHover = 'lift', homeCardPrice = 'stacked', homeTabsStyle = 'default' } = home; const { PRODUCTS, CATEGORIES } = window.RC_DATA; const [tab, setTab] = React.useState('hidro'); const products = PRODUCTS.filter((p) => p.cat === tab).slice(0, 12); const activeCat = CATEGORIES.find((c) => c.id === tab); const scrollerRef = React.useRef(null); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(true); // Mobile pagination: 4 products per page (2×2 grid) const [isMobile, setIsMobile] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < 900); const [mobilePage, setMobilePage] = React.useState(0); const pageSize = 4; const totalPages = Math.ceil(products.length / pageSize); React.useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < 900); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); React.useEffect(() => { setMobilePage(0); }, [tab]); const visibleProducts = isMobile ? products.slice(mobilePage * pageSize, (mobilePage + 1) * pageSize) : products; const mobileCanPrev = mobilePage > 0; const mobileCanNext = mobilePage < totalPages - 1; const updateScrollState = React.useCallback(() => { const el = scrollerRef.current; if (!el) return; setCanScrollPrev(el.scrollLeft > 4); setCanScrollNext(el.scrollLeft < el.scrollWidth - el.clientWidth - 4); }, []); React.useEffect(() => { updateScrollState(); }, [tab, updateScrollState]); const scrollBy = (dir) => { if (isMobile) { setMobilePage((p) => Math.max(0, Math.min(totalPages - 1, p + dir))); return; } const el = scrollerRef.current; if (!el) return; const card = el.querySelector('[data-card]'); const step = card ? card.getBoundingClientRect().width + 16 : el.clientWidth * 0.8; el.scrollBy({ left: dir * step, behavior: 'smooth' }); }; return (
Nuestros equipos

Los más elegidos por nuestros clientes

{/* Carousel */}
{/* Prev arrow */} {/* Next arrow */} {/* Scroll container */}
{visibleProducts.map((p, i) => (
))}
); }; /* ── Editorial banner (service + promo) ──────────── */ const PromoBanners = ({ onNavigate }) =>
Oferta del mes

Hidrolavadoras
hasta 30% OFF

Selección de modelos trifásicos y agua caliente. Stock limitado — hasta agotar.

— hasta 30/04

Servicio técnico propio

Taller en Haedo. Reparamos todas las marcas.

; /* ── Why us stats ─────────────────── */ const CountUp = ({ target, prefix = '', suffix = '', duration = 1400, format = 'es-AR' }) => { const [value, setValue] = React.useState(0); const [started, setStarted] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!ref.current || started) return; const obs = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { setStarted(true); obs.disconnect(); } }, { threshold: 0.4 }); obs.observe(ref.current); return () => obs.disconnect(); }, [started]); React.useEffect(() => { if (!started) return; const startTime = performance.now(); let rafId; const tick = (now) => { const t = Math.min(1, (now - startTime) / duration); const eased = 1 - Math.pow(1 - t, 3); setValue(Math.round(target * eased)); if (t < 1) rafId = requestAnimationFrame(tick); }; rafId = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafId); }, [started, target, duration]); const formatted = new Intl.NumberFormat(format).format(value); return {prefix}{formatted}{suffix}; }; const WhyUs = () => { const stats = [ { target: 1400, prefix: '+', suffix: '', l: 'Productos en stock' }, { target: 15, prefix: '+', suffix: '', l: 'Años equipando pros' }, { target: 8000, prefix: '+', suffix: '', l: 'Clientes satisfechos' }, { target: 24, prefix: '', suffix: 'hs', l: 'Despacho promedio' }, ]; const pillars = [ { i: 'shield', t: 'Garantía oficial', d: 'Todos los equipos con respaldo directo del fabricante. 12 meses promedio.' }, { i: 'truck', t: 'Logística propia', d: 'Envío gratis CABA/GBA en 48hs. Al interior por Andreani o transporte a cotizar.' }, { i: 'wrench', t: 'Service en Haedo', d: 'Técnicos certificados. Presupuesto sin cargo. Reparamos todas las marcas.' }, { i: 'credit', t: 'Financiación real', d: '6 cuotas sin interés Visa/Master. 5% OFF con transferencia bancaria.' }]; return (

Garantía

El respaldo que necesitás.

{pillars.map((p) =>

{p.t}

{p.d}

)}
{stats.map((s) =>
{s.l}
)}
); }; /* ── Testimonials ─────────────────── */ const Testimonials = () => { const { REVIEWS } = window.RC_DATA; return (

Testimonios

Quienes ya trabajan con nosotros.

{REVIEWS.map((r) =>

"{r.text}"

{r.name[0]}
{r.name}
{r.role}
)}
); }; const HomePage = ({ onNavigate, onAdd, home = {} }) => { const Hero = HeroSlider; return ( <> ); }; Object.assign(window, { HomePage, Marquee });