// Variation 2 — Bold Operativo // Same editorial DNA, but more confident. Full-bleed photography in hero, // split color blocks for the two business lines, photo overlays on industries. // ───────────────────────────────────────── RESPONSIVE HOOK function useViewport() { const [w, setW] = React.useState( typeof window !== 'undefined' ? window.innerWidth : 1280 ); React.useEffect(() => { const onResize = () => setW(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); return { w, isMobile: w <= 720, isTablet: w > 720 && w <= 1024, isDesktop: w > 1024, }; } function HomeBold({ tagline }) { return (
); } // ───────────────────────────────────────── NAV function BoldNav() { const { isMobile } = useViewport(); const [open, setOpen] = React.useState(false); const links = ['Productos', 'Servicios', 'Industrias', 'Nosotros', 'Contacto']; return (
{isMobile ? ( ) : ( )}
{/* Mobile dropdown panel */} {isMobile && open && ( )}
); } // ───────────────────────────────────────── HERO function BoldHero({ tagline }) { const { isMobile } = useViewport(); return (
{/* Background image */}
{/* Navy gradient */}
{/* Top metabar */}
01 — INICIO {!isMobile && FABRICAMOS · OPERAMOS · DESDE MÉXICO} {isMobile && MÉXICO}

{tagline}

Dos líneas de negocio, una sola disciplina: productos profesionales de fórmula propia, y personal capacitado que los opera en plantas, hospitales, oficinas y desarrollos en todo México.

); } // ───────────────────────────────────────── LINES (split-screen) function BoldLines() { const { isMobile } = useViewport(); return (
02 — DOS LÍNEAS UNA DISCIPLINA

Fabricamos con lo que limpiamos.

{/* Split blocks full-width */}
`${p.sku} · ${p.name}`)} cta="Ver catálogo →" Icon={WIconBottle} />
); } function BoldLineBlock({ number, tag, title, accent, accentDeep, bgPhoto, description, items, cta, Icon, dark = false }) { const { isMobile } = useViewport(); const fg = dark ? '#fff' : WEB.navy; const fgMuted = dark ? 'rgba(255,255,255,0.7)' : 'rgba(17,45,112,0.7)'; const lineColor = dark ? 'rgba(255,255,255,0.16)' : WEB.lineSoft; return (
{/* Background photo (subtle) */}
{/* Top row: number + tag */}
{number}
{tag}
{/* Title */}

{title}

{/* Description */}

{description}

{/* Items */}
    {items.map((it, i) => (
  • {it}
    • ))}
{/* CTA */} {cta}
); } // ───────────────────────────────────────── INDUSTRIES function BoldIndustries() { const { isMobile, isTablet } = useViewport(); const cols = isMobile ? '1fr 1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'; return (
03 — INDUSTRIAS {!isMobile && SEIS VERTICALES, UNA OPERACIÓN} {isMobile && 6 VERTICALES}

Donde la limpieza no es opcional, estamos.

Atendemos verticales que dependen de protocolos estrictos, continuidad operativa y respuesta inmediata. Adaptamos productos y personal a las exigencias específicas de cada industria.

{/* Industry grid — large photo cards */}
{INDUSTRIES.map((ind, i) => (
0{i + 1} {!isMobile && {ind.meta.toUpperCase()}}
{ind.name}
VER MÁS
))}
); } // ───────────────────────────────────────── CTA function BoldCTA() { const { isMobile } = useViewport(); return (
04 — CONTACTO {!isMobile && RESPUESTA EN MENOS DE 24 H} {isMobile && RESPUESTA <24 H}

Cuéntanos sobre tu operación.

Te respondemos por WhatsApp con una propuesta clara, sin compromiso. Productos, personal, o ambos.

); } // ───────────────────────────────────────── FOOTER function BoldFooter() { const { isMobile } = useViewport(); return ( ); } Object.assign(window, { HomeBold });