the-tip-top-frontend/components/Footer.tsx
soufiane 9d1bb2cfe5 refactor: simplify footer by removing trust badges and adding student notice
Removed the trust/marketing badges (paiement sécurisé, livraison rapide,
certifié RGPD) from the footer and replaced them with a simple "Site étudiant"
notice centered below the copyright. This makes it clear the site is for
educational purposes.

Changes:
- Removed 🔒 Paiement sécurisé badge
- Removed 📦 Livraison rapide badge
- Removed ✓ Certifié RGPD badge
- Added "Site étudiant" notice centered in footer
- Simplified footer layout to center-aligned

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 16:45:13 +01:00

202 lines
7.9 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use client';
import Link from 'next/link';
import Logo from './Logo';
import { ROUTES } from '@/utils/constants';
export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] text-white">
{/* Main Footer */}
<div className="container mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Company Info */}
<div>
<div className="mb-4">
<Logo variant="white" size="md" showText={true} />
</div>
<h3 className="text-2xl font-bold text-[#f59e0b] mb-3">Thé Tip Top</h3>
<p className="text-sm text-white/80 mb-4">
Découvrez nos thés premium bio et artisanaux. Participez à notre grand
jeu-concours 100% gagnant et tentez de remporter nos magnifiques lots !
</p>
<div className="flex gap-4">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="text-white/80 hover:text-white transition-colors"
aria-label="Facebook"
>
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="text-white/80 hover:text-white transition-colors"
aria-label="Instagram"
>
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">
NAVIGATION
</h3>
<ul className="space-y-2">
<li>
<Link
href={ROUTES.HOME}
className="text-sm text-white/80 hover:text-white transition-colors"
>
Accueil
</Link>
</li>
<li>
<Link
href={ROUTES.GAME}
className="text-sm text-white/80 hover:text-white transition-colors"
>
Participer au jeu
</Link>
</li>
<li>
<Link
href="/about"
className="text-sm text-white/80 hover:text-white transition-colors"
>
À propos
</Link>
</li>
<li>
<Link
href="/contact"
className="text-sm text-white/80 hover:text-white transition-colors"
>
Contact
</Link>
</li>
<li>
<Link
href="/faq"
className="text-sm text-white/80 hover:text-white transition-colors"
>
FAQ
</Link>
</li>
</ul>
</div>
{/* Legal */}
<div>
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">LÉGAL</h3>
<ul className="space-y-2">
<li>
<Link
href="/terms"
className="text-sm text-white/80 hover:text-white transition-colors"
>
Conditions d'utilisation
</Link>
</li>
<li>
<Link
href="/privacy"
className="text-sm text-white/80 hover:text-white transition-colors"
>
Politique de confidentialité
</Link>
</li>
<li>
<Link
href="/rules"
className="text-sm text-white/80 hover:text-white transition-colors"
>
Règlement du jeu
</Link>
</li>
<li>
<Link
href="/cookies"
className="text-sm text-white/80 hover:text-white transition-colors"
>
Gestion des cookies
</Link>
</li>
<li>
<Link
href="/legal"
className="text-sm text-white/80 hover:text-white transition-colors"
>
Mentions légales
</Link>
</li>
</ul>
</div>
{/* Contact */}
<div>
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">CONTACT</h3>
<ul className="space-y-3 text-sm text-white/80">
<li className="flex items-start gap-2">
<span className="mt-1">📍</span>
<span>
18 Avenue Thiers
<br />
06000 Nice, France
</span>
</li>
<li className="flex items-center gap-2">
<span>📞</span>
<a
href="tel:+33123456789"
className="hover:text-white transition-colors"
>
01 23 45 67 89
</a>
</li>
<li className="flex items-center gap-2">
<span></span>
<a
href="mailto:contact@thetiptop.fr"
className="hover:text-white transition-colors"
>
contact@thetiptop.fr
</a>
</li>
<li className="flex items-center gap-2">
<span>🕐</span>
<span>Lun - Sam: 9h - 19h</span>
</li>
</ul>
</div>
</div>
</div>
{/* Bottom Bar */}
<div className="border-t border-white/10">
<div className="container mx-auto px-4 py-6">
<div className="flex flex-col items-center justify-center gap-2 text-sm">
<p className="text-white/80">
© {currentYear} Thé Tip Top. Tous droits réservés.
</p>
<p className="text-white/60 text-xs">
Site étudiant
</p>
</div>
</div>
</div>
</footer>
);
}