feat: redesign header and footer with green/orange theme
Updated Header: - Dark green gradient background (#1a4d2e to #2d5a3d) - White text with orange hover (#f59e0b) - Orange "Participer" button instead of green - Updated menu labels to match homepage design Updated Footer: - Dark green gradient background matching header - Orange section titles (#f59e0b) - Added trust badges (Paiement sécurisé, Livraison rapide, RGPD) - Consistent branding with homepage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
c0d67ebc06
commit
6d95f02dee
|
|
@ -8,7 +8,7 @@ export default function Footer() {
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className="bg-primary-700 text-white">
|
<footer className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] text-white">
|
||||||
{/* Main Footer */}
|
{/* Main Footer */}
|
||||||
<div className="container mx-auto px-4 py-12">
|
<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">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
|
@ -49,8 +49,8 @@ export default function Footer() {
|
||||||
|
|
||||||
{/* Quick Links */}
|
{/* Quick Links */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-white mb-4">
|
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">
|
||||||
Liens rapides
|
NAVIGATION
|
||||||
</h3>
|
</h3>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -98,7 +98,7 @@ export default function Footer() {
|
||||||
|
|
||||||
{/* Legal */}
|
{/* Legal */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-white mb-4">Légal</h3>
|
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">LÉGAL</h3>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -145,7 +145,7 @@ export default function Footer() {
|
||||||
|
|
||||||
{/* Contact */}
|
{/* Contact */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-white mb-4">Contact</h3>
|
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">CONTACT</h3>
|
||||||
<ul className="space-y-3 text-sm text-white/80">
|
<ul className="space-y-3 text-sm text-white/80">
|
||||||
<li className="flex items-start gap-2">
|
<li className="flex items-start gap-2">
|
||||||
<span className="mt-1">📍</span>
|
<span className="mt-1">📍</span>
|
||||||
|
|
@ -183,12 +183,17 @@ export default function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Bar */}
|
{/* Bottom Bar */}
|
||||||
<div className="border-t border-white/10 bg-primary-700">
|
<div className="border-t border-white/10 bg-[#1a4d2e]/50">
|
||||||
<div className="container mx-auto px-4 py-6">
|
<div className="container mx-auto px-4 py-6">
|
||||||
<div className="flex items-center justify-center text-sm">
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
|
||||||
<p className="text-white/80">
|
<p className="text-white/80">
|
||||||
© {currentYear} Thé Tip Top. Tous droits réservés.
|
© {currentYear} Thé Tip Top. Tous droits réservés.
|
||||||
</p>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ export default function Header() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
|
<header className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] sticky top-0 z-50 shadow-lg">
|
||||||
{/* Main Header */}
|
{/* Main Header */}
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="flex items-center justify-between h-18">
|
<div className="flex items-center justify-between h-18">
|
||||||
|
|
@ -57,50 +57,56 @@ export default function Header() {
|
||||||
<nav className="hidden md:flex items-center gap-6">
|
<nav className="hidden md:flex items-center gap-6">
|
||||||
<Link
|
<Link
|
||||||
href={ROUTES.HOME}
|
href={ROUTES.HOME}
|
||||||
className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
|
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Accueil
|
Accueil
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href={ROUTES.GAME}
|
href={ROUTES.GAME}
|
||||||
className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
|
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Jeu
|
Loto à gagner
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href={ROUTES.LOTS}
|
href={ROUTES.LOTS}
|
||||||
className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
|
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Gains
|
Règlement
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/faq"
|
||||||
|
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||||
|
>
|
||||||
|
FAQ
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/about"
|
href="/about"
|
||||||
className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
|
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||||
>
|
>
|
||||||
À propos
|
Gagnants
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/contact"
|
href="/contact"
|
||||||
className="text-gray-700 hover:text-primary-600 font-medium transition-colors"
|
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Contact
|
Contact
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Participer with Dropdown - Green Button */}
|
{/* Participer with Dropdown - Orange Button */}
|
||||||
{isAuthenticated ? (
|
{isAuthenticated ? (
|
||||||
<Link
|
<Link
|
||||||
href={ROUTES.GAME}
|
href={ROUTES.GAME}
|
||||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg transition-all hover:shadow-lg"
|
className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl"
|
||||||
>
|
>
|
||||||
🎯 Participer
|
Participer
|
||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative" ref={dropdownRef}>
|
<div className="relative" ref={dropdownRef}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
|
onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
|
||||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg transition-all hover:shadow-lg flex items-center gap-2"
|
className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl flex items-center gap-2"
|
||||||
>
|
>
|
||||||
🎯 Participer
|
Participer
|
||||||
<svg
|
<svg
|
||||||
className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
|
className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
|
||||||
fill="none"
|
fill="none"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user