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();
|
||||
|
||||
return (
|
||||
<footer className="bg-primary-700 text-white">
|
||||
<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">
|
||||
|
|
@ -49,8 +49,8 @@ export default function Footer() {
|
|||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">
|
||||
Liens rapides
|
||||
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">
|
||||
NAVIGATION
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
|
|
@ -98,7 +98,7 @@ export default function Footer() {
|
|||
|
||||
{/* Legal */}
|
||||
<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">
|
||||
<li>
|
||||
<Link
|
||||
|
|
@ -145,7 +145,7 @@ export default function Footer() {
|
|||
|
||||
{/* Contact */}
|
||||
<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">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1">📍</span>
|
||||
|
|
@ -183,12 +183,17 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
{/* 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="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">
|
||||
© {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>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default function Header() {
|
|||
};
|
||||
|
||||
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 */}
|
||||
<div className="container mx-auto px-4">
|
||||
<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">
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
<Link
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
</Link>
|
||||
|
||||
{/* Participer with Dropdown - Green Button */}
|
||||
{/* Participer with Dropdown - Orange Button */}
|
||||
{isAuthenticated ? (
|
||||
<Link
|
||||
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>
|
||||
) : (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
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
|
||||
className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user