| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ULTIMA MILLA | Líderes en Servicios IT Globales</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary: #0066ff; |
| --primary-dark: #0052cc; |
| --secondary: #00ff88; |
| --dark: #0f172a; |
| --light: #f8fafc; |
| --accent: #ff5e1a; |
| } |
| |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| scroll-behavior: smooth; |
| background-color: #f9fafb; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .service-card { |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| background: rgba(255, 255, 255, 0.1); |
| } |
| |
| .tech-icon { |
| transition: all 0.3s ease; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(5px); |
| } |
| |
| .tech-icon:hover { |
| transform: scale(1.15); |
| background: rgba(255, 255, 255, 0.2); |
| } |
| |
| .floating { |
| animation: floating 6s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link:after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 3px; |
| bottom: -5px; |
| left: 0; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| transition: width 0.4s ease; |
| } |
| |
| .nav-link:hover:after { |
| width: 100%; |
| } |
| |
| .hamburger { |
| transition: all 0.3s ease; |
| } |
| |
| .hamburger.active { |
| transform: rotate(90deg); |
| } |
| |
| .glow { |
| box-shadow: 0 0 15px rgba(0, 102, 255, 0.5); |
| } |
| |
| .glow:hover { |
| box-shadow: 0 0 25px rgba(0, 102, 255, 0.7); |
| } |
| |
| .world-map-bg { |
| background-image: url('https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1491&q=80'); |
| background-size: cover; |
| background-position: center; |
| background-blend-mode: overlay; |
| } |
| |
| .testimonial-card { |
| background: linear-gradient(145deg, #ffffff, #f1f5f9); |
| box-shadow: 20px 20px 60px #d1d5db, -20px -20px 60px #ffffff; |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .section-title { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .section-title:after { |
| content: ''; |
| position: absolute; |
| width: 60%; |
| height: 4px; |
| bottom: -10px; |
| left: 0; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| border-radius: 2px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-900"> |
| |
| <nav class="fixed w-full bg-white/90 backdrop-blur-md shadow-sm z-50"> |
| <div class="max-w-8xl mx-auto px-6 sm:px-8 lg:px-12"> |
| <div class="flex justify-between h-24 items-center"> |
| <div class="flex items-center"> |
| <a href="#" class="flex items-center"> |
| <span class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-emerald-500">ULTIMA</span> |
| <span class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 to-blue-600">MILLA</span> |
| </a> |
| </div> |
| |
| <div class="hidden lg:flex space-x-10"> |
| <a href="#inicio" class="nav-link text-gray-900 hover:text-blue-600 font-medium text-lg">Inicio</a> |
| <a href="#servicios" class="nav-link text-gray-900 hover:text-blue-600 font-medium text-lg">Servicios</a> |
| <a href="#tecnologias" class="nav-link text-gray-900 hover:text-blue-600 font-medium text-lg">Tecnologías</a> |
| <a href="#global" class="nav-link text-gray-900 hover:text-blue-600 font-medium text-lg">Presencia Global</a> |
| <a href="#casos" class="nav-link text-gray-900 hover:text-blue-600 font-medium text-lg">Casos de Éxito</a> |
| <a href="#contacto" class="nav-link text-gray-900 hover:text-blue-600 font-medium text-lg">Contacto</a> |
| </div> |
| |
| <div class="hidden lg:block"> |
| <a href="#contacto" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-emerald-500 text-white font-bold rounded-full hover:opacity-90 transition duration-300 shadow-lg hover:shadow-xl"> |
| Hablar con un experto |
| </a> |
| </div> |
| |
| <div class="lg:hidden"> |
| <button id="menu-btn" class="hamburger text-gray-900 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden lg:hidden bg-white shadow-xl"> |
| <div class="px-6 pt-4 pb-8 space-y-4"> |
| <a href="#inicio" class="block px-4 py-3 rounded-lg text-lg font-medium text-gray-900 hover:bg-gray-100 transition">Inicio</a> |
| <a href="#servicios" class="block px-4 py-3 rounded-lg text-lg font-medium text-gray-900 hover:bg-gray-100 transition">Servicios</a> |
| <a href="#tecnologias" class="block px-4 py-3 rounded-lg text-lg font-medium text-gray-900 hover:bg-gray-100 transition">Tecnologías</a> |
| <a href="#global" class="block px-4 py-3 rounded-lg text-lg font-medium text-gray-900 hover:bg-gray-100 transition">Presencia Global</a> |
| <a href="#casos" class="block px-4 py-3 rounded-lg text-lg font-medium text-gray-900 hover:bg-gray-100 transition">Casos de Éxito</a> |
| <a href="#contacto" class="block px-4 py-3 rounded-lg text-lg font-medium text-gray-900 hover:bg-gray-100 transition">Contacto</a> |
| <a href="#contacto" class="block w-full text-center px-4 py-3 bg-gradient-to-r from-blue-600 to-emerald-500 text-white font-bold rounded-full hover:opacity-90 transition duration-300 shadow-lg mt-4"> |
| Hablar con un experto |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="inicio" class="pt-40 pb-28 px-6 sm:px-8 lg:px-12 max-w-8xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> |
| <div class="relative"> |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 leading-tight"> |
| <span class="gradient-text">Innovación IT</span> para el <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-800">mundo digital</span> |
| </h1> |
| <p class="mt-8 text-xl text-gray-700 leading-relaxed"> |
| Líderes en servicios IT corporativos a escala global. Transformamos organizaciones con soluciones tecnológicas de vanguardia, diseñadas para el futuro. |
| </p> |
| <div class="mt-12 flex flex-wrap gap-6"> |
| <a href="#contacto" class="px-10 py-4 bg-gradient-to-r from-blue-600 to-blue-800 text-white font-bold rounded-full hover:opacity-90 transition duration-300 shadow-xl hover:shadow-2xl glow"> |
| Transforma tu empresa |
| </a> |
| <a href="#servicios" class="px-10 py-4 border-2 border-blue-600 text-blue-600 font-bold rounded-full hover:bg-blue-50 transition duration-300 flex items-center"> |
| <span>Explora servicios</span> |
| <i class="fas fa-arrow-right ml-3"></i> |
| </a> |
| </div> |
| |
| <div class="mt-16 flex flex-wrap items-center gap-8"> |
| <div class="flex items-center"> |
| <div class="flex -space-x-2"> |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white"> |
| </div> |
| <div class="ml-4"> |
| <p class="font-bold text-gray-900">+500 expertos</p> |
| <p class="text-sm text-gray-600">Equipo global</p> |
| </div> |
| </div> |
| |
| <div class="h-12 w-px bg-gray-200"></div> |
| |
| <div> |
| <div class="flex items-center"> |
| <div class="bg-emerald-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-medal text-emerald-600 text-lg"></i> |
| </div> |
| <div> |
| <p class="font-bold text-gray-900">Premios internacionales</p> |
| <p class="text-sm text-gray-600">Excelencia en IT</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="relative z-10"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Soluciones IT Globales" class="rounded-3xl shadow-2xl w-full"> |
| </div> |
| <div class="absolute -bottom-8 -right-8 bg-white p-6 rounded-2xl shadow-2xl w-3/4 z-20"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-4 rounded-xl mr-4"> |
| <i class="fas fa-globe-americas text-blue-600 text-2xl"></i> |
| </div> |
| <div> |
| <p class="font-bold text-gray-900 text-lg">Presencia en 18 países</p> |
| <p class="text-gray-600">Soluciones IT para Latinoamérica y el mundo</p> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -top-8 -left-8 bg-gradient-to-r from-blue-600 to-emerald-500 text-white p-6 rounded-2xl shadow-2xl w-2/3 z-0"> |
| <div class="flex items-center"> |
| <div class="mr-4"> |
| <p class="font-bold text-lg">+300</p> |
| <p class="text-sm">Empresas transformadas</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-chart-line text-2xl opacity-70"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-gray-50 to-gray-100"> |
| <div class="max-w-8xl mx-auto px-6 sm:px-8 lg:px-12"> |
| <h2 class="text-center text-gray-500 text-sm font-semibold uppercase tracking-wider mb-10"> |
| ALIADOS ESTRATÉGICOS |
| </h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-10 items-center"> |
| <div class="flex justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon" class="h-10 opacity-80 hover:opacity-100 transition duration-300"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/2048px-Microsoft_logo.svg.png" alt="Microsoft" class="h-8 opacity-80 hover:opacity-100 transition duration-300"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2048px-Google_%22G%22_Logo.svg.png" alt="Google" class="h-10 opacity-80 hover:opacity-100 transition duration-300"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/505px-Apple_logo_black.svg.png" alt="Apple" class="h-10 opacity-80 hover:opacity-100 transition duration-300"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Intel-logo.svg/2560px-Intel-logo.svg.png" alt="Intel" class="h-8 opacity-80 hover:opacity-100 transition duration-300"> |
| </div> |
| <div class="flex justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Dell_Logo.svg/2560px-Dell_Logo.svg.png" alt="Dell" class="h-8 opacity-80 hover:opacity-100 transition duration-300"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="servicios" class="py-28 px-6 sm:px-8 lg:px-12 max-w-8xl mx-auto"> |
| <div class="text-center mb-20"> |
| <span class="text-blue-600 font-semibold text-sm uppercase tracking-wider">NUESTRA OFERTA DE VALOR</span> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mt-4 mb-6 section-title">Servicios IT de Clase Mundial</h2> |
| <p class="mt-6 max-w-4xl mx-auto text-xl text-gray-700 leading-relaxed"> |
| Soluciones tecnológicas integrales diseñadas para impulsar la transformación digital de las organizaciones más exigentes. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 p-8 border border-gray-100 hover:border-transparent"> |
| <div class="bg-gradient-to-r from-blue-100 to-blue-50 w-16 h-16 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-cloud text-blue-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Transformación Cloud</h3> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Estrategias de nube híbrida y multicloud para maximizar eficiencia, seguridad y escalabilidad en entornos corporativos globales. |
| </p> |
| <ul class="space-y-3 text-gray-600 mb-6"> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-blue-600 text-xs"></i> |
| </div> |
| Arquitecturas cloud nativas |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-blue-600 text-xs"></i> |
| </div> |
| Migración sin interrupciones |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-blue-600 text-xs"></i> |
| </div> |
| Optimización FinOps |
| </li> |
| </ul> |
| <a href="#" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 mt-4"> |
| Saber más <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 p-8 border border-gray-100 hover:border-transparent"> |
| <div class="bg-gradient-to-r from-emerald-100 to-emerald-50 w-16 h-16 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-shield-alt text-emerald-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Ciberseguridad Global</h3> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Protección avanzada contra amenazas digitales con inteligencia artificial y equipos de respuesta 24/7 en todas las regiones. |
| </p> |
| <ul class="space-y-3 text-gray-600 mb-6"> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-emerald-600 text-xs"></i> |
| </div> |
| SOC (Security Operations Center) |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-emerald-600 text-xs"></i> |
| </div> |
| Cumplimiento regulatorio |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-emerald-600 text-xs"></i> |
| </div> |
| Ethical Hacking |
| </li> |
| </ul> |
| <a href="#" class="inline-flex items-center text-emerald-600 font-medium hover:text-emerald-800 mt-4"> |
| Saber más <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 p-8 border border-gray-100 hover:border-transparent"> |
| <div class="bg-gradient-to-r from-purple-100 to-purple-50 w-16 h-16 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-network-wired text-purple-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Infraestructura de Misión Crítica</h3> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Diseño e implementación de arquitecturas tecnológicas con 99.999% de disponibilidad para operaciones empresariales esenciales. |
| </p> |
| <ul class="space-y-3 text-gray-600 mb-6"> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-purple-600 text-xs"></i> |
| </div> |
| Data Centers hiperconvergentes |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-purple-600 text-xs"></i> |
| </div> |
| Redes definidas por software |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-purple-600 text-xs"></i> |
| </div> |
| Disaster Recovery |
| </li> |
| </ul> |
| <a href="#" class="inline-flex items-center text-purple-600 font-medium hover:text-purple-800 mt-4"> |
| Saber más <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 p-8 border border-gray-100 hover:border-transparent"> |
| <div class="bg-gradient-to-r from-amber-100 to-amber-50 w-16 h-16 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-robot text-amber-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Inteligencia Artificial Empresarial</h3> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Implementación de soluciones de IA generativa y machine learning para automatización de procesos y toma de decisiones estratégicas. |
| </p> |
| <ul class="space-y-3 text-gray-600 mb-6"> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-amber-600 text-xs"></i> |
| </div> |
| Modelos de lenguaje avanzados |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-amber-600 text-xs"></i> |
| </div> |
| Computer Vision |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-amber-600 text-xs"></i> |
| </div> |
| Procesamiento de lenguaje natural |
| </li> |
| </ul> |
| <a href="#" class="inline-flex items-center text-amber-600 font-medium hover:text-amber-800 mt-4"> |
| Saber más <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 p-8 border border-gray-100 hover:border-transparent"> |
| <div class="bg-gradient-to-r from-red-100 to-red-50 w-16 h-16 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-database text-red-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Data & Analytics</h3> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Plataformas de datos unificadas con capacidades de analytics predictivo y prescriptivo para inteligencia de negocio en tiempo real. |
| </p> |
| <ul class="space-y-3 text-gray-600 mb-6"> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-red-600 text-xs"></i> |
| </div> |
| Data Lakes & Warehouses |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-red-600 text-xs"></i> |
| </div> |
| Business Intelligence |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-red-600 text-xs"></i> |
| </div> |
| Data Governance |
| </li> |
| </ul> |
| <a href="#" class="inline-flex items-center text-red-600 font-medium hover:text-red-800 mt-4"> |
| Saber más <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 p-8 border border-gray-100 hover:border-transparent"> |
| <div class="bg-gradient-to-r from-indigo-100 to-indigo-50 w-16 h-16 rounded-xl flex items-center justify-center mb-6"> |
| <i class="fas fa-mobile-alt text-indigo-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Transformación Digital</h3> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Estrategias integrales de digitalización para reinventar modelos de negocio y experiencias de cliente en la era digital. |
| </p> |
| <ul class="space-y-3 text-gray-600 mb-6"> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-indigo-600 text-xs"></i> |
| </div> |
| Consultoría estratégica |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-indigo-600 text-xs"></i> |
| </div> |
| Experiencia de cliente |
| </li> |
| <li class="flex items-center"> |
| <div class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-indigo-600 text-xs"></i> |
| </div> |
| Automatización de procesos |
| </li> |
| </ul> |
| <a href="#" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-800 mt-4"> |
| Saber más <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg py-20 text-white world-map-bg"> |
| <div class="max-w-8xl mx-auto px-6 sm:px-8 lg:px-12"> |
| <div class="text-center mb-16"> |
| <span class="text-white/80 font-semibold text-sm uppercase tracking-wider">POR QUÉ ELEGIRNOS</span> |
| <h2 class="text-4xl md:text-5xl font-bold text-white mt-4 mb-6">Líderes en Innovación Tecnológica</h2> |
| <p class="mt-6 max-w-3xl mx-auto text-xl text-white/90 leading-relaxed"> |
| Más de una década transformando organizaciones con soluciones IT de vanguardia a escala global. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20"> |
| <div class="text-5xl font-bold mb-4">+300</div> |
| <div class="text-lg font-medium">Empresas transformadas</div> |
| <div class="w-full bg-white/30 h-1 mt-6"> |
| <div class="bg-white h-1 w-3/4"></div> |
| </div> |
| </div> |
| <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20"> |
| <div class="text-5xl font-bold mb-4">18</div> |
| <div class="text-lg font-medium">Países con presencia</div> |
| <div class="w-full bg-white/30 h-1 mt-6"> |
| <div class="bg-white h-1 w-2/3"></div> |
| </div> |
| </div> |
| <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20"> |
| <div class="text-5xl font-bold mb-4">99.99%</div> |
| <div class="text-lg font-medium">SLA promedio</div> |
| <div class="w-full bg-white/30 h-1 mt-6"> |
| <div class="bg-white h-1 w-full"></div> |
| </div> |
| </div> |
| <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20"> |
| <div class="text-5xl font-bold mb-4">+500</div> |
| <div class="text-lg font-medium">Expertos certificados</div> |
| <div class="w-full bg-white/30 h-1 mt-6"> |
| <div class="bg-white h-1 w-4/5"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tecnologias" class="py-28 px-6 sm:px-8 lg:px-12 max-w-8xl mx-auto"> |
| <div class="text-center mb-20"> |
| <span class="text-emerald-500 font-semibold text-sm uppercase tracking-wider">TECNOLOGÍAS</span> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mt-4 mb-6 section-title">Ecosistema Tecnológico Avanzado</h2> |
| <p class="mt-6 max-w-4xl mx-auto text-xl text-gray-700 leading-relaxed"> |
| Colaboramos con las plataformas y herramientas más innovadoras del mercado para ofrecer soluciones de última generación. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6"> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/aws-2.svg" alt="AWS" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/microsoft-azure-1.svg" alt="Azure" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/google-cloud-1.svg" alt="Google Cloud" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/kubernets.svg" alt="Kubernetes" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/terraform-enterprise.svg" alt="Terraform" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/openai-2.svg" alt="OpenAI" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/sap-3.svg" alt="SAP" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/oracle-6.svg" alt="Oracle" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/salesforce-2.svg" alt="Salesforce" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/tableau-software.svg" alt="Tableau" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/power-bi.svg" alt="Power BI" class="h-12"> |
| </div> |
| <div class="tech-icon bg-white p-6 rounded-xl shadow-md flex items-center justify-center h-32"> |
| <img src="https://cdn.worldvectorlogo.com/logos/docker.svg" alt="Docker" class="h-12"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="global" class="py-28 bg-gray-100"> |
| <div class="max-w-8xl mx-auto px-6 sm:px-8 lg:px-12"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> |
| <div> |
| <span class="text-blue-600 font-semibold text-sm uppercase tracking-wider">COBERTURA GLOBAL</span> |
| <h2 class="text-4xl font-bold text-gray-900 mt-4 mb-6">Presencia Internacional con Raíces Latinoamericanas</h2> |
| <p class="text-gray-700 text-lg leading-relaxed mb-8"> |
| Con sedes en las principales capitales tecnológicas del mundo y centros de operación estratégicos en Latinoamérica, ofrecemos soluciones globales con entendimiento local. |
| </p> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-3"> |
| <i class="fas fa-map-marker-alt text-blue-600 text-xl mr-3"></i> |
| <h3 class="font-bold text-lg">Américas</h3> |
| </div> |
| <p class="text-gray-600"> |
| Miami, México DF, São Paulo, Bogotá, Buenos Aires, Santiago |
| </p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-3"> |
| <i class="fas fa-map-marker-alt text-blue-600 text-xl mr-3"></i> |
| <h3 class="font-bold text-lg">Europa</h3> |
| </div> |
| <p class="text-gray-600"> |
| Madrid, Londres, Frankfurt, París |
| </p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-3"> |
| <i class="fas fa-map-marker-alt text-blue-600 text-xl mr-3"></i> |
| <h3 class="font-bold text-lg">Asia-Pacífico</h3> |
| </div> |
| <p class="text-gray-600"> |
| Singapur, Sydney, Tokio |
| </p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-3"> |
| <i class="fas fa-globe-americas text-blue-600 text-xl mr-3"></i> |
| <h3 class="font-bold text-lg">Centros de Datos</h3> |
| </div> |
| <p class="text-gray-600"> |
| 12 regiones globales con infraestructura redundante |
| </p> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80" alt="Presencia Global" class="rounded-3xl shadow-xl w-full"> |
| <div class="absolute -bottom-6 -right-6 bg-gradient-to-r from-blue-600 to-emerald-500 text-white p-8 rounded-2xl shadow-2xl w-2/3"> |
| <div class="flex items-center"> |
| <div class="mr-4"> |
| <p class="font-bold text-xl">+500</p> |
| <p class="text-sm">Proyectos internacionales completados</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-globe text-3xl opacity-70"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="casos" class="py-28 px-6 sm:px-8 lg:px-12 max-w-8xl mx-auto"> |
| <div class="text-center mb-20"> |
| <span class="text-emerald-500 font-semibold text-sm uppercase tracking-wider">IMPACTO REAL</span> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mt-4 mb-6 section-title">Casos de Éxito Globales</h2> |
| <p class="mt-6 max-w-4xl mx-auto text-xl text-gray-700 leading-relaxed"> |
| Transformaciones digitales que han redefinido industrias y generado valor tangible para nuestros clientes. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="group relative overflow-hidden rounded-3xl shadow-xl h-96"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Banca" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-8 text-white"> |
| <span class="text-sm font-medium text-emerald-400">Sector Financiero</span> |
| <h3 class="text-2xl font-bold mt-2">Modernización Core Bancario</h3> |
| <p class="mt-2 text-white/90 opacity-0 group-hover:opacity-100 transition duration-500"> |
| Migración completa a arquitectura cloud para el 3er banco más grande de Latinoamérica. |
| </p> |
| <div class="mt-4 flex items-center opacity-0 group-hover:opacity-100 transition duration-500 delay-100"> |
| <span class="text-sm font-medium">+40% eficiencia</span> |
| <span class="mx-2">•</span> |
| <span class="text-sm font-medium">-35% costos</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-3xl shadow-xl h-96"> |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Retail" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-8 text-white"> |
| <span class="text-sm font-medium text-emerald-400">Retail & eCommerce</span> |
| <h3 class="text-2xl font-bold mt-2">Plataforma Omnicanal</h3> |
| <p class="mt-2 text-white/90 opacity-0 group-hover:opacity-100 transition duration-500"> |
| Integración de sistemas para cadena retail con 500+ tiendas en 5 países. |
| </p> |
| <div class="mt-4 flex items-center opacity-0 group-hover:opacity-100 transition duration-500 delay-100"> |
| <span class="text-sm font-medium">+120% ventas online</span> |
| <span class="mx-2">•</span> |
| <span class="text-sm font-medium">99.9% uptime</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-3xl shadow-xl h-96"> |
| <img src="https://images.unsplash.com/photo-1581093450021-3a753b0a0a63?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Salud" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div> |
| <div class="absolute bottom-0 left-0 p-8 text-white"> |
| <span class="text-sm font-medium text-emerald-400">Salud & Farmacéutica</span> |
| <h3 class="text-2xl font-bold mt-2">Sistema de Gestión Hospitalaria</h3> |
| <p class="mt-2 text-white/90 opacity-0 group-hover:opacity-100 transition duration-500"> |
| Plataforma unificada para red de hospitales con IA predictiva. |
| </p> |
| <div class="mt-4 flex items-center opacity-0 group-hover:opacity-100 transition duration-500 delay-100"> |
| <span class="text-sm font-medium">-50% tiempos espera</span> |
| <span class="mx-2">•</span> |
| <span class="text-sm font-medium">HIPAA compliant</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16 text-center"> |
| <a href="#" class="inline-flex items-center px-8 py-4 border-2 border-gray-900 text-gray-900 font-bold rounded-full hover:bg-gray-900 hover:text-white transition duration-300 group"> |
| <span>Ver todos los casos de éxito</span> |
| <i class="fas fa-arrow-right ml-4 group-hover:translate-x-1 transition duration-300"></i> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="py-28 bg-gradient-to-br from-gray-900 to-gray-800 text-white"> |
| <div class="max-w-8xl mx-auto px-6 sm:px-8 lg:px-12"> |
| <div class="text-center mb-20"> |
| <span class="text-emerald-400 font-semibold text-sm uppercase tracking-wider">TESTIMONIOS</span> |
| <h2 class="text-4xl md:text-5xl font-bold text-white mt-4 mb-6">Lo que dicen nuestros clientes</h2> |
| <p class="mt-6 max-w-3xl mx-auto text-xl text-white/80 leading-relaxed"> |
| Empresas líderes que han experimentado la diferencia ULTIMA MILLA. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card p-8 rounded-3xl"> |
| <div class="flex items-center mb-6"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 text-lg italic mb-8 leading-relaxed"> |
| "ULTIMA MILLA lideró nuestra transformación cloud con excelencia técnica y comprensión profunda de nuestro negocio. Los resultados superaron todas las expectativas." |
| </p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-14 h-14 rounded-full mr-4 border-2 border-blue-500"> |
| <div> |
| <h4 class="font-bold text-gray-900">Carlos Méndez</h4> |
| <p class="text-sm text-gray-600">CIO, Grupo Financiero Multinacional</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card p-8 rounded-3xl"> |
| <div class="flex items-center mb-6"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 text-lg italic mb-8 leading-relaxed"> |
| "Su enfoque en ciberseguridad nos permitió cumplir con regulaciones internacionales complejas mientras mejorábamos nuestra postura de seguridad en un 300%." |
| </p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Cliente" class="w-14 h-14 rounded-full mr-4 border-2 border-emerald-500"> |
| <div> |
| <h4 class="font-bold text-gray-900">Ana Rodríguez</h4> |
| <p class="text-sm text-gray-600">Directora de Riesgos, Empresa Farmacéutica</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card p-8 rounded-3xl"> |
| <div class="flex items-center mb-6"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 text-lg italic mb-8 leading-relaxed"> |
| "La implementación de su plataforma de datos unificada revolucionó nuestra capacidad de tomar decisiones en tiempo real, generando un impacto directo en nuestros resultados." |
| </p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Cliente" class="w-14 h-14 rounded-full mr-4 border-2 border-purple-500"> |
| <div> |
| <h4 class="font-bold text-gray-900">Javier López</h4> |
| <p class="text-sm text-gray-600">CEO, Cadena Retail Internacional</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-28 bg-gradient-to-r from-blue-600 to-blue-800 text-white pulse"> |
| <div class="max-w-6xl mx-auto px-6 sm:px-8 lg:px-12 text-center"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-8">¿Listo para llevar tu empresa al siguiente nivel?</h2> |
| <p class="text-xl mb-12 max-w-3xl mx-auto leading-relaxed"> |
| Agenda una consultoría estratégica con nuestros expertos y descubre cómo podemos transformar tu organización con tecnología de vanguardia. |
| </p> |
| <a href="#contacto" class="inline-block px-12 py-5 bg-white text-blue-600 font-black rounded-full hover:bg-gray-100 transition duration-300 shadow-2xl hover:shadow-3xl text-lg"> |
| Solicitar consultoría gratuita |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="contacto" class="py-28 px-6 sm:px-8 lg:px-12 max-w-8xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> |
| <div> |
| <span class="text-blue-600 font-semibold text-sm uppercase tracking-wider">CONTÁCTANOS</span> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mt-4 mb-6">Hablemos de tu proyecto</h2> |
| <p class="text-gray-700 text-xl leading-relaxed mb-10"> |
| Completa el formulario y uno de nuestros especialistas se pondrá en contacto contigo en menos de 24 horas para analizar tus necesidades y proponerte la mejor solución. |
| </p> |
| |
| <div class="space-y-8"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 p-4 rounded-xl text-blue-600 mr-6"> |
| <i class="fas fa-map-marker-alt text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Oficinas Globales</h3> |
| <p class="text-gray-600 text-lg"> |
| Torre Latinoamericana, Av. Tecnológico 1234, Piso 25<br> |
| Ciudad de México, 03810<br> |
| <span class="font-medium">+52 55 1234 5678</span> |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-emerald-100 p-4 rounded-xl text-emerald-600 mr-6"> |
| <i class="fas fa-envelope text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Correo Electrónico</h3> |
| <p class="text-gray-600 text-lg"> |
| <span class="font-medium">contacto@ultimamilla.com</span><br> |
| <span class="font-medium">soporte@ultimamilla.com</span> |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-purple-100 p-4 rounded-xl text-purple-600 mr-6"> |
| <i class="fas fa-headset text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="text-2xl font-bold text-gray-900 mb-2">Soporte 24/7</h3> |
| <p class="text-gray-600 text-lg"> |
| Nuestro centro de operaciones global está disponible<br> |
| todos los días del año para atender tus necesidades.<br> |
| <span class="font-medium">soporte@ultimamilla.com</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-3xl shadow-2xl p-10"> |
| <form class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="nombre" class="block text-gray-700 font-medium mb-2">Nombre completo</label> |
| <input type="text" id="nombre" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="empresa" class="block text-gray-700 font-medium mb-2">Empresa</label> |
| <input type="text" id="empresa" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Correo electrónico</label> |
| <input type="email" id="email" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="telefono" class="block text-gray-700 font-medium mb-2">Teléfono</label> |
| <input type="tel" id="telefono" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="servicio" class="block text-gray-700 font-medium mb-2">Servicio de interés</label> |
| <select id="servicio" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option>Selecciona un servicio</option> |
| <option>Transformación Cloud</option> |
| <option>Ciberseguridad Global</option> |
| <option>Infraestructura de Misión Crítica</option> |
| <option>Inteligencia Artificial Empresarial</option> |
| <option>Data & Analytics</option> |
| <option>Transformación Digital</option> |
| <option>Otro</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="mensaje" class="block text-gray-700 font-medium mb-2">Mensaje</label> |
| <textarea id="mensaje" rows="4" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| |
| <div class="flex items-center"> |
| <input id="privacidad" type="checkbox" class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"> |
| <label for="privacidad" class="ml-2 block text-sm text-gray-700"> |
| Acepto la política de privacidad y el tratamiento de mis datos |
| </label> |
| </div> |
| |
| <button type="submit" class="w-full py-4 px-6 bg-gradient-to-r from-blue-600 to-emerald-500 text-white font-bold rounded-xl hover:opacity-90 transition duration-300 shadow-lg hover:shadow-xl text-lg"> |
| Enviar mensaje |
| </button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-20 pb-12"> |
| <div class="max-w-8xl mx-auto px-6 sm:px-8 lg:px-12"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> |
| <div> |
| <div class="flex items-center mb-6"> |
| <span class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">ULTIMA</span> |
| <span class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-blue-400">MILLA</span> |
| </div> |
| <p class="text-gray-400 mb-6 leading-relaxed"> |
| Líderes en servicios IT corporativos a escala global. Transformando organizaciones con tecnología de vanguardia desde 2010. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition duration-300"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-400 transition duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition duration-300"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Servicios</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Transformación Cloud</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Ciberseguridad Global</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Infraestructura Crítica</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Inteligencia Artificial</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Data & Analytics</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Transformación Digital</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Industrias</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Banca & Finanzas</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Retail & eCommerce</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Salud & Farmacéutica</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Manufactura</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Telecomunicaciones</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Gobierno</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Contacto</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i> |
| <span class="text-gray-400">Av. Tecnológico 1234, CDMX</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-phone-alt text-gray-400 mt-1 mr-3"></i> |
| <span class="text-gray-400">+52 55 1234 5678</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-envelope text-gray-400 mt-1 mr-3"></i> |
| <span class="text-gray-400">contacto@ultimamilla.com</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-headset text-gray-400 mt-1 mr-3"></i> |
| <span class="text-gray-400">Soporte 24/7</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-16 pt-10 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> |
| © 2023 ULTIMA MILLA. Todos los derechos reservados. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Política de privacidad</a> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Términos de servicio</a> |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Mapa del sitio</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const menuBtn = document.getElementById('menu-btn'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| menuBtn.addEventListener('click', () => { |
| menuBtn.classList.toggle('active'); |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| menuBtn.classList.remove('active'); |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const navbar = document.querySelector('nav'); |
| if (window.scrollY > 50) { |
| navbar.classList.add('shadow-lg'); |
| } else { |
| navbar.classList.remove('shadow-lg'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
