import React, { useState, useEffect, useRef } from 'react'; import { ShieldCheck, Server, Code, Cpu, ChevronRight, Bot, Send, ChevronDown, CheckCircle2, BarChart3, Menu, X, Zap, Globe, Lock, ArrowRight, Activity } from 'lucide-react'; export default function App() { const [isScrolled, setIsScrolled] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); States para interactividad const [activeServiceTab, setActiveServiceTab] = useState('infraestructura'); const [openFaq, setOpenFaq] = useState(0); States para el Asesor IA (Preparado para Chatbot) const [aiInput, setAiInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const [chatMessages, setChatMessages] = useState([ { role 'ai', text 'Hola. Soy el Asesor de Soluciones TI de Hadross. Cuéntame los desafíos tecnológicos de tu empresa y te sugeriré un plan de acción estratégico.' } ]); const chatEndRef = useRef(null); Efecto para navbar sticky useEffect(() = { const handleScroll = () = setIsScrolled(window.scrollY 20); window.addEventListener('scroll', handleScroll); return () = window.removeEventListener('scroll', handleScroll); }, []); Auto-scroll del chat useEffect(() = { if (chatEndRef.current) { chatEndRef.current.scrollIntoView({ behavior 'smooth' }); } }, [chatMessages]); Manejo de la API de Gemini (AI Advisor) const handleAiSubmit = async (e) = { e.preventDefault(); if (!aiInput.trim()) return; const userMsg = aiInput; setAiInput(''); Agregar mensaje del usuario al historial const newMessages = [...chatMessages, { role 'user', text userMsg }]; setChatMessages(newMessages); setIsTyping(true); const apiKey = ; API Key proveída por el entorno const url = `httpsgenerativelanguage.googleapis.comv1betamodelsgemini-2.5-flash-preview-09-2025generateContentkey=${apiKey}`; const systemPrompt = Eres un consultor experto en TI que trabaja para 'Hadross', una empresa de soluciones tecnológicas. El usuario te planteará un problema o duda sobre su infraestructura, ciberseguridad o desarrollo de software. Tu objetivo es darle una recomendación profesional, concisa (máximo 2 párrafos) y estructurada, mencionando sutilmente cómo los servicios de Hadross pueden ayudarle. Mantén un tono ejecutivo, amable y tecnológico. Responde en formato de texto plano o Markdown ligero (negritas).; try { Implementación de retries exponenciales para robustez const fetchWithRetry = async (retries = 5, delay = 1000) = { try { const response = await fetch(url, { method 'POST', headers { 'Content-Type' 'applicationjson' }, body JSON.stringify({ contents [{ parts [{ text userMsg }] }], systemInstruction { parts [{ text systemPrompt }] } }) }); if (!response.ok) throw new Error('API Error'); return await response.json(); } catch (error) { if (retries === 0) throw error; await new Promise(res = setTimeout(res, delay)); return fetchWithRetry(retries - 1, delay 2); } }; const data = await fetchWithRetry(); const aiResponseText = data.candidates.[0].content.parts.[0].text Lo siento, hubo un error de conexión al procesar tu solicitud.; setChatMessages(prev = [...prev, { role 'ai', text aiResponseText }]); } catch (error) { setChatMessages(prev = [...prev, { role 'ai', text Lo siento, actualmente estoy experimentando problemas de red. Por favor, contacta directamente a nuestro equipo mediante el formulario inferior. }]); } finally { setIsTyping(false); } }; Datos de Servicios const services = { infraestructura { title 'Infraestructura Cloud & Local', desc 'Diseñamos, migramos y gestionamos infraestructuras escalables para garantizar alta disponibilidad y rendimiento óptimo de sus operaciones críticas.', features ['Migración a la nube (AWS, Azure, GCP)', 'Virtualización de servidores', 'Optimización de redes corporativas'], icon Server className=w-12 h-12 text-cyan-400 }, ciberseguridad { title 'Ciberseguridad Integral', desc 'Protegemos los activos más valiosos de su empresa mediante auditorías, pentesting y sistemas de monitoreo proactivo 247.', features ['Auditorías de vulnerabilidades', 'Implementación de Firewalls y VPNs', 'Capacitación anti-phishing para personal'], icon ShieldCheck className=w-12 h-12 text-cyan-400 }, desarrollo { title 'Desarrollo de Software a Medida', desc 'Transformamos ideas complejas en aplicaciones intuitivas y potentes, automatizando procesos y mejorando la eficiencia de su equipo.', features ['Aplicaciones web y móviles', 'Integración de APIs y sistemas legacy', 'Arquitectura de microservicios'], icon Code className=w-12 h-12 text-cyan-400 } }; const faqs = [ { q ¿Cuánto tiempo toma implementar una solución de ciberseguridad, a Depende del tamaño de su infraestructura, pero una auditoría inicial y despliegue de medidas críticas suele tomar entre 1 a 3 semanas. }, { q ¿Ofrecen soporte técnico post-implementación, a Sí, todos nuestros planes incluyen soporte SLA. Tenemos modelos 8x5 y 247 dependiendo de la criticidad de su negocio. }, { q ¿Tengo que migrar todo a la nube de inmediato, a No. Recomendamos arquitecturas híbridas donde migramos servicios progresivamente para asegurar que no haya interrupciones en su operación diaria. } ]; return ( div className=min-h-screen bg-slate-50 font-sans text-slate-800 { --- NAVBAR --- } header className={`fixed top-0 w-full z-50 transition-all duration-300 border-b ${isScrolled 'bg-white90 backdrop-blur-md border-slate-200 shadow-sm py-3' 'bg-transparent border-transparent py-5'}`} div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 flex justify-between items-center { ========================================== } { ZONA DE LOGO - REEMPLAZAR AQUÍ CON TU IMGUR } { ========================================== } div className=flex items-center gap-2 cursor-pointer { Si tienes tu imagen, descomenta la siguiente línea y borra el div del logo provisional } { img src=URL_DE_TU_IMGUR_AQUI.jpg alt=Hadross Logo className=h-10 w-auto } { Logo Provisional (Borrar cuando uses tu imagen) } div className=w-10 h-10 bg-indigo-900 rounded-lg flex items-center justify-center shadow-lg Cpu className=text-cyan-400 w-6 h-6 div span className=text-2xl font-extrabold tracking-tight text-indigo-950 HADROSSspan className=text-cyan-500.span span div { ========================================== } { Desktop Nav } nav className=hidden mdflex gap-8 font-medium text-slate-600 a href=#servicios className=hovertext-indigo-600 transition-colorsServiciosa a href=#asesor-ia className=hovertext-indigo-600 transition-colorsAsesor IAa a href=#casos-exito className=hovertext-indigo-600 transition-colorsCasos de Éxitoa a href=#contacto className=px-5 py-2 bg-indigo-600 text-white rounded-full hoverbg-indigo-700 hovershadow-lg transition-all Contactar a nav { Mobile Menu Toggle } button className=mdhidden text-slate-600 onClick={() = setMobileMenuOpen(!mobileMenuOpen)} {mobileMenuOpen X Menu } button div { Mobile Nav Dropdown } {mobileMenuOpen && ( div className=mdhidden absolute top-full left-0 w-full bg-white border-b border-slate-200 shadow-xl py-4 px-4 flex flex-col gap-4 a href=#servicios onClick={() = setMobileMenuOpen(false)} className=text-slate-600 font-mediumServiciosa a href=#asesor-ia onClick={() = setMobileMenuOpen(false)} className=text-slate-600 font-mediumAsesor IAa a href=#casos-exito onClick={() = setMobileMenuOpen(false)} className=text-slate-600 font-mediumCasos de Éxitoa a href=#contacto onClick={() = setMobileMenuOpen(false)} className=text-center py-2 bg-indigo-600 text-white rounded-lg font-mediumContactara div )} header { --- HERO SECTION --- } section className=relative pt-32 pb-20 lgpt-48 lgpb-32 overflow-hidden bg-indigo-950 text-white { Abstract Background Shapes } div className=absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none div className=absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-br from-indigo-60030 to-cyan-40010 blur-3xldiv div className=absolute -bottom-[20%] -left-[10%] w-[60%] h-[60%] rounded-full bg-gradient-to-tr from-cyan-60020 to-indigo-90040 blur-3xldiv div div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 relative z-10 text-center div className=inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-90050 border border-indigo-70050 text-cyan-300 text-sm font-semibold mb-6 Zap className=w-4 h-4 Transformación Digital Segura div h1 className=text-5xl lgtext-7xl font-extrabold tracking-tight mb-8 Evolucione su TI, br span className=text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 Asegure su Futuro. span h1 p className=text-xl text-indigo-200 max-w-2xl mx-auto mb-10 leading-relaxed En Hadross, no solo resolvemos problemas técnicos; arquitectamos ventajas competitivas. Desde ciberseguridad hasta desarrollo cloud a medida. p div className=flex flex-col smflex-row justify-center gap-4 a href=#contacto className=px-8 py-4 bg-cyan-500 text-slate-900 font-bold rounded-lg hoverbg-cyan-400 hoverscale-105 transition-all shadow-[0_0_20px_rgba(6,182,212,0.4)] flex items-center justify-center gap-2 Iniciar Proyecto ArrowRight className=w-5 h-5 a a href=#servicios className=px-8 py-4 bg-indigo-80050 text-white font-semibold rounded-lg hoverbg-indigo-700 transition-all border border-indigo-600 flex items-center justify-center Explorar Servicios a div div section { --- CLIENTS MARQUEE (New) --- } section className=py-10 bg-white border-b border-slate-100 div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 text-center p className=text-sm font-semibold text-slate-400 uppercase tracking-widest mb-6Empresas que confían en nosotrosp div className=flex flex-wrap justify-center items-center gap-8 mdgap-16 opacity-50 grayscale { Placeholders for client logos } div className=flex items-center gap-2 text-xl font-bold font-serifGlobe className=w-6 h-6 GlobalCorpdiv div className=flex items-center gap-2 text-xl font-bold font-sansActivity className=w-6 h-6 FinTech Prodiv div className=flex items-center gap-2 text-xl font-bold font-monoServer className=w-6 h-6 DataSystemsdiv div className=flex items-center gap-2 text-xl font-boldShieldCheck className=w-6 h-6 SecureNetdiv div div section { --- POR QUÉ HADROSS --- } section className=py-24 bg-slate-50 div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 div className=text-center mb-16 h2 className=text-3xl font-bold text-slate-900¿Por qué elegir a Hadrossh2 p className=mt-4 text-slate-600 max-w-2xl mx-autoNuestro enfoque combina conocimiento técnico profundo con una visión de negocio, asegurando que cada línea de código y cada servidor aporten valor real.p div div className=grid mdgrid-cols-3 gap-8 {[ { icon Lock className=w-8 h-8 text-indigo-600, title 'Seguridad First', desc 'Integramos protocolos de ciberseguridad desde el diseño inicial, no como un parche posterior.' }, { icon Zap className=w-8 h-8 text-indigo-600, title 'Agilidad Tecnológica', desc 'Implementamos soluciones modernas que permiten a su empresa adaptarse rápidamente a cambios del mercado.' }, { icon Activity className=w-8 h-8 text-indigo-600, title 'Soporte Proactivo', desc 'Monitoreamos sus sistemas 247 para identificar y resolver cuellos de botella antes de que afecten la operación.' } ].map((item, idx) = ( div key={idx} className=bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hovershadow-xl hover-translate-y-1 transition-all duration-300 div className=w-16 h-16 bg-indigo-50 rounded-xl flex items-center justify-center mb-6 {item.icon} div h3 className=text-xl font-bold text-slate-900 mb-3{item.title}h3 p className=text-slate-600 leading-relaxed{item.desc}p div ))} div div section { --- SERVICES (Interactive Tabs) --- } section id=servicios className=py-24 bg-white div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 div className=flex flex-col mdflex-row gap-12 items-start { Sidebar Tabs } div className=w-full mdw-13 flex flex-col gap-3 h2 className=text-3xl font-bold text-slate-900 mb-6Nuestras Solucionesh2 {Object.keys(services).map((key) = ( button key={key} onClick={() = setActiveServiceTab(key)} className={`text-left px-6 py-4 rounded-xl font-semibold transition-all duration-300 flex justify-between items-center ${ activeServiceTab === key 'bg-indigo-600 text-white shadow-lg shadow-indigo-200' 'bg-slate-50 text-slate-600 hoverbg-slate-100' }`} span className=capitalize{key}span {activeServiceTab === key && ChevronRight className=w-5 h-5 } button ))} div { Content Area } div className=w-full mdw-23 bg-slate-50 rounded-3xl p-8 mdp-12 border border-slate-100 relative overflow-hidden div className=absolute top-0 right-0 w-64 h-64 bg-cyan-100 rounded-full blur-3xl opacity-50 -translate-y-12 translate-x-12div div className=relative z-10 {services[activeServiceTab].icon} h3 className=text-3xl font-bold text-slate-900 mt-6 mb-4 {services[activeServiceTab].title} h3 p className=text-lg text-slate-600 mb-8 leading-relaxed {services[activeServiceTab].desc} p h4 className=font-semibold text-slate-900 mb-4 uppercase tracking-wide text-smCapacidades Claveh4 ul className=space-y-4 {services[activeServiceTab].features.map((feat, idx) = ( li key={idx} className=flex items-center gap-3 text-slate-700 CheckCircle2 className=w-5 h-5 text-indigo-500 shrink-0 {feat} li ))} ul div div div div section { --- AI ADVISOR (Chatbot Prepared) --- } section id=asesor-ia className=py-24 bg-indigo-950 text-white overflow-hidden relative div className=absolute top-0 left-0 w-full h-full bg-[url('httpswww.transparenttextures.compatternscubes.png')] opacity-5div div className=max-w-5xl mx-auto px-4 smpx-6 lgpx-8 relative z-10 div className=text-center mb-12 div className=inline-flex items-center justify-center w-16 h-16 rounded-full bg-indigo-800 border border-indigo-600 mb-6 shadow-[0_0_30px_rgba(99,102,241,0.5)] Bot className=w-8 h-8 text-cyan-400 div h2 className=text-3xl mdtext-4xl font-bold mb-4Asesor de TI Integrado (IA)h2 p className=text-indigo-200Describa su desafío actual y nuestro motor de IA le sugerirá un enfoque tecnológico inmediato.p div { Interfaz de ChatHerramienta } div className=bg-slate-900 border border-indigo-800 rounded-2xl shadow-2xl overflow-hidden flex flex-col h-[500px] { Header Chat } div className=bg-slate-800 px-6 py-4 border-b border-slate-700 flex items-center gap-3 div className=w-3 h-3 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.8)]div span className=font-semibold text-slate-200Consultor Hadross AIspan span className=text-xs px-2 py-1 bg-indigo-90050 text-indigo-300 rounded ml-autoPowered by Geminispan div { Area de Mensajes (Historial) } div className=flex-1 overflow-y-auto p-6 space-y-6 {chatMessages.map((msg, idx) = ( div key={idx} className={`flex ${msg.role === 'user' 'justify-end' 'justify-start'}`} div className={`max-w-[80%] rounded-2xl px-5 py-4 ${ msg.role === 'user' 'bg-indigo-600 text-white rounded-tr-sm' 'bg-slate-800 text-slate-200 rounded-tl-sm border border-slate-700' }`} {msg.text.split('n').map((line, i) = ( p key={i} className=mb-2 lastmb-0 { Simple markdown bold parsing } {line.split((.)).map((part, j) = part.startsWith('') && part.endsWith('') strong key={j} className=text-white{part.slice(2, -2)}strong part )} p ))} div div ))} {isTyping && ( div className=flex justify-start div className=bg-slate-800 rounded-2xl rounded-tl-sm px-5 py-4 border border-slate-700 flex gap-2 span className=w-2 h-2 rounded-full bg-cyan-400 animate-bouncespan span className=w-2 h-2 rounded-full bg-cyan-400 animate-bounce style={{ animationDelay '0.2s' }}span span className=w-2 h-2 rounded-full bg-cyan-400 animate-bounce style={{ animationDelay '0.4s' }}span div div )} div ref={chatEndRef} div { Input Area } div className=p-4 bg-slate-800 border-t border-slate-700 form onSubmit={handleAiSubmit} className=flex gap-3 input type=text value={aiInput} onChange={(e) = setAiInput(e.target.value)} placeholder=Ej Necesitamos migrar nuestra base de datos a AWS... className=flex-1 bg-slate-900 text-white border border-slate-600 rounded-xl px-4 py-3 focusoutline-none focusborder-cyan-400 transition-colors disabled={isTyping} button type=submit disabled={isTyping !aiInput.trim()} className=bg-cyan-500 hoverbg-cyan-400 text-slate-900 p-3 rounded-xl transition-colors disabledopacity-50 disabledcursor-not-allowed flex items-center justify-center w-12 Send className=w-5 h-5 button form div div div section { --- CASOS DE ÉXITO (CSS Charts) --- } section id=casos-exito className=py-24 bg-slate-50 div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 div className=text-center mb-16 h2 className=text-3xl font-bold text-slate-900Resultados Mediblesh2 p className=mt-4 text-slate-600 max-w-2xl mx-autoNo hablamos de teorías, entregamos mejoras tangibles en la eficiencia y seguridad operativa de nuestros clientes.p div div className=grid mdgrid-cols-2 gap-12 items-center { Contexto del Caso } div div className=inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-100 text-green-700 text-sm font-semibold mb-6 BarChart3 className=w-4 h-4 Caso de Estudio FinTech div h3 className=text-2xl font-bold text-slate-900 mb-4Migración y Securización de Core Financieroh3 p className=text-slate-600 mb-6 leading-relaxed Una empresa financiera líder presentaba caídas del 5% durante picos de transacciones y vulnerabilidades en su red legacy. Hadross rediseñó la arquitectura usando contenedores en la nube y aplicó políticas Zero Trust. p ul className=space-y-3 mb-8 li className=flex items-center gap-3 text-slate-700 CheckCircle2 className=w-5 h-5 text-green-500 ROI alcanzado en 6 meses. li li className=flex items-center gap-3 text-slate-700 CheckCircle2 className=w-5 h-5 text-green-500 0 brechas de seguridad desde la implementación. li ul div { Gráfico Construido con Tailwind (Robusto en un solo archivo) } div className=bg-white p-8 rounded-2xl shadow-lg border border-slate-100 h4 className=text-lg font-bold text-slate-800 mb-8 text-centerMejoras de Rendimiento (%)h4 div className=space-y-6 { Barra 1 } div div className=flex justify-between text-sm font-semibold text-slate-600 mb-2 spanReducción de Inactividad (Downtime)span span className=text-indigo-60099.9%span div div className=w-full bg-slate-100 rounded-full h-4 overflow-hidden relative div className=bg-gradient-to-r from-indigo-500 to-cyan-400 h-4 rounded-full style={{ width '99%' }}div div div { Barra 2 } div div className=flex justify-between text-sm font-semibold text-slate-600 mb-2 spanAhorro en Costos Operativosspan span className=text-indigo-60045%span div div className=w-full bg-slate-100 rounded-full h-4 overflow-hidden relative div className=bg-gradient-to-r from-indigo-500 to-cyan-400 h-4 rounded-full style={{ width '45%' }}div div div { Barra 3 } div div className=flex justify-between text-sm font-semibold text-slate-600 mb-2 spanVelocidad de Recuperación (Disaster Recovery)span span className=text-indigo-60085% más rápidospan div div className=w-full bg-slate-100 rounded-full h-4 overflow-hidden relative div className=bg-gradient-to-r from-indigo-500 to-cyan-400 h-4 rounded-full style={{ width '85%' }}div div div div div div div section { --- FAQ SECTION (New) --- } section className=py-24 bg-white div className=max-w-3xl mx-auto px-4 smpx-6 lgpx-8 div className=text-center mb-12 h2 className=text-3xl font-bold text-slate-900Preguntas Frecuentesh2 div div className=space-y-4 {faqs.map((faq, idx) = ( div key={idx} className=border border-slate-200 rounded-xl overflow-hidden button onClick={() = setOpenFaq(openFaq === idx -1 idx)} className=w-full px-6 py-5 text-left bg-slate-50 hoverbg-slate-100 flex justify-between items-center transition-colors span className=font-semibold text-slate-800{faq.q}span ChevronDown className={`w-5 h-5 text-slate-500 transition-transform ${openFaq === idx 'rotate-180' ''}`} button {openFaq === idx && ( div className=px-6 py-5 bg-white text-slate-600 border-t border-slate-100 {faq.a} div )} div ))} div div section { --- CONTACT CTA --- } section id=contacto className=py-24 bg-gradient-to-br from-indigo-900 to-slate-900 text-white relative overflow-hidden div className=absolute inset-0 bg-[url('httpswww.transparenttextures.compatternscarbon-fibre.png')] opacity-10div div className=max-w-4xl mx-auto px-4 smpx-6 lgpx-8 text-center relative z-10 h2 className=text-4xl font-bold mb-6¿Listo para escalar su infraestructurah2 p className=text-indigo-200 text-lg mb-10 Agenda una consultoría de 30 minutos sin costo con nuestros arquitectos de soluciones. Evaluaremos su panorama actual y trazaremos una hoja de ruta. p form className=max-w-md mx-auto bg-white5 backdrop-blur-md p-6 rounded-2xl border border-white10 flex flex-col gap-4 input type=text placeholder=Nombre completo className=bg-slate-80050 border border-slate-600 text-white rounded-lg px-4 py-3 focusoutline-none focusborder-cyan-400 input type=email placeholder=Correo corporativo className=bg-slate-80050 border border-slate-600 text-white rounded-lg px-4 py-3 focusoutline-none focusborder-cyan-400 textarea placeholder=Cuéntenos sobre su proyecto... rows=3 className=bg-slate-80050 border border-slate-600 text-white rounded-lg px-4 py-3 focusoutline-none focusborder-cyan-400textarea button type=button className=bg-cyan-500 text-slate-900 font-bold rounded-lg px-4 py-3 mt-2 hoverbg-cyan-400 transition-colors Solicitar Consultoría button form div section { --- FOOTER --- } footer className=bg-slate-950 text-slate-400 py-12 border-t border-slate-900 div className=max-w-7xl mx-auto px-4 smpx-6 lgpx-8 flex flex-col mdflex-row justify-between items-center gap-6 div className=flex items-center gap-2 Cpu className=text-cyan-400 w-6 h-6 span className=text-xl font-bold text-slate-200HADROSS.span div p className=text-sm© {new Date().getFullYear()} Hadross Soluciones TI. Todos los derechos reservados.p div className=flex gap-4 a href=# className=hovertext-cyan-400 transition-colorsLinkedIna a href=# className=hovertext-cyan-400 transition-colorsTwittera a href=# className=hovertext-cyan-400 transition-colorsGitHuba div div footer div ); }