Feat welcom page

.gitignore

@@ -175,3 +175,5 @@ output.css
 **/src/SmartContract/dump.rdb
 make/scripts/certs/certs
 .venv
+*.ai
+docs/welcomPage.jpg

srcs/nginx/src/App.tsx

@@ -3,11 +3,13 @@ import { ProfilePage } from './pages/ProfilePage';
 import { LoginPage } from './pages/LoginRegisterPage';
 import { useAuth } from './providers/AuthProvider';
 import { AnimationPage } from './pages/AnimationPage';
+import { WelcomePage } from './pages/WelcomePage';
 
 const GuestRoute = ({ children }: { children: React.ReactNode }) => {
   const { user, isLoggedIn } = useAuth();
   if (user && isLoggedIn) {
-    return <Navigate to={`/profile/${user.username}`} replace />;
+    return <Navigate to={`/welcome`} replace />;
+    // return <Navigate to={`/profile/${user.username}`} replace />;
   }
   return children;
 };
@@ -24,22 +26,16 @@ export const App = () => {
     <main className="h-screen bd-slate-950 text-slate-100">
       <Routes>
         <Route path="/" element={<AnimationPage />}></Route>
-        <Route
-          path="/signup"
-          element={
-            <GuestRoute>
-              <LoginPage isRegister={true} />
-            </GuestRoute>
-          }
-        />
-        <Route
+
+        <Route path="/welcome" element={<WelcomePage />} />
+        {/* <Route
           path="/login"
           element={
             <GuestRoute>
               <LoginPage isRegister={false} />
             </GuestRoute>
           }
-        />
+        /> */}
         <Route path="/me" element={<MeRedirect />}></Route>
         <Route path="/profile/:username" element={<ProfilePage />}></Route>
       </Routes>

srcs/nginx/src/components/molecules/CircleButton.tsx

@@ -0,0 +1,28 @@
+import { motion } from 'framer-motion';
+
+interface CircleButtonProps {
+  children?: React.ReactNode;
+}
+
+const dropdownStyle = 'shadow-[0_10px_10px_1px_rgba(205,205,205,0.4)] ';
+
+export const CircleButton = ({ children }: CircleButtonProps) => (
+  <motion.div
+    whileHover={{ scale: 1.1, color: '#029c8a' }}
+    whileTap={{ scale: 0.95, color: '#ff0088' }}
+    transition={{ duration: 0.3 }}
+    className={`
+      basis-50
+      h-56 m-10 p-6    
+      aspect-square
+      rounded-full
+      bg-slate-100/80
+      flex items-center justify-center
+      font-quantico border border-cyan-300 
+      text-gray-700
+      ${dropdownStyle}
+                  `}
+  >
+    <p className="text-2xl text-center whitespace-nowrap">{children}</p>
+  </motion.div>
+);

srcs/nginx/src/components/molecules/Halo.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { RegisterForm } from '../organisms/RegisterForm';
+import { LoginForm } from '../organisms/LoginForm';
+import Circle from '../atoms/Circle';
+import { useTranslation } from 'react-i18next';
+
+interface HaloProps {
+  isRegister: boolean;
+  className?: string;
+  size?: number;
+  onToggleForm: () => void; // Add this line
+}
+const Halo = ({ className = '', size = 80, isRegister, onToggleForm }: HaloProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const { t } = useTranslation();
+  const title = isRegister ? t('auth.signup') : t('auth.login');
+
+  return (
+    <div
+      className={`absolute ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Circle size={isHovered ? size : 30} className="cursor-pointer p-8">
+        {/* PLAY text */}
+        <span className={`text-2xl font-bold ${isHovered ? 'hidden' : 'block'}`}>PLAY</span>
+
+        {/* Forms */}
+        <div className={`min-h-[100px] ${isHovered ? 'block' : 'hidden'}`}>
+          {isRegister ? (
+            <RegisterForm onToggleForm={onToggleForm} />
+          ) : (
+            <LoginForm onToggleForm={onToggleForm} />
+          )}
+        </div>
+      </Circle>
+    </div>
+  );
+};
+export default Halo;

srcs/nginx/src/components/organisms/LoginForm.tsx

@@ -79,7 +79,7 @@ async function loginAction(prevState: LoginState | null, formData: FormData) {
   }
 }
 
-export const LoginForm = () => {
+export const LoginForm = ({ onToggleForm }: { onToggleForm?: () => void }) => {
   const { t } = useTranslation();
   const [state, formAction, isPending] = useActionState(loginAction, null);
   const navigate = useNavigate();
@@ -88,10 +88,12 @@ export const LoginForm = () => {
     if (state?.success && state.fields?.username) {
       const username = state.fields.username;
       login({ username: username, avatarUrl: null });
-      navigate(`/profile/${username}`, { replace: true });
+      // navigate(`/profile/${username}`, { replace: true });
+      navigate(`/welcome`, { replace: true });
     }
     if (user?.username) {
-      navigate(`/profile/${user.username}`, { replace: true });
+      // navigate(`/profile/${username}`, { replace: true });
+      navigate(`/welcome`, { replace: true });
     }
   }, [state?.success, state?.fields?.username, user, navigate, login]);
   return (
@@ -119,11 +121,9 @@ export const LoginForm = () => {
 
       <div className="text-xs text-gray-500 mt-5">
         {t('auth.noAccount')}{' '}
-        <span>
-          <Link className="hover:text-blue-400" to={`/signup`}>
-            {t('auth.signup')}
-          </Link>
-        </span>
+        <button type="button" onClick={onToggleForm} className="hover:text-blue-400 underline">
+          {t('auth.signup')}
+        </button>
       </div>
     </form>
   );

srcs/nginx/src/components/organisms/RegisterForm.tsx

@@ -112,24 +112,25 @@ async function signupAction(prevState: SignupState | null, formData: FormData) {
     return nextState;
   }
 }
-
-export const RegisterForm = () => {
+export const RegisterForm = ({ onToggleForm }: { onToggleForm?: () => void }) => {
   const { t } = useTranslation();
   const [state, formAction, isPending] = useActionState(signupAction, null);
   const navigate = useNavigate();
   const { user, login, isLoggedIn } = useAuth();
 
   useEffect(() => {
     if (user && isLoggedIn) {
-      navigate(`/profile/${user.username}`);
+      // navigate(`/profile/${user.username}`);
+      navigate(`/welcome`);
     }
   }, [user, isLoggedIn]);
 
   useEffect(() => {
     if (state?.success && state.fields?.username) {
       const username = state.fields?.username;
       login({ username: username, avatarUrl: null });
-      navigate(`/profile/${username}`);
+      // navigate(`/profile/${username}`);
+      navigate(`/welcome`);
     }
   }, [state?.success, state?.fields?.username, navigate]);
 
@@ -167,11 +168,9 @@ export const RegisterForm = () => {
 
       <div className="text-xs text-gray-500 mt-5">
         {t('auth.hasAccount')}{' '}
-        <span>
-          <Link className="hover:text-blue-400" to={`/login`}>
-            {t('auth.login')}
-          </Link>
-        </span>
+        <button type="button" onClick={onToggleForm} className="hover:text-blue-400 underline">
+          {t('auth.login')}
+        </button>
       </div>
     </form>
   );

srcs/nginx/src/hooks/AxiosInterceptor.tsx

@@ -12,7 +12,7 @@ export const AxiosInterceptor = ({ children }: { children: React.ReactNode }) =>
       (response) => response,
       (error) => {
         if (error.statusCode === HTTP_STATUS.UNAUTHORIZED) {
-          navigate('/login');
+          navigate('/welcome');
         }
         return Promise.reject(error);
       },

srcs/nginx/src/locales/en/common.json

@@ -66,5 +66,10 @@
     "copyright": "© 2026 . All rights reserved.",
     "privacyPolicy": "Privacy Policy",
     "termsOfService": "Terms of Service"
+  },
+  "game": {
+    "playWithAI": "Play with AI",
+    "playWithFriends": "Play with Friends",
+    "tournament": "Tournament"
   }
 }

srcs/nginx/src/locales/fr/common.json

@@ -66,5 +66,10 @@
     "copyright": "© 2026 Tous droits réservés.",
     "privacyPolicy": "Politique de confidentialité",
     "termsOfService": "Conditions d'utilisation"
+  },
+  "game": {
+    "playWithAI": "Joue avec un ROBOT (no friends?)",
+    "playWithFriends": "Joue avec ton copaing",
+    "tournament": "Defi tes potes en tournois"
   }
 }

srcs/nginx/src/locales/tf/common.json

@@ -66,5 +66,10 @@
     "copyright": "© 2026 – C'est à nous.",
     "privacyPolicy": "La loi du milieu (on balance rien, t'es en sécurité)",
     "termsOfService": "Les règles du jeu (lis ça, sinon t’es un rigolo)"
+  },
+  "game": {
+    "playWithAI": "No friends? Joue avec un ROBOT",
+    "playWithFriends": "Joue avec ton copaing",
+    "tournament": "Defi tes potes en tournois"
   }
 }

srcs/nginx/src/pages/AnimationPage.tsx

@@ -20,7 +20,7 @@ export const AnimationPage = ({ className = '' }: AnimationPageProps) => {
 
   useEffect(() => {
     if (animDone) {
-      navigate(`/login`);
+      navigate(`/welcome`);
     }
   }, [animDone, user]);
 

srcs/nginx/src/pages/WelcomePage.tsx

@@ -0,0 +1,91 @@
+import { NavBar } from '../components/molecules/NavBar'; // Adjust path based on your folder structure
+import Halo from '../components/molecules/Halo';
+import { Link } from 'react-router-dom';
+import Background from '../components/atoms/Background';
+import { useTranslation } from 'react-i18next';
+import { RegisterForm } from '../components/organisms/RegisterForm';
+import { LoginForm } from '../components/organisms/LoginForm';
+import { useState } from 'react';
+import Circle from '../components/atoms/Circle';
+import { CircleButton } from '../components/molecules/CircleButton';
+import { useAuth } from '../providers/AuthProvider';
+
+const colors = {
+  start: '#00ff9f',
+  end: '#0088ff',
+};
+
+interface LoginRegisterPageProps {
+  isRegister: boolean;
+}
+export const WelcomePage = () => {
+  const { t } = useTranslation();
+  const [isRegister, setIsRegister] = useState(false);
+  const { user, isLoggedIn } = useAuth();
+
+  const ai = t('game.playWithAI');
+  const tournament = t('game.tournament');
+  const friends = t('game.playWithFriends');
+  return (
+    <div className={`w-full h-full relative`}>
+      <Background
+        grainIntensity={4}
+        baseFrequency={0.28}
+        colorStart={colors.start}
+        colorEnd={colors.end}
+      >
+        <NavBar />
+        {/* Not logged in - show login/register */}
+        {!isLoggedIn && (
+          <Halo
+            size={80}
+            isRegister={isRegister}
+            onToggleForm={() => setIsRegister(!isRegister)}
+            className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          />
+        )}
+        {/* Logged in - show 3 game options */}
+        {isLoggedIn && (
+          <div className=" flex flex-1 items-center justify-center">
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Link to="/game/pong-ai">
+                <CircleButton>{ai}</CircleButton>
+              </Link>
+
+              <Link to="/game/simple-game">
+                <CircleButton>{friends}</CircleButton>
+              </Link>
+
+              <Link to="/game/tournament">
+                <CircleButton>{tournament}</CircleButton>
+              </Link>
+            </div>
+          </div>
+        )}
+      </Background>
+    </div>
+  );
+};
+// export const WelcomePage = () => {
+//   const { t } = useTranslation();
+//   const [isRegister, setIsRegister] = useState(false);
+//   const title = isRegister ? t('auth.signup') : t('auth.login');
+//   return (
+//     <div className={`w-full h-full relative`}>
+//       <Background
+//         grainIntensity={4}
+//         baseFrequency={0.28}
+//         colorStart={colors.start}
+//         colorEnd={colors.end}
+//       >
+//         <NavBar />
+//         <Halo
+//           size={200}
+//           isRegister={isRegister}
+//           onToggleForm={() => setIsRegister(!isRegister)}
+//           className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+//         />
+//       </Background>
+//     </div>
+//   );
+// };