// ═══════════════════════════════════════════════════ // components.jsx — Navbar · Hero · Services // ═══════════════════════════════════════════════════ const { useState, useEffect, useRef } = React; /* ── Shared Hooks ─────────────────────────────── */ const useInView = (threshold = 0.15) => { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, inView]; }; const useCounter = (target, active, duration = 2000) => { const [val, setVal] = useState(0); useEffect(() => { if (!active) return; let n = 0; const step = target / (duration / 16); const t = setInterval(() => { n += step; if (n >= target) { setVal(target); clearInterval(t); } else setVal(Math.floor(n)); }, 16); return () => clearInterval(t); }, [active, target]); return val; }; /* ── Cursor Glow ──────────────────────────────── */ const CursorGlow = () => { const pos = useRef({ x: -200, y: -200 }); const dotRef = useRef(null); useEffect(() => { const move = (e) => { pos.current = { x: e.clientX, y: e.clientY }; if (dotRef.current) { dotRef.current.style.transform = `translate(${e.clientX - 6}px, ${e.clientY - 6}px)`; } }; window.addEventListener('mousemove', move); return () => window.removeEventListener('mousemove', move); }, []); return (
); }; /* ── Navbar ───────────────────────────────────── */ const Navbar = ({ accent }) => { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const ac = accent || '#0ea5e9'; useEffect(() => { const fn = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', fn); return () => window.removeEventListener('scroll', fn); }, []); const go = (id) => { document.querySelector(id)?.scrollIntoView({ behavior: 'smooth' }); setOpen(false); }; const links = [['Servicios','#servicios'],['Proceso','#proceso'],['Testimonios','#testimonios'],['FAQ','#faq']]; const navBg = scrolled ? 'rgba(7,11,20,0.92)' : 'transparent'; return ( ); }; /* ── Hero ─────────────────────────────────────── */ const HeroSection = ({ accent }) => { const ac = accent || '#0ea5e9'; const words = ['impactan','convierten','destacan','venden']; const [wi, setWi] = useState(0); const [vis, setVis] = useState(true); const [ref, inView] = useInView(0.1); const c1 = useCounter(15, inView); const c3 = useCounter(100, inView); useEffect(() => { const iv = setInterval(() => { setVis(false); setTimeout(() => { setWi(i => (i+1) % words.length); setVis(true); }, 380); }, 2600); return () => clearInterval(iv); }, []); const btnPrimary = { display:'inline-flex', alignItems:'center', gap:'0.6rem', background:`linear-gradient(135deg,${ac},#4f46e5)`, border:'none', color:'#fff', padding:'0.95rem 2rem', borderRadius:'10px', fontFamily:'Space Grotesk,sans-serif', fontWeight:700, fontSize:'1rem', cursor:'pointer', boxShadow:`0 8px 32px ${ac}45`, transition:'transform 0.2s,box-shadow 0.2s', letterSpacing:'0.01em' }; const btnSecondary = { background:'transparent', border:`1px solid rgba(255,255,255,0.12)`, color:'#f0f6ff', padding:'0.95rem 2rem', borderRadius:'10px', fontFamily:'Space Grotesk,sans-serif', fontWeight:600, fontSize:'1rem', cursor:'pointer', transition:'border-color 0.2s,background 0.2s' }; return (
{/* dot grid */}
{/* skewed bg shape echoing logo */}
{/* glow */}
{/* Left */}
Desarrollo Web · Guatemala

Sitios web
que{' '} {words[wi]}

Transformamos tu negocio con tecnología a medida: páginas web, tiendas online, bots de WhatsApp y automatizaciones que trabajan por ti las 24 horas.

{[{v:c1,s:'+',l:'Proyectos'},{v:'<24',s:'h',l:'Respuesta'},{v:c3,s:'%',l:'Satisfacción'}].map(st => (
{st.v}{st.s}
{st.l}
))}
{/* Right – browser mockup */}
{/* browser bar */}
{['#ff5f57','#febc2e','#28c840'].map(c=>
)}
solucionesweb.gt
{/* content preview */}
{[`${ac}18`,`#4f46e515`,`${ac}10`].map((bg,i) => (
))}
{/* Float card: WhatsApp bot */}
Bot de WhatsApp
Hola, ¿en qué te ayudo?
Ver catálogo
{/* Float card: sales */}
Ventas hoy
Q 4,280
+23% vs. ayer
); }; /* ── Service Card ─────────────────────────────── */ const ServiceCard = ({ service, delay, inView }) => { const [hov, setHov] = useState(false); const c = service.color; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ background: hov ? 'rgba(11,19,34,0.97)' : 'rgba(11,18,32,0.72)', border: `1px solid ${hov ? c + '45' : 'rgba(255,255,255,0.06)'}`, borderRadius:'16px', padding:'2rem', transition:'all 0.35s ease', boxShadow: hov ? `0 24px 64px ${c}18, 0 0 0 1px ${c}12` : 'none', opacity: inView ? 1 : 0, transform: inView ? (hov ? 'translateY(-6px)' : 'none') : 'translateY(32px)', transitionDelay: `${delay}s`, cursor:'default', }}>
{service.number}

{service.title}

{service.subtitle}

{service.description}

{service.features.map(f => (
{f}
))}
); }; /* ── Services Section ─────────────────────────── */ const ServicesSection = ({ accent }) => { const ac = accent || '#0ea5e9'; const [ref, inView] = useInView(0.1); const main = [ { number:'01', title:'Páginas Web', subtitle:'Landing pages & sitios corporativos', description:'Diseños únicos, rápidos y optimizados para SEO. Tu presencia digital profesional que realmente convierte visitantes en clientes.', features:['Diseño 100% a medida','SEO y velocidad optimizados','Certificado SSL incluido','Responsive en todos los dispositivos'], color:ac }, { number:'02', title:'E-commerce', subtitle:'Tu tienda online que vende sola', description:'Tiendas online completas con gestión de productos, carrito, pagos en línea y panel de administración intuitivo.', features:['Pagos en línea seguros','Gestión de inventario','Panel de administración','Reportes de ventas'], color:'#4f46e5' }, { number:'03', title:'Bots de WhatsApp', subtitle:'Atención al cliente automatizada 24/7', description:'Respuestas automáticas, captura de leads, menús interactivos y conexión con tus sistemas para atender a tus clientes sin parar.', features:['Respuestas 24/7','Captura de prospectos','Menús interactivos','Integración con tu negocio'], color:'#22c55e' }, ]; const extras = ['Sistemas de inventario','Sistemas de reservas','Automatizaciones','Marketing digital']; return (
Servicios

Todo lo que tu negocio
necesita en un solo lugar

{main.map((s,i) => )}

También ofrecemos

{extras.map(e =>
{e}
)}
); }; Object.assign(window, { Navbar, HeroSection, ServicesSection, ServiceCard, CursorGlow, useInView, useCounter });