const { useEffect, useRef, useState, useCallback } = React;
/* ─── SCROLL ANIMATION HOOK ─── */
function useScrollReveal(options = {}) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },
{ threshold: options.threshold || 0.15, rootMargin: options.rootMargin || "0px" }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return [ref, visible];
}
/* ─── NETWORK BACKGROUND ─── */
const NetworkBackground = () => {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
let animId;
const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
resize();
window.addEventListener("resize", resize);
const dots = Array.from({ length: 60 }, () => ({
x: Math.random() * canvas.width, y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4,
}));
const draw = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
dots.forEach(d => {
d.x += d.vx; d.y += d.vy;
if (d.x < 0 || d.x > canvas.width) d.vx *= -1;
if (d.y < 0 || d.y > canvas.height) d.vy *= -1;
ctx.beginPath(); ctx.arc(d.x, d.y, 1.5, 0, Math.PI * 2);
ctx.fillStyle = "rgba(245,166,35,0.35)"; ctx.fill();
});
dots.forEach((a, i) => dots.slice(i + 1).forEach(b => {
const dist = Math.hypot(a.x - b.x, a.y - b.y);
if (dist < 120) {
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
ctx.strokeStyle = `rgba(245,166,35,${0.12 * (1 - dist / 120)})`; ctx.lineWidth = 0.6; ctx.stroke();
}
}));
animId = requestAnimationFrame(draw);
};
draw();
return () => { cancelAnimationFrame(animId); window.removeEventListener("resize", resize); };
}, []);
return ;
};
/* ─── PULSE BUTTON ─── */
const PulseButton = ({ children, outline }) => {
const [hov, setHov] = useState(false);
return (
);
};
/* ─── ANIMATED TEXT (hero, timer-based) ─── */
const AnimatedText = ({ children, delay = 0, className = "", extraStyle = {} }) => {
const [visible, setVisible] = useState(false);
useEffect(() => { const t = setTimeout(() => setVisible(true), delay); return () => clearTimeout(t); }, [delay]);
return (
{children}
);
};
/* ─── FADE IN (timer-based, for hero) ─── */
const FadeInTimer = ({ children, delay = 0 }) => {
const [visible, setVisible] = useState(false);
useEffect(() => { const t = setTimeout(() => setVisible(true), delay); return () => clearTimeout(t); }, [delay]);
return (
{children}
);
};
/* ─── SCROLL FADE IN (for sections) ─── */
const ScrollFadeUp = ({ children, delay = 0, style = {} }) => {
const [ref, visible] = useScrollReveal();
return (
{children}
);
};
/* ─── SCROLL FADE LEFT ─── */
const ScrollFadeLeft = ({ children, delay = 0, style = {} }) => {
const [ref, visible] = useScrollReveal();
return (
{children}
);
};
/* ─── SCROLL FADE RIGHT ─── */
const ScrollFadeRight = ({ children, delay = 0, style = {} }) => {
const [ref, visible] = useScrollReveal();
return (
{children}
);
};
/* ─── SCROLL SCALE IN ─── */
const ScrollScaleIn = ({ children, delay = 0, style = {} }) => {
const [ref, visible] = useScrollReveal({ threshold: 0.1 });
return (
{children}
);
};
/* ─── CHECK CARD ─── */
const CheckCard = ({ title, desc, delay }) => {
const [ref, visible] = useScrollReveal();
const [hov, setHov] = useState(false);
return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{
flex: "1 1 220px", background: hov ? "rgba(245,166,35,0.07)" : "rgba(255,255,255,0.03)",
border: `1px solid ${hov ? "rgba(245,166,35,0.35)" : "rgba(255,255,255,0.07)"}`,
borderRadius: "12px", padding: "22px 20px",
opacity: visible ? 1 : 0,
transform: visible ? "translateY(0)" : "translateY(30px)",
transition: `opacity 0.6s ease ${delay}ms, transform 0.6s ease ${delay}ms, background 0.25s, border 0.25s`,
}}>
{title}
);
};
/* ─── FEATURE ROW ─── */
const FeatureRow = ({ icon, text, delay }) => {
const [ref, visible] = useScrollReveal();
const [hov, setHov] = useState(false);
return (
{desc}
setHov(true)} onMouseLeave={() => setHov(false)} style={{
display: "flex", alignItems: "center", gap: "16px",
background: hov ? "rgba(245,166,35,0.06)" : "rgba(255,255,255,0.03)",
border: `1px solid ${hov ? "rgba(245,166,35,0.3)" : "rgba(255,255,255,0.06)"}`,
borderRadius: "10px", padding: "16px 22px",
opacity: visible ? 1 : 0,
transform: visible ? "translateX(0)" : "translateX(-30px)",
transition: `opacity 0.55s ease ${delay}ms, transform 0.55s ease ${delay}ms, background 0.25s, border 0.25s`,
cursor: "default",
}}>
{icon}
{text}
);
};
/* ─── SYSTEM CARD ─── */
const SystemCard = ({ icon, title, subtitle, body, highlight, delay }) => {
const [ref, visible] = useScrollReveal({ threshold: 0.08 });
const [hov, setHov] = useState(false);
return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{
flex: "1 1 280px", minWidth: "260px", maxWidth: "360px",
background: hov ? "rgba(245,166,35,0.05)" : "rgba(255,255,255,0.025)",
border: `1px solid ${hov ? "rgba(245,166,35,0.35)" : "rgba(255,255,255,0.07)"}`,
borderRadius: "14px", padding: "24px 22px",
display: "flex", flexDirection: "column", gap: "12px",
opacity: visible ? 1 : 0,
transform: visible ? "translateY(0) scale(1)" : "translateY(40px) scale(0.95)",
transition: `opacity 0.65s ease ${delay}ms, transform 0.65s ease ${delay}ms, background 0.3s, border 0.3s, box-shadow 0.3s`,
boxShadow: hov ? "0 8px 32px rgba(245,166,35,0.08)" : "none",
cursor: "default",
}}>
);
};
/* ══════════════════════════════════════════
APP
══════════════════════════════════════════ */
function App() {
return (
{icon}
{title}
{subtitle}
{body}
{highlight && (→ {highlight}
)}
{/* ══ HERO SECTION ══ */}
);
}
{/* Left */}
APLICAR AHORA
Ver proyección de ganancias
{/* Right — Robot */}
SISTEMA DE VENTAS CON IA
Convierte tu negocio
en una máquina
de ventas automática
Implementamos sistemas de IA que capturan leads, dan seguimiento y cierran ventas — sin que el dueño tenga que estar pegado al teléfono.
Aplicación rápida. Si calificas, coordinamos una llamada corta.
{/* Glow */}
{/* Orbit rings */}
{/* Heading — slides in from left */}
{/* Cards — scale in staggered */}
APLICAR AHORA
El CRM que trabaja mientras tú duermes
Un sistema completo de automatización que captura, califica y convierte leads en clientes — sin intervención manual.
{[
{ title: "Captura automática", desc: "Leads desde cualquier canal entran directo al CRM sin intervención manual." },
{ title: "Seguimiento 24/7", desc: "El sistema responde y da seguimiento incluso fuera de horario laboral." },
{ title: "Cierre inteligente", desc: "Secuencias de mensajes diseñadas para convertir prospectos en clientes." },
{ title: "Reportes en tiempo real", desc: "Ve exactamente qué está generando dinero y qué no, en un dashboard simple." },
].map((c, i) => (
{/* CTA — fade up */}
{/* Animated accent line */}
{/* ══ QUÉ INSTALAMOS SECTION ══ */}
{/* Heading — fade right */}
{/* Feature rows — slide from left staggered */}
Lo que vendes (sin tecnicismos)
Vendes un sistema completo para que un negocio genere ingresos con menos fricción y menos carga operativa. No es "software". Es una implementación estratégica para que el negocio tenga:
{[
{ icon: "🗄️", text: "Captura de leads y organización en un CRM" },
{ icon: "💬", text: "Respuesta inmediata (24/7) por chat, WhatsApp y/o llamadas" },
{ icon: "🔄", text: 'Seguimiento automático y persistente sin que el equipo "se olvide"' },
{ icon: "📅", text: "Agendamiento y confirmación de citas sin perseguir al cliente" },
{ icon: "👥", text: "Reactivación de base de datos y campañas para recuperar ventas perdidas" },
{ icon: "⚡", text: "Automatizaciones internas para eliminar tareas repetitivas del personal" },
{ icon: "📊", text: "Reportes simples para ver qué está generando dinero y qué no" },
].map((item, i) => (
{/* Callout — fade up */}
En resumen: vendes tiempo de vuelta al dueño, más cierres, y una operación que no depende de estar "pegado al teléfono".
{/* Top glow line */}
{/* Bg glow */}
{/* Header — scale in */}
{/* Cards grid — staggered scale in */}
Qué instalamos para el cliente (lo que hace el sistema)
No vendemos "herramientas sueltas". Diseñamos e implementamos un sistema completo para que el negocio capture, responda, convierta y opere con menos fricción, incluso cuando el dueño no está disponible.
Lo que vendes no es "tecnología". Vendes un sistema que convierte caos en procesos y hace que el negocio pueda crecer sin aumentar nómina en la misma proporción.
