From c8fdd59553483b3f86d6ace187e9fcdf79e0f778 Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 20 Nov 2025 21:35:57 +0100 Subject: [PATCH] feat: enhance login/register pages with animated backgrounds and unified design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add animated tea icon backgrounds to login and register pages (35 icons) - Update color scheme from green to golden/beige theme matching header - Change header navigation text from "Loto à gagner" to "Lots à gagner" - Update form placeholders to lowercase French (prénom, nom, email, etc.) - Standardize Facebook login button style to match Google button - Update all focus rings and button colors to #d4a574 (golden) theme 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/globals.css | 11 +++-- app/login/page.tsx | 95 ++++++++++++++++++++++++++++++++------- app/page.tsx | 79 ++++++++++++++++----------------- app/register/page.tsx | 101 ++++++++++++++++++++++++++++++++++-------- components/Header.tsx | 4 +- 5 files changed, 207 insertions(+), 83 deletions(-) diff --git a/app/globals.css b/app/globals.css index 9350a78..69b9080 100644 --- a/app/globals.css +++ b/app/globals.css @@ -118,24 +118,25 @@ @keyframes fallDown { 0% { transform: translateY(-100vh) translateX(0px); - opacity: 0; - } - 10% { opacity: 0.5; } 20% { transform: translateY(-60vh) translateX(15px); + opacity: 0.5; } 40% { transform: translateY(-20vh) translateX(-10px); + opacity: 0.5; } 60% { transform: translateY(20vh) translateX(20px); + opacity: 0.5; } 80% { transform: translateY(60vh) translateX(-15px); + opacity: 0.5; } - 90% { + 95% { opacity: 0.5; } 100% { @@ -146,5 +147,7 @@ .animate-float-gentle { animation: fallDown 15s linear infinite; + opacity: 0; + animation-fill-mode: forwards; } } diff --git a/app/login/page.tsx b/app/login/page.tsx index 3a48ddd..06ed891 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -7,6 +7,7 @@ import { loginSchema, LoginFormData } from "@/lib/validations"; import { Input } from "@/components/ui/Input"; import Button from "@/components/Button"; import Link from "next/link"; +import Image from "next/image"; import { ROUTES } from "@/utils/constants"; import { GoogleLoginButton } from "@/components/GoogleLoginButton"; import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk"; @@ -20,6 +21,7 @@ export default function LoginPage() { const [isFacebookLoading, setIsFacebookLoading] = useState(false); const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false); const [showPassword, setShowPassword] = useState(false); + const [animationKey] = useState(Date.now()); const hasGoogleAuth = !!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID; const hasFacebookAuth = !!process.env.NEXT_PUBLIC_FACEBOOK_APP_ID; @@ -76,8 +78,69 @@ export default function LoginPage() { }; return ( -
-
+
+ {/* Background avec icônes de thé */} +
+ {/* Fond dégradé beige clair */} +
+ + {/* Icônes de thé dispersées avec animation de descente - 35 icônes */} +
+ {/* Ligne 1 - 5 icons */} + + + + + + + {/* Ligne 2 - 5 icons */} + + + + + + + {/* Ligne 3 - 5 icons */} + + + + + + + {/* Ligne 4 - 5 icons */} + + + + + + + {/* Ligne 5 - 5 icons */} + + + + + + + {/* Ligne 6 - 5 icons */} + + + + + + + {/* Ligne 7 - 5 icons */} + + + + + +
+ + {/* Overlay lumineux pour harmoniser */} +
+
+ +
{/* Title */}
@@ -92,7 +155,7 @@ export default function LoginPage() { {/* Tabs */}
- - + - - {isFacebookLoading ? "Connexion..." : "Continuer avec Facebook"} - - + Facebook + )}
)} @@ -156,9 +219,9 @@ export default function LoginPage() { {errors.email && (

{errors.email.message}

@@ -174,9 +237,9 @@ export default function LoginPage() { @@ -213,7 +276,7 @@ export default function LoginPage() {
Mot de passe oublié ? diff --git a/app/page.tsx b/app/page.tsx index bcb0346..bff6090 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,15 +7,10 @@ import CountdownTimer from "@/components/CountdownTimer"; import GamePeriod from "@/components/GamePeriod"; import GrandPrize from "@/components/GrandPrize"; import AboutContest from "@/components/AboutContest"; -import { useState, useEffect } from "react"; +import { useState } from "react"; export default function HomePage() { - const [animationKey, setAnimationKey] = useState(0); - - useEffect(() => { - // Redémarrer l'animation à chaque chargement de la page - setAnimationKey(Date.now()); - }, []); + const [animationKey] = useState(Date.now()); return (
@@ -27,53 +22,53 @@ export default function HomePage() { {/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
{/* Ligne 1 - 5 icons */} - - - - - + + + + + {/* Ligne 2 - 5 icons */} - - - - - + + + + + {/* Ligne 3 - 5 icons */} - - - - - + + + + + {/* Ligne 4 - 5 icons */} - - - - - + + + + + {/* Ligne 5 - 5 icons */} - - - - - + + + + + {/* Ligne 6 - 5 icons */} - - - - - + + + + + {/* Ligne 7 - 5 icons */} - - - - - + + + + +
{/* Overlay lumineux pour harmoniser */} diff --git a/app/register/page.tsx b/app/register/page.tsx index 311dcb3..3320e94 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useAuth } from "@/contexts/AuthContext"; import { registerSchema, RegisterFormData } from "@/lib/validations"; import Link from "next/link"; +import Image from "next/image"; import { ROUTES } from "@/utils/constants"; export default function RegisterPage() { @@ -12,6 +13,7 @@ export default function RegisterPage() { const [isSubmitting, setIsSubmitting] = useState(false); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const [animationKey] = useState(Date.now()); const { register, @@ -33,8 +35,69 @@ export default function RegisterPage() { }; return ( -
-
+
+ {/* Background avec icônes de thé */} +
+ {/* Fond dégradé beige clair */} +
+ + {/* Icônes de thé dispersées avec animation de descente - 35 icônes */} +
+ {/* Ligne 1 - 5 icons */} + + + + + + + {/* Ligne 2 - 5 icons */} + + + + + + + {/* Ligne 3 - 5 icons */} + + + + + + + {/* Ligne 4 - 5 icons */} + + + + + + + {/* Ligne 5 - 5 icons */} + + + + + + + {/* Ligne 6 - 5 icons */} + + + + + + + {/* Ligne 7 - 5 icons */} + + + + + +
+ + {/* Overlay lumineux pour harmoniser */} +
+
+ +
{/* Title */}
@@ -55,7 +118,7 @@ export default function RegisterPage() { > Connexion -
@@ -75,9 +138,9 @@ export default function RegisterPage() { {errors.firstName && (

{errors.firstName.message}

@@ -91,9 +154,9 @@ export default function RegisterPage() { {errors.lastName && (

{errors.lastName.message}

@@ -109,9 +172,9 @@ export default function RegisterPage() { {errors.email && (

{errors.email.message}

@@ -126,9 +189,9 @@ export default function RegisterPage() {

Optionnel - Format: 06 12 34 56 78

{errors.phone && ( @@ -145,9 +208,9 @@ export default function RegisterPage() { diff --git a/components/Header.tsx b/components/Header.tsx index e1b5be1..abc7019 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -65,7 +65,7 @@ export default function Header() { href={ROUTES.LOTS} className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors" > - Loto à gagner + Lots à gagner setIsMobileMenuOpen(false)} > - Gains + Lots