126 lines
6.2 KiB
TypeScript
126 lines
6.2 KiB
TypeScript
import React from 'react';
|
|
import { URLS, SITE_CONFIG } from '@/lib/config/constants';
|
|
import { BookOpen, GitBranch, Gamepad2, Cloud, Rocket, Heart } from 'lucide-react';
|
|
import { useTranslation } from '@/lib/hooks/useTranslation';
|
|
|
|
export const Footer: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<footer className="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Contenu principal du footer */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
|
|
|
|
{/* Marque et description */}
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<span className="text-white font-bold text-xl">B</span>
|
|
</div>
|
|
<span className="text-white font-bold text-2xl">
|
|
{SITE_CONFIG.name}
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{t.footer.description}
|
|
</p>
|
|
{/* Réseaux sociaux */}
|
|
<div className="flex items-center gap-4">
|
|
<a
|
|
href={URLS.social.discord}
|
|
className="w-12 h-12 bg-gray-800 hover:bg-blue-600 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 shadow-lg hover:shadow-blue-500/25"
|
|
aria-label="Discord"
|
|
>
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href={URLS.contact.email}
|
|
className="w-12 h-12 bg-gray-800 hover:bg-blue-600 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 shadow-lg hover:shadow-blue-500/25"
|
|
aria-label="Email"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Liens rapides services */}
|
|
<div className="space-y-6">
|
|
<h3 className="text-white font-bold text-lg mb-6">{t.footer.ourServices}</h3>
|
|
<div className="space-y-4">
|
|
<a
|
|
href={URLS.services.wiki}
|
|
className="flex items-center text-gray-300 hover:text-blue-400 transition-colors duration-200 hover:translate-x-2 transform"
|
|
>
|
|
<BookOpen className="w-5 h-5 mr-3" strokeWidth={2} />
|
|
Wiki
|
|
</a>
|
|
<a
|
|
href={URLS.services.gitea}
|
|
className="flex items-center text-gray-300 hover:text-blue-400 transition-colors duration-200 hover:translate-x-2 transform"
|
|
>
|
|
<GitBranch className="w-5 h-5 mr-3" strokeWidth={2} />
|
|
Gitea
|
|
</a>
|
|
<a
|
|
href={URLS.services.panel}
|
|
className="flex items-center text-gray-300 hover:text-blue-400 transition-colors duration-200 hover:translate-x-2 transform"
|
|
>
|
|
<Gamepad2 className="w-5 h-5 mr-3" strokeWidth={2} />
|
|
{t.footer.gamingPanel}
|
|
</a>
|
|
<a
|
|
href={URLS.services.opencloud}
|
|
className="flex items-center text-gray-300 hover:text-blue-400 transition-colors duration-200 hover:translate-x-2 transform"
|
|
>
|
|
<Cloud className="w-5 h-5 mr-3" strokeWidth={2} />
|
|
OpenCloud
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informations communauté */}
|
|
<div className="space-y-6">
|
|
<h3 className="text-white font-bold text-lg mb-6">{t.footer.community}</h3>
|
|
<div className="space-y-4">
|
|
<div className="bg-gradient-to-r from-blue-900/30 to-blue-800/30 rounded-xl p-6 border border-blue-800/30">
|
|
<h4 className="text-blue-400 font-semibold mb-2">{t.footer.joinAssociation}</h4>
|
|
<p className="text-gray-300 text-sm mb-4">
|
|
{t.footer.joinDescription}
|
|
</p>
|
|
<a
|
|
href={URLS.social.discord}
|
|
className="inline-flex items-center text-blue-400 hover:text-blue-300 text-sm font-semibold transition-colors duration-200"
|
|
>
|
|
<Rocket className="w-4 h-4 mr-2" strokeWidth={2} />
|
|
{t.footer.joinNow}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Barre du bas */}
|
|
<div className="flex flex-col md:flex-row justify-between items-center gap-6 pt-8 border-t border-gray-800">
|
|
<p className="text-gray-400 text-sm text-center md:text-left">
|
|
© 2025 {SITE_CONFIG.name}. {t.footer.copyright}
|
|
</p>
|
|
<div className="flex items-center gap-6 text-sm text-gray-400">
|
|
<span className="flex items-center">
|
|
{t.footer.madeWith}
|
|
<Heart className="text-red-500 mx-1 w-4 h-4" strokeWidth={2} fill="currentColor" />
|
|
{t.footer.by}
|
|
</span>
|
|
<div className="w-1 h-1 bg-gray-600 rounded-full"></div>
|
|
<span className="text-blue-400 font-semibold">EPITA 2025</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|