Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Transformations - Agentes de IA para tu negocio</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| secondary: '#1e40af', | |
| accent: '#3b82f6', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| overflow-x: hidden; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .stat-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .service-card { | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .faq-item { | |
| transition: all 0.3s ease; | |
| } | |
| .faq-item:hover { | |
| background-color: rgba(37, 99, 235, 0.05); | |
| } | |
| .contact-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px #3b82f6; | |
| } | |
| /* Hamburger menu styles */ | |
| .hamburger { | |
| cursor: pointer; | |
| width: 24px; | |
| height: 24px; | |
| transition: all 0.25s; | |
| position: relative; | |
| } | |
| .hamburger-top, | |
| .hamburger-middle, | |
| .hamburger-bottom { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 24px; | |
| height: 2px; | |
| background: #2563eb; | |
| transform: rotate(0); | |
| transition: all 0.5s; | |
| } | |
| .hamburger-middle { | |
| transform: translateY(7px); | |
| } | |
| .hamburger-bottom { | |
| transform: translateY(14px); | |
| } | |
| .open { | |
| transform: rotate(90deg); | |
| transform: translateY(0px); | |
| } | |
| .open .hamburger-top { | |
| transform: rotate(45deg) translateY(6px) translate(6px); | |
| } | |
| .open .hamburger-middle { | |
| display: none; | |
| } | |
| .open .hamburger-bottom { | |
| transform: rotate(-45deg) translateY(6px) translate(-6px); | |
| } | |
| /* Mobile menu animation */ | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-blue-600">DigitalTransformations</h1> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#services" class="font-medium hover:text-blue-600 transition">Servicios</a> | |
| <a href="#about" class="font-medium hover:text-blue-600 transition">Qué es un Agente IA</a> | |
| <a href="#stats" class="font-medium hover:text-blue-600 transition">Resultados</a> | |
| <a href="#faq" class="font-medium hover:text-blue-600 transition">FAQ</a> | |
| <a href="#contact" class="font-medium hover:text-blue-600 transition">Contacto</a> | |
| </nav> | |
| <!-- Mobile menu button --> | |
| <button id="menu-btn" class="block md:hidden focus:outline-none hamburger"> | |
| <span class="hamburger-top"></span> | |
| <span class="hamburger-middle"></span> | |
| <span class="hamburger-bottom"></span> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-white w-full left-0 px-4 shadow-lg"> | |
| <div class="py-4 space-y-4"> | |
| <a href="#services" class="block py-2 hover:text-blue-600 transition border-b border-gray-100">Servicios</a> | |
| <a href="#about" class="block py-2 hover:text-blue-600 transition border-b border-gray-100">Qué es un Agente IA</a> | |
| <a href="#stats" class="block py-2 hover:text-blue-600 transition border-b border-gray-100">Resultados</a> | |
| <a href="#faq" class="block py-2 hover:text-blue-600 transition border-b border-gray-100">FAQ</a> | |
| <a href="#contact" class="block py-2 hover:text-blue-600 transition">Contacto</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Resto del contenido permanece igual --> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Construimos Agentes de IA que trabajan de verdad</h1> | |
| <p class="text-xl mb-8 opacity-90">Te ayudamos a ahorrar tiempo y dinero con Inteligencia Artificial y Automatizaciones</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-center transition">Agendar llamada</a> | |
| <a href="#services" class="border-2 border-white hover:bg-white hover:text-blue-600 px-8 py-3 rounded-lg font-bold text-center transition">Nuestros servicios</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 bg-blue-400 rounded-full opacity-20 absolute -top-10 -left-10"></div> | |
| <div class="w-64 h-64 md:w-80 md:h-80 bg-blue-300 rounded-full opacity-20 absolute -bottom-10 -right-10"></div> | |
| <img src="" alt="" class="relative z-10 rounded-xl shadow-2xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What is AI Agent Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Qué son los Agentes de IA</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <p class="text-lg mb-6">Los agentes de inteligencia artificial son como "empleados digitales" que trabajan de forma autónoma para ayudar a las empresas a crecer. Por ejemplo, pueden responder llamadas telefónicas, atender a los clientes a través de chat en un sitio web o gestionar correos electrónicos relacionados con ventas o servicio.</p> | |
| <p class="text-lg mb-6">Estos agentes se relacionan con clientes y otras personas interesadas, ofreciendo soluciones rápidas y escalables que mejoran la eficiencia y las operaciones de tu negocio.</p> | |
| <div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded-r-lg"> | |
| <p class="text-blue-800 font-medium">¿No estás seguro de cómo usar la IA en tu negocio?</p> | |
| <a href="#contact" class="text-blue-600 hover:underline font-medium">Agenda una sesión Gratuita</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-100 p-6 rounded-xl shadow-md"> | |
| <div class="flex mb-4"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-comments text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Interacción natural</h3> | |
| <p class="text-gray-600">Se comunican como humanos en múltiples idiomas</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-brain text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Aprendizaje continuo</h3> | |
| <p class="text-gray-600">Mejoran con cada interacción</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-cogs text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Automatización inteligente</h3> | |
| <p class="text-gray-600">Gestionan procesos complejos sin intervención humana</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-shield-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Seguridad garantizada</h3> | |
| <p class="text-gray-600">Cumplen con los más altos estándares de protección de datos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">NUESTROS SERVICIOS</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-comment-dots text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Agentes IA que atienden canales de Texto</h3> | |
| <p class="text-gray-600 mb-4">Agentes de IA que atienden mediante lenguaje natural a tu cliente en tu canal web o a tus empleados en una intranet en más de 90 idiomas.</p> | |
| <p class="text-gray-600 mb-4">Basado en la información de tu web, ecommerce, preguntas frecuentes o cualquier tipo de documento corporativo, como base de conocimiento.</p> | |
| <div class="mt-6"> | |
| <a href="#contact" class="text-blue-600 font-medium hover:underline">Agendar una llamada <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 px-6 py-4"> | |
| <p class="text-blue-800 font-medium">Desde 2.000 € setup</p> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-phone-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Agentes IA que atienden canales de voz</h3> | |
| <p class="text-gray-600 mb-4">Agentes de IA conversacionales que atienden mediante lenguaje natural a tu cliente en tu canal telefónico a través de llamadas tanto entrantes como salientes.</p> | |
| <p class="text-gray-600 mb-4">Agenda de citas, cualificación de leads, confirmación de reservas, etc.</p> | |
| <div class="mt-6"> | |
| <a href="#contact" class="text-blue-600 font-medium hover:underline">Agendar una llamada <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 px-6 py-4"> | |
| <p class="text-blue-800 font-medium">Desde 2.000 € setup</p> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-cogs text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Automatizaciones con IA</h3> | |
| <p class="text-gray-600 mb-4">Optimización de procesos con IA:</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> | |
| <li>Marketing y ventas: Crear contenido con IA, cualificación de leads, etc.</li> | |
| <li>Atención al cliente: Extensión de soporte a tus clientes 24×7 mediante IA.</li> | |
| <li>Recursos Humanos: Proceso de onboarding, entrenamientos internos, procedimientos, etc.</li> | |
| <li>Financiero: procesamiento de facturas, estado de los pagos, etc.</li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#contact" class="text-blue-600 font-medium hover:underline">Agendar una llamada <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 px-6 py-4"> | |
| <p class="text-blue-800 font-medium">Desde 3.000 € Setup</p> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-headset text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Servicio de soporte y mantenimiento</h3> | |
| <p class="text-gray-600 mb-4">Monitorización del sistema, ajustes y análisis de datos para identificar posibles mejoras, etc. que te permitirán mantener a tu Agente de IA en perfecto funcionamiento.</p> | |
| <div class="mt-6"> | |
| <a href="#contact" class="text-blue-600 font-medium hover:underline">Agendar una llamada <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 px-6 py-4"> | |
| <p class="text-blue-800 font-medium">Desde 300 € /mes</p> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-chess text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Consultoría estratégica IA</h3> | |
| <p class="text-gray-600 mb-4">Este servicio es esencial para garantizar que las soluciones de IA sean aplicadas de manera coherente con los objetivos de negocio. Aporta claridad sobre qué tecnologías implementar, en qué orden y cómo integrarlas en los procesos existentes, maximizando el retorno de inversión.</p> | |
| <div class="mt-6"> | |
| <a href="#contact" class="text-blue-600 font-medium hover:underline">Agendar una llamada <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 px-6 py-4"> | |
| <p class="text-blue-800 font-medium">Según proyecto</p> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-lightbulb text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Descubre tu solución ideal</h3> | |
| <p class="text-gray-600 mb-4">¿No estás seguro de qué servicio necesitas? Agenda una consulta gratuita con nuestros expertos para analizar tus necesidades y recomendarte la mejor solución para tu negocio.</p> | |
| <div class="mt-6"> | |
| <a href="#contact" class="text-blue-600 font-medium hover:underline">Agendar una llamada <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 px-6 py-4"> | |
| <p class="text-blue-800 font-medium">Sesión gratuita</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section id="stats" class="py-20 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Algunos datos</h2> | |
| <div class="w-20 h-1 bg-white mx-auto"></div> | |
| </div> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Stat 1 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">60%</div> | |
| <p class="text-blue-100">Reducción del tiempo promedio para el análisis de leads (Calificación y asignación)</p> | |
| </div> | |
| <!-- Stat 2 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">45%</div> | |
| <p class="text-blue-100">Aumento de Clientes Potenciales Calificados en empresas que implementan tecnologías de IA</p> | |
| </div> | |
| <!-- Stat 3 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">20%</div> | |
| <p class="text-blue-100">Reducción de los costes operativos entre un 20% y un 30% mediante la automatización de procesos</p> | |
| </div> | |
| <!-- Stat 4 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">40%</div> | |
| <p class="text-blue-100">Aumento de la productividad mediante la implementación de IA generativa en departamentos de ventas y asesoría</p> | |
| </div> | |
| <!-- Stat 5 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">25%</div> | |
| <p class="text-blue-100">Reducción del coste de generación de leads (CPL) en empresas que usaron IA al enfocar sus campañas en audiencias altamente segmentadas</p> | |
| </div> | |
| <!-- Stat 6 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">15%</div> | |
| <p class="text-blue-100">Reducción de un 15% de los costes de soporte mediante el uso de atención multilingüe automatizada</p> | |
| </div> | |
| <!-- Stat 7 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">50%</div> | |
| <p class="text-blue-100">Mejora de la eficiencia en un 50% mediante la automatización de procesos</p> | |
| </div> | |
| <!-- Stat 8 --> | |
| <div class="stat-card bg-white bg-opacity-10 rounded-xl p-6 text-center backdrop-filter backdrop-blur-sm"> | |
| <div class="text-4xl font-bold mb-2">14%</div> | |
| <p class="text-blue-100">Incremento del 14% en la cantidad de problemas resueltos mediante la automatización de procesos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Preguntas frecuentes</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- FAQ 1 --> | |
| <div class="faq-item mb-4 border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(1)"> | |
| <h3 class="text-lg font-medium">¿Qué hace diferente trabajar con IA?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden" id="faq-content-1"> | |
| <p class="text-gray-600">Implementar inteligencia artificial no solo mejora tus procesos, sino que transforma la manera en que opera tu negocio. Esto es lo que la IA aporta frente a los métodos tradicionales:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600"> | |
| <li>Adaptación en tiempo real: La IA analiza y responde instantáneamente to data, optimizando cada interacción y decisión.</li> | |
| <li>Mayor eficiencia operativa: Automatiza tareas repetitivas y reduce errores humanos, permitiendo a tu equipo enfocarse en actividades estratégicas.</li> | |
| <li>Resultados medibles: Desde campañas de marketing hasta atención al cliente, la IA te ayuda a alcanzar tus objetivos con mayor precisión y rapidez.</li> | |
| <li>Escalabilidad sin límites: Crece con las necesidades de tu negocio, adaptándose a nuevos retos y oportunidades.</li> | |
| </ul> | |
| <p class="text-gray-600 mt-2">Trabajar con IA no es solo adoptar una tecnología; es dar el siguiente paso hacia un negocio más eficiente, competitivo e innovador.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="faq-item mb-4 border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(2)"> | |
| <h3 class="text-lg font-medium">¿En qué nos diferencia de nuestros competidores?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden" id="faq-content-2"> | |
| <p class="text-gray-600">Nuestra diferencia radica en:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600"> | |
| <li>Enfoque práctico: Soluciones diseñadas para implementarse rápidamente y generar impacto inmediato.</li> | |
| <li>Experiencia multidisciplinar: Combinamos conocimiento técnico con experiencia empresarial real.</li> | |
| <li>Personalización extrema: Cada solución se adapta a las necesidades específicas de tu negocio.</li> | |
| <li>Resultados comprobados: Nuestros clientes experimentan mejoras medibles en sus KPIs clave.</li> | |
| <li>Soporte continuo: No solo implementamos, sino que acompañamos en todo el proceso de adopción.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="faq-item mb-4 border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(3)"> | |
| <h3 class="text-lg font-medium">¿Qué tipos de Agentes IA ofrecéis?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden" id="faq-content-3"> | |
| <p class="text-gray-600">Ofrecemos agentes especializados en diferentes áreas:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600"> | |
| <li>Agentes conversacionales para atención al cliente (chat y voz)</li> | |
| <li>Asistentes virtuales para ventas y marketing</li> | |
| <li>Agentes de procesamiento de documentos y datos</li> | |
| <li>Asistentes para recursos humanos y formación</li> | |
| <li>Agentes de análisis y reporting automatizado</li> | |
| <li>Soluciones personalizadas según necesidades específicas</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="faq-item mb-4 border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(4)"> | |
| <h3 class="text-lg font-medium">¿Cómo organizáis los plazos de cada proyecto?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-4"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden" id="faq-content-4"> | |
| <p class="text-gray-600">Nuestro enfoque de gestión de proyectos:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600"> | |
| <li>Evaluación inicial para determinar alcance y complejidad</li> | |
| <li>Planificación detallada con hitos y entregables claros</li> | |
| <li>Metodología ágil con sprints de 2 semanas</li> | |
| <li>Comunicación constante y reportes periódicos</li> | |
| <li>Pruebas iterativas para garantizar calidad</li> | |
| <li>Implementación por fases cuando es necesario</li> | |
| </ul> | |
| <p class="text-gray-600 mt-2">Los plazos varían según la complejidad, pero proyectos estándar suelen completarse en 4-8 semanas.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 5 --> | |
| <div class="faq-item mb-4 border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(5)"> | |
| <h3 class="text-lg font-medium">¿Cómo garantizáis la calidad de vuestros proyectos?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-5"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden" id="faq-content-5"> | |
| <p class="text-gray-600">Nuestro proceso de garantía de calidad incluye:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600"> | |
| <li>Pruebas exhaustivas en cada fase de desarrollo</li> | |
| <li>Validación con datos reales del cliente</li> | |
| <li>Evaluación de rendimiento bajo diferentes condiciones</li> | |
| <li>Revisión de seguridad y cumplimiento normativo</li> | |
| <li>Entrenamiento específico para cada caso de uso</li> | |
| <li>Período de pruebas en entorno controlado antes de producción</li> | |
| <li>Soporte post-implementación para ajustes finos</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- FAQ 6 --> | |
| <div class="faq-item mb-4 border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none" onclick="toggleFAQ(6)"> | |
| <h3 class="text-lg font-medium">¿Cómo es vuestro proceso de desarrollo?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-6"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden" id="faq-content-6"> | |
| <p class="text-gray-600">Nuestro proceso consta de 5 fases clave:</p> | |
| <ol class="list-decimal pl-5 mt-2 space-y-1 text-gray-600"> | |
| <li><strong>Descubrimiento:</strong> Análisis de necesidades, datos disponibles y objetivos.</li> | |
| <li><strong>Diseño:</strong> Arquitectura de la solución, flujos de conversación y casos de uso.</li> | |
| <li><strong>Desarrollo:</strong> Implementación del agente con integraciones necesarias.</li> | |
| <li><strong>Pruebas:</strong> Validación funcional, de rendimiento y experiencia de usuario.</li> | |
| <li><strong>Implementación:</strong> Lanzamiento controlado con monitorización continua.</li> | |
| </ol> | |
| <p class="text-gray-600 mt-2">Cada fase incluye revisiones con el cliente para garantizar alineación con sus expectativas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-blue-50"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">¿No estás seguro de cómo usar la IA en tu negocio?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Si no tienes claro cómo la IA puede beneficiar a tu empresa, te invitamos a reservar una sesión de discovery con uno de nuestros consultores para hablar de agentes de voz, chatbots de IA o automatizaciones con IA para poder tomar una decisión más fundamentada.</p> | |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-bold inline-block transition">¡Agenda una sesión gratuita de discovery!</a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">¡Hablemos!</h2> | |
| <p class="text-lg mb-6">¿Te cuesta integrar la inteligencia artificial en tu empresa y no sabes por dónde empezar?</p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-question-circle text-blue-600"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">¿La falta de tiempo o conocimientos te impide aprovechar la IA en tu negocio?</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-question-circle text-blue-600"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">¿Tus procesos son lentos y repetitivos?</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-question-circle text-blue-600"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">¿Sabías que puedes recuperar horas de trabajo cada semana automatizando tareas clave?</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-question-circle text-blue-600"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">¿Quieres un plan claro y realista para integrar la IA en tu empresa sin riesgos?</p> | |
| </div> | |
| </div> | |
| <p class="text-lg mb-6">Reserva en el siguiente formulario una reunión gratuita con nuestro equipo y descubre cómo podemos ayudarte a impulsar tu negocio. Sin compromiso.</p> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-3">Información de contacto</h3> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mr-3"></i> | |
| <span>Alameda 22, 28014 Madrid (Spain)</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-envelope text-blue-600 mr-3"></i> | |
| <span>info@digitransformations.com</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-blue-600 mr-3"></i> | |
| <span>+34 612 34 56 78</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nombre *</label> | |
| <input type="text" id="name" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500" placeholder="Nombre"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="surname" class="block text-gray-700 font-medium mb-2">Apellidos *</label> | |
| <input type="text" id="surname" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500" placeholder="Apellidos"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label> | |
| <input type="email" id="email" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500" placeholder="email"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="company" class="block text-gray-700 font-medium mb-2">Empresa *</label> | |
| <input type="text" id="company" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500" placeholder="Indica el nombre de tu empresa"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Teléfono *</label> | |
| <div class="flex"> | |
| <select class="border border-gray-300 rounded-l-lg px-4 py-3 bg-white"> | |
| <option>Spain +34</option> | |
| </select> | |
| <input type="tel" id="phone" class="contact-input w-full px-4 py-3 border-t border-r border-b border-gray-300 rounded-r-lg focus:border-blue-500" placeholder="612 34 56 78"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensaje *</label> | |
| <textarea id="message" rows="4" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500" placeholder="¿En qué podemos ayudarte?"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="privacy" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="privacy" class="font-medium text-gray-700">Acepto la política de privacidad *</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="marketing" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="marketing" class="font-medium text-gray-700">Acepto recibir comunicaciones comerciales</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center"> | |
| <input id="human" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" required> | |
| <label for="human" class="ml-2 block text-sm text-gray-700">Por favor verifica que eres humano *</label> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition">Enviar</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Sobre nosotros</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <p class="text-lg mb-6">Somos un equipo de profesionales senior con experiencia tanto en multinacionales de primer nivel como en el mundo de las PYMEs. Nuestra trayectoria nos ha dado acceso a tecnologías avanzadas, y sabemos cómo adaptarlas a las necesidades y desafíos únicos de una PYME.</p> | |
| <p class="text-lg">Con un conocimiento práctico en áreas como la Automatización de Marketing y la Inteligencia Artificial, estamos aquí para ayudarte a prosperar en un entorno digital competitivo.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">DigitalTransformations</h2> | |
| </div> | |
| <p class="text-gray-400 mb-4">Construimos Agentes de IA que trabajan de verdad</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Servicios</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Agentes de texto</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Agentes de voz</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Automatizaciones</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Consultoría</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Empresa</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre nosotros</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Casos de éxito</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Carreras</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Aviso Legal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Política de privacidad</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Términos de servicio</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>Copyright © 2025 Digital Transformations. Todos los derechos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| menuBtn.classList.toggle('open'); | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| menuBtn.classList.remove('open'); | |
| mobileMenu.classList.remove('open'); | |
| }); | |
| }); | |
| // FAQ toggle function | |
| function toggleFAQ(number) { | |
| const content = document.getElementById(`faq-content-${number}`); | |
| const icon = document.getElementById(`faq-icon-${number}`); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('transform'); | |
| icon.classList.toggle('rotate-180'); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically send the form data to your server | |
| // For this example, we'll just show an alert | |
| alert('¡Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.'); | |
| this.reset(); | |
| }); | |
| } | |
| </script> | |
| <script defer data-relevanceai-share-id="d7b62b/da163491735b-4702-9131-164746123dbb/6b127ec2-9bd4-4ec7-b45d-8613d131d458" src="https://app.relevanceai.com/embed/chat-bubble.js" data-share-styles="hide_tool_steps=false&hide_file_uploads=false&hide_conversation_list=false&bubble_style=icon&primary_color=%23685FFF&bubble_icon=pd%2Fchat&input_placeholder_text=Type+your+message...&hide_logo=true&hide_description=true" ></script> | |
| </body> | |
| </html> |