baliza / index.html
ferhaus's picture
Add 3 files
2f62271 verified
Raw
History Blame Contribute Delete
30.3 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GEO BlueShield49® - Baliza V-16 homologada</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>
.hero-gradient {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 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);
}
.how-it-works-step {
position: relative;
}
.how-it-works-step:not(:last-child):after {
content: "";
position: absolute;
top: 50%;
right: -2rem;
width: 4rem;
height: 2px;
background-color: #3b82f6;
}
.testimonial-card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.faq-item {
border-bottom: 1px solid #e5e7eb;
}
.faq-item:last-child {
border-bottom: none;
}
.comparison-row:nth-child(even) {
background-color: #f9fafb;
}
.comparison-check {
color: #10b981;
}
.comparison-cross {
color: #ef4444;
}
@media (max-width: 768px) {
.how-it-works-step:not(:last-child):after {
display: none;
}
}
</style>
</head>
<body class="font-sans text-gray-800">
<!-- Header/Navigation -->
<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">
<img src="https://balizablueshield49.com/wp-content/uploads/2023/04/logo-baliza-geo-blueshield49.png" alt="GEO BlueShield49 Logo" class="h-12">
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="font-medium text-blue-600 hover:text-blue-800">Características</a>
<a href="#comparison" class="font-medium text-gray-600 hover:text-blue-600">Comparativa</a>
<a href="#regulation" class="font-medium text-gray-600 hover:text-blue-600">Regulación</a>
<a href="#how-it-works" class="font-medium text-gray-600 hover:text-blue-600">Cómo funciona</a>
<a href="#autotekne" class="font-medium text-gray-600 hover:text-blue-600">Autotekne</a>
<a href="#testimonials" class="font-medium text-gray-600 hover:text-blue-600">Testimonios</a>
</nav>
<button class="md:hidden text-gray-600">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</header>
<!-- 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">Adiós a los triángulos: señaliza tu avería sin salir del coche</h1>
<p class="text-xl mb-8">GEO BlueShield49® es la baliza V-16 geolocalizable homologada por la DGT, fabricada 100 % en España para que te mantengas visible y seguro en carretera.</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300">
Comprar ahora
</button>
<button class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-blue-600 transition duration-300">
Ver cómo funciona
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://balizablueshield49.com/wp-content/uploads/2023/04/baliza-v16-geo-blueshield49.png" alt="GEO BlueShield49 Baliza" class="max-w-md w-full">
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-16">Diferenciadores que marcan la diferencia</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-flag text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">100% Fabricación nacional</h3>
<p class="text-gray-600">Control de calidad superior, plazos de entrega en 10 días y flexibilidad de volumen.</p>
</div>
<!-- Feature 2 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-magnet text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Ventosa patentada + imanes de neodimio</h3>
<p class="text-gray-600">Sujeción ultrarrápida y estable incluso en condiciones extremas.</p>
</div>
<!-- Feature 3 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-satellite-dish text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Indicador LED de conexión GPS</h3>
<p class="text-gray-600">Único en el mercado para garantizar que la baliza está correctamente geolocalizada.</p>
</div>
<!-- Feature 4 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-lightbulb text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Luminosidad superior</h3>
<p class="text-gray-600">Potencia luminosa por encima del mínimo exigido por la DGT, visible hasta 1 km.</p>
</div>
<!-- Feature 5 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Material de alta resistencia</h3>
<p class="text-gray-600">Cristal inyectado de policarbonato más duro que los plásticos básicos.</p>
</div>
<!-- Feature 6 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-weight-hanging text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Diseño compacto y ligero</h3>
<p class="text-gray-600">Tan sólo 84 × 44 mm, cabe en la mano y en el estuche de fácil localización.</p>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300">
Comprar baliza
</button>
</div>
</div>
</section>
<!-- Comparison Section -->
<section id="comparison" class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-16">¿Por qué GEO BlueShield49 y no otras?</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-xl overflow-hidden shadow-md">
<thead>
<tr class="bg-blue-600 text-white">
<th class="py-4 px-6 text-left font-bold">Característica</th>
<th class="py-4 px-6 text-center font-bold">GEO BlueShield49®</th>
<th class="py-4 px-6 text-center font-bold">Otros proveedores</th>
</tr>
</thead>
<tbody>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Fabricación nacional</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>100% España, plazos cortos y control total.</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Importaciones con tiempos y calidad variables.</span>
</div>
</td>
</tr>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Sujeción</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>Ventosa patentada + imanes de neodimio.</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Sistemas genéricos menos fiables.</span>
</div>
</td>
</tr>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Indicador GPS integrado</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>LED que confirma geolocalización DGT.</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Sin verificación visual.</span>
</div>
</td>
</tr>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Luminosidad</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>Visible hasta 1 km (por encima del mínimo).</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Justo al mínimo exigido.</span>
</div>
</td>
</tr>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Resistencia</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>Policarbonato de alta durabilidad.</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Plásticos básicos más frágiles.</span>
</div>
</td>
</tr>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Asistencia 24/7</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>6 meses gratis con Autotekne.</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Sin servicio o con coste extra.</span>
</div>
</td>
</tr>
<tr class="comparison-row">
<td class="py-4 px-6 font-medium">Tamaño compacto</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-check-circle comparison-check text-2xl mr-2"></i>
<span>84 × 44 mm, cabe en el estuche fácilmente.</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<div class="flex justify-center items-center">
<i class="fas fa-times-circle comparison-cross text-2xl mr-2"></i>
<span>Más voluminosas y aparatosas.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center mt-12">
<button class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300">
Comprar la mejor baliza
</button>
</div>
</div>
</section>
<!-- Regulation Section -->
<section id="regulation" class="py-20 bg-gray-50">
<div class="container mx-auto px-4 text-center">
<h3 class="text-2xl font-bold mb-6">Obligatoria desde el 1 de enero de 2026</h3>
<div class="inline-block bg-yellow-100 text-yellow-800 px-6 py-3 rounded-full mb-8 font-medium">
A partir de esa fecha, solo se aceptarán balizas luminosas V-16 geolocalizables para señalizar averías (Real Decreto 1030/2022). No esperes: adelántate y hazte con la tuya.
</div>
<div class="max-w-3xl mx-auto">
<img src="https://balizablueshield49.com/wp-content/uploads/2023/04/baliza-v16-homologada-dgt.png" alt="Baliza homologada DGT" class="rounded-lg shadow-md w-full">
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-16">Listo en 5 segundos: así de sencillo</h2>
<div class="flex flex-col md:flex-row justify-between items-center gap-8">
<!-- Step 1 -->
<div class="how-it-works-step text-center md:w-1/3 p-6">
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mb-6 mx-auto">
<span class="text-blue-600 font-bold text-2xl">1</span>
</div>
<h3 class="text-xl font-bold mb-3">Coloca la baliza</h3>
<p class="text-gray-600">La ventosa patentada y los imanes de neodimio la fijan al techo de tu coche en un gesto.</p>
</div>
<!-- Step 2 -->
<div class="how-it-works-step text-center md:w-1/3 p-6">
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mb-6 mx-auto">
<span class="text-blue-600 font-bold text-2xl">2</span>
</div>
<h3 class="text-xl font-bold mb-3">Verifica la conexión</h3>
<p class="text-gray-600">El LED integrado confirma que el GPS ya está activo y tu posición enviada a la DGT.</p>
</div>
<!-- Step 3 -->
<div class="how-it-works-step text-center md:w-1/3 p-6">
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mb-6 mx-auto">
<span class="text-blue-600 font-bold text-2xl">3</span>
</div>
<h3 class="text-xl font-bold mb-3">Mantente dentro</h3>
<p class="text-gray-600">Señaliza tu avería sin abandonar el habitáculo y continúa a salvo hasta la llegada de asistencia.</p>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-transparent border-2 border-blue-600 text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-blue-600 hover:text-white transition duration-300">
Ver vídeo demo
</button>
</div>
</div>
</section>
<!-- Autotekne Section -->
<section id="autotekne" class="py-20 bg-gray-50">
<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 md:pr-10">
<h2 class="text-3xl font-bold mb-6">App + asistencia mecánica remota</h2>
<p class="text-lg mb-8">Descarga la app de Autotekne y obtén 6 meses gratuitos de telemecánico 24/7, diagnóstico en tiempo real y chequeos preventivos que complementan tu baliza.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>Soporte remoto inmediato</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>Diagnóstico a distancia</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>Historial y alertas preventivas</span>
</li>
</ul>
<button class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300">
Activar 6 meses gratis
</button>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://balizablueshield49.com/wp-content/uploads/2023/04/app-autotekne-baliza-v16.png" alt="Autotekne App" class="rounded-lg shadow-md max-w-md w-full">
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-16">Lo que dicen nuestros clientes</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- Testimonial 1 -->
<div class="bg-white p-8 rounded-xl testimonial-card">
<div class="flex items-center mb-4">
<div class="text-yellow-400 mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 italic mb-6">"Me salvó salir de un apuro sin bajar del coche. La atención de Autotekne fue inmediata."</p>
<div class="flex items-center">
<div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
<span class="text-blue-600 font-bold">JR</span>
</div>
<div>
<p class="font-medium">José R.</p>
<p class="text-sm text-gray-500">Usuario habitual de carretera</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white p-8 rounded-xl testimonial-card">
<div class="flex items-center mb-4">
<div class="text-yellow-400 mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 italic mb-6">"Ligera, potente y española. Justo lo que necesitaba para mis rutas profesionales."</p>
<div class="flex items-center">
<div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
<span class="text-blue-600 font-bold">AM</span>
</div>
<div>
<p class="font-medium">Ana M.</p>
<p class="text-sm text-gray-500">Transportista</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4 max-w-4xl">
<h2 class="text-3xl font-bold text-center mb-12">Preguntas frecuentes</h2>
<div class="space-y-6">
<!-- FAQ 1 -->
<div class="faq-item pb-6">
<h3 class="text-xl font-bold mb-3 flex justify-between items-center cursor-pointer">
<span>¿Puedo usarla sin la app?</span>
<i class="fas fa-chevron-down text-blue-600"></i>
</h3>
<p class="text-gray-600">Sí: la baliza funciona de forma autónoma. La app es un valor añadido de asistencia.</p>
</div>
<!-- FAQ 2 -->
<div class="faq-item pb-6">
<h3 class="text-xl font-bold mb-3 flex justify-between items-center cursor-pointer">
<span>¿Cuánto dura la batería?</span>
<i class="fas fa-chevron-down text-blue-600"></i>
</h3>
<p class="text-gray-600">Hasta 12 horas de señal continua con una sola carga.</p>
</div>
<!-- FAQ 3 -->
<div class="faq-item pb-6">
<h3 class="text-xl font-bold mb-3 flex justify-between items-center cursor-pointer">
<span>¿Es compatible con todos los coches?</span>
<i class="fas fa-chevron-down text-blue-600"></i>
</h3>
<p class="text-gray-600">Sí. Gracias a su ventosa y magnetismo, se adapta a cualquier superficie metálica.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-blue-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-6">¿Listo para conducir con más seguridad?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Adquiere tu GEO BlueShield49® hoy y prepárate para la normativa 2026 con la mejor tecnología disponible.</p>
<button class="bg-white text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300">
Comprar ahora
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<img src="https://balizablueshield49.com/wp-content/uploads/2023/04/logo-baliza-geo-blueshield49.png" alt="GEO BlueShield49 Logo" class="h-12 mb-4">
<p class="text-gray-400">La baliza V-16 geolocalizable homologada por la DGT, fabricada 100% en España.</p>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Producto</h4>
<ul class="space-y-2">
<li><a href="#features" class="text-gray-400 hover:text-white">Características</a></li>
<li><a href="#comparison" class="text-gray-400 hover:text-white">Comparativa</a></li>
<li><a href="#how-it-works" class="text-gray-400 hover:text-white">Cómo funciona</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Comprar</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Términos y condiciones</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Política de privacidad</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Aviso legal</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Política de cookies</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Contacto</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-phone-alt text-gray-400 mr-2"></i>
<span class="text-gray-400">900 000 000</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-gray-400 mr-2"></i>
<span class="text-gray-400">info@geoblueshield49.com</span>
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
<span class="text-gray-400">Calle Inventada 123, Madrid</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 GEO BlueShield49®. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<script>
// Simple script for FAQ toggle functionality
document.querySelectorAll('.faq-item h3').forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
const icon = question.querySelector('i');
</html>