lexai / index.html
muddokon's picture
Add 3 files
195dcc1 verified
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LexAI - Asesoría Legal Inteligente</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e3a8a',
secondary: '#3b82f6',
accent: '#10b981',
}
}
}
}
</script>
<style>
.hero-gradient {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}
.card-hover: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);
}
.transition-all {
transition: all 0.3s ease;
}
.nav-link:after {
content: '';
display: block;
width: 0;
height: 2px;
background: #3b82f6;
transition: width .3s;
}
.nav-link:hover:after {
width: 100%;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<i class="fas fa-balance-scale text-white text-xl"></i>
</div>
<a href="#" class="ml-3 text-xl font-bold text-primary">LexAI</a>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#inicio" class="nav-link text-gray-700 hover:text-primary font-medium">Inicio</a>
<a href="#como-funciona" class="nav-link text-gray-700 hover:text-primary font-medium">Cómo funciona</a>
<a href="#servicios" class="nav-link text-gray-700 hover:text-primary font-medium">Servicios</a>
<a href="#contacto" class="nav-link text-gray-700 hover:text-primary font-medium">Contacto</a>
</nav>
<div class="flex items-center space-x-4">
<a href="#" class="hidden md:block px-4 py-2 rounded-md text-primary font-medium hover:bg-blue-50 transition-all">Iniciar sesión</a>
<a href="#" class="px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-800 transition-all">Registrarse</a>
<button class="md:hidden text-gray-600 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="inicio" class="hero-gradient text-white py-20 md:py-32">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Asesoría legal inteligente al alcance de todos</h1>
<p class="text-xl opacity-90 mb-8">Combina la precisión de la inteligencia artificial con la experiencia de abogados profesionales para ofrecerte soluciones legales rápidas, económicas y confiables.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#" class="bg-white text-primary px-6 py-3 rounded-md font-bold text-center hover:bg-gray-100 transition-all">Prueba gratis</a>
<a href="#como-funciona" class="border-2 border-white px-6 py-3 rounded-md font-bold text-center hover:bg-white hover:text-primary transition-all">Cómo funciona</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full max-w-md">
<div class="absolute -top-6 -left-6 w-32 h-32 bg-accent rounded-full opacity-20"></div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary rounded-full opacity-20"></div>
<div class="relative bg-white rounded-xl shadow-xl p-6 text-gray-800">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<i class="fas fa-robot text-white"></i>
</div>
<div class="ml-3">
<h3 class="font-bold">Asistente Legal LexAI</h3>
<p class="text-xs text-gray-500">En línea ahora</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<p class="text-sm">Hola, soy tu asistente legal inteligente. ¿En qué puedo ayudarte hoy? Por ejemplo:</p>
<ul class="mt-2 text-sm space-y-2">
<li class="flex items-start">
<span class="text-primary mr-2"></span>
<span>Necesito revisar un contrato</span>
</li>
<li class="flex items-start">
<span class="text-primary mr-2"></span>
<span>Tengo una duda laboral</span>
</li>
<li class="flex items-start">
<span class="text-primary mr-2"></span>
<span>Quiero crear una empresa</span>
</li>
</ul>
</div>
<div class="flex">
<input type="text" placeholder="Escribe tu consulta..." class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<button class="bg-primary text-white px-4 py-2 rounded-r-md hover:bg-blue-800 transition-all">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-gray-50 py-16">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="bg-white p-8 rounded-xl shadow-sm transition-all hover:shadow-md">
<div class="text-5xl font-bold text-primary mb-2">24/7</div>
<p class="text-gray-600">Disponibilidad permanente para resolver tus consultas legales</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm transition-all hover:shadow-md">
<div class="text-5xl font-bold text-primary mb-2">70%</div>
<p class="text-gray-600">Más económico que la asesoría legal tradicional</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm transition-all hover:shadow-md">
<div class="text-5xl font-bold text-primary mb-2">5 min</div>
<p class="text-gray-600">Tiempo promedio para recibir una respuesta inicial</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="como-funciona" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Cómo funciona nuestro servicio</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Obtén asesoría legal de calidad en solo 3 sencillos pasos</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<!-- Step 1 -->
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold mb-6">1</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Describe tu situación</h3>
<p class="text-gray-600">Cuéntanos tu caso o sube documentos relevantes. Nuestro sistema analizará tu situación.</p>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 rounded-full bg-secondary flex items-center justify-center text-white text-2xl font-bold mb-6">2</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Análisis inteligente</h3>
<p class="text-gray-600">Nuestra IA revisa miles de casos similares y normativas para ofrecerte opciones.</p>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 rounded-full bg-accent flex items-center justify-center text-white text-2xl font-bold mb-6">3</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Respuesta personalizada</h3>
<p class="text-gray-600">Recibe un informe detallado con recomendaciones y, si lo necesitas, contacto con un abogado especializado.</p>
</div>
</div>
<div class="mt-16 bg-gray-50 rounded-xl p-8 md:p-12">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0">
<h3 class="text-2xl font-bold text-gray-900 mb-4">Tecnología y experiencia combinadas</h3>
<p class="text-gray-600 mb-6">Nuestro sistema utiliza inteligencia artificial entrenada con miles de casos legales y revisada constantemente por nuestro equipo de abogados. Esto nos permite ofrecerte:</p>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Respuestas precisas basadas en la legislación actual</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Análisis de documentos con identificación de cláusulas relevantes</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Recomendaciones personalizadas según tu situación</span>
</li>
</ul>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full max-w-md">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Tecnología legal" class="rounded-lg shadow-lg w-full">
<div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-md w-3/4">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white">
<i class="fas fa-user-tie"></i>
</div>
<div class="ml-3">
<h4 class="font-bold">Revisión humana</h4>
<p class="text-xs text-gray-500">Todos los casos son supervisados por abogados colegiados</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="servicios" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nuestros servicios legales</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Soluciones adaptadas a tus necesidades legales</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden transition-all card-hover">
<div class="h-2 bg-primary"></div>
<div class="p-8">
<div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center text-primary mb-6">
<i class="fas fa-file-contract text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Revisión de contratos</h3>
<p class="text-gray-600 mb-6">Analizamos tus contratos identificando cláusulas riesgosas y sugerimos modificaciones para proteger tus intereses.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Contratos laborales</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Arrendamientos</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Acuerdos comerciales</span>
</li>
</ul>
<a href="#" class="text-primary font-medium inline-flex items-center">
Saber más <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- Service 2 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden transition-all card-hover">
<div class="h-2 bg-secondary"></div>
<div class="p-8">
<div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center text-secondary mb-6">
<i class="fas fa-briefcase text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Derecho laboral</h3>
<p class="text-gray-600 mb-6">Resuelve tus dudas sobre despidos, indemnizaciones, contratación y todas las cuestiones laborales.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Despidos e indemnizaciones</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Modificaciones contractuales</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Conflictos con empleadores</span>
</li>
</ul>
<a href="#" class="text-primary font-medium inline-flex items-center">
Saber más <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- Service 3 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden transition-all card-hover">
<div class="h-2 bg-accent"></div>
<div class="p-8">
<div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center text-accent mb-6">
<i class="fas fa-building text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Constitución de empresas</h3>
<p class="text-gray-600 mb-6">Te guiamos en todo el proceso de creación de tu empresa, desde la elección de la forma jurídica hasta los trámites necesarios.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Sociedades Limitadas</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Autónomos</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-accent mt-1 mr-2"></i>
<span>Trámites notariales y registrales</span>
</li>
</ul>
<a href="#" class="text-primary font-medium inline-flex items-center">
Saber más <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-blue-800 transition-all">
Ver todos los servicios <i class="fas fa-chevron-down ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Lo que dicen nuestros clientes</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Experiencias reales de personas que han usado nuestros servicios</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl">
<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 mb-6">"Gracias a LexAI pude resolver un problema con mi contrato de alquiler en cuestión de horas. La respuesta fue clara, precisa y me ahorró tener que contratar un abogado tradicional."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-full h-full object-cover">
</div>
<div class="ml-4">
<h4 class="font-bold">María González</h4>
<p class="text-sm text-gray-500">Pequeña empresaria</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl">
<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 mb-6">"Como freelancer, no podía permitirme un abogado tradicional. LexAI me dio la seguridad legal que necesitaba para mis contratos con clientes a un precio accesible."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-full h-full object-cover">
</div>
<div class="ml-4">
<h4 class="font-bold">Carlos Martínez</h4>
<p class="text-sm text-gray-500">Diseñador freelance</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl">
<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-half-alt"></i>
</div>
</div>
<p class="text-gray-600 mb-6">"Increíble servicio. Cuando tuve dudas sobre un despido, LexAI me orientó sobre mis derechos y me preparó para la negociación. Finalmente conseguí una indemnización justa."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-full h-full object-cover">
</div>
<div class="ml-4">
<h4 class="font-bold">Ana López</h4>
<p class="text-sm text-gray-500">Ex-empleada de banca</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 hero-gradient text-white">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">¿Tienes una duda legal? Resuélvela ahora</h2>
<p class="text-xl opacity-90 mb-8">Regístrate y obtén tu primera consulta gratuita. Sin compromisos, sin letra pequeña.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#" class="bg-white text-primary px-8 py-4 rounded-md font-bold text-lg hover:bg-gray-100 transition-all">Comenzar ahora</a>
<a href="#" class="border-2 border-white px-8 py-4 rounded-md font-bold text-lg hover:bg-white hover:text-primary transition-all">Hablar con un asesor</a>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Preguntas frecuentes</h2>
<p class="text-xl text-gray-600">Resuelve tus dudas sobre nuestro servicio</p>
</div>
<div class="space-y-6">
<!-- FAQ 1 -->
<div class="border-b border-gray-200 pb-6">
<button class="flex justify-between items-center w-full text-left group">
<h3 class="text-lg font-medium text-gray-900 group-hover:text-primary transition-all">¿Es realmente fiable el asesoramiento de LexAI?</h3>
<span class="text-primary text-xl">
<i class="fas fa-plus group-focus:hidden"></i>
<i class="fas fa-minus hidden group-focus:block"></i>
</span>
</button>
<div class="mt-4 text-gray-600">
<p>Absolutamente. Nuestra inteligencia artificial ha sido entrenada con miles de casos reales y está constantemente actualizada con los últimos cambios legislativos. Además, todos los informes son supervisados por abogados colegiados para garantizar la máxima fiabilidad.</p>
</div>
</div>
<!-- FAQ 2 -->
<div class="border-b border-gray-200 pb-6">
<button class="flex justify-between items-center w-full text-left group">
<h3 class="text-lg font-medium text-gray-900 group-hover:text-primary transition-all">¿Qué pasa si necesito más ayuda después del informe inicial?</h3>
<span class="text-primary text-xl">
<i class="fas fa-plus group-focus:hidden"></i>
<i class="fas fa-minus hidden group-focus:block"></i>
</span>
</button>
<div class="mt-4 text-gray-600">
<p>Puedes solicitar una consulta más detallada con uno de nuestros abogados especializados. Te ofreceremos diferentes opciones según la complejidad de tu caso y tus necesidades específicas.</p>
</div>
</div>
<!-- FAQ 3 -->
<div class="border-b border-gray-200 pb-6">
<button class="flex justify-between items-center w-full text-left group">
<h3 class="text-lg font-medium text-gray-900 group-hover:text-primary transition-all">¿Cómo protegen mi privacidad y datos personales?</h3>
<span class="text-primary text-xl">
<i class="fas fa-plus group-focus:hidden"></i>
<i class="fas fa-minus hidden group-focus:block"></i>
</span>
</button>
<div class="mt-4 text-gray-600">
<p>Utilizamos cifrado de extremo a extremo para todas las comunicaciones y documentos. Cumplimos estrictamente con el RGPD y nunca compartimos tu información con terceros sin tu consentimiento explícito.</p>
</div>
</div>
<!-- FAQ 4 -->
<div class="border-b border-gray-200 pb-6">
<button class="flex justify-between items-center w-full text-left group">
<h3 class="text-lg font-medium text-gray-900 group-hover:text-primary transition-all">¿Qué tipos de casos no pueden manejar?</h3>
<span class="text-primary text-xl">
<i class="fas fa-plus group-focus:hidden"></i>
<i class="fas fa-minus hidden group-focus:block"></i>
</span>
</button>
<div class="mt-4 text-gray-600">
<p>Actualmente no manejamos casos penales ni procesos judiciales complejos que requieran representación en tribunales. Nuestro servicio está orientado a asesoría legal preventiva y resolución de dudas en áreas como laboral, mercantil, fiscal y civil.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contacto" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Contáctanos</h2>
<p class="text-gray-600 mb-8">¿Tienes alguna pregunta específica? Escríbenos y te responderemos lo antes posible.</p>
<div class="space-y-6
</html>