77 lines
3.8 KiB
TypeScript
77 lines
3.8 KiB
TypeScript
|
import { Instagram, Facebook, Youtube, Mail } from 'lucide-react';
|
||
|
|
import { companyInfo } from '../data';
|
||
|
|
|
||
|
|
export default function Footer() {
|
||
|
|
return (
|
||
|
|
<footer className="bg-night text-cloud py-16 border-t border-cloud/10">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8">
|
||
|
|
|
||
|
|
{/* Brand */}
|
||
|
|
<div className="col-span-1 md:col-span-2">
|
||
|
|
<div className="flex items-center gap-3 mb-6">
|
||
|
|
<div className="w-10 h-10 rounded-full bg-cloud flex items-center justify-center overflow-hidden">
|
||
|
|
<span className="text-night font-serif italic text-xl">A</span>
|
||
|
|
</div>
|
||
|
|
<span className="font-serif text-2xl font-medium tracking-wide text-cloud">
|
||
|
|
AspiRêves
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="font-sans text-cloud/60 max-w-sm leading-relaxed mb-8">
|
||
|
|
{companyInfo.description}
|
||
|
|
</p>
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
|
||
|
|
<span className="sr-only">Instagram</span>
|
||
|
|
<Instagram size={18} />
|
||
|
|
</a>
|
||
|
|
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
|
||
|
|
<span className="sr-only">Facebook</span>
|
||
|
|
<Facebook size={18} />
|
||
|
|
</a>
|
||
|
|
<a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
|
||
|
|
<span className="sr-only">YouTube</span>
|
||
|
|
<Youtube size={18} />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Contact */}
|
||
|
|
<div>
|
||
|
|
<h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Contact</h4>
|
||
|
|
<ul className="space-y-4 font-sans text-cloud/80">
|
||
|
|
<li>
|
||
|
|
<span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Professionnels</span>
|
||
|
|
<a href={`mailto:${companyInfo.emails.pro}`} className="hover:text-star transition-colors flex items-center gap-2">
|
||
|
|
<Mail size={14} />
|
||
|
|
{companyInfo.emails.pro}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Ateliers Théâtre</span>
|
||
|
|
<a href={`mailto:${companyInfo.emails.ateliers}`} className="hover:text-star transition-colors flex items-center gap-2">
|
||
|
|
<Mail size={14} />
|
||
|
|
{companyInfo.emails.ateliers}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Legal */}
|
||
|
|
<div>
|
||
|
|
<h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Informations</h4>
|
||
|
|
<ul className="space-y-3 font-sans text-cloud/80 text-sm">
|
||
|
|
<li><a href="#" className="hover:text-cloud transition-colors">Mentions légales</a></li>
|
||
|
|
<li><a href="#" className="hover:text-cloud transition-colors">Politique de confidentialité</a></li>
|
||
|
|
<li className="pt-4 text-cloud/40">
|
||
|
|
© {new Date().getFullYear()} Compagnie AspiRêves. Tous droits réservés.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
);
|
||
|
|
}
|