From 2e0beec33838209067f6cae7245b9dfb4243e332 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane.baali99@gmail.com>
Date: Tue, 2 Dec 2025 00:38:06 +0100
Subject: [PATCH] feat: update homepage and login page UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Homepage: new title styling, centered hero section, animated button
- Homepage: removed countdown timer, added white background to sections
- Login page: moved social buttons below forgot password link

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/login/page.tsx            | 78 +++++++++++++++++------------------
 app/page.tsx                  | 35 ++++++++--------
 components/CountdownTimer.tsx | 13 ------
 3 files changed, 56 insertions(+), 70 deletions(-)

diff --git a/app/login/page.tsx b/app/login/page.tsx
index e2489db..391ebc1 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -111,45 +111,6 @@ export default function LoginPage() {
           {/* Form Container */}
           <div className="p-8">
 
-            {/* Social Login Buttons */}
-            {(hasGoogleAuth || hasFacebookAuth) && (
-              <div className="space-y-3 mb-6">
-                {hasGoogleAuth && (
-                  <GoogleLoginButton fullWidth />
-                )}
-
-                {hasFacebookAuth && (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleFacebookLogin}
-                    disabled={isFacebookLoading || !isFacebookSDKLoaded}
-                    isLoading={isFacebookLoading}
-                    fullWidth
-                  >
-                    <svg className="w-5 h-5 mr-2" fill="#1877F2" 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>
-                    Facebook
-                  </Button>
-                )}
-              </div>
-            )}
-
-            {/* Divider */}
-            {(hasGoogleAuth || hasFacebookAuth) && (
-              <div className="relative mb-6">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-gray-300" />
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-white text-gray-500">
-                    Ou avec votre email
-                  </span>
-                </div>
-              </div>
-            )}
-
             {/* Login Form */}
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
 
@@ -225,6 +186,45 @@ export default function LoginPage() {
               </div>
             </form>
 
+            {/* Divider */}
+            {(hasGoogleAuth || hasFacebookAuth) && (
+              <div className="relative my-6">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300" />
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-4 bg-white text-gray-500">
+                    Ou continuer avec
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {/* Social Login Buttons */}
+            {(hasGoogleAuth || hasFacebookAuth) && (
+              <div className="space-y-3">
+                {hasGoogleAuth && (
+                  <GoogleLoginButton fullWidth />
+                )}
+
+                {hasFacebookAuth && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleFacebookLogin}
+                    disabled={isFacebookLoading || !isFacebookSDKLoaded}
+                    isLoading={isFacebookLoading}
+                    fullWidth
+                  >
+                    <svg className="w-5 h-5 mr-2" fill="#1877F2" 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>
+                    Facebook
+                  </Button>
+                )}
+              </div>
+            )}
+
           </div>
         </div>
       </div>
diff --git a/app/page.tsx b/app/page.tsx
index dd80b01..12f8c3e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import Button from "@/components/Button";
-import CountdownTimer from "@/components/CountdownTimer";
 import GamePeriod from "@/components/GamePeriod";
 import GrandPrize from "@/components/GrandPrize";
 import AboutContest from "@/components/AboutContest";
@@ -30,24 +29,30 @@ export default function HomePage() {
       <TeaIconsBackground animationKey={animationKey} />
 
       {/* Hero Section - Bannière principale */}
-      <section className="relative min-h-[600px] pt-32 pb-24 overflow-hidden">
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
 
         <div className="w-full relative z-10">
           <div className="w-full text-center px-4">
-            <h1 className="text-5xl md:text-7xl font-bold text-[#5a5a4e] mb-6 leading-tight drop-shadow-sm">
-              Jeu Concours Thé Tip Top<br />
-              <span className="text-[#d4a574]">Nice</span>
+            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#d4a574] mb-8 leading-tight drop-shadow-sm tracking-wide">
+              Jeu Concours - Thé Tip Top
             </h1>
-            <p className="text-xl md:text-2xl text-[#6a6a5e] mb-8 leading-relaxed max-w-4xl mx-auto">
-              À l'occasion de l'ouverture de notre 10<sup>ème</sup> boutique de thé premium à Nice,<br />
-              participez à notre concours et gagnez des thés et accessoires exclusifs !
+            <p className="text-5xl md:text-6xl lg:text-7xl font-semibold text-[#6a6a5e] mb-10 leading-relaxed tracking-wide">
+              Célébrons l'ouverture de notre 10<sup>ème</sup> boutique à <span className="text-[#d4a574]">Nice</span>
+            </p>
+            <p className="text-xl md:text-2xl lg:text-3xl text-[#7a7a6e] mb-16 leading-relaxed tracking-wide">
+              Participez à notre concours - 100% des participants gagnent un lot !
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
               <Link href={isAuthenticated ? ROUTES.GAME : "/register"}>
-                <button className="bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold text-lg px-12 py-5 rounded-full shadow-2xl transition-all w-full sm:w-auto hover:scale-105">
-                  Jouer maintenant
-                </button>
+                <div className="relative inline-block">
+                  {/* Anneau qui pulse autour du bouton */}
+                  <span className="absolute inset-0 rounded-full border-4 border-[#d4a574] animate-ping opacity-60"></span>
+
+                  <button className="relative bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold text-xl md:text-2xl px-16 py-6 md:px-20 md:py-7 rounded-full shadow-[0_0_25px_rgba(212,165,116,0.8)] hover:shadow-[0_0_40px_rgba(212,165,116,1)] transition-all duration-300 hover:scale-105">
+                    Jouer maintenant
+                  </button>
+                </div>
               </Link>
             </div>
           </div>
@@ -55,15 +60,9 @@ export default function HomePage() {
       </section>
 
       {/* Game Period & Countdown Section */}
-      <section className="py-20 bg-transparent">
+      <section className="py-20 bg-white/60 backdrop-blur-sm">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto">
-            {/* Countdown Timer */}
-            <CountdownTimer
-              endDate={new Date('2025-12-31T23:59:59')}
-              title="Fin du concours dans"
-            />
-
             {/* Game Period Cards */}
             <GamePeriod />
 
diff --git a/components/CountdownTimer.tsx b/components/CountdownTimer.tsx
index 231b2b6..9d9330d 100644
--- a/components/CountdownTimer.tsx
+++ b/components/CountdownTimer.tsx
@@ -92,19 +92,6 @@ export default function CountdownTimer({ endDate, title = "Période de jeu" }: C
           </div>
         </div>
 
-        {/* Barre de progression */}
-        <div className="relative">
-          <div className="w-full bg-[#e5e4dc] rounded-full h-3 overflow-hidden">
-            <div
-              className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] h-3 rounded-full transition-all duration-1000 ease-out"
-              style={{ width: `${progress}%` }}
-            ></div>
-          </div>
-          <div className="flex justify-between mt-2 text-sm text-[#8a8a7a]">
-            <span>Début du concours</span>
-            <span className="font-semibold">{Math.round(progress)}% écoulé</span>
-          </div>
-        </div>
       </div>
     </div>
   );