/* eslint-disable */ const { useState, useEffect, useRef, useCallback, Fragment } = React; /* ============ Reveal hook (IntersectionObserver) ============ */ function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal:not(.in)"); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); e.target.style.opacity = "1"; e.target.style.transform = "translateY(0)"; io.unobserve(e.target); } }); }, { threshold: 0.06, rootMargin: "0px 0px -40px 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } /* ============ Animated number ============ */ function CountUp({ to, suffix = "", duration = 1600 }) { const [val, setVal] = useState(0); const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let started = false; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started) { started = true; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setVal(Math.round(eased * to)); if (t < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); io.unobserve(el); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [to]); return {val}{suffix}; } /* ============ Icons ============ */ const Icon = { Arrow: (p) => ( ), Menu: (p) => ( ), Close: (p) => ( ), Ship: (p) => ( ), Truck: (p) => ( ), Shield: (p) => ( ), Handshake: (p) => ( ), Plane: (p) => ( ), Spark: (p) => ( ), Layers: (p) => ( ), Scale: (p) => ( ), Award: (p) => ( ), Heart: (p) => ( ), Brain: (p) => ( ), LegalDoc: (p) => ( /* Certidumbre jurídica: documento con sello/firma de aprobación */ ), Lightbulb: (p) => ( /* Somos especialistas: foco/idea */ ), Pin: (p) => ( ), Phone: (p) => ( ), Mail: (p) => ( ), Pin2: (p) => ( ), /* ── Trade / Logistics icons for cintillo ── */ CustomsClear: (p) => ( /* Despacho aduanal: documento con sello oficial */ ), SemiTruck: (p) => ( /* Flete nacional: camión articulado / tractor-trailer */ ), PortCrane: (p) => ( /* Maniobra fuera de puerto: grúa portuaria */ ), Custody: (p) => ( /* Custodia: escudo con radar/satélite */ ), CargoCover: (p) => ( /* Seguro de carga: caja con paraguas protector */ ), Linkedin: (p) => ( ), Facebook: (p) => ( ), Instagram: (p) => ( ), }; /* ============ NAVBAR ============ */ function Nav({ onOpenDrawer }) { const [scrolled, setScrolled] = useState(false); const [progress, setProgress] = useState(0); useEffect(() => { const onScroll = () => { const y = window.scrollY; setScrolled(y > 60); const h = document.documentElement.scrollHeight - window.innerHeight; setProgress(h > 0 ? (y / h) * 100 : 0); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const links = [ ["#hero", "Inicio"], ["#servicios", "Servicios"], ["#beneficios", "Beneficios"], ["#cobertura", "Cobertura"], ["#nosotros", "Nosotros"], ["#certs", "Certificaciones"], ]; return (
Injoy Injoy Hagamos equipo
); } function Drawer({ open, onClose }) { const links = [ ["#hero", "Inicio"], ["#servicios", "Servicios"], ["#beneficios", "Beneficios"], ["#cobertura", "Cobertura"], ["#nosotros", "Nosotros"], ["#certs", "Certificaciones"], ["#contacto", "Contacto"], ]; return (
{links.map(([h, l]) => {l})}
Hagamos equipo
); } /* ============ HERO ============ */ function Hero() { const isoRef = useRef(null); useEffect(() => { const onMove = (e) => { if (!isoRef.current) return; const x = (e.clientX / window.innerWidth - 0.5) * 18; const y = (e.clientY / window.innerHeight - 0.5) * 14; isoRef.current.style.transform = `translate(${x}px, ${y}px)`; }; window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, []); return (
desde 2007

AGENCIA ADUANAL

Más de 19 años transformando el comercio exterior en México.

Cotizar mi despacho Conoce nuestros servicios
Patentes directas 1880 · Bojalil
Certificados OEA · ISO 9001:2015
Cobertura 8 aduanas nacionales
); } /* ============ SERVICIOS CINTILLO (home strip) ============ */ function ServiciosCintillo() { const items = [ { icon: Icon.CustomsClear, t: "Despacho aduanal", s: "Importación · Exportación" }, { icon: Icon.SemiTruck, t: "Flete nacional", s: "Contenedores · Hazmat · Refrigerados" }, { icon: Icon.PortCrane, t: "Maniobra fuera de puerto", s: "Almacén · Cross dock · Trinca" }, { icon: Icon.CargoCover, t: "Seguro de carga", s: "Cobertura total de mercancía" }, ]; return (
{items.map((it, i) => { const I = it.icon; return (
{it.t}
{it.s}
 ); })}
); } /* ============ FORELAND MAP — MapLibre GL + Deck.gl ============ */ function ForelandDeckMap() { const containerRef = useRef(null); useEffect(() => { const el = containerRef.current; if (!el) return; if (typeof maplibregl === "undefined" || typeof deck === "undefined") return; const MAG = [211, 39, 124]; const GRN = [120, 190, 32]; const YEL = [242, 194, 0]; const ports = [ { name: "Veracruz", coords: [-96.13, 19.17], c: MAG }, { name: "Altamira", coords: [-97.93, 22.40], c: MAG }, { name: "Manzanillo", coords: [-104.32, 19.04], c: MAG }, { name: "Lázaro Cárdenas", coords: [-102.20, 17.95], c: MAG }, { name: "AICM", coords: [-99.07, 19.43], c: GRN }, { name: "AIFA", coords: [-99.01, 19.74], c: GRN }, { name: "Guadalajara", coords: [-103.31, 20.52], c: GRN }, { name: "Nuevo Laredo", coords: [-99.50, 27.50], c: YEL }, ]; const arcs = [ { from: [-96.13,19.17], to: [121.47,31.23], c: MAG }, // Veracruz → Shanghai { from: [-96.13,19.17], to: [4.14,51.95], c: MAG }, // → Rotterdam { from: [-97.93,22.40], to: [9.99,53.55], c: MAG }, // Altamira → Hamburg { from: [-104.32,19.04], to: [103.82,1.35], c: MAG }, // Manzanillo → Singapur { from: [-104.32,19.04], to: [139.76,35.68], c: MAG }, // → Tokio { from: [-102.20,17.95], to: [18.42,-33.92], c: MAG }, // Lázaro → Cape Town { from: [-96.13,19.17], to: [-58.4,-34.6], c: MAG }, // → Buenos Aires { from: [-99.07,19.43], to: [-3.70,40.42], c: GRN }, // AICM → Madrid { from: [-99.01,19.74], to: [8.68,50.11], c: GRN }, // AIFA → Frankfurt { from: [-99.07,19.43], to: [-80.19,25.77], c: GRN }, // AICM → Miami { from: [-103.31,20.52], to: [-118.41,33.94], c: GRN }, // GDL → LAX { from: [-99.50,27.50], to: [-96.80,32.78], c: YEL }, // Laredo → Dallas { from: [-99.50,27.50], to: [-87.63,41.88], c: YEL }, // → Chicago ]; const map = new maplibregl.Map({ container: el, style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json", center: [-30, 22], zoom: 1.65, pitch: 0, bearing: 0, attributionControl: false, logoPosition: "bottom-right", }); let overlay = null; let animId = null; let t = 0; const buildLayers = (pulse) => [ new deck.ArcLayer({ id: "arcs", data: arcs, getSourcePosition: d => d.from, getTargetPosition: d => d.to, getSourceColor: d => [...d.c, 210], getTargetColor: d => [...d.c, 40], getWidth: 1.6, getHeight: 0.42, widthMinPixels: 1.2, widthMaxPixels: 2.8, pickable: false, }), new deck.ScatterplotLayer({ id: "dots", data: ports, getPosition: d => d.coords, getFillColor: d => [...d.c, 230], getLineColor: [255, 255, 255, 220], getRadius: 100000, radiusMinPixels: 4, radiusMaxPixels: 9, stroked: true, lineWidthMinPixels: 1.5, pickable: true, getTooltip: d => d.name, }), new deck.ScatterplotLayer({ id: "pulse", data: ports, getPosition: d => d.coords, getFillColor: [0, 0, 0, 0], getLineColor: d => [...d.c, Math.round(130 * (1 - pulse * 0.7))], getRadius: 120000 + 160000 * pulse, radiusMinPixels: 5 + 12 * pulse, radiusMaxPixels: 24, stroked: true, lineWidthMinPixels: 0.9, pickable: false, }), ]; map.on("load", () => { if (!deck.MapboxOverlay) return; overlay = new deck.MapboxOverlay({ interleaved: false, layers: buildLayers(0) }); map.addControl(overlay); const tick = () => { t = (t + 0.022) % (Math.PI * 2); const pulse = (1 + Math.sin(t)) / 2; if (overlay) overlay.setProps({ layers: buildLayers(pulse) }); animId = requestAnimationFrame(tick); }; tick(); }); const ro = new ResizeObserver(() => map.resize()); ro.observe(el); return () => { if (animId) cancelAnimationFrame(animId); ro.disconnect(); try { map.remove(); } catch (e) {} }; }, []); return
; } function ForelandMap() { return (
Foreland Europa · Asia · Medio Oriente · América del Norte · África Occidental · El Caribe
{/* Legend */}
Marítimas · Veracruz, Altamira, Manzanillo, Lázaro Cárdenas
Aéreas · AICM, AIFA, GDL
Fronteriza · Nuevo Laredo, Tamps.
); } function Pin({ x, y, color, label, align }) { const dx = align === "left" ? -8 : 8; const anchor = align === "left" ? "end" : "start"; return ( {label} ); } /* ============ QUÉ HACEMOS ============ */ function QueHacemos() { return (
Qué hacemos

Desde cualquier origen.
Cobertura estratégica
en las aduanas clave de México.

Operamos importaciones y exportaciones en las aduanas más importantes de México. Conocemos los sectores, anticipamos los riesgos y acompañamos cada operación con un equipo que entiende que detrás de cada contenedor hay una empresa que necesita avanzar.

Patente del socio fundador
1880
Salvador Bojalil Puente

Otorgada por sustitución en 2022. En 1994 le fue concedida a su antecesor y padre, Salvador Antonio Bojalil Zacarías, con autorización 3492 para operar en las aduanas de Puebla, Nuevo Laredo, Altamira y Veracruz.

); } /* ============ STATS strip ============ */ function Stats() { const items = [ { to: 18, suffix: "+", label: "Años de experiencia" }, { to: 8, suffix: "", label: "Aduanas operadas" }, { to: 4, suffix: "", label: "Servicios core" }, { to: 100, suffix: "%", label: "Operaciones certificadas" }, ]; return (
{items.map((s, i) => (
{s.label}
))}
); } /* ============ HISTORIA ============ */ /* ============ NOSOTROS — Historia · Valores ============ */ function Nosotros() { const vs = [ { t: "Aspiración efectiva", d: "Nos movemos hacia las mejores prácticas conociendo a profundidad los sectores a los que servimos." }, { t: "Compromiso", d: "Desarrollamos las operaciones de comercio exterior de nuestros clientes al margen de la normatividad a través de un equipo especializado enfocado en maximizar la eficacia en cada operación." }, { t: "Dedicación", d: "Amamos lo que hacemos, no nos vemos en ningún otro sector." }, { t: "Humanidad", d: "Construimos relaciones empáticas y auténticas basadas en la comprensión y el respeto. Creamos una sinergia justa, cercana y consciente." }, ]; return (
{/* ── Bloque Historia ── */}
Historia

HISTORIA
de una patente con alma.

Injoy nació con la visión de transformar los servicios aduanales en México, ofreciendo una experiencia eficiente, humana y ágil. Con más de 18 años en el sector, hemos crecido gracias a la confianza de nuestros clientes y al esfuerzo constante por innovar y profesionalizar nuestro trabajo.

NUESTRO FUTURO
"Entregar un servicio que transforme la experiencia con la que se vive hoy el comercio exterior desde el despacho aduanal."
Injoy — barco contenedor
Equipo Injoy · Veracruz
Equipo Injoy
Equipo Injoy en operación
Equipo Injoy en oficina
{/* ── Bloque Valores (diseño original — slide oscuro con foto + lista) ── */}
Nosotros

VALORES

La diferencia de Injoy no está en el trámite, está en la gente. Un equipo entrenado para diagnosticar, proponer y resolver con cercanía.

Equipo Injoy
{vs.map((v, i) => (
{v.t.toUpperCase()}

{v.d}

))}
); } /* ============ SERVICIOS ============ */ function Servicios() { const services = [ { n: "01", icon: Icon.Ship, title: "Flete internacional", sub: "Marítimo · Aéreo · Terrestre", desc: "Organizamos el transporte internacional de tu mercancía por la vía más eficiente.", bullets: [ "Flete marítimo FCL y LCL", "Flete aéreo internacional", "Transporte terrestre internacional", "Selección de la mejor ruta según tu operación", ], }, { n: "02", icon: Icon.CargoCover, title: "Seguro de mercancías y de contenedor", sub: "Cobertura todo riesgo", desc: "Protegemos tu carga ante cualquier eventualidad durante todo el trayecto.", bullets: [ "Pólizas todo riesgo", "Cobertura nacional e internacional", "Protección de mercancía y contenedor", "Asesoría personalizada para cada operación", ], }, { n: "03", icon: Icon.PortCrane, title: "Maniobras en patio de contenedores", sub: "Almacén propio · Cross dock · Trinca", desc: "Realizamos maniobras seguras y eficientes en nuestro patio especializado.", bullets: [ "Carga y descarga de contenedores", "Revisión física de mercancía", "Estiba y desestiba", "Consolidación y desconsolidación", "Personal y equipo especializado", ], }, { n: "04", icon: Icon.CustomsClear, title: "Despacho aduanal en México", sub: "Importación · Exportación · Servicio core", desc: "Gestionamos tus operaciones de importación y exportación con cumplimiento total.", bullets: [ "Importación y exportación", "Trámites aduanales", "Cumplimiento normativo", "Clasificación arancelaria", "Asesoría en regulaciones y restricciones", ], }, { n: "05", icon: Icon.SemiTruck, title: "Transporte nacional en unidades propias", sub: "Cobertura nacional · Monitoreo 24/7", desc: "Trasladamos tu mercancía a cualquier punto del país con unidades propias.", bullets: [ "Cobertura nacional", "Unidades propias y monitoreadas", "Entregas seguras y puntuales", "Capacidad para carga seca, refrigerada y sobredimensionada", ], }, { n: "06", icon: Icon.Custody, title: "Custodia armada y monitoreo satelital", sub: "Física · Virtual · Grado aeroespacial", desc: "Brindamos seguridad integral a tu mercancía con tecnología y personal altamente capacitado.", bullets: [ "Custodia física armada y desarmada", "Monitoreo virtual satelital 24/7", "Dispositivos de alta seguridad", "Tecnología grado aeroespacial", "Reportes e información en tiempo real", ], }, ]; return (
Qué ofrecemos

SERVICIOS

Soluciones logísticas y aduanales integrales para que tu mercancía llegue segura, a tiempo y en cumplimiento.

{services.map((s, i) => { const I = s.icon; return (
{s.n}
{s.title}
{s.sub}

{s.desc}

    {s.bullets.map((b, j) => (
  • {b}
    • ))}
); })}
); } /* ============ BENEFICIOS ============ */ function Beneficios() { const bs = [ { icon: Icon.Spark, t: "Eficiencia operativa", d: "Resultados. Superamos los estándares de la industria." }, { icon: Icon.Layers, t: "Soluciones a la medida", d: "Flexibilidad. Adecuamos nuestra logística a su operación." }, { icon: Icon.LegalDoc, t: "Certidumbre jurídica", d: "Sociedades inscritas en ANAM. Materialidad en las operaciones." }, { icon: Icon.Award, t: "Certificados", d: "Procesos confiables, mayor control operativo y un servicio aduanal consistente que reduce riesgos." }, { icon: Icon.Heart, t: "Calidez en el trato", d: "Compromiso. Nuestro personal hace la diferencia." }, { icon: Icon.Lightbulb, t: "Somos especialistas", d: "Diagnosticamos, proponemos y solucionamos." }, { icon: Icon.Pin, t: "Cobertura nacional", d: "Presencia en las aduanas más importantes del país: marítimas, aéreas y de frontera." }, ]; return (
Por qué Injoy

BENEFICIOS

{bs.map((b, i) => { const I = b.icon; return (
{String(i+1).padStart(2, "0")} / 07
{b.t}
{b.d}
); })}
); } /* ============ TIMELINE ============ */ function Timeline() { const events = [ { year: "1994", color: "magenta", icon: "plane", title: "Fundación", text: "Fundación de la agencia aduanal Salvador Bojalil Zacarías. Volkswagen y Autotek se convierten en los principales clientes. Somos los primeros en importar el Antonov, el avión más grande del mundo, de fabricación rusa." }, { year: "1996", color: "green", icon: "building", title: "Autorización de Aduana Adicional", text: "Se obtiene autorización para operar una aduana adicional, ampliando la presencia en Veracruz." }, { year: "2005", color: "magenta", icon: "crane", title: "Autorización de aduana adicional", text: "Nueva autorización para operar una aduana adicional, extendiendo cobertura a Altamira, Tamaulipas." }, { year: "2007", color: "magenta", icon: "person", title: "Constitución de Injoy Agencia Aduanal", text: "Autorización de Sociedad ante la Administración General de Aduanas. Inicio formal de operaciones de Injoy." }, { year: "2022", color: "green", icon: "patent", title: "Patente 1880", text: "Obtención de la patente 1880 por el Lic. Salvador Bojalil Puente." }, { year: "2023", color: "green", icon: "person", title: "Nos reinventamos", text: "Renovación integral de la operación e identidad: nueva estructura, nuevo organigrama y consolidación del equipo directivo." }, ]; const Icons = { plane: , building: , crane: , person: , office: , docs: , patent: , }; return (
Nuestra trayectoria

LÍNEA DEL TIEMPO

Tres décadas construyendo confianza, una patente que pasó de padre a hijo y un equipo que ha hecho del despacho aduanal un oficio con alma.

{events.map((e, i) => (
))}
); } /* ============ MARQUEE ============ */ function Marquee() { const items = ["Veracruz", "Altamira", "Manzanillo", "Lázaro Cárdenas", "AICM", "AIFA", "GDL", "Nuevo Laredo", "Confianza", "Experiencia", "18 años", "OEA", "ISO 9001:2015"]; const Row = () => ( {items.map((t, i) => ( {t} ))} ); return ( ); } /* ============ COBERTURA / MAPA ============ */ const PINS = [ { name: "Veracruz", type: "maritima", lat: 19.174, lng: -96.134, op: "Marítima" }, { name: "Altamira", type: "maritima", lat: 22.407, lng: -97.927, op: "Marítima" }, { name: "Manzanillo", type: "maritima", lat: 19.052, lng: -104.318, op: "Marítima" }, { name: "Lázaro Cárdenas", type: "maritima", lat: 17.958, lng: -102.189, op: "Marítima" }, { name: "AICM", type: "aerea", lat: 19.436, lng: -99.072, op: "Aérea · CDMX" }, { name: "AIFA", type: "aerea", lat: 19.756, lng: -99.015, op: "Aérea · Edomex" }, { name: "GDL", type: "aerea", lat: 20.522, lng: -103.311, op: "Aérea · Guadalajara" }, { name: "Nuevo Laredo", type: "frontera", lat: 27.477, lng: -99.515, op: "Frontera · Tamps." }, ]; const PIN_COLORS = { maritima: "#D3277C", aerea: "#78BE20", frontera: "#2A6FDB" }; function makeMarkerIcon(color) { const svg = ` `; return L.divIcon({ html: svg, className: "", iconSize: [28, 36], iconAnchor: [14, 35], popupAnchor: [0, -36], }); } function LeafletMap() { const mapRef = useRef(null); const instanceRef = useRef(null); useEffect(() => { if (instanceRef.current) return; const map = L.map(mapRef.current, { center: [23.5, -102.5], zoom: 5, zoomControl: false, scrollWheelZoom: false, attributionControl: false, }); L.tileLayer("https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png", { subdomains: "abcd", maxZoom: 19, }).addTo(map); // Subtle country/state border overlay L.tileLayer("https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png", { subdomains: "abcd", maxZoom: 19, opacity: 0.5, }).addTo(map); L.control.zoom({ position: "bottomright" }).addTo(map); L.control.attribution({ position: "bottomright", prefix: false }) .addAttribution('© CARTO') .addTo(map); PINS.forEach((p) => { L.marker([p.lat, p.lng], { icon: makeMarkerIcon(PIN_COLORS[p.type]) }) .addTo(map) .bindPopup( `${p.name}
${p.op}` ); }); instanceRef.current = map; return () => { map.remove(); instanceRef.current = null; }; }, []); return
; } function Cobertura() { return (
Misión & Cobertura

MISIÓN

"Generar sinergia para maquilar los despachos de importación y exportación en las aduanas con un alto nivel de eficiencia y seguridad en la cadena de suministro."

Marítimas · Veracruz, Altamira, Manzanillo, Lázaro Cárdenas
Aéreas · AICM, AIFA, GDL
Frontera · Nuevo Laredo, Tamps.
); } /* ============ CERTIFICACIONES ============ */ function Certs() { return (
Avales

CERTIFICACIONES

Avalados por los más altos estándares internacionales de comercio exterior y gestión de calidad.

OEA — Operador Económico Autorizado México
Operador Económico Autorizado
Certificación SAT / OEA · Cadena de suministro segura
MB Certification ISO 9001:2015
MB Certification · ISO 9001:2015
Sistemas de gestión de calidad
); } /* ============ MANIFESTO ============ */ function Manifesto() { return (

La diferencia entre cruzar
y avanzar, es hacerlo con certeza.

— Injoy Agencia Aduanal
); } /* ============ CONTACTO ============ */ function Contacto() { const [data, setData] = useState({ nombre: "", empresa: "", email: "", telefono: "", tipo: "", aduana: "", mensaje: "" }); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [error, setError] = useState(""); const set = (k) => (e) => setData({ ...data, [k]: e.target.value }); const submit = async (e) => { e.preventDefault(); setSending(true); setError(""); try { const res = await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ access_key: "27f39efb-4600-4534-b1c5-60130d7bcb66", subject: `Nueva cotización · ${data.nombre || "sin nombre"}${data.empresa ? " (" + data.empresa + ")" : ""}`, from_name: "Injoy · Sitio web", to: "contacto@injoy.mx", nombre: data.nombre, empresa: data.empresa, email: data.email, telefono: data.telefono, tipo_operacion: data.tipo, aduana_interes: data.aduana, mensaje: data.mensaje, }), }); const json = await res.json(); if (json.success) { setSent(true); } else { setError(json.message || "No pudimos enviar tu mensaje. Intenta de nuevo o escríbenos a contacto@injoy.mx"); } } catch (err) { setError("Error de conexión. Escríbenos directo a contacto@injoy.mx"); } finally { setSending(false); } }; return (
Contacto

HAGAMOS EQUIPO

Cuéntanos qué necesitas mover. Te respondemos con propuesta, tiempos y un agente operador asignado en menos de 24 horas hábiles.