<!DOCTYPE html>

<head>

<title>OmniaFlow | Automatización & IA</title>

<style>

body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #F5F5F0; }

html { scroll-behavior: smooth; }

/* Animaciones suaves */

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

.animate-float { animation: float 6s ease-in-out infinite; }

</style>

</head>

<body>

const { useState, useEffect } = React;

// --- SISTEMA DE ICONOS SVG NATIVOS (Sin dependencias externas) ---

// Esto elimina el error "Cannot read properties of undefined (reading 'forwardRef')"

const Icons = {

ArrowRight: <path d="M5 12h14M12 5l7 7-7 7"/>,

Cpu: <><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></>,

Menu: <><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></>,

X: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,

BrainCircuit: <><path d="M12 4.5a2.5 2.5 0 0 0-4.96-.46 2.5 2.5 0 0 0-1.98 3 2.5 2.5 0 0 0-1.32 3 2.5 2.5 0 0 0 .5 3.19 2.5 2.5 0 0 0 2.26 1.77 2.5 2.5 0 0 0 5 .04 2.5 2.5 0 0 0 5-.05 2.5 2.5 0 1 0 5-5 2.5 2.5 0 1 0-4.96-5 2.5 2.5 0 0 0-4.54 1.5"/><path d="M12 13.5V20"/><path d="M16 16.5h4"/><path d="M4 16.5h4"/></>,

Code2: <><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></>,

Zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,

CheckCircle2: <><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,

Rocket: <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></>,

Mail: <><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></>

};

const Icon = ({ name, size = 24, className = "" }) => {

const content = Icons[name];

if (!content) return null;

return (

<svg

xmlns="http://www.w3.org/2000/svg"

width={size}

height={size}

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

strokeWidth="2"

strokeLinecap="round"

strokeLinejoin="round"

className={className}

{content}

</svg>

);

};

// --- COMPONENTE PRINCIPAL ---

const OmniaFlowSite = () => {

const [isScrolled, setIsScrolled] = useState(false);

const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

useEffect(() => {

const handleScroll = () => setIsScrolled(window.scrollY > 20);

window.addEventListener('scroll', handleScroll);

return () => window.removeEventListener('scroll', handleScroll);

}, []);

const scrollTo = (id) => {

setIsMobileMenuOpen(false);

const el = document.getElementById(id);

if(el) el.scrollIntoView({ behavior: 'smooth' });

};

return (

{/* --- NAVBAR --- */}

{/* Logo */}

<div className="flex items-center gap-3 cursor-pointer" onClick={() => scrollTo('hero')}>

{/* Intenta cargar el logo, si falla muestra texto fallback */}

<img

src="omniaflow automation logo.jpg"

alt="OmniaFlow"

className="h-10 w-auto object-contain"

onError={(e) => {

e.target.style.display = 'none';

document.getElementById('logo-text-fallback').style.display = 'flex';

}}

</div>

<span>Omnia<span className="text-[#5432D3]">Flow</span></span>

</div>

{/* Desktop Menu */}

<button onClick={() => scrollTo('servicios')} className="hover:text-[#5432D3] transition-colors">Soluciones</button>

<button onClick={() => scrollTo('ecosistema')} className="hover:text-[#5432D3] transition-colors">Ecosistema</button>

<button onClick={() => scrollTo('nosotros')} className="hover:text-[#5432D3] transition-colors">Nosotros</button>

<button onClick={() => scrollTo('contacto')} className="px-5 py-2.5 rounded-full text-white font-semibold shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50 hover:-translate-y-0.5 transition-all bg-gradient-to-r from-[#5432D3] to-[#8F5EF8]">

Agenda una Demo

</button>

</div>

{/* Mobile Toggle */}

<button className="md:hidden" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>

</button>

</div>

{/* Mobile Menu */}

{isMobileMenuOpen && (

<button onClick={() => scrollTo('servicios')} className="text-left py-2 font-medium">Soluciones</button>

<button onClick={() => scrollTo('ecosistema')} className="text-left py-2 font-medium">Ecosistema</button>

<button onClick={() => scrollTo('contacto')} className="w-full py-3 rounded-lg text-white font-semibold bg-[#5432D3]">Agenda una Demo</button>

</div>

)}

</nav>

{/* --- HERO SECTION --- */}

Innovación en Inteligencia Artificial

</div>

Transformamos datos en <br/>

Decisiones Inteligentes

</span>

</h1>

OmniaFlow integra soluciones de automatización y agentes de IA para escalar negocios modernos. El futuro no es solo digital, es cognitivo.

</p>

<button onClick={() => scrollTo('contacto')} className="px-8 py-4 rounded-full text-white font-bold text-lg shadow-xl shadow-indigo-600/20 hover:shadow-indigo-600/40 hover:-translate-y-1 transition-all bg-gradient-to-r from-[#5432D3] to-[#8F5EF8] flex items-center justify-center gap-2">

Comenzar Transformación <Icon name="ArrowRight" size={20} />

</button>

<button onClick={() => scrollTo('ecosistema')} className="px-8 py-4 rounded-full bg-white text-[#183B56] border border-slate-200 font-bold text-lg hover:bg-slate-50 transition-all">

Ver Productos

</button>

</div>

</section>

{/* --- CLIENTES / TRUST --- */}

<p className="text-center text-slate-400 font-semibold text-sm uppercase tracking-widest mb-8">Empresas que confían en el futuro</p>

{['TechCorp', 'InnovaHealth', 'FutureFit', 'DataSphere'].map((brand, i) => (

<div className="w-6 h-6 bg-slate-300 rounded-full"></div> {brand}

</div>

))}

</div>

</section>

{/* --- SERVICIOS --- */}

<h2 className="text-3xl md:text-4xl font-bold mb-4">Soluciones Integrales</h2>

Diseñamos la arquitectura tecnológica que tu empresa necesita para operar de manera autónoma.

</p>

</div>

{[

{ icon: "BrainCircuit", title: "Consultoría IA", desc: "Auditoría tecnológica y desarrollo de estrategias para implementar LLMs en procesos críticos." },

{ icon: "Code2", title: "Desarrollo a Medida", desc: "Software escalable y soluciones SaaS construidas sobre arquitecturas robustas." },

{ icon: "Zap", title: "Automatización", desc: "Elimina tareas repetitivas. Conectamos CRM, ventas y soporte en un flujo inteligente." }

].map((service, i) => (

</div>

<h3 className="text-xl font-bold mb-3">{service.title}</h3>

<p className="text-slate-600 mb-4">{service.desc}</p>

<a href="#contacto" className="text-[#5432D3] font-semibold flex items-center gap-1 group-hover:gap-2 transition-all">Saber más <Icon name="ArrowRight" size={16}/></a>

</div>

))}

</div>

</section>

{/* --- ECOSISTEMA (Responde247) --- */}

<div className="inline-block px-3 py-1 bg-white/10 rounded-full text-xs font-bold tracking-wider mb-6 border border-white/10">PRODUCTO ESTRELLA</div>

Conoce <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Responde247</span>

</h2>

El agente de IA que vive en tu WhatsApp e Instagram, agendando citas y respondiendo dudas mientras duermes.

</p>

{["Respuestas en < 3 segundos.", "Integración nativa Meta.", "Agenda sincronizada."].map((item, i) => (

</li>

))}

</ul>

<button onClick={() => scrollTo('contacto')} className="bg-white text-[#183B56] px-8 py-3 rounded-lg font-bold hover:bg-blue-50 transition-colors flex items-center gap-2">

Explorar Responde247 <Icon name="Rocket" size={18} className="text-[#5432D3]" />

</button>

</div>

<div>

<div className="font-bold text-white">Asistente Virtual</div>

<div className="text-xs text-emerald-400 flex items-center gap-1"><span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span> En línea</div>

</div>

<div className="bg-white/10 p-3 rounded-lg rounded-tl-none max-w-[80%] text-blue-100">Hola, ¿precios de la membresía? 🏋️</div>

<div className="bg-gradient-to-r from-blue-600 to-emerald-600 p-3 rounded-lg rounded-tr-none max-w-[85%] ml-auto text-white">¡Hola! Tenemos un 20% de descuento hoy. Queda en $450/mes. ¿Agendamos visita? 🤖</div>

</div>

</section>

{/* --- CONTACTO --- */}

<div>

<h2 className="text-3xl md:text-4xl font-bold mb-6">¿Listo para escalar?</h2>

<p className="text-blue-100 mb-8 text-lg">Déjanos tus datos y analizaremos tu caso sin costo.</p>

<div><p className="text-sm text-blue-300">Email</p><p className="font-medium">contacto@omniaflow.tech</p></div>

</div>

<form className="space-y-4" onSubmit={(e) => e.preventDefault()}>

<div>

<label className="block text-sm font-semibold mb-2">Nombre</label>

</div>

<div>

<label className="block text-sm font-semibold mb-2">Empresa</label>

</div>

Solicitar Auditoría

</button>

</form>

</div>

</section>

</footer>

</div>

);

};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<OmniaFlowSite />);

</script>

</body>

</html>