Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SmartBot AI | Soluciones de IA Generativa para PYMES</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"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease forwards; | |
| } | |
| .scroll-opacity { | |
| opacity: 0; | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .scroll-opacity.visible { | |
| opacity: 1; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 30px; | |
| height: 50px; | |
| border: 2px solid #86868b; | |
| border-radius: 15px; | |
| } | |
| .scroll-indicator::after { | |
| content: ''; | |
| position: absolute; | |
| top: 8px; | |
| left: 50%; | |
| width: 4px; | |
| height: 8px; | |
| background: #86868b; | |
| border-radius: 2px; | |
| transform: translateX(-50%); | |
| animation: scrollAnimation 2s infinite; | |
| } | |
| @keyframes scrollAnimation { | |
| 0% { top: 8px; opacity: 1; } | |
| 100% { top: 24px; opacity: 0; } | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); | |
| } | |
| .stat-card { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-900 bg-white"> | |
| <!-- Navigation --> | |
| <nav class="bg-white/80 backdrop-blur-md fixed w-full z-50 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-robot text-2xl text-gray-900 mr-2"></i> | |
| <span class="text-xl font-medium text-gray-900">SmartBot AI</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-300">Quiénes somos</a> | |
| <a href="#solutions" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-300">Soluciones</a> | |
| <a href="#processes" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-300">Procesos</a> | |
| <a href="#consulting" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-300">Consultoría</a> | |
| <a href="#contact" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-300">Contacto</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="#contact" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 transition duration-300"> | |
| Empezar | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden bg-gray-50 pt-16"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-gray-100 to-white z-0"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> | |
| <div class="mb-12 lg:mb-0 fade-in"> | |
| <h1 class="text-4xl font-medium tracking-tight sm:text-5xl lg:text-6xl mb-6"> | |
| La IA Generativa <span class="gradient-text">transforma</span> tu negocio | |
| </h1> | |
| <p class="text-xl text-gray-600 mb-8"> | |
| El 64% de las pymes españolas ya emplean IA, y el 83% reporta beneficios significativos como ahorro de tiempo y recursos. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 md:py-4 md:text-lg md:px-10 transition duration-300"> | |
| Solicitar demo | |
| </a> | |
| <a href="#solutions" class="inline-flex items-center justify-center px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 transition duration-300"> | |
| Nuestras soluciones | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative scroll-opacity"> | |
| <div class="relative w-full rounded-2xl overflow-hidden shadow-2xl"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="IA en negocios" class="w-full h-auto rounded-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scroll-indicator"></div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-opacity"> | |
| <h2 class="text-3xl font-medium text-gray-900 sm:text-4xl"> | |
| ¿Quiénes somos? | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Ayudamos a pymes a digitalizar y optimizar sus procesos mediante IA | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-graduate text-blue-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-medium text-gray-900">Mario</h3> | |
| <p class="text-gray-600">Ingeniero en Telecomunicaciones</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Estudiante del máster en Computer Science en la EPFL (Suiza). Experto en IA Generativa y su aplicación en la optimización empresarial. | |
| </p> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">IA Generativa</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Optimización</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Automatización</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center mr-4"> | |
| <i class="fas fa-briefcase text-green-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-medium text-gray-900">Luis</h3> | |
| <p class="text-gray-600">Consultor de Operaciones</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Ingeniero en Telecomunicaciones y consultor de operaciones en Deloitte. Experto en IA Generativa y conocimiento del mercado actual. | |
| </p> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Consultoría</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Operaciones</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Mercado</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gray-50 p-8 rounded-xl scroll-opacity"> | |
| <h3 class="text-2xl font-medium text-gray-900 mb-4">Nuestra misión</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Juntos ayudamos a pequeñas y medianas empresas a aprovechar el poder de la IA para maximizar su eficiencia y rentabilidad. Creemos que la IA no es el futuro, es el presente, y está transformando la manera en que las empresas operan y compiten. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-white p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-blue-600 mb-2">64%</div> | |
| <p class="text-sm text-gray-600">PYMES españolas que ya emplean IA</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-blue-600 mb-2">83%</div> | |
| <p class="text-sm text-gray-600">Reportan beneficios significativos</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-blue-600 mb-2">24/7</div> | |
| <p class="text-sm text-gray-600">Disponibilidad con IA</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-blue-600 mb-2">40%</div> | |
| <p class="text-sm text-gray-600">Reducción de costes operativos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-opacity"> | |
| <h2 class="text-3xl font-medium text-gray-900 sm:text-4xl"> | |
| Transformación de procesos empresariales | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| La aplicación de la IA en el entorno empresarial trae consigo beneficios tangibles | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Benefit 1 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-blue-50 text-blue-600 mb-4"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Automatización de tareas</h3> | |
| <p class="text-gray-600"> | |
| Reduce la carga de trabajo manual, permitiendo que los empleados se enfoquen en tareas más estratégicas y de mayor valor. | |
| </p> | |
| </div> | |
| <!-- Benefit 2 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-green-50 text-green-600 mb-4"> | |
| <i class="fas fa-check-circle text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Precisión y reducción de errores</h3> | |
| <p class="text-gray-600"> | |
| La IA minimiza los errores humanos, mejorando la calidad y consistencia de los procesos operativos. | |
| </p> | |
| </div> | |
| <!-- Benefit 3 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-purple-50 text-purple-600 mb-4"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Análisis de datos en tiempo real</h3> | |
| <p class="text-gray-600"> | |
| Facilita la toma de decisiones basada en información actualizada y precisa, sin retrasos. | |
| </p> | |
| </div> | |
| <!-- Benefit 4 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-yellow-50 text-yellow-600 mb-4"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Mejora en atención al cliente</h3> | |
| <p class="text-gray-600"> | |
| Respuestas rápidas y personalizadas sin aumentar costes operativos ni carga de trabajo. | |
| </p> | |
| </div> | |
| <!-- Benefit 5 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-red-50 text-red-600 mb-4"> | |
| <i class="fas fa-clock text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Ahorro de tiempo</h3> | |
| <p class="text-gray-600"> | |
| Recupera hasta el 30% del tiempo de tus empleados al automatizar procesos repetitivos. | |
| </p> | |
| </div> | |
| <!-- Benefit 6 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-indigo-50 text-indigo-600 mb-4"> | |
| <i class="fas fa-euro-sign text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Reducción de costes</h3> | |
| <p class="text-gray-600"> | |
| Optimiza recursos y reduce gastos operativos sin comprometer la calidad del servicio. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-opacity"> | |
| <h2 class="text-3xl font-medium text-gray-900 sm:text-4xl"> | |
| Nuestras Soluciones de IA | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Soluciones específicas para necesidades empresariales concretas | |
| </p> | |
| </div> | |
| <!-- IA GEN-Reservas --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20 scroll-opacity"> | |
| <div class="order-2 lg:order-1"> | |
| <h3 class="text-2xl font-medium text-gray-900 mb-4">IA GEN-Reservas</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Gestión automática de reservas mediante un agente de IA que responde exactamente como un empleado humano y las integra en tu sistema de gestión. Esto se traduce en menos llamadas innecesarias y mayor eficiencia operativa. | |
| </p> | |
| <ul class="space-y-3 text-gray-600 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Disponibilidad en tiempo real sin errores</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Integración con plataformas de reservas existentes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Respuesta automatizada a preguntas frecuentes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Recordatorios automáticos para evitar cancelaciones</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition duration-300"> | |
| Probar demo | |
| <i class="fas fa-phone ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="order-1 lg:order-2"> | |
| <div class="relative w-full rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Sistema de reservas con IA" class="w-full h-auto rounded-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- IA GEN-Chatbots --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20 scroll-opacity"> | |
| <div> | |
| <div class="relative w-full rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d35e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Chatbot de IA" class="w-full h-auto rounded-xl"> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-medium text-gray-900 mb-4">IA GEN-Chatbots</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Unido a nuestro gestor de reservas a través de un agente de IA, desarrollamos un chatbot a medida para tu negocio que está especialmente creado para resolver cuestiones que tus clientes puedan tener, sin necesidad de atenderlas tú personalmente. | |
| </p> | |
| <ul class="space-y-3 text-gray-600 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Capacidad de responder preguntas sobre productos y servicios</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Sugerencias personalizadas basadas en comportamiento previo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Integración con WhatsApp, redes sociales y mail</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Soporte multilingüe para atender a clientes internacionales</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition duration-300"> | |
| Más información | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Processes Section --> | |
| <section id="processes" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-opacity"> | |
| <h2 class="text-3xl font-medium text-gray-900 sm:text-4xl"> | |
| Optimización de Procesos | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Soluciones específicas para áreas clave de tu negocio | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Process 1 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-blue-50 text-blue-600 mb-4"> | |
| <i class="fas fa-boxes text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Gestión de Stock</h3> | |
| <p class="text-gray-600 mb-4"> | |
| La IA puede gestionar tu inventario en tiempo real, evitando errores y garantizando que siempre tengas los productos que necesitas. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Análisis predictivo de la demanda</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Reducción del desperdicio</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Automatización de pedidos</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Process 2 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-green-50 text-green-600 mb-4"> | |
| <i class="fas fa-tags text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Precios Optimizados</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Ajuste automático de precios según demanda, temporada y comportamiento de los clientes, asegurando el máximo margen de beneficio. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Análisis de tendencia de mercado</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Modificación dinámica de precios</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Recomendaciones de promociones</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Process 3 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-purple-50 text-purple-600 mb-4"> | |
| <i class="fas fa-star text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Análisis de Reseñas</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Nuestro sistema detecta y analiza reseñas en tiempo real, permitiéndote responder rápidamente a comentarios negativos. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Monitorización constante</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Análisis de sentimiento</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Respuesta automática personalizada</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Process 4 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-yellow-50 text-yellow-600 mb-4"> | |
| <i class="fas fa-utensils text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Optimización de Recursos</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Maximizamos la distribución de mesas en restaurantes para aumentar la capacidad de atención sin afectar la experiencia del cliente. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Asignación inteligente de mesas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Optimización de beneficios</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Mejora de experiencia del cliente</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Process 5 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-red-50 text-red-600 mb-4"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Optimización de Personal</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Analiza la demanda y redistribuye el personal de manera eficiente, reduciendo costes operativos y mejorando el servicio. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-red-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Predicción de picos de trabajo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-red-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Redistribución de empleados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-red-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Alertas sobre falta de personal</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Process 6 --> | |
| <div class="bg-white p-8 rounded-xl feature-card scroll-opacity"> | |
| <div class="w-14 h-14 flex items-center justify-center rounded-full bg-indigo-50 text-indigo-600 mb-4"> | |
| <i class="fas fa-cogs text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Integración Total</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Todas nuestras soluciones pueden integrarse entre sí y con tus sistemas existentes para una gestión unificada. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Sincronización con tus sistemas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Flujo de datos en tiempo real</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-xs"></i> | |
| <span class="text-sm">Panel de control unificado</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Consulting Section --> | |
| <section id="consulting" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> | |
| <div class="mb-12 lg:mb-0 scroll-opacity"> | |
| <h2 class="text-3xl font-medium text-gray-900 sm:text-4xl mb-6"> | |
| Consultoría Específica | |
| </h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Sabemos que cada negocio es único. Nos comprometemos a realizar una consultoría detallada de tus necesidades para crear la solución que mejor se adapte a tu negocio y a los procesos asociados a él. | |
| </p> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">Planes a Medida</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Tras analizar tu caso específico, creamos el producto que mejor se adapte a ti, proponiendo planes personalizados para tu negocio. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Análisis inicial sin compromiso</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Propuesta personalizada</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Implementación gradual</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Soporte continuo</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="scroll-opacity"> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <h3 class="text-xl font-medium text-gray-900 mb-6">KIT Digital</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Ahora es el momento perfecto para digitalizar tu negocio. Con el KIT Digital que se ofrece a pequeñas y medianas empresas, puedes aprovechar esta subvención para que este servicio solo aporte ganancias a tu negocio. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Te ayudamos a gestionar todo el proceso para que solo veas los beneficios: | |
| </p> | |
| <ul class="space-y-3 text-gray-600 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Asesoramiento sobre elegibilidad</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Gestión de la solicitud</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Implementación con cargo al bono</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Seguimiento post-implementación</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition duration-300"> | |
| Información sobre KIT Digital | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Stat 1 --> | |
| <div class="text-center p-6 rounded-xl stat-card scroll-opacity"> | |
| <div class="text-5xl font-medium mb-2 gradient-text">85%</div> | |
| <p class="text-gray-300">Reducción en tiempo de respuesta</p> | |
| </div> | |
| <!-- Stat 2 --> | |
| <div class="text-center p-6 rounded-xl stat-card scroll-opacity"> | |
| <div class="text-5xl font-medium mb-2 gradient-text">40%</div> | |
| <p class="text-gray-300">Disminución en costes operativos</p> | |
| </div> | |
| <!-- Stat 3 --> | |
| <div class="text-center p-6 rounded-xl stat-card scroll-opacity"> | |
| <div class="text-5xl font-medium mb-2 gradient-text">99%</div> | |
| <p class="text-gray-300">Clientes satisfechos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="lg:grid lg:grid-cols-2"> | |
| <div class="p-12 bg-gray-900 text-white"> | |
| <h2 class="text-3xl font-medium mb-4">La IA transforma tu negocio</h2> | |
| <p class="text-gray-300 mb-6"> | |
| Asociándote con nosotros, puedes aprovechar el poder de la IA para hacer crecer tu empresa de manera exponencial, ahorrando tiempo, recursos y optimizando cada aspecto de tu operación. | |
| </p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-3xl text-blue-400 mr-4"></i> | |
| <div> | |
| <p class="text-sm text-gray-400">¿Listo para comenzar?</p> | |
| <p class="text-lg font-medium">La IA no es el futuro, es el presente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-12"> | |
| <h3 class="text-2xl font-medium text-gray-900 mb-6">Contacta con nosotros</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Teléfono</label> | |
| <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="business" class="block text-sm font-medium text-gray-700 mb-1">Tipo de negocio</label> | |
| <select id="business" name="business" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Selecciona una opción</option> | |
| <option value="restaurant">Restaurante</option> | |
| <option value="hotel">Hotel</option> | |
| <option value="retail">Comercio minorista</option> | |
| <option value="other">Otro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-300"> | |
| Solicitar información | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-robot text-2xl text-blue-500 mr-2"></i> | |
| <span class="text-xl font-medium">SmartBot AI</span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Soluciones de IA Generativa para transformar tu negocio. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-300 uppercase tracking-wider mb-4">Soluciones</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">IA GEN-Reservas</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">IA GEN-Chatbots</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Gestión de Stock</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Precios Optimizados</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-300 uppercase tracking-wider mb-4">Empresa</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-300">Quiénes somos</a></li> | |
| <li><a href="#consulting" class="text-gray-400 hover:text-white transition-colors duration-300">Consultoría</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">KIT Digital</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contacto</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-300 uppercase tracking-wider mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Política de Privacidad</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Términos de Servicio</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 SmartBot AI. Todos los derechos reservados. | |
| </p> | |
| <div class="mt-4 md:mt-0"> | |
| <p class="text-gray-400 text-sm"> | |
| <i class="fas fa-envelope mr-1"></i> info@smartbotai.com | |
| <span class="mx-2">|</span> | |
| <i class="fas fa-phone mr-1"></i> +34 123 456 789 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle FAQ content | |
| function toggleFAQ(id) { | |
| const content = document.getElementById(id + '-content'); | |
| const icon = document.getElementById(id + '-icon'); | |
| if (content.classList.contains('hidden')) { | |
| content.classList.remove('hidden'); | |
| icon.classList.remove('fa-plus'); | |
| icon.classList.add('fa-minus'); | |
| } else { | |
| content.classList.add('hidden'); | |
| icon.classList.remove('fa-minus'); | |
| icon.classList.add('fa-plus'); | |
| } | |
| } | |
| // 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) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| const form = document.querySelector('form'); | |
| if (form) { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const phone = document.getElementById('phone').value; | |
| const business = document.getElementById('business').value; | |
| // Here you would typically send the data to your server | |
| console.log('Form submitted:', { name, email, phone, business }); | |
| // Show success message | |
| alert('¡Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.'); | |
| form.reset(); | |
| }); | |
| } | |
| // Scroll animations | |
| const scrollElements = document.querySelectorAll('.scroll-opacity'); | |
| const elementInView = (el, dividend = 1) => { | |
| const elementTop = el.getBoundingClientRect().top; | |
| return ( | |
| elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend | |
| ); | |
| }; | |
| const displayScrollElement = (element) => { | |
| element.classList.add('visible'); | |
| }; | |
| const hideScrollElement = (element) => { | |
| element.classList.remove('visible'); | |
| }; | |
| const handleScrollAnimation = () => { | |
| scrollElements.forEach((el) => { | |
| if (elementInView(el, 1.25)) { | |
| displayScrollElement(el); | |
| } else { | |
| hideScrollElement(el); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', () => { | |
| handleScrollAnimation(); | |
| }); | |
| // Initialize - show elements that are already in view | |
| handleScrollAnimation(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RikoteMaster/answai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |