feat: add src/components/Footer.tsx
This commit is contained in:
parent
ba63c93d6c
commit
62f66edb57
|
|
@ -0,0 +1,84 @@
|
|||
import Link from 'next/link';
|
||||
import { Anchor, MapPin, Phone, Mail, Facebook, ExternalLink } from 'lucide-react';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-marine-900 text-gray-300">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{/* Logo & Description */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="bg-gold-500 rounded-full p-2">
|
||||
<Anchor className="w-7 h-7 text-marine-900" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-serif font-bold text-xl">ACATM Agen</div>
|
||||
<div className="text-gold-400 text-sm">Anciens Combattants Troupes de Marine</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 leading-relaxed mb-4">
|
||||
Association des Anciens Combattants des Troupes de Marine et Anciens Télégraphistes Coloniaux d'Agen et du Lot-et-Garonne.
|
||||
Préserver la mémoire, honorer les sacrifices, transmettre les valeurs.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<a href="#" className="bg-marine-700 hover:bg-marine-600 p-2 rounded-lg transition-colors" aria-label="Facebook">
|
||||
<Facebook className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div>
|
||||
<h3 className="text-white font-serif text-lg font-semibold mb-4 pb-2 border-b border-marine-700">Navigation</h3>
|
||||
<ul className="space-y-2">
|
||||
{[
|
||||
{ label: 'Accueil', href: '/' },
|
||||
{ label: 'Notre Histoire', href: '/#histoire' },
|
||||
{ label: 'Musée en ligne', href: '/musee' },
|
||||
{ label: 'Activités', href: '/activites' },
|
||||
{ label: 'Contact', href: '/#contact' },
|
||||
].map(link => (
|
||||
<li key={link.href}>
|
||||
<Link href={link.href} className="hover:text-gold-400 transition-colors text-sm">
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div id="contact">
|
||||
<h3 className="text-white font-serif text-lg font-semibold mb-4 pb-2 border-b border-marine-700">Contact</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin className="w-4 h-4 text-gold-400 mt-1 flex-shrink-0" />
|
||||
<span className="text-sm">Maison des Associations<br />47000 Agen, Lot-et-Garonne</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Phone className="w-4 h-4 text-gold-400 flex-shrink-0" />
|
||||
<span className="text-sm">05 53 XX XX XX</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-gold-400 flex-shrink-0" />
|
||||
<a href="mailto:contact@acatm-agen.fr" className="text-sm hover:text-gold-400 transition-colors">
|
||||
contact@acatm-agen.fr
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-marine-700 mt-12 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<p className="text-gray-500 text-sm">
|
||||
© {new Date().getFullYear()} ACATM Agen — Tous droits réservés
|
||||
</p>
|
||||
<p className="text-gray-500 text-xs">
|
||||
Honneur · Fidélité · Patrie
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue