the-tip-top-frontend/components/Footer.tsx
soufiane 0ebcf80155 refactor: remove final CTA section and enhance footer branding
- Removed "Prêt à tenter votre chance?" final CTA section from homepage
- Added "Thé Tip Top" title in orange/gold to footer
- Updated footer description text
- Logo already present in header and footer

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 23:59:38 +01:00

204 lines
8.0 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 bg-[#1a4d2e]/50">
<div className="container mx-auto px-4 py-6">
<div className="flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
<p className="text-white/80">
© {currentYear} Thé Tip Top. Tous droits réservés.
</p>
<div className="flex gap-4 text-white/60 text-xs">
<span>🔒 Paiement sécurisé</span>
<span>📦 Livraison rapide</span>
<span> Certifié RGPD</span>
</div>
</div>
</div>
</div>
</footer>
);
}