import React, { useState, useEffect } from 'react';
import {
ShieldCheck,
Car,
Bike,
Briefcase,
FileText,
Phone,
Mail,
MapPin,
Menu,
X,
ChevronRight,
CheckCircle2,
Download
} from 'lucide-react';
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 20);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-md py-2' : 'bg-white/95 py-4'}`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center">
<a href="#inicio" className="flex items-center">
<img
src="Imagen de WhatsApp 2024-10-17 a las 14.40.45_a430bc82.jpg"
alt="Fénix Group Seguros"
className="h-12 md:h-16 w-auto object-contain mix-blend-multiply"
/>
</a>
{/* Desktop Menu */}
<div className="hidden md:flex space-x-8 items-center">
<a href="#inicio" className="text-slate-600 hover:text-blue-700 font-medium transition-colors">Inicio</a>
<a href="#servicios" className="text-slate-600 hover:text-blue-700 font-medium transition-colors">Servicios</a>
<a href="#formularios" className="text-slate-600 hover:text-blue-700 font-medium transition-colors">Formularios</a>
<a href="#contacto" className="text-slate-600 hover:text-blue-700 font-medium transition-colors">Contacto</a>
<button className="bg-blue-700 hover:bg-blue-800 text-white px-6 py-2 rounded-full font-medium transition-colors shadow-lg shadow-blue-700/30">
Cotizar ahora
</button>
</div>
{/* Mobile Menu Button */}
<div className="md:hidden flex items-center">
<button onClick={() => setIsOpen(!isOpen)} className="text-slate-600 hover:text-blue-700 focus:outline-none">
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
</div>
</div>
</div>
{/* Mobile Menu */}
{isOpen && (
<div className="md:hidden bg-white border-t border-gray-100 absolute w-full shadow-lg">
<div className="px-4 pt-2 pb-6 space-y-1">
<a href="#inicio" className="block px-3 py-3 text-slate-600 hover:bg-blue-50 hover:text-blue-700 rounded-md font-medium">Inicio</a>
<a href="#servicios" className="block px-3 py-3 text-slate-600 hover:bg-blue-50 hover:text-blue-700 rounded-md font-medium">Servicios</a>
<a href="#formularios" className="block px-3 py-3 text-slate-600 hover:bg-blue-50 hover:text-blue-700 rounded-md font-medium">Formularios</a>
<a href="#contacto" className="block px-3 py-3 text-slate-600 hover:bg-blue-50 hover:text-blue-700 rounded-md font-medium">Contacto</a>
<button className="w-full mt-4 bg-blue-700 text-white px-6 py-3 rounded-md font-medium shadow-md">
Cotizar ahora
</button>
</div>
</div>
)}
</nav>
);
};
const Hero = () => {
return (
<div id="inicio" className="relative pt-24 pb-16 md:pt-32 md:pb-24 flex items-center min-h-[90vh]">
<div className="absolute inset-0 z-0">
<img
src="https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1920&q=80"
alt="Familia feliz y segura"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-r from-blue-950/90 to-blue-900/70"></div>
</div>
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div className="max-w-2xl text-white">
<div className="inline-flex items-center space-x-2 bg-blue-800/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6 border border-blue-400/30">
<ShieldCheck className="h-5 w-5 text-blue-300" />
<span className="text-sm font-medium text-blue-100">Protección garantizada en cada paso</span>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6 leading-tight">
Acompañándote en el camino con <span className="text-blue-400">tranquilidad</span>.
</h1>
<p className="text-lg md:text-xl text-blue-100 mb-8 leading-relaxed max-w-xl">
Tener un vehículo o un negocio es una inversión que debemos cuidar. Somos tu aliado estratégico para proteger lo que más valoras con pólizas a tu medida.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<button className="bg-white text-blue-900 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition-all flex items-center justify-center shadow-lg">
Cotizar mi seguro <ChevronRight className="ml-2 h-5 w-5" />
</button>
<button className="border-2 border-white/30 hover:border-white text-white hover:bg-white/10 px-8 py-4 rounded-lg font-bold text-lg transition-all flex items-center justify-center">
Conocer servicios
</button>
</div>
</div>
</div>
</div>
);
};
const ServiceCard = ({ icon: Icon, title, description }) => (
<div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">
<div className="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors">
<Icon className="h-7 w-7 text-blue-700 group-hover:text-white transition-colors" />
</div>
<h3 className="text-xl font-bold text-slate-800 mb-3">{title}</h3>
<p className="text-slate-600 leading-relaxed mb-6">
{description}
</p>
<a href="#contacto" className="text-blue-700 font-semibold inline-flex items-center hover:text-blue-800">
Saber más <ChevronRight className="h-4 w-4 ml-1" />
</a>
</div>
);
const Services = () => {
const services = [
{
icon: Car,
title: "Seguros Livianos",
description: "Tu auto es una inversión. Lo protegemos contra todo riesgo para que conduzcas sin preocupaciones."
},
{
icon: Bike,
title: "Seguros para Motos",
description: "Llegó el momento de volver a rodar. Disfruta el camino mientras nosotros nos encargamos de tu seguridad."
},
{
icon: Briefcase,
title: "Pólizas Generales",
description: "Soluciones a la medida para personas jurídicas y naturales. Cubrimos las necesidades específicas de tu negocio."
},
{
icon: ShieldCheck,
title: "Seguros de Vida",
description: "Asegura el futuro y la tranquilidad de tus seres queridos con coberturas flexibles y accesibles."
}
];
return (
<section id="servicios" className="py-24 bg-slate-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-3xl mx-auto mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Nuestras Soluciones de Seguros</h2>
<p className="text-lg text-slate-600">
Ofrecemos un portafolio completo diseñado para proteger tu patrimonio, tu vida y tu empresa con el respaldo de las mejores aseguradoras del país.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{services.map((service, index) => (
<ServiceCard key={index} {...service} />
))}
</div>
</div>
</section>
);
};
const FormsSection = () => {
const forms = [
"SARLAFT Persona Natural",
"SARLAFT Persona Jurídica",
"Solicitud Automóviles Natural",
"Solicitud Generales Jurídico",
"Solicitud Generales Natural",
"Compromiso de Pago"
];
return (
<section id="formularios" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col lg:flex-row gap-12 items-center">
<div className="lg:w-1/2">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">
Gestión Ágil y Transparente
</h2>
<p className="text-lg text-slate-600 mb-8">
En Fénix Group facilitamos tus trámites. Descarga todos los formularios necesarios, incluyendo los formatos SARLAFT y solicitudes de pólizas, directamente desde nuestra plataforma.
</p>
<ul className="space-y-4">
{['Proceso 100% digital y seguro', 'Formularios actualizados normativamente', 'Asesoría personalizada para el diligenciamiento'].map((item, i) => (
<li key={i} className="flex items-center text-slate-700">
<CheckCircle2 className="h-6 w-6 text-green-500 mr-3 flex-shrink-0" />
<span className="font-medium">{item}</span>
</li>
))}
</ul>
</div>
<div className="lg:w-1/2 w-full">
<div className="bg-blue-50 rounded-2xl p-6 md:p-8 border border-blue-100 shadow-inner">
<h3 className="text-xl font-bold text-slate-900 mb-6 flex items-center">
<FileText className="h-6 w-6 mr-2 text-blue-700" />
Documentos Disponibles
</h3>
<div className="grid gap-3">
{forms.map((form, index) => (
<button key={index} className="flex items-center justify-between bg-white p-4 rounded-xl border border-gray-100 hover:border-blue-300 hover:shadow-md transition-all group w-full text-left">
<span className="font-medium text-slate-700 group-hover:text-blue-800">{form}</span>
<Download className="h-5 w-5 text-gray-400 group-hover:text-blue-600" />
</button>
))}
</div>
</div>
</div>
</div>
</div>
</section>
);
};
const CTA = () => {
return (
<section className="bg-blue-700 py-16 relative overflow-hidden">
<div className="absolute top-0 right-0 -mt-20 -mr-20 w-80 h-80 bg-blue-600 rounded-full opacity-50 blur-3xl"></div>
<div className="absolute bottom-0 left-0 -mb-20 -ml-20 w-80 h-80 bg-blue-800 rounded-full opacity-50 blur-3xl"></div>
<div className="max-w-4xl mx-auto px-4 relative z-10 text-center">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
¿Listo para asegurar lo que más te importa?
</h2>
<p className="text-blue-100 text-lg mb-8 max-w-2xl mx-auto">
Déjanos tus datos y uno de nuestros asesores expertos se pondrá en contacto contigo para ofrecerte la mejor solución.
</p>
<button className="bg-white text-blue-800 hover:bg-blue-50 px-8 py-4 rounded-full font-bold text-lg transition-all shadow-xl">
Solicitar Asesoría Gratuita
</button>
</div>
</section>
);
};
const Footer = () => {
return (
<footer id="contacto" className="bg-slate-900 pt-16 pb-8 border-t border-slate-800 text-slate-300">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<div className="space-y-4">
<div className="mb-6 bg-white inline-block p-3 rounded-xl shadow-lg">
<img
src="Imagen de WhatsApp 2024-10-17 a las 14.40.45_a430bc82.jpg"
alt="Fénix Group Seguros"
className="h-10 md:h-12 w-auto object-contain"
/>
</div>
<p className="text-sm text-slate-400 leading-relaxed">
Somos tu aliado confiable en seguros. Protegemos tu inversión, tu familia y tu negocio con el respaldo de las compañías más sólidas.
</p>
</div>
<div>
<h4 className="text-white font-bold mb-6 text-lg">Enlaces Rápidos</h4>
<ul className="space-y-3 text-sm">
<li><a href="#inicio" className="hover:text-blue-400 transition-colors">Inicio</a></li>
<li><a href="#servicios" className="hover:text-blue-400 transition-colors">Nuestros Seguros</a></li>
<li><a href="#formularios" className="hover:text-blue-400 transition-colors">Formularios SARLAFT</a></li>
<li><a href="#contacto" className="hover:text-blue-400 transition-colors">Contáctanos</a></li>
</ul>
</div>
<div>
<h4 className="text-white font-bold mb-6 text-lg">Servicios</h4>
<ul className="space-y-3 text-sm">
<li className="hover:text-blue-400 transition-colors cursor-pointer">Seguros Vehículos Livianos</li>
<li className="hover:text-blue-400 transition-colors cursor-pointer">Seguros de Motos</li>
<li className="hover:text-blue-400 transition-colors cursor-pointer">Pólizas Generales</li>
<li className="hover:text-blue-400 transition-colors cursor-pointer">Seguros de Vida</li>
</ul>
</div>
<div>
<h4 className="text-white font-bold mb-6 text-lg">Contacto</h4>
<ul className="space-y-4 text-sm">
<li className="flex items-start">
<MapPin className="h-5 w-5 text-blue-500 mr-3 flex-shrink-0 mt-0.5" />
<span>Bogotá, Colombia<br />(Dirección principal)</span>
</li>
<li className="flex items-center">
<Phone className="h-5 w-5 text-blue-500 mr-3 flex-shrink-0" />
<span>+57 300 000 0000</span>
</li>
<li className="flex items-center">
<Mail className="h-5 w-5 text-blue-500 mr-3 flex-shrink-0" />
<span>contacto@fenixgroupseguros.com</span>
</li>
</ul>
</div>
</div>
<div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-slate-500">
<p>© {new Date().getFullYear()} Fénix Group Seguros. Todos los derechos reservados.</p>
<div className="flex space-x-4 mt-4 md:mt-0">
<a href="#" className="hover:text-white transition-colors">Términos y Condiciones</a>
<a href="#" className="hover:text-white transition-colors">Política de Privacidad</a>
</div>
</div>
</div>
</footer>
);
};
export default function App() {
return (
<div className="min-h-screen bg-white font-sans selection:bg-blue-200 selection:text-blue-900">
<Navbar />
<Hero />
<Services />
<FormsSection />
<CTA />
<Footer />
</div>
);
}