/** The Conscious Code — sections.jsx * Hero / Problem / Pillars / Services / AI Diagnosis / Cases / CTA / Footer. */ const { useEffect, useRef, useState } = React; /* ────────────────────────────────────────────────────────────────────── HERO */ /* Scrollytelling hero: a tall section with a sticky inner. As you scroll, the header fades + translates up, the cube rotates and drifts up, and the asterisk glow intensifies. Driven by a RAF loop that writes inline style directly — bypasses React re-renders so it stays in sync with Lenis-interpolated scroll. */ function Hero() { const containerRef = useRef(null); const headerRef = useRef(null); const cubeRef = useRef(null); const hintRef = useRef(null); const asteriskRef = useRef(null); useEffect(() => { let rafId; let inView = true; // Pause RAF when hero is out of viewport — saves resources on long pages. const io = new IntersectionObserver(([e]) => { inView = e.isIntersecting; }, { threshold: 0 }); if (containerRef.current) io.observe(containerRef.current); const tick = () => { const el = containerRef.current; if (el && inView) { const rect = el.getBoundingClientRect(); const total = rect.height - window.innerHeight; const p = Math.max(0, Math.min(1, -rect.top / total)); // Header — fade + drift in first 25% const headerProg = Math.min(1, p / 0.25); if (headerRef.current) { headerRef.current.style.opacity = String(1 - headerProg); headerRef.current.style.transform = `translateY(${-100 * headerProg}px)`; } if (hintRef.current) { hintRef.current.style.opacity = String(1 - headerProg); } // Cube — drift up, rotate 360°, fade at ends if (cubeRef.current) { const y = -160 * p + 80; const rot = 360 * p; const o = p < 0.05 ? p / 0.05 : (p > 0.9 ? 1 - (p - 0.9) / 0.1 * 0.2 : 1); cubeRef.current.style.transform = `translate(-50%, ${y}px) rotate(${rot}deg)`; cubeRef.current.style.opacity = String(o); } // Asterisk glow grows if (asteriskRef.current) { const blur = 10 + p * 32; const a = Math.min(1, 0.6 + p * 0.4); asteriskRef.current.style.textShadow = `0 0 ${blur}px rgba(0,255,213,${a})`; asteriskRef.current.style.filter = `drop-shadow(0 0 ${blur}px rgba(0,255,213,${a}))`; } } rafId = requestAnimationFrame(tick); }; rafId = requestAnimationFrame(tick); return () => { cancelAnimationFrame(rafId); io.disconnect(); }; }, []); return (
Estrategia & Arquitectura de IA

Tu puente entre el código y la rentabilidad.

Estrategia, Diseño y Desarrollo de IA para Empresas Familiares y PyMEs.
Transformamos el caos de datos en un ecosistema asistido por AI.

document.getElementById('contacto').scrollIntoView()}> Agendar Auditoría Clínica document.getElementById('servicios').scrollIntoView()}> Explorar Servicios
{/* Cube drifts through the hero */}
Explorar
); } /* Cube SVG with an asterisk whose glow is driven externally via ref. */ function CubeWithGlow({ asteriskRef }) { return (
{'{'} * {'}'}
); } /* ─────────────────────────────────────────────────────────────────── PROBLEM */ function ProblemSection() { const bullets = [ 'Los equipos pierden cientos de horas en tareas manuales y hojas de cálculo desconectadas.', 'Las decisiones críticas se toman basadas en la intuición y no en datos en tiempo real.', 'La dependencia de procesos arcaicos erosiona el margen de beneficio y limita la escalabilidad.', ]; return (

El desarrollo tradicional y los procesos manuales están frenando tu potencial. Identificamos los cuellos de botella que erosionan tu rentabilidad.

    {bullets.map((b, i) => (
    {b}
    ))}

Nuestra Promesa

Protegemos el esfuerzo de tu vida transformando el conocimiento fragmentado en un activo institucional blindado.

} title="ROI Tangible" desc="Alineación de la IA con objetivos financieros." /> } title="Seguridad" desc="Arquitecturas de datos autónomas y seguras." />
); } function PromiseCell({ icon, title, desc }) { return (
{icon}
{title}
{desc}
); } /* ────────────────────────────────────────────────────────────────── PILLARS */ function IdentityPillars() { const pillars = [ { icon: , title: 'Liderazgo', desc: "Actuamos como 'Fractional CDOs' aportando capacidad operativa y creativa a tu equipo directivo." }, { icon: , title: 'Código', desc: 'Desarrollo de soluciones codificadas a la medida, eliminando la deuda técnica desde el primer día.' }, { icon: , title: 'Rentabilidad', desc: 'Cada línea de código y cada agente desplegado está alineado con tus objetivos financieros.' }, ]; return (
Nuestra Identidad

Desarrollamos tecnología con propósito, simplicidad absoluta y consciencia de negocio.

{pillars.map((p, i) => (
{p.icon}

{p.title}

{p.desc}

 ))}
); } function HexCard({ children }) { const gid = 'hg-' + Math.random().toString(36).slice(2, 7); return (
{children}
); } /* ───────────────────────────────────────────────────────────────── SERVICES */ function ServicesSection() { const services = [ { phase: 1, title: 'Blueprint Digital', desc: 'Auditoría y mapa financiero para priorizar el ROI antes de programar una sola línea de código.' }, { phase: 1, title: 'Gobernanza de Datos', desc: 'Arquitectura auditable bajo estándares europeos (GDPR), lista para la orquestación de IA.' }, { phase: 1, title: 'Talleres Funcionales', desc: 'Entrenamiento operativo para el equipo directivo sobre el uso estratégico de la IA.' }, { phase: 2, title: 'Desarrollo & Agentes', desc: 'Aplicaciones y arquitecturas de datos de alto rendimiento a bajo costo, optimizando cada recurso.' }, { phase: 2, title: 'Bóvedas de Conocimiento', desc: "Rescate del conocimiento fragmentado en un 'Knowledge Hub' institucional seguro y accesible." }, { phase: 2, title: 'Dirección Estratégica', desc: 'Liderazgo tecnológico continuo y auditoría de modelos para asegurar la escalabilidad a largo plazo.' }, ]; return (
Portafolio de Servicios

Resultados tangibles entregados por fases auditables.

{services.map((s, i) => (
{s.phase === 1 ? 'Fase I: Los Cimientos' : 'Fase II: La Evolución'}

{s.title}

{s.desc}

))}
); } /* ───────────────────────────────────────────────────────── AI DIAGNOSIS DEMO */ function AiDiagnosisSection() { const [query, setQuery] = useState(''); const [response, setResponse] = useState(''); const [loading, setLoading] = useState(false); // Static mock (no API key in this kit). Real site calls Gemini 2.0 Flash. const MOCK = `**Análisis de viabilidad.** El stack recomendado es Next.js + Postgres + un pipeline RAG con embeddings privados (gobernanza GDPR-by-default).\n\n**Aceleración con agentes.** Un agente de ingesta automatiza la extracción de inventarios desde tu ERP legacy; un segundo agente sincroniza el catálogo con tu front-end en tiempo real.\n\n**Estimación.** ~62% de reducción en tiempo de desarrollo · 40% menos coste operativo vs. equipo tradicional de 4 personas.`; const handleGenerate = () => { if (!query.trim()) return; setLoading(true); setResponse(''); setTimeout(() => { setResponse(MOCK); setLoading(false); }, 1100); }; return (
Demostración en Vivo

Diagnóstico de App a Medida

Cuéntanos qué aplicación necesitas construir. Nuestra IA analizará la complejidad y te dará una estimación de eficiencia.