Correction des couleurs de textes et de fond
This commit is contained in:
Alexis SANOGO
@@ -1,11 +1,11 @@
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
|
||||
|
||||
export default function Footer() {
|
||||
const { pathname } = useLocation()
|
||||
const { user } = useAuth()
|
||||
const isLoggedIn = !!user
|
||||
|
||||
|
||||
function FooterLink({ to, children, className=''}) {
|
||||
return pathname === to ? (
|
||||
<span className={className}>{children}</span>
|
||||
@@ -16,13 +16,13 @@ export default function Footer() {
|
||||
)
|
||||
}
|
||||
return (
|
||||
<footer className="bg-green-900 text-white">
|
||||
|
||||
|
||||
<footer className="bg-[#006B6B] text-white">
|
||||
|
||||
|
||||
{/* Partie principale */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-10 grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Logo */}
|
||||
<div>
|
||||
<FooterLink to='/accueil'>
|
||||
@@ -30,36 +30,36 @@ export default function Footer() {
|
||||
Thé Tip Top
|
||||
</h3>
|
||||
</FooterLink>
|
||||
|
||||
<p className="text-green-100 text-sm leading-relaxed">
|
||||
|
||||
<p className="text-teal-100 text-sm leading-relaxed">
|
||||
Participez au jeu-concours Thé Tip Top et tentez de gagner
|
||||
des lots gourmands autour du thé.
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Navigation */}
|
||||
<div>
|
||||
|
||||
|
||||
<h3 className="text-lg font-semibold mb-5">
|
||||
Navigation
|
||||
</h3>
|
||||
|
||||
|
||||
<ul className="space-y-3 text-green-100">
|
||||
|
||||
|
||||
|
||||
<ul className="space-y-3 text-teal-100">
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/accueil"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Accueil
|
||||
</FooterLink>
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/regles-jeu"
|
||||
@@ -68,9 +68,9 @@ export default function Footer() {
|
||||
Règles du jeu
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/saisir-code-unique"
|
||||
className="hover:text-white transition"
|
||||
@@ -78,9 +78,9 @@ export default function Footer() {
|
||||
Tester mon code
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
{ !isLoggedIn && (
|
||||
<li>
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/inscription"
|
||||
className="hover:text-white transition"
|
||||
@@ -89,24 +89,24 @@ export default function Footer() {
|
||||
</FooterLink>
|
||||
</li>
|
||||
)}
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Informations légales */}
|
||||
<div>
|
||||
|
||||
|
||||
<h3 className="text-lg font-semibold mb-5">
|
||||
Informations
|
||||
</h3>
|
||||
|
||||
|
||||
<ul className="space-y-3 text-green-100">
|
||||
|
||||
|
||||
|
||||
<ul className="space-y-3 text-teal-100">
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/mentions-legales"
|
||||
@@ -115,8 +115,8 @@ export default function Footer() {
|
||||
Mentions légales
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/confidentialite"
|
||||
@@ -125,9 +125,9 @@ export default function Footer() {
|
||||
Politique de confidentialité
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/contact"
|
||||
className="hover:text-white transition"
|
||||
@@ -135,7 +135,7 @@ export default function Footer() {
|
||||
Contact
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<FooterLink
|
||||
to="/sitemap"
|
||||
@@ -144,59 +144,59 @@ export default function Footer() {
|
||||
Plan du site
|
||||
</FooterLink>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
|
||||
|
||||
<h3 className="text-lg font-semibold mb-5">
|
||||
Contact
|
||||
</h3>
|
||||
|
||||
<p className="text-green-100 text-sm mb-3">
|
||||
|
||||
<p className="text-teal-100 text-sm mb-3">
|
||||
Une question sur le jeu ?
|
||||
</p>
|
||||
|
||||
<a href="tel:+33184802034" className="block mt-2 font-medium hover:text-green-300">
|
||||
|
||||
<a href="tel:+33184802034" className="block mt-2 font-medium hover:text-teal-300">
|
||||
01 84 80 20 34
|
||||
</a>
|
||||
|
||||
<a href="mailto:contact@thetiptop.fr" className="inline-block mt-3 font-medium hover:text-green-300">
|
||||
|
||||
<a href="mailto:contact@thetiptop.fr" className="inline-block mt-3 font-medium hover:text-teal-300">
|
||||
contact@thetiptop.fr
|
||||
</a>
|
||||
|
||||
<p className="text-green-100 text-sm mt-2">
|
||||
|
||||
<p className="text-teal-100 text-sm mt-2">
|
||||
18 rue Léon Frot
|
||||
<br />
|
||||
75011 Paris, France
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Barre basse */}
|
||||
|
||||
<div className="border-t border-green-800">
|
||||
|
||||
|
||||
<div className="border-t border-teal-800">
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-5 flex flex-col md:flex-row justify-between items-center gap-3">
|
||||
|
||||
|
||||
<p className="text-green-200 text-sm">
|
||||
|
||||
|
||||
<p className="text-teal-200 text-sm">
|
||||
© {new Date().getFullYear()} Thé Tip Top. Tous droits réservés.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-5 text-sm text-green-200">
|
||||
|
||||
<div className="flex gap-5 text-sm text-teal-200">
|
||||
<a
|
||||
href="https://www.facebook.com/profile.php?id=61590449280854"
|
||||
target="_blank"
|
||||
@@ -205,8 +205,8 @@ export default function Footer() {
|
||||
>
|
||||
Facebook
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<a
|
||||
href="https://www.instagram.com/thetiptop.gp4?igsh=MXZ3YzZ0d3dkazBpeg%3D%3D&utm_source=qr"
|
||||
target="_blank"
|
||||
@@ -215,8 +215,8 @@ export default function Footer() {
|
||||
>
|
||||
Instagram
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<a
|
||||
href="https://www.tiktok.com/@thetiptop4"
|
||||
target="_blank"
|
||||
@@ -225,15 +225,15 @@ export default function Footer() {
|
||||
>
|
||||
TikTok
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -46,7 +46,7 @@ export default function Header() {
|
||||
key={link.to}
|
||||
to={link.to}
|
||||
className={`font-medium transition-colors ${
|
||||
pathname === link.to ? 'text-green-700' : 'text-gray-700 hover:text-green-700'
|
||||
pathname === link.to ? 'text-[#006B6B]' : 'text-gray-700 hover:text-[#006B6B]'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
@@ -55,7 +55,7 @@ export default function Header() {
|
||||
|
||||
{isLoggedIn ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to="/profile" className="flex items-center gap-2 text-sm text-gray-700 hover:text-green-700 font-medium transition-colors">
|
||||
<Link to="/profile" className="flex items-center gap-2 text-sm text-gray-700 hover:text-[#006B6B] font-medium transition-colors">
|
||||
<div className="w-8 h-8 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-xs font-bold">
|
||||
{initials}
|
||||
</div>
|
||||
@@ -70,10 +70,10 @@ export default function Header() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
|
||||
<Link to="/connexion" className="bg-[#006B6B] text-white px-4 py-2 rounded-lg hover:bg-[#005a5a] transition-colors text-sm">
|
||||
Connexion
|
||||
</Link>
|
||||
<Link to="/inscription" className="border border-green-700 text-green-700 px-4 py-2 rounded-lg hover:bg-green-50 transition-colors text-sm">
|
||||
<Link to="/inscription" className="border border-[#006B6B] text-[#006B6B] px-4 py-2 rounded-lg hover:bg-[#006B6B] hover:text-white transition-colors text-sm">
|
||||
Inscription
|
||||
</Link>
|
||||
</div>
|
||||
@@ -101,7 +101,7 @@ export default function Header() {
|
||||
to={link.to}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className={`block py-3 font-medium border-b border-gray-50 ${
|
||||
pathname === link.to ? 'text-green-700' : 'text-gray-700'
|
||||
pathname === link.to ? 'text-[#006B6B]' : 'text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
@@ -130,14 +130,14 @@ export default function Header() {
|
||||
<Link
|
||||
to="/connexion"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
|
||||
className="w-full text-center bg-[#006B6B] text-white px-4 py-2.5 rounded-lg hover:bg-[#005a5a] transition-colors text-sm font-medium"
|
||||
>
|
||||
Connexion
|
||||
</Link>
|
||||
<Link
|
||||
to="/inscription"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
|
||||
className="w-full text-center border border-[#006B6B] text-[#006B6B] px-4 py-2.5 rounded-lg hover:bg-[#006B6B] hover:text-white transition-colors text-sm font-medium"
|
||||
>
|
||||
Inscription
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user