| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bikelo - Automatiza tu taller de ciclismo con IA</title> |
| <link rel="icon" href="images/favicon_bikelo.ico" type="image/x-icon"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#FFB700', |
| secondary: '#000814', |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| |
| <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| </head> |
| <body class="font-['Inter'] bg-white text-secondary"> |
| <custom-navbar></custom-navbar> |
| |
| |
| <section id="portada" class="relative bg-gradient-to-br from-secondary to-gray-900 text-white py-20 md:py-32 px-4"> |
| <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center"> |
| <div class="space-y-6"> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight">De 1 hora a 3 minutos en presupuestos</h1> |
| <p class="text-xl text-gray-300">Compara recambios, productos y proveedores en segundos</p> |
| <p class="text-gray-300">Optimiza la logística de tu taller con tecnología inteligente, reduce errores y aumenta tus márgenes con nuestra solución diseñada específicamente para talleres de ciclismo.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#demo" class="bg-primary hover:bg-yellow-500 text-secondary font-semibold px-6 py-3 rounded-lg transition-all transform hover:scale-105">Agendar Demo Gratuita</a> |
| <a href="#" class="border border-white hover:bg-white hover:text-secondary text-white font-semibold px-6 py-3 rounded-lg transition-all flex items-center gap-2"> |
| <i data-feather="play-circle"></i> |
| Ver Video Explicativo |
| </a> |
| </div> |
| </div> |
| <div class="relative"> |
| <img src="https://huggingface.co/spaces/MagoDigi/bikelo/resolve/main/images/Portada_bikeloJPG_web.jpeg" alt="Dashboard Bikelo" class="rounded-xl shadow-2xl border-2 border-primary w-full h-auto max-w-2xl" loading="lazy"> |
| <div class="absolute -bottom-6 -left-6 bg-primary text-secondary px-4 py-2 rounded-lg font-bold shadow-lg">Plataforma disponible</div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-20 px-4 bg-white"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Descubre el poder de Bikelo en acción</h2> |
| |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div class="relative"> |
| <div class="carousel-container relative overflow-hidden rounded-xl shadow-2xl border-2 border-primary"> |
| <div class="carousel-slides flex transition-transform duration-300"> |
| <div class="carousel-slide min-w-full"> |
| <img src="https://huggingface.co/spaces/MagoDigi/bikelo/resolve/main/images/Captura_Dashboard_bikelo.jpeg" |
| alt="Dashboard Bikelo" class="w-full h-auto object-cover"> |
| </div> |
| <div class="carousel-slide min-w-full"> |
| <img src="https://huggingface.co/spaces/MagoDigi/bikelo/resolve/main/images/Captura_Busqueda_bikelo3.jpeg" |
| alt="Búsqueda inteligente" class="w-full h-auto object-cover"> |
| </div> |
| <div class="carousel-slide min-w-full"> |
| <img src="https://huggingface.co/spaces/MagoDigi/bikelo/resolve/main/images/Captura_Seleccionados_bikelo1.jpeg" |
| alt="Filtros avanzados" class="w-full h-auto object-cover"> |
| </div> |
| <div class="carousel-slide min-w-full"> |
| <img src="https://huggingface.co/spaces/MagoDigi/bikelo/resolve/main/images/Captura_filtros_bikelo.jpeg" |
| alt="Filtros avanzados" class="w-full h-auto object-cover"> |
| </div> |
| <div class="carousel-slide min-w-full"> |
| <img src="https://huggingface.co/spaces/MagoDigi/bikelo/resolve/main/images/Captura_Historial_bikelo6.jpeg" |
| alt="Historial completo" class="w-full h-auto object-cover"> |
| </div> |
| </div> |
| <button class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-80 text-secondary p-2 rounded-full shadow-md hover:bg-primary transition-all"> |
| <i data-feather="chevron-left"></i> |
| </button> |
| <button class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-80 text-secondary p-2 rounded-full shadow-md hover:bg-primary transition-all"> |
| <i data-feather="chevron-right"></i> |
| </button> |
| <div class="carousel-dots flex justify-center gap-2 absolute bottom-4 left-0 right-0"> |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all dot" data-index="0"></button> |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all dot" data-index="1"></button> |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all dot" data-index="2"></button> |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all dot" data-index="3"></button> |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all dot" data-index="4"></button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-6"> |
| <div class="feature-description active"> |
| <h3 class="text-2xl font-bold text-primary mb-3">Dashboard Inteligente</h3> |
| <p class="text-gray-600">Controla todos los aspectos de tu taller desde un único panel intuitivo. Visualiza KPIs clave, Historial de consultas, presupuestos y métricas de precios en tiempo real.</p> |
| </div> |
| <div class="feature-description hidden"> |
| <h3 class="text-2xl font-bold text-primary mb-3">Búsqueda Multicriterio</h3> |
| <p class="text-gray-600">Encuentra cualquier pieza en segundos con nuestro buscador avanzado. Filtra por marca, modelo, compatibilidad y disponibilidad en tiempo real.</p> |
| </div> |
| <div class="feature-description hidden"> |
| <h3 class="text-2xl font-bold text-primary mb-3">Listado y Presupuestos personalizados</h3> |
| <p class="text-gray-600">Consulta fácilmente los precios y elabora un presupuesto con los productos y recambios seleccionados.</p> |
| </div> |
| <div class="feature-description hidden"> |
| <h3 class="text-2xl font-bold text-primary mb-3">Filtros Avanzados</h3> |
| <p class="text-gray-600">Navega fácilmente por tu inventario con filtros inteligentes que se adaptan a tus necesidades específicas de búsqueda y categorización.</p> |
| </div> |
| <div class="feature-description hidden"> |
| <h3 class="text-2xl font-bold text-primary mb-3">Historial Completo</h3> |
| <p class="text-gray-600">Accede al historial completo de cada bicicleta y cliente. Todas las reparaciones, presupuestos y notas organizadas y fáciles de consultar.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 bg-gray-50"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">El problema que todos conocemos (pero nadie soluciona)</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all"> |
| <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="clock" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Pérdida de tiempo</h3> |
| <p class="text-gray-600">Los talleres pierden hasta 8 horas semanales en procesos manuales de presupuestos y gestión de inventario.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all"> |
| <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="dollar-sign" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Fuga de dinero</h3> |
| <p class="text-gray-600">Errores en presupuestos y pérdida de oportunidades de venta por falta de visibilidad del inventario.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all"> |
| <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="alert-circle" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Estrés y errores</h3> |
| <p class="text-gray-600">Equipos sobrecargados cometiendo errores que dañan la reputación del taller.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4" id="funciones"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Bikelo mejora tu forma de trabajar</h2> |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 hover:border-primary transition-all"> |
| <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="zap" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Presupuestos automáticos inteligentes</h3> |
| <p class="text-gray-600">Genera presupuestos precisos en minutos analizando fotos del daño con nuestra IA especializada.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 hover:border-primary transition-all"> |
| <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="trending-up" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Comparador de precios con IA</h3> |
| <p class="text-gray-600">Optimiza tus márgenes comparando precios de repuestos en tiempo real con proveedores certificados.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 hover:border-primary transition-all"> |
| <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="box" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Gestión de inventario predictiva</h3> |
| <p class="text-gray-600">Nuestra IA anticipa qué piezas necesitarás basándose en patrones estacionales y demanda histórica.</p> |
| </div> |
| </div> |
|
|
| |
| <section id="demo" class="py-20 px-4 bg-gray-50"> |
| <p class="text-sm mb-6 text-center"><i> <b>¡Solo queda un paso! </b>▶ Descubre la herramienta que te hará ganar más dinero con menos esfuerzo. ◀</i></p> |
| <div class="bg-secondary text-white rounded-xl overflow-hidden shadow-xl max-w-3xl mx-auto"> |
| <div class="grid md:grid-cols-2"> |
| <div class="p-8 md:p-10 bg-gradient-to-br from-primary to-yellow-500 flex flex-col justify-center"> |
| <h3 class="text-2xl font-bold mb-4"> Deja de perder horas buscando... 🕥</h3> |
| <p class="mb-6">Agenda una demo personalizada y descubre cómo Bikelo puede optimizar tu taller.</p> |
| <ul class="space-y-3"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Encuentra y compara al instante</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Recupera tu tiempo</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Ahorra hasta un 20% en costos</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Sin compromiso</li> |
| </ul> |
| </div> |
| <div class="p-8 md:p-10 bg-white text-secondary"> |
| <h3 class="text-xl font-bold mb-6">Agenda tu demo</h3> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium mb-1">Nombre (encargado/taller)*</label> |
| <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" required> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium mb-1">Tu mejor correo electrónico*</label> |
| <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" required> |
| </div> |
| <div> |
| <label for="phone" class="block text-sm font-medium mb-1">Teléfono*</label> |
| <input type="tel" id="phone" name="phone" pattern="\+\d{11}" maxlength="12" placeholder="+34 123 45 67 89" title="Incluya el código de su país: +34 (Ej. +34 678 00 11 22)" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" required> |
| </div> |
| <button type="submit" class="w-full bg-primary hover:bg-yellow-500 text-secondary font-semibold py-3 px-4 rounded-lg transition-colors">Reservar Demo</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| <p id="beneficios"></p> |
| </section> |
| |
| <section class="pb-20 px-4 bg-white"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Los beneficios que puedes obtener desde ahora</h2> |
| <div class="grid md:grid-cols-3 gap-8 mb-16 animate-on-scroll"> |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-primary transition-all"> |
| <h3 class="text-xl font-bold text-primary mb-2">+20.000€/año</h3> |
| <p class="font-semibold mb-2">¡Logra ahorrar mucho más!</p> |
| |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-primary transition-all"> |
| <h3 class="text-xl font-bold text-primary mb-2">+35% clientes/día</h3> |
| <p class="font-semibold mb-2">Mejora la atención rápidamente.</p> |
| |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-primary transition-all"> |
| <h3 class="text-xl font-bold text-primary mb-2">+40% facturación</h3> |
| <p class="font-semibold mb-2">Aumenta tus ventas.</p> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="bg-secondary text-white rounded-xl p-8 max-w-3xl mx-auto animate-on-scroll"> |
| <h3 class="text-2xl font-bold mb-6 text-center">Calcula tu ahorro potencial</h3> |
| <div class="space-y-6"> |
| <div> |
| <label class="block mb-2">Horas/semana en presupuestos</label> |
| <input type="range" min="1" max="20" value="8" class="w-full calculator-range" id="hours-range"> |
| <div class="flex justify-between mt-1"> |
| <span>1h</span> |
| <span id="hours-value">8h</span> |
| <span>20h</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block mb-2">Volumen mensual de compras (€)</label> |
| <input type="range" min="500" max="50000" value="10000" step="500" class="w-full calculator-range" id="purchases-range"> |
| <div class="flex justify-between mt-1"> |
| <span>500€</span> |
| <span id="purchases-value">10.000€</span> |
| <span>50.000€</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block mb-2">Errores mensuales típicos</label> |
| <input type="range" min="0" max="20" value="5" class="w-full calculator-range" id="errors-range"> |
| <div class="flex justify-between mt-1"> |
| <span>0</span> |
| <span id="errors-value">5</span> |
| <span>20+</span> |
| </div> |
| </div> |
| |
| <div class="bg-primary text-secondary p-4 rounded-lg mt-8 text-center"> |
| <p class="font-bold">Total pérdida mensual: <span id="loss-value">1.820</span>€</p> |
| <p class="text-sm">vs inversión Bikelo: 59€/mes</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 bg-gray-50"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Todo lo que necesitas en una solución</h2> |
| <div class="grid md:grid-cols-3 gap-8 animate-on-scroll"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all feature-card"> |
| <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i data-feather="package" class="text-primary w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Logística inteligente</h3> |
| <ul class="space-y-3 text-gray-600 feature-list mx-6"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Buscador multicriterio</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Comparador precios</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Gestión stock inteligente</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Integración con proveedores</li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all feature-card"> |
| <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i data-feather="message-square" class="text-primary w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Comunicación automatizada</h3> |
| <ul class="space-y-3 text-gray-600 feature-list mx-6"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Presupuestos Express</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> WhatsApp Integration</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Alertas Inteligentes</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Email Automatizado</li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all feature-card"> |
| <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i data-feather="bar-chart-2" class="text-primary w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Analítica avanzada</h3> |
| <ul class="space-y-3 text-gray-600 feature-list mx-6"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Dashboard ROI</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Predictor Demanda</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> KPI Personalizados</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Informes Automáticos</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section hidden class="py-20 px-4 bg-white" id="pricing"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Planes que se Pagan Solos</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto animate-on-scroll"> |
| |
| <div class="bg-gray-50 p-8 rounded-xl border-2 border-gray-200 hover:border-primary transition-all pricing-card"> |
| <h3 class="text-xl font-bold text-center mb-2">Básico</h3> |
| <p class="text-4xl font-bold text-center mb-4">29€<span class="text-lg font-normal">/mes</span></p> |
| <p class="text-gray-500 text-center mb-6">Para talleres pequeños</p> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Presupuestos automáticos</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Gestión básica de stock</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> 1 usuario</li> |
| </ul> |
| <p class="text-sm text-gray-500 mb-4">Ahorro típico: ~500€/mes</p> |
| <a href="#demo" class="block text-center bg-white border border-primary text-primary hover:bg-primary hover:text-secondary font-semibold py-3 px-6 rounded-lg transition-colors">Elegir Plan</a> |
| </div> |
| |
| |
| <div class="bg-primary text-secondary p-8 rounded-xl border-2 border-primary transform scale-105 shadow-lg pricing-card"> |
| <div class="bg-secondary text-white text-xs font-bold px-3 py-1 rounded-full inline-block mb-3">RECOMENDADO</div> |
| <h3 class="text-xl font-bold text-center mb-2">Avanzado</h3> |
| <p class="text-4xl font-bold text-center mb-4">79€<span class="text-lg font-normal">/mes</span></p> |
| <p class="text-center mb-6">Para la mayoría de talleres</p> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Todo en Básico +</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Analítica avanzada</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Hasta 3 usuarios</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4"></i> Integración WhatsApp</li> |
| </ul> |
| <p class="text-sm mb-4">Ahorro típico: ~1.800€/mes</p> |
| <a href="#demo" class="block text-center bg-secondary text-white hover:bg-gray-900 font-semibold py-3 px-6 rounded-lg transition-colors">Elegir Plan</a> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl border-2 border-gray-200 hover:border-primary transition-all pricing-card"> |
| <h3 class="text-xl font-bold text-center mb-2">Enterprise</h3> |
| <p class="text-4xl font-bold text-center mb-4">149€<span class="text-lg font-normal">/mes</span></p> |
| <p class="text-gray-500 text-center mb-6">Para cadenas de talleres</p> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Todo en Avanzado +</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Usuarios ilimitados</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> API completa</li> |
| <li class="flex items-center gap-2"><i data-feather="check" class="w-4 h-4 text-primary"></i> Soporte prioritario</li> |
| </ul> |
| <p class="text-sm text-gray-500 mb-4">Ahorro típico: ~3.500€/mes</p> |
| <a href="#demo" class="block text-center bg-white border border-primary text-primary hover:bg-primary hover:text-secondary font-semibold py-3 px-6 rounded-lg transition-colors">Elegir Plan</a> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-12 bg-gray-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <p class="text-center text-gray-500 mb-8">Una solución sólida y eficiente</p> |
| <div class="flex flex-wrap justify-center gap-8 md:gap-16 opacity-70"> |
| <img src="https://cdn.jsdelivr.net/npm/simple-icons@15.20.0/icons/googlegemini.svg" alt="Marca Aliada 1" class="h-12 object-contain grayscale hover:grayscale-0 transition-all"> |
| <img src="https://cdn.jsdelivr.net/npm/simple-icons@15.20.0/icons/supabase.svg" alt="Marca Aliada 2" class="h-12 object-contain grayscale hover:grayscale-0 transition-all"> |
| <img src="https://cdn.jsdelivr.net/npm/simple-icons@15.20.0/icons/anthropic.svg" alt="Marca Aliada 3" class="h-12 object-contain grayscale hover:grayscale-0 transition-all"> |
| <img src="https://cdn.jsdelivr.net/npm/simple-icons@15.20.0/icons/openai.svg" alt="Marca Aliada 4" class="h-12 object-contain grayscale hover:grayscale-0 transition-all"> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-20 px-4 bg-gradient-to-br from-secondary to-gray-900 text-white"> |
| <div class="max-w-6xl mx-auto text-center"> |
| <div class="inline-block bg-primary text-secondary px-6 py-2 rounded-full font-bold mb-6">30 Días para Comprobarlo o Te Devolvemos el 100%</div> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12">Garantía de Resultados Sin Riesgo</h2> |
| |
| <div class="grid md:grid-cols-4 gap-8 mb-16"> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <i data-feather="clock" class="w-10 h-10 mx-auto mb-4 text-primary"></i> |
| <h3 class="text-xl font-bold mb-2">Implementación en 1 día</h3> |
| <p class="text-gray-300">Tu taller funcionando con Bikelo en menos de 24h</p> |
| </div> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <i data-feather="life-buoy" class="w-10 h-10 mx-auto mb-4 text-primary"></i> |
| <h3 class="text-xl font-bold mb-2">Soporte personalizado</h3> |
| <p class="text-gray-300">Asistencia técnica dedicada cuando la necesites</p> |
| </div> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <i data-feather="book-open" class="w-10 h-10 mx-auto mb-4 text-primary"></i> |
| <h3 class="text-xl font-bold mb-2">Formación incluida</h3> |
| <p class="text-gray-300">Sesiones prácticas para todo tu equipo</p> |
| </div> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <i data-feather="trending-up" class="w-10 h-10 mx-auto mb-4 text-primary"></i> |
| <h3 class="text-xl font-bold mb-2">ROI garantizado</h3> |
| <p class="text-gray-300">O te devolvemos tu dinero sin preguntas</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 bg-primary text-secondary"> |
| <div class="max-w-6xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-8">¿Listo para transformar tu taller?</h2> |
| <p class="text-xl mb-12">Empieza hoy mismo y recupera el control de tu negocio</p> |
| |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div class="text-left space-y-6"> |
| <ul class="space-y-4 text-lg"> |
| <li class="flex items-center gap-3"><i data-feather="check" class="w-6 h-6"></i> Reduce tiempos de presupuesto en un 80%</li> |
| <li class="flex items-center gap-3"><i data-feather="check" class="w-6 h-6"></i> Aumenta tu facturación con ventas cruzadas</li> |
| <li class="flex items-center gap-3"><i data-feather="check" class="w-6 h-6"></i> Elimina errores costosos</li> |
| <li class="flex items-center gap-3"><i data-feather="check" class="w-6 h-6"></i> Gestiona tu inventario sin esfuerzo</li> |
| </ul> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-lg"> |
| <div class="space-y-4"> |
| <a href="#demo" class="block bg-secondary hover:bg-gray-900 text-white font-semibold py-4 px-6 rounded-lg transition-all">Agendar Demo 30 Min</a> |
| <a href="#" class="block text-secondary font-semibold py-4 px-6 rounded-lg transition-all flex items-center justify-center gap-2"> |
| <i data-feather="message-square"></i> Chat en Vivo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="faq" class="py-20 px-4 bg-gray-50"> |
| <div class="max-w-3xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Preguntas frecuentes</h2> |
| <div class="space-y-4"> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 faq-item"> |
| <button class="flex justify-between items-center w-full font-bold text-left"> |
| <span>¿Es complicado de implementar?</span> |
| <i data-feather="chevron-down" class="faq-icon"></i> |
| </button> |
| <div class="faq-content hidden mt-4 text-gray-600"> |
| <p>Para nada. La mayoría de nuestros clientes están funcionando en menos de 1 día. Nuestro equipo se encarga de todo: importamos tus datos existentes, configuramos el sistema según tus necesidades y formamos a tu equipo.</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 faq-item"> |
| <button class="flex justify-between items-center w-full font-bold text-left"> |
| <span>¿Necesito equipamiento especial?</span> |
| <i data-feather="chevron-down" class="faq-icon"></i> |
| </button> |
| <div class="faq-content hidden mt-4 text-gray-600"> |
| <p>Solo necesitas un ordenador o tablet con conexión a internet. Funciona en cualquier navegador moderno. Si quieres usar nuestro módulo de fotos para diagnósticos, cualquier smartphone moderno sirve.</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 faq-item"> |
| <button class="flex justify-between items-center w-full font-bold text-left"> |
| <span>¿Cómo garantizan el ROI?</span> |
| <i data-feather="chevron-down" class="faq-icon"></i> |
| </button> |
| <div class="faq-content hidden mt-4 text-gray-600"> |
| <p>Nuestra garantía es simple: si en 30 días no ves resultados tangibles (menos tiempo en presupuestos, menos errores, más facturación), te devolvemos el 100% de tu dinero. El 92% de los talleres superan sus expectativas.</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 faq-item"> |
| <button class="flex justify-between items-center w-full font-bold text-left"> |
| <span>¿Qué pasa con mis datos?</span> |
| <i data-feather="chevron-down" class="faq-icon"></i> |
| </button> |
| <div class="faq-content hidden mt-4 text-gray-600"> |
| <p>Tus datos son 100% tuyos. Utilizamos servidores en la UE con cifrado. Puedes exportar toda tu información en cualquier momento. Nunca compartimos o vendemos datos de clientes.</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 faq-item"> |
| <button class="flex justify-between items-center w-full font-bold text-left"> |
| <span>¿Y si tengo problemas?</span> |
| <i data-feather="chevron-down" class="faq-icon"></i> |
| </button> |
| <div class="faq-content hidden mt-4 text-gray-600"> |
| <p>Ofrecemos soporte técnico prioritario por teléfono, email y chat. Nuestro tiempo medio de respuesta es de 22 minutos en horario laboral. También tenemos una completa base de conocimiento y tutoriales en vídeo.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 bg-secondary text-white"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">El tiempo que pierdes hoy es dinero que dejas de ganar mañana</h2> |
| <div class="grid md:grid-cols-3 gap-8 mb-12"> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <p class="text-2xl font-bold text-primary mb-2">55€ menos</p> |
| <p>Cada día de espera</p> |
| </div> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <p class="text-2xl font-bold text-primary mb-2">1.667€ menos</p> |
| <p>Cada mes</p> |
| </div> |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20"> |
| <p class="text-2xl font-bold text-primary mb-2">20.000€ menos</p> |
| <p>Cada año</p> |
| </div> |
| </div> |
| |
| <a href="#demo" class="inline-block bg-primary hover:bg-yellow-500 text-secondary font-semibold text-lg py-4 px-8 rounded-lg transition-all transform hover:scale-105 shadow-lg"> |
| Empezar Ahora - 14 Días Gratis |
| </a> |
| </div> |
| </section> |
|
|
| |
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "TechCompany", |
| "name": "Bikelo", |
| "image": "images/Portada_bikeloJPG_web.jpeg", |
| "description": "Plataforma IA para automatizar talleres de ciclismo y reducir tiempos de presupuestos en un 80%", |
| "address": { |
| "@type": "PostalAddress", |
| "streetAddress": "Santander", |
| "addressLocality": "Santander", |
| "postalCode": "39006", |
| "addressCountry": "ES" |
| }, |
| |
| |
| |
| } |
| </script> |
|
|
| |
| <div id="cookie-consent" class="fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 hidden"> |
| <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between"> |
| <p class="mb-4 md:mb-0">Usamos cookies para mejorar tu experiencia. Al continuar, aceptas nuestra <a href="#" class="underline">Política de Cookies</a>.</p> |
| <button id="cookie-accept" class="bg-primary text-secondary font-semibold px-6 py-2 rounded-lg">Aceptar</button> |
| </div> |
| </div> |
|
|
| <custom-footer></custom-footer> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
