styling the home page

webapp/public/index.html

@@ -39,6 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
   </body>
 </html>

webapp/src/components/content/home/footer/index.jsx

@@ -1,7 +1,29 @@
 function Footer() {
     return(
-        <footer className="h-24 w-full bg-darkGreen">
+        <footer className="bg-darkBlue rounded-lg shadow">
-
+            <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+                <div className="sm:flex sm:items-center sm:justify-between">
+                    <a href="https://flowbite.com/"
+                       className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+                        <span
+                            className="self-center text-2xl font-semibold whitespace-nowrap text-white">Debate</span>
+                    </a>
+                    <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-white sm:mb-0">
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">Home</a>
+                        </li>
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">Game</a>
+                        </li>
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">Profile</a>
+                        </li>
+                    </ul>
+                </div>
+                <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
+                <span className="block text-sm text-white sm:text-center">© 2023 <a
+                    href="https://flowbite.com/" className="hover:underline">Debate™</a>. All Rights Reserved.</span>
+            </div>
         </footer>
     );
 }

webapp/src/components/content/home/hero/index.jsx

@@ -1,11 +1,25 @@
+import Pose1 from "../../../../assets/home/baneer.jpg";
+import {Link} from "react-router-dom";
 function HomeHero() {
     return (
-        <div className="w-full px-4 my-16">
+        <section class="bg-darkBlue md:mt-16 w-full">
-            <div className="home-hero flex flex-col justify-center items-center h-96 w-full bg-mainBlue rounded-lg">
+            <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
-                <h1>Home Hero</h1>
+                <div class="mr-auto place-self-center lg:col-span-7">
+                    <h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl text-white">Debate</h1>
+                    <p class="max-w-2xl mb-6 font-light  lg:mb-8 md:text-lg lg:text-xl text-gray-400">Platform for immersive climate-themed mystery games, inspired by the thrilling narrative style of Danganronpa.</p>
+                    <Link to='/game' class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-mainBlue focus:ring-4 dark:focus:ring-blue-900">
+                        Get started
+                        <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </Link>
+                    <a href="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center border border-gray-300 rounded-lg hover:bg-white hover:text-black focus:ring-4 focus:ring-gray-100 text-white">
+                        Check my profile
+                    </a>
+                </div>
+                <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
+                    <img src="https://www.cci.fr/sites/g/files/mwbcuj1451/files/2023-03/energie-ecologique.png" alt="mockup" />
+                </div>
             </div>
-        </div>
+        </section>
-
     );
 }
 

webapp/src/components/content/home/secondSection/index.jsx

@@ -0,0 +1,18 @@
+function SecondSection() {
+    return (
+        <section className="bg-white dark:bg-gray-900">
+            <div className="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6">
+                <div className="font-light text-gray-500 sm:text-lg dark:text-gray-400">
+                    <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Let us introduce you to the game</h2>
+                    <p className="mb-4">Welcome to Debate. On this site, you'll find a Dangaronpa-type game. The aim is simple: to find the right answer to refute your opponent's statement. Our different themes and levels on global warming and its consequences will put your knowledge to the test! Good luck</p>
+                </div>
+                <div className="grid grid-cols-2 gap-4 mt-8">
+                    <img className="w-full rounded-lg h-96 object-cover" src="https://i0.wp.com/ecolosport.fr/wp-content/uploads/2023/02/matthew-smith-Rfflri94rs8-unsplash-scaled-e1676906506139.jpeg?resize=1440%2C720&ssl=1" alt="office content 1" />
+                        <img className="mt-4 w-full lg:mt-10 rounded-lg h-96 object-cover" src="https://img.freepik.com/photos-premium/environnement-jour-terre-entre-mains-arbres-qui-poussent_34998-113.jpg" alt="office content 2" />
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default SecondSection

webapp/src/components/navbarre/home/index.jsx

@@ -6,18 +6,34 @@ import {useEffect} from "react";
 
 function NavbarreHome() {
     return(
-        <nav className="fixed top-0 left-0 h-16 w-full px-4 flex flex-row justify-between items-center text-center">
+        <nav className="fixed top-0 left-0 h-16 w-full px-4 flex flex-row justify-between items-center text-center bg-white shadow-2xl">
-            <div className="h-12 w-12 bg-red-500">
+            <img className="h-12 w-12 rounded-full" src="https://media.discordapp.net/attachments/1182365035700428971/1182533295850926090/image_2.png?ex=65850af4&is=657295f4&hm=eca346750009e926b9f0c76c9e6ca4e19c76f3157ad1fc19b8e7624dd8ef97b8&=&format=webp&quality=lossless&width=662&height=662"/>
-            </div>
             <NavListHome list={list}/>
             {localStorage.getItem('token') !== null ? (
                 <div>
-                    <a onClick={() => logout()}>logout</a>
+                    <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown"
-                    <p>{localStorage.getItem('username')}</p>
+                            className="text-white bg-darkGreen focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center"
+                            type="button">{localStorage.getItem('username')}
+                        <svg className="w-2.5 h-2.5 ms-3" aria-hidden="true"
+                             xmlns="http://www.w3.org/2000/svg" fill="none"
+                             viewBox="0 0 10 6">
+                            <path stroke="currentColor"
+                                  d="m1 1 4 4 4-4"/>
+                        </svg>
+                    </button>
+                    <div id="dropdown"
+                         className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
+                        <ul className="py-2 text-sm text-gray-700"
+                            aria-labelledby="dropdownDefaultButton">
+                            <li>
+                                <a onClick={() => logout()} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Logout</a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             ) : (
                 <LoginButton/>
-            ) }
+            )}
         </nav>
     )
 }

webapp/src/index.js

@@ -1,24 +1,44 @@
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import Home from "./pages/home";
 import Login from "./pages/login";
 import Game from "./pages/game";
 import GameTheme from "./pages/gametheme";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
 import Register from "./pages/register";
+import {post} from "./modules/fetcher";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 function App() {
+    const [isConnected, setIsConnected] = useState(null)
+    const checkUserConnection = useCallback(async () => {
+        try {
+            const res = await post('https://saucisson.justw.tf/api/users/verify', {'token': localStorage.getItem('token')}, '');
+
+            if (res.status === 200) {
+                setIsConnected(true);
+            } else {
+                setIsConnected(false);
+            }
+        } catch (error) {
+            console.error('Erreur lors de la vérification de la connexion:', error);
+            setIsConnected(false);
+        }
+    }, []); // [] en dépendances pour que la fonction soit mémorisée
+
+    useEffect(() => {
+        checkUserConnection();
+    }, [checkUserConnection, window.location.href]);
     return (
         <React.StrictMode>
             <BrowserRouter>
                 <Routes>
                     <Route path="/" element={<Home/>}/>
-                    <Route path="/login" element={<Login  />}/>
+                    <Route path="/login" element={isConnected ?  <Navigate to="/"/> : <Login />}/>
                     <Route path="/register" element={<Register  />}/>
                     <Route path="/game" element={<Game />}/>
-                    <Route path="/game/:id" element={<GameTheme />}/>
+                    <Route path="/game/:id" element={isConnected ? <GameTheme /> : <Navigate to="/game" />}/>
                 </Routes>
             </BrowserRouter>
         </React.StrictMode>

webapp/src/pages/home/index.jsx

@@ -1,12 +1,14 @@
 import NavbarreHome from "../../components/navbarre/home";
 import HomeHero from "../../components/content/home/hero";
 import Footer from "../../components/content/home/footer";
+import SecondSection from "../../components/content/home/secondSection";
 
 function Home() {
     return (
-        <div className="h-screen w-screen flex flex-col justify-center items-center">
+        <div>
             <NavbarreHome/>
             <HomeHero />
+            <SecondSection />
             <Footer />
         </div>
     )