the-tip-top-frontend/components/Footer.tsx
soufiane 7febb137e9 feat: add SonarQube integration, cookie consent, and authentication improvements
- Add SonarQube configuration for code quality analysis
  - sonar-project.properties with TypeScript/Next.js settings
  - .sonarignore to exclude build artifacts and dependencies
  - npm run sonar script
  - Jenkins pipeline stages for SonarQube analysis and quality gate

- Implement cookie consent banner
  - New CookieConsent component with matching site colors
  - localStorage persistence for user choice
  - Accept/Reject buttons with proper styling
  - Link to cookies policy page

- Add strict authentication protection for game page
  - Redirect unauthenticated users to login from /jeux
  - Clean up redundant auth checks and UI elements
  - Preserve redirect parameter for post-login navigation

- Implement smart navigation with auth-aware redirects
  - "Jouer maintenant" button redirects based on auth status
  - "Participer au jeu" footer link with conditional routing
  - Authenticated users go to /jeux, others to /register

- UI improvements and cleanup
  - Remove "Voir les lots" button from homepage
  - Remove "Gestion des cookies" from footer
  - Remove "À propos" from footer navigation
  - Consistent design across components

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 01:23:50 +01:00

195 lines
8.6 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';
import { useAuth } from '@/contexts/AuthContext';
export default function Footer() {
const currentYear = new Date().getFullYear();
const { isAuthenticated } = useAuth();
return (
<footer className="bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] text-[#5a5a4e] border-t-2 border-[#e5e4dc]">
{/* 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="default" size="md" showText={true} />
</div>
<p className="text-sm text-[#8a8a7a] 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-[#8a8a7a] hover:text-[#d4a574] 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-[#8a8a7a] hover:text-[#d4a574] 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>
<a
href="https://pinterest.com"
target="_blank"
rel="noopener noreferrer"
className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
aria-label="Pinterest"
>
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" />
</svg>
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">
NAVIGATION
</h3>
<ul className="space-y-2">
<li>
<Link
href={ROUTES.HOME}
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Accueil
</Link>
</li>
<li>
<Link
href={isAuthenticated ? ROUTES.GAME : ROUTES.REGISTER}
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Participer au jeu
</Link>
</li>
<li>
<Link
href="/contact"
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Contact
</Link>
</li>
<li>
<Link
href="/faq"
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
FAQ
</Link>
</li>
</ul>
</div>
{/* Legal */}
<div>
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">LÉGAL</h3>
<ul className="space-y-2">
<li>
<Link
href="/terms"
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Conditions d'utilisation
</Link>
</li>
<li>
<Link
href="/privacy"
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Politique de confidentialité
</Link>
</li>
<li>
<Link
href="/rules"
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Règlement du jeu
</Link>
</li>
<li>
<Link
href="/legal"
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
>
Mentions légales
</Link>
</li>
</ul>
</div>
{/* Contact */}
<div>
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">CONTACT</h3>
<ul className="space-y-3 text-sm text-[#8a8a7a]">
<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-[#d4a574] 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-[#d4a574] 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-[#e5e4dc]">
<div className="container mx-auto px-4 py-6">
<div className="flex items-center justify-center text-sm">
<p className="text-[#8a8a7a]">
© {currentYear} Tous droits réservés. <span className="text-[#a0a098] text-xs">Site étudiant</span>
</p>
</div>
</div>
</div>
</footer>
);
}