| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Asesoría de Reclamaciones de Seguros</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <style> |
| .glass-card { |
| background: rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); |
| } |
| .cta-button { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(22, 163, 74, 0.2); |
| } |
| .cta-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 12px rgba(22, 163, 74, 0.3); |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <header class="fixed w-full z-50"> |
| <nav class="glass-card backdrop-blur-md border-b border-white/10"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16 md:h-20"> |
| |
| <div class="flex-shrink-0 flex items-center"> |
| <div class="flex items-center"> |
| <i data-feather="scale" class="text-blue-500 w-8 h-8"></i> |
| <span class="ml-2 text-xl font-bold text-gray-800">Tuperito<span class="text-blue-500">.com</span></span> |
| </div> |
| </div> |
|
|
| |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-center space-x-8"> |
| <a href="index.html" class="text-gray-700 px-3 py-2 rounded-md text-sm font-medium bg-white/10">Inicio</a> |
| <a href="sobre-nosotros.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Sobre Nosotros</a> |
| <a href="servicios.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Servicios</a> |
| <a href="contactanos.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Contáctanos</a> |
| <a href="aviso-legal.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Aviso Legal</a> |
| </div> |
| </div> |
|
|
| |
| <div class="hidden md:block ml-4"> |
| <a href="contactanos.html" class="cta-button bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-8 rounded-lg text-sm flex items-center gap-2"> |
| <i data-feather="phone" class="w-4 h-4"></i> Consulta Gratis |
| </a> |
| </div> |
|
|
| |
| <div class="md:hidden flex items-center"> |
| <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-white/10 focus:outline-none transition duration-300"> |
| <i data-feather="menu" class="block h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mobile-menu hidden md:hidden bg-blue-900/90 backdrop-blur-md"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="index.html" class="text-gray-700 block px-3 py-2 rounded-md text-base font-medium bg-white/10">Inicio</a> |
| <a href="sobre-nosotros.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Sobre Nosotros</a> |
| <a href="servicios.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Servicios</a> |
| <a href="contactanos.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Contáctanos</a> |
| <a href="aviso-legal.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Aviso Legal</a> |
| <a href="contactanos.html" class="mt-2 block w-full bg-green-600 hover:bg-green-700 text-white text-center font-medium py-3 px-6 rounded-lg">Consulta Gratis</a> |
| </div> |
| </div> |
| </nav> |
| </header> |
|
|
| |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden"> |
| <div class="absolute inset-0 bg-[url('http://static.photos/office/1200x630/42')] bg-cover bg-center"> |
| <div class="absolute inset-0 bg-gradient-to-b from-blue-200/30 via-blue-300/40 to-blue-400/50"></div> |
| </div> |
| <div class="glass-card max-w-4xl mx-auto p-8 md:p-12 rounded-2xl text-center relative z-10" data-aos="fade-up"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-700 mb-6">¿Problemas con tu seguro?</h1> |
| <h3 class="text-4xl md:text-5xl font-bold text-gray-700 mb-4">Tu oficina experta en peritaje de seguros</h2> |
| <p class="text-lg text-gray-700 mb-8">Consulta inicial gratuita y sin compromiso</p> |
| <a href="contactanos.html" class="cta-button inline-flex items-center bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-12 rounded-lg text-lg"> |
| Consulta Gratis <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i> |
| </a> |
| </div> |
| </section> |
|
|
|
|
| |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-blue-50 to-white"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-700 mb-4">Expertos en <span class="text-blue-500">Peritaje de Seguros</span></h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
| Informes periciales de parte y mediación con Aseguradoras. Gestión integral de siniestros, desde la peritación hasta el final de la reparación o indemnización. |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> |
| |
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/insurance/640x360/1" alt="Auto Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| |
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/home/640x360/2" alt="Home Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| |
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/business/640x360/3" alt="Business Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| |
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/health/640x360/4" alt="Health Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| |
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/legal/640x360/5" alt="Legal Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/travel/640x360/6" alt="Travel Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/life/640x360/7" alt="Life Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
|
|
| <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2"> |
| <img src="http://static.photos/accident/640x360/8" alt="Accident Insurance" class="w-full h-48 object-cover rounded-lg"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-100"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="glass-card p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"> |
| <h3 class="text-2xl font-bold text-gray-700 mb-6">Profesionales en el <span class="text-blue-500">trabajo</span></h3> |
| <p class="text-lg text-gray-600 mb-8"> |
| Solo por realizar una consulta y saber si puedes reclamar a tu Compañía Aseguradora, no te cobramos |
| </p> |
| <p class="text-lg text-gray-600"> |
| Nuestros expertos en Ingeniería te orientarán acerca de la reclamación que puedes realizar, el tipo de siniestro y en caso de contratarnos, podemos defender en el Juzgado tus intereses en caso de no existir un acuerdo previo |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| |
| <div class="md:col-span-2"> |
| <div class="flex items-center mb-4"> |
| <i data-feather="scale" class="text-blue-400 w-8 h-8"></i> |
| <span class="ml-2 text-xl font-bold">Tuperito<span class="text-blue-400">.com</span></span> |
| </div> |
| <p class="text-gray-300 mb-4"> |
| Tu oficina experta en peritaje de seguros. Consulta inicial gratuita y sin compromiso. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition-colors"> |
| <i data-feather="facebook" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition-colors"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition-colors"> |
| <i data-feather="linkedin" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-blue-400 transition-colors"> |
| <i data-feather="instagram" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Servicios</h3> |
| <ul class="space-y-2"> |
| <li><a href="servicios.html" class="text-gray-300 hover:text-blue-400 transition-colors">Peritaje Automóvil</a></li> |
| <li><a href="servicios.html" class="text-gray-300 hover:text-blue-400 transition-colors">Peritaje Hogar</a></li> |
| <li><a href="servicios.html" class="text-gray-300 hover:text-blue-400 transition-colors">Peritaje Empresas</a></li> |
| <li><a href="servicios.html" class="text-gray-300 hover:text-blue-400 transition-colors">Peritaje Salud</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Contacto</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <i data-feather="phone" class="w-4 h-4 text-blue-400 mr-2"></i> |
| <span class="text-gray-300">+34 900 123 456</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="mail" class="w-4 h-4 text-blue-400 mr-2"></i> |
| <span class="text-gray-300">info@tuperito.com</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="map-pin" class="w-4 h-4 text-blue-400 mr-2"></i> |
| <span class="text-gray-300">Madrid, España</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="clock" class="w-4 h-4 text-blue-400 mr-2"></i> |
| <span class="text-gray-300">Lun-Vie: 9:00-18:00</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-300 text-sm mb-4 md:mb-0"> |
| © 2024 Tuperito.com. Todos los derechos reservados. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="aviso-legal.html" class="text-gray-300 hover:text-blue-400 text-sm transition-colors">Aviso Legal</a> |
| <a href="politica-privacidad.html" class="text-gray-300 hover:text-blue-400 text-sm transition-colors">Política de Privacidad</a> |
| <a href="cookies.html" class="text-gray-300 hover:text-blue-400 text-sm transition-colors">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('.mobile-menu-button').addEventListener('click', function() { |
| document.querySelector('.mobile-menu').classList.toggle('hidden'); |
| const icon = document.querySelector('.mobile-menu-button i'); |
| if (document.querySelector('.mobile-menu').classList.contains('hidden')) { |
| feather.replace(); |
| } else { |
| icon.setAttribute('data-feather', 'x'); |
| feather.replace(); |
| } |
| }); |
| |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
