better login page and fix css

src/components/Banner/Banner.jsx

@@ -0,0 +1,79 @@
+// src/components/Banner/Banner.js
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Banner.module.scss';
+
+const shuffleArray = (array) => {
+  return array.sort(() => Math.random() - 0.5);
+};
+
+const Banner = ({ messages, speed = 1 }) => {
+  const [shuffledMessages, setShuffledMessages] = useState([]);
+  const bannerRef = useRef(null);
+  const containerRef = useRef(null);
+  const animationRef = useRef(null); 
+  const startPositionRef = useRef(0); 
+
+  useEffect(() => {
+    setShuffledMessages(shuffleArray([...messages, ...messages]));
+
+    const banner = bannerRef.current;
+    const container = containerRef.current;
+    const messagesWidth = banner.scrollWidth;
+    startPositionRef.current = container.offsetWidth;
+
+    const scrollBanner = () => {
+      startPositionRef.current -= speed;
+      if (startPositionRef.current <= -messagesWidth) {
+        startPositionRef.current = container.offsetWidth;
+      }
+      banner.style.transform = `translateX(${startPositionRef.current}px)`;
+      animationRef.current = requestAnimationFrame(scrollBanner);
+    };
+
+    animationRef.current = requestAnimationFrame(scrollBanner);
+
+    return () => cancelAnimationFrame(animationRef.current);
+  }, [messages, speed]);
+
+  const handleMouseEnter = () => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current); 
+    }
+  };
+
+  const handleMouseLeave = () => {
+    const banner = bannerRef.current;
+    const container = containerRef.current;
+    const messagesWidth = banner.scrollWidth;
+
+    const scrollBanner = () => {
+      startPositionRef.current -= speed;
+      if (startPositionRef.current <= -messagesWidth) {
+        startPositionRef.current = container.offsetWidth;
+      }
+      banner.style.transform = `translateX(${startPositionRef.current}px)`;
+      animationRef.current = requestAnimationFrame(scrollBanner);
+    };
+
+    animationRef.current = requestAnimationFrame(scrollBanner); 
+  };
+
+  return (
+    <div
+      className={styles.bannerContainer}
+      ref={containerRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={styles.bannerContent} ref={bannerRef}>
+        {shuffledMessages.map((message, index) => (
+          <span key={index} className={styles.message}>
+            {message}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Banner;

src/components/Banner/Banner.module.scss

@@ -0,0 +1,24 @@
+/* src/components/Banner/Banner.module.scss */
+.bannerContainer {
+  overflow: hidden; 
+  white-space: nowrap;
+  width: 98%; 
+  background-color: #f0f0f0;
+  padding: 10px;
+  position: relative;
+}
+
+.bannerContent {
+  display: inline-block;
+  white-space: nowrap;
+  min-width: 100%;
+  display: flex;
+}
+
+.message {
+  display: inline-block;
+  margin-right: 5rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #333;
+}

src/components/CreateServer/CreateServer.jsx

@@ -92,8 +92,8 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
     <div className={styles.container}>
       {noServers ? (
         <div className={styles.mainCardNoserveur}>
-          <div className={styles.nsSubTitle}>Erreur</div>
-          <div className={styles.nsTitle}>Aucun serveur</div>
+          <div className={styles.nsSubTitle}>Bonjour</div>
+          <div className={styles.nsTitle}>Aucun serveur </div>
           <button className={styles.btnnoServCreate} onClick={onCreateServer}>Créer un nouveau serveur</button>
         </div>
       ) : (

src/components/CreateServer/CreateServer.module.scss

@@ -147,7 +147,6 @@
   height: 5rem;
   object-fit: cover;
   display: block;
-  border: 1px solid black;
   cursor: pointer;
   transition: transform 0.2s;
 }

src/pages/LoginPage/LoginPage.jsx

@@ -2,6 +2,7 @@
 import { useNavigate } from 'react-router-dom';
 import { auth, googleProvider, signInWithPopup } from '../../service/firebase';
 import styles from './LoginPage.module.scss';
+import Banner from '../../components/Banner/Banner';
 
 const LoginPage = () => {
   const navigate = useNavigate();
@@ -15,13 +16,34 @@ const LoginPage = () => {
     }
   };
 
+  const messages = [
+    "Bienvenue sur notre application !",
+    "Découvrez nos nouvelles fonctionnalités",
+    "Contactez le support pour toute assistance",
+    "Merci de votre confiance",
+    "Amusez-vous bien !",
+    "L'équipe Servii",
+    "Connectez-vous pour continuer",
+    "Connexion sécurisée avec Google",
+    "Bonne journée !",
+    "Bienvenue sur Servii !",
+    "N'hésitez pas à nous contacter",
+    
+  ];
+
   return (
-    <div className={styles.container}>
-      <div className={styles.mainCard}>
-        <div className={styles.title}>Page de connexion</div>
-        <button onClick={handleLogin} className={styles.logbtn}>
-          Se connecter avec Google
-        </button>
+    <div>
+      <div className={styles.nav}>
+        <Banner messages={messages} speed={1.3} />
+      </div>
+      <div className={styles.container}>
+        <div className={styles.mainCard}>
+          <div className={styles.pretitle}>Servii - hebergement facile</div>
+          <div className={styles.title}>Bienvenue </div>
+          <button onClick={handleLogin} className={styles.logbtn}>
+            Continuer avec Google
+          </button>
+        </div>
       </div>
     </div>
   );

src/pages/LoginPage/LoginPage.module.scss

@@ -1,46 +1,71 @@
+$primary-color: #1D1836;
+$text-color: black;
+$background-color: white;
+$border-radius: 1rem;
+$padding: 1rem;
+$font-family: 'Poppins', sans-serif;
+
 html, body {
-    margin: 0;
-    padding: 0;
-    font-family: 'Poppins', sans-serif;
-    height: 100%;
-  }
-  
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-  }
-
-  .mainCard{
-    width: 70rem;
-    padding: 1rem;
-    background-color: #100D25;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 1rem;
-    padding: 3rem 0rem 3rem 0rem;
-  }
-  
-.title{
-    font-size: 5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: white;
-    margin-bottom: 4rem;
+  margin: 0;
+  padding: 0;
+  font-family: $font-family;
+  height: 100%;
+  background-color: $background-color !important;
 }
 
-.logbtn{
-    width: 100%;
-    background-color: #090325;
-    border: none;
-    color   : white;
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-top: 1rem;
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $background-color;
+  height: 93vh;
+
+}
+
+.mainCard {
+  width: 60rem;
+  padding: 3rem 0;
+  background-color: $background-color;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border-radius: $border-radius;
+  margin-bottom: 10rem;
+}
+
+.pretitle {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 4rem;
+  color: $text-color;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 400;
+  margin-bottom: 2rem;
+  color: $text-color;
+}
+
+.logbtn {
+  width: 30rem;
+  background-color: white;
+  border: .1rem solid #C2C8D0;
+  color: black;
+  padding: $padding;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.logbtn:hover {
+  background-color: #E5E5E5;
+}
+
+.nav {
+  color: $text-color;
+  background-color: $background-color;
+  font-size: 2rem;
 }

src/pages/ServerDetails/ServerDetails.module.scss

@@ -83,7 +83,11 @@
 }
 
 .saveButton {
-  background-color: var(--button-bg-color);
+  background-color: #05a771;
+}
+
+.saveButton:hover {
+  background-color: #05a77183;
 }
 
 .quitButton {
@@ -91,19 +95,6 @@
   margin-left: 1rem;
 }
 
-.saveButton:hover,
-.quitButton:hover {
-  transform: translateY(-3px);
-}
-
-.saveButton:active,
-.quitButton:active {
-  transform: translateY(0);
-}
-
-.saveButton:hover {
-  background-color: var(--button-bg-hover-color);
-}
 
 .error {
   color: var(--error-color);