global visual changes

package.json

@@ -4,7 +4,7 @@
   "version": "1.9.45",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

src/App.jsx

@@ -11,6 +11,8 @@ import Loading from './pages/Loading/loading';
 import NotFoundPage from './pages/NotFoundPage/NotFoundPage';
 import CreatePage from './pages/CreateServer/CreateServer';
 import Javapick from './pages/CreateServer/Javapick/java';
+import Modpack from './pages/CreateServer/modpack/modpack';
+import Bedrock from './pages/CreateServer/bedrock/bedrock';
 
 const App = () => {
   const [user, setUser] = useState(null);
@@ -37,6 +39,8 @@ const App = () => {
           <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
           <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
           <Route path="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
+          <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
+          <Route path="/createServer/modpack" element={user ? <Modpack user={user} /> : <Navigate to="/login" />} />
           <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
           <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
           <Route path="*" element={<NotFoundPage />} />

src/components/navbar/Navbar.jsx

@@ -5,7 +5,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser, faCog, faSignOutAlt, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from "prop-types";
 
-const Navbar = ({ user, hasShadow = true, showBackButton = false, onBackClick }) => {
+const Navbar = ({ 
+  user, 
+  hasShadow = true, 
+  showBackButton = false, 
+  onBackClick, 
+  backButtonText = "Retour au dashboard" 
+}) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -39,7 +45,7 @@ const Navbar = ({ user, hasShadow = true, showBackButton = false, onBackClick })
       {showBackButton && (
         <div className={styles.backButton} onClick={onBackClick}>
           <FontAwesomeIcon icon={faArrowLeft} className={styles.backIcon} />
-          <span>Retour au dashboard</span>
+          <span>{backButtonText}</span> {}
         </div>
       )}
 
@@ -83,6 +89,7 @@ Navbar.propTypes = {
   hasShadow: PropTypes.bool, 
   showBackButton: PropTypes.bool,  
   onBackClick: PropTypes.func, 
+  backButtonText: PropTypes.string, 
 };
 
 export default Navbar;

src/components/serverCard/serverCard.jsx

@@ -1,32 +1,15 @@
 import { Link } from 'react-router-dom';
 import styles from './serverCard.module.scss';
-
-import bukkit from '../../assets/frameworks/bukkit.png';
-import fabric from '../../assets/frameworks/fabric.png';
-import forge from '../../assets/frameworks/forge.png';
 import paper from '../../assets/frameworks/paper.png';
-import spigot from '../../assets/frameworks/spigot.png';
-import vanilla from '../../assets/frameworks/vanilla.png';
 import PropTypes from "prop-types";
+import { FaTrash } from 'react-icons/fa';
 
-// eslint-disable-next-line react/prop-types
-const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick , countPlayers , maxPlayers}) => {
-
+const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick, countPlayers, maxPlayers, favoriteServer }) => {
 
   const getFrameworkSource = () => {
     switch (framework) {
-      case "bukkit":
-        return bukkit;
-      case "fabric":
-        return fabric;
-      case "forge":
-        return forge;
-      case "paper":
-        return paper;
-      case "spigot":
-        return spigot;
       default:
-        return vanilla;
+        return paper;
     }
   };
 
@@ -60,7 +43,7 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
   return (
     <Link 
       to={`/server/${name}/options`} 
-    className={styles.serverCard}
+      className={favoriteServer ? styles.favoriteserverCard : styles.serverCard}
       state={{ status }}>
       <div className={styles.header}>
         <div className={styles.serverInfo}>
@@ -71,35 +54,57 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
           </div>
         </div>
         <div className={styles.status}>
-          {status === false ? " " : countPlayers + "/"  + maxPlayers + " joueurs"}
+          {status ? `${countPlayers}/${maxPlayers} joueurs` : " "}
         </div>
       </div>
       <div className={styles.actions}>
         <div>
           {status === false ? (
-            <button className={`${styles.startStopButton} ${styles.stoppedButton}`} onClick={handleRun}>▶ Démarrer</button>
+            <button 
+              className={`${styles.startStopButton} ${styles.stoppedButton}`} 
+              onClick={handleRun}
+              aria-label="Start server"
+            >
+              ▶ Démarrer
+            </button>
           ) : (
-            <button className={`${styles.startStopButton} ${styles.runningButton}`} onClick={handleStop}>◼ Arrêter</button>
+            <button 
+              className={`${styles.startStopButton} ${styles.runningButton}`} 
+              onClick={handleStop}
+              aria-label="Stop server"
+            >
+              ◼ Arrêter
+            </button>
           )}
         </div>
-        <button className={styles.deleteButton} onClick={handleDelete}>🗑 Supprimer</button>
       </div>
+      <FaTrash 
+        className={styles.trashIcon} 
+        onClick={handleDelete} 
+        aria-label="Delete server"
+      />
     </Link>
   );
-  
 };
 
 ServerCard.propTypes = {
-  key: PropTypes.string,
   status: PropTypes.bool,
-  version: PropTypes.string,
-  name: PropTypes.string,
+  version: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
   framework: PropTypes.string,
   onRunClick: PropTypes.func.isRequired,
   onStopClick: PropTypes.func.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
   countPlayers: PropTypes.number,
-  subdomain: PropTypes.string,
+  maxPlayers: PropTypes.number.isRequired,
+  favoriteServer: PropTypes.bool,
+};
+
+ServerCard.defaultProps = {
+  framework: 'default',
+  status: false,
+  countPlayers: 0,
+  favoriteServer: false,
 };
 
 export default ServerCard;

src/components/serverCard/serverCard.module.scss

@@ -2,16 +2,62 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: flex-start;
-  width: 35.5rem;
+  align-items: center;
+  width: 20rem;
   padding: 2rem;
-  border: 0.2rem solid var(--card-border-color);
+  border: 0.1rem solid black;
   border-radius: 0.8rem;
-  background-color: var(--card-bg-color);
-  color: white;
   margin-bottom: 1.5rem;
   cursor: pointer;
   text-decoration: none;
+  color: black;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+}
+
+.favoriteserverCard{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 30rem;
+  padding: 3rem;
+  border: 0.1rem solid black;
+  border-radius: 0.8rem;
+  margin-bottom: 3rem;
+  cursor: pointer;
+  text-decoration: none;
+  color: black;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+}
+
+.serverCard:hover{
+  box-shadow: 
+  0 4px 30px rgba(0, 0, 0, 0.1), 
+  2px 2px 10px rgba(255, 0, 0, 0.2), 
+  -2px -2px 15px rgba(0, 255, 0, 0.2), 
+  4px -4px 20px rgba(0, 0, 255, 0.2); box-shadow: 
+  0 
+}
+
+.favoriteserverCard:hover{
+  box-shadow: 
+  0 4px 30px rgba(0, 0, 0, 0.1), 
+  2px 2px 10px rgba(255, 0, 0, 0.2), 
+  -2px -2px 15px rgba(0, 255, 0, 0.2), 
+  4px -4px 20px rgba(0, 0, 255, 0.2); box-shadow: 
+  0 
 }
 
 .header {
@@ -26,8 +72,8 @@
 }
 
 .frameworkIcon {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 3rem;
+  height: 3rem;
   margin-right: 0.8rem;
 }
 
@@ -46,6 +92,7 @@
   font-size: 1.2rem;
   font-weight: bold;
   color: var(--status-color);
+  margin-right: 2rem;
 }
 
 .actions {
@@ -80,16 +127,23 @@
   background-color: #8d213ec1;
 }
 
-.deleteButton {
-  background-color: #d9534f;
-  color: white;
-  border: none;
-  border-radius: 0.6rem;
-  padding: 0.6rem 1rem;
+.trashIcon {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  font-size: 1.5rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
   cursor: pointer;
-  transition: background-color 0.3s ease;
 }
 
-.deleteButton:hover {
-  background-color: #c9302c;
+.serverCard:hover .trashIcon {
+  opacity: 1;
 }
+
+.favoriteserverCard:hover .trashIcon {
+  opacity: 1;
+}
+
+
+

src/main.css

@@ -2,6 +2,7 @@
 html {
   font-size: 12px;
   font-family: 'Poppins', sans-serif;
+  scroll-behavior: smooth;
 }
 
 :root {

src/pages/CreateServer/CreateServer.jsx

@@ -2,6 +2,9 @@ import styles from './CreateServer.module.scss';
 import PropTypes from "prop-types";
 import Navbar from '../../components/navbar/Navbar';
 import { useNavigate } from 'react-router-dom'; 
+import  bedrockimg from '../../assets/bedrock.png';
+import modedimg from '../../assets/moded.png';
+import javaimg from '../../assets/java.png'
 
 const CreateServer = ({ user }) => {
   const navigate = useNavigate();
@@ -18,24 +21,24 @@ const CreateServer = ({ user }) => {
 
         <div className={styles.GamesChoice}>
             <div className={styles.title}>Création du serveur</div>
-            <div className={styles.subtitle}>De quels façon voulez-vous jouer ?</div>
+            <div className={styles.subtitle}>De quelle façon voulez-vous jouer ?</div>
             <div className={styles.GamesContainer}>
-                <div className={styles.GameCard} onClick={() => navigate('/dashboard')}>    
-                  <img src="http://fakeimg.pl/250x150/"/>         
+                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/java')}>    
+                  <img src={javaimg} className={styles.imgCard}/>         
                   <div className={styles.Gamesubtitle}>Java Edition</div>
-                  <div className={styles.Gamedescription}>Lorem ipsum dolor sit, amet consectetur adipisiciiquid, do</div>
+                  <div className={styles.Gamedescription}>Découvrez la version classique de Minecraft sur PC, avec un large éventail de mises à jour et de fonctionnalités, couvrant plus de vingt versions !</div>
                   <button className={styles.GameButton}>Choisir ce modèle </button>
                 </div>
-                <div className={styles.GameCard}>
-                  <img src="http://fakeimg.pl/250x150/"/>   
+                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/bedrock')}> 
+                  <img src={bedrockimg} className={styles.imgCard}/>   
                   <div className={styles.Gamesubtitle}>Bedrock Edition</div>
-                  <div className={styles.Gamedescription}>Lorem ipsum dolor sit, amet consectetur adipisiciiquid, do</div>
+                  <div className={styles.Gamedescription}>Jouez à Minecraft sur mobile, tablette et consoles, avec des performances optimisées et un accès multiplateforme.</div>
                   <button className={styles.GameButton}>Choisir ce modèle </button>
                   </div>
-                <div className={styles.GameCard}>
-                  <img src="http://fakeimg.pl/250x150/"/>   
-                  <div className={styles.Gamesubtitle}>Minecraft Moddé</div>
-                  <div className={styles.Gamedescription}>Lorem ipsum dolor sit, amet consectetur adipisiciiquid, do</div>
+                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/modpack')}>
+                  <img src={modedimg} className={styles.imgCard}/>   
+                  <div className={styles.Gamesubtitle}>Minecraft Modé</div>
+                  <div className={styles.Gamedescription}>Explorez la version modifiée de Minecraft sur PC, avec des modpacks riches et variés, contenant plus de 200 mods pour une expérience de jeu personnalisée.</div>
                   <button className={styles.GameButton}>Choisir ce modèle </button>
                 </div>
             </div>

src/pages/CreateServer/CreateServer.module.scss

@@ -80,3 +80,8 @@ img {
   margin-top: .7rem;
   text-align: center;
 }
+
+.imgCard{
+  width: 22rem;
+  height: auto;
+}

src/pages/CreateServer/Javapick/java.jsx

@@ -1,41 +1,123 @@
+import { useState, useEffect, useRef } from 'react'; 
+import { GoTag, GoCheck } from "react-icons/go";
+import { useNavigate } from 'react-router-dom'; 
 import styles from './java.module.scss';
 import PropTypes from "prop-types";
 import Navbar from '../../../components/navbar/Navbar';
-import { useNavigate } from 'react-router-dom'; 
+import serviiApi from "../../../service/api.tsx";
 
 const Javapick = ({ user }) => {
+  const [serverName, setServerName] = useState('');
+  const [serverVersion, setServerVersion] = useState('');
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
   const navigate = useNavigate();
+  const isValidServerName = serverName.length > 2;
 
+  const buttonRef = useRef(null);
+
+  const validateInput = (input) => {
+    return input.replace(/[^a-zA-Z]/g, '');
+  };
+
+  const handleCreateServer = async () => {
+    try {
+        const framework =  'paper';        
+        await serviiApi.serverCreate(serverName, serverVersion, framework);
+        navigate('/Dashboard');
+    } catch (error) {
+        console.error('Error creating server:', error);
+    }
+  };
+
+  const versions = {
+    paper: [
+      "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.20",
+      "1.19.4", "1.19.3", "1.19.2", "1.19", "1.18.2", "1.18.1",
+      "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1",
+      "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2", "1.14.1",
+      "1.13.2", "1.13.1", "1.12.2", "1.11.2", "1.10.2", "1.9.4"
+    ].sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
+  };
+
+  useEffect(() => {
+    if (isValidServerName && serverVersion) {
+      setIsButtonVisible(true);
+      buttonRef.current?.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      setIsButtonVisible(false);
+    }
+  }, [isValidServerName, serverVersion]);
+
+  const VersionChoice = (version) => {
+    return () => {
+      setServerVersion(version);
+      if (isValidServerName) {
+        setTimeout(() => {
+          buttonRef.current?.scrollIntoView({ behavior: 'smooth' });
+        }, 150);  
+      }
+    };
+  };
 
   return (
     <div className={styles.Container}>
       <Navbar 
         user={user} 
         hasShadow={true} 
-          showBackButton={false} 
-          onBackClick={() => navigate('/dashboard')}  
+        showBackButton={true} 
+        backButtonText="Retour"
+        onBackClick={() => navigate('/CreateServer')}
       />
-
       <div className={styles.hey}>
-            <h1>hello java</h1>
+        <div className={`${styles.inputContainer} ${isValidServerName ? styles.inputValid : ''}`}>
+          <h2>Saisissez le nom du serveur</h2>
+          <input 
+            type="text" 
+            placeholder="Nom du serveur..." 
+            value={serverName} 
+            onChange={(e) => setServerName(validateInput(e.target.value))}
+            className={`${styles.serverInput} ${isValidServerName ? styles.validInput : ''}`}
+          />
+        </div>
+
+        {isValidServerName && (
+          <div className={`${styles.ContainerVersion} ${isValidServerName ? styles.visible : ''}`}>
+            <h2>Choisissez la version du serveur</h2>
+            <div className={styles.VersionContainer}>
+              {versions['paper'].map((version, index) => (
+                <div
+                  key={index}
+                  className={`${styles.VersionCard} ${serverVersion === version ? styles.selectedVersion : ''}`}
+                  onClick={VersionChoice(version)}
+                >
+                  {serverVersion === version ? <GoCheck /> : <GoTag />}
+                  {version}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {isButtonVisible && (
+          <button
+            className={styles.createButton} 
+            onClick={handleCreateServer}
+            ref={buttonRef}
+          >
+            Créer le serveur
+          </button>
+        )}
       </div>
     </div>
   );
 };
 
 Javapick.propTypes = {
-  user: PropTypes.oneOfType([
-    PropTypes.shape({
+  user: PropTypes.shape({
     uid: PropTypes.string.isRequired,
-      displayName: PropTypes.string,
     email: PropTypes.string,
     photoURL: PropTypes.string,
   }),
-  ]),
-  onCreateServer: PropTypes.func.isRequired,
-  onSubdomainUpdate: PropTypes.func.isRequired,
-  onCancel: PropTypes.func,
-  noServers: PropTypes.any
 };
 
 export default Javapick;

src/pages/CreateServer/Javapick/java.module.scss

@@ -1,3 +1,127 @@
-.hey{
-    margin-top: 15rem;
+.Container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s ease-in-out;
+
+    h2{
+      font-weight: 400;
+    }
+  }
+  
+  .hey {
+    margin-top: 8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    transition: all 0.5s ease-in-out;
+  }
+  
+  .inputContainer {
+    margin-bottom: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    transition: all 0.5s ease-in-out;
+    transform: translateX(0); 
+  }
+  
+  .inputContainer.inputValid {
+    align-items: self-end; 
+    transform: translateX(-115%); 
+    transition: transform 0.5s ease-in-out; 
+  }
+  
+  .serverInput {
+    width: 100%;
+    max-width: 500px;
+    padding: 15px;
+    font-size: 1.5rem;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 0 0 0 rgba(0, 170, 255, 0.5);
+    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s ease-in-out;
+  
+    &:focus {
+      outline: none;
+      border-color: #00aaff;
+      box-shadow: 0 0 10px 2px rgba(0, 170, 255, 0.5);
+    }
+  }
+  
+  .validInput {
+    border-color: #198754;
+    box-shadow: 0 0 10px 2px rgba(25, 135, 84, 0.5);
+    transition: border-color 0.4s ease, box-shadow 0.4s ease;
+  }
+  
+  .ContainerVersion {
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding: 2rem;
+    border-radius: 0.4rem;
+    background-color: #fff;
+    margin-top: 2rem;
+    opacity: 0;
+    transform: translateY(-3rem);
+    transition: opacity 0.4s ease, transform 0.4s ease; 
+  }
+  
+  .ContainerVersion.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  .VersionContainer {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr); 
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+    gap: 1rem; 
+  }
+  
+  .VersionCard {
+    height: 4rem;
+    width: 8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    border-radius: 0.3rem;
+    background-color: #f0f0f0; 
+    color: #333; 
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .VersionCard:hover {
+    cursor: pointer;
+    background-color: #00aaff; 
+    color: #fff;
+  }
+  
+  .selectedVersion {
+    background-color: #198754;
+    color: #fff;
+    box-shadow: 0 0 10px 2px rgba(25, 135, 84, 0.5); 
+  }
+  
+  .createButton {
+    padding: 1rem 4rem;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+    background-color: #198754;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    align-self: flex-start; 
+}
+
+.createButton:hover {
+    background-color: #145a32;
+    transform: scale(1.05);
 }

src/pages/CreateServer/bedrock/bedrock.jsx

@@ -0,0 +1,42 @@
+import styles from './bedrock.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../../components/navbar/Navbar';
+import { useNavigate } from 'react-router-dom'; 
+
+
+const Bedrock = ({ user }) => {
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.Container}>
+      <Navbar 
+        user={user} 
+        hasShadow={true} 
+        showBackButton={true} 
+        backButtonText="Retour"
+        onBackClick={() => navigate('/CreateServer')}
+      />
+        <div className={styles.hey}>
+            <h1> bedrock</h1>
+        </div>
+    </div>
+  );
+};
+
+Bedrock.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      displayName: PropTypes.string,
+      email: PropTypes.string,
+      photoURL: PropTypes.string,
+    }),
+  ]),
+  onCreateServer: PropTypes.func.isRequired,
+  onSubdomainUpdate: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  noServers: PropTypes.any
+};
+
+export default Bedrock;

src/pages/CreateServer/bedrock/bedrock.module.scss

@@ -0,0 +1,3 @@
+.hey{
+    margin-top: 8em;
+}

src/pages/CreateServer/modpack/modpack.jsx

@@ -0,0 +1,42 @@
+import styles from './modpack.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../../components/navbar/Navbar';
+import { useNavigate } from 'react-router-dom'; 
+
+
+const Modpack = ({ user }) => {
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.Container}>
+      <Navbar 
+        user={user} 
+        hasShadow={true} 
+        showBackButton={true} 
+        backButtonText="Retour"
+        onBackClick={() => navigate('/CreateServer')}
+      />
+        <div className={styles.hey}>
+            <h1> modpack</h1>
+        </div>
+    </div>
+  );
+};
+
+Modpack.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      displayName: PropTypes.string,
+      email: PropTypes.string,
+      photoURL: PropTypes.string,
+    }),
+  ]),
+  onCreateServer: PropTypes.func.isRequired,
+  onSubdomainUpdate: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  noServers: PropTypes.any
+};
+
+export default Modpack;

src/pages/CreateServer/modpack/modpack.module.scss

@@ -0,0 +1,3 @@
+.hey{
+    margin-top: 8em;
+}

src/pages/DashboardPage/DashboardPage.jsx

@@ -1,14 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom'; 
 import ServerCard from '../../components/serverCard/serverCard';
 import Navbar from '../../components/navbar/Navbar';
-import styles from './DashboardPage.module.scss';
 import Loading from '../Loading/loading';
-import CreateServer from '../../components/CreateServer/CreateServer';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
-import { useNavigate } from 'react-router-dom'; 
-
+import styles from './DashboardPage.module.scss';
 
 const DashboardPage = ({ user }) => {
   const navigate = useNavigate();
@@ -17,50 +15,31 @@ const DashboardPage = ({ user }) => {
   const [subdomain, setSubdomain] = useState(null);
   const [loading, setLoading] = useState(true);
   const [showCreateServer, setShowCreateServer] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
 
-  const loadServers = async () => {
+  const loadServers = useCallback(async () => {
     try {
       const ApiResponse = await serviiApi.fetchServers();
       const data = ApiResponse.message;
-
       const sortedServers = data.sort((a, b) => b.running - a.running);
       setServers(sortedServers);
 
-      if (user && user.uid) {
+      if (user?.uid) {
         const userSubdomain = await getUserSubdomain(user.uid);
         setSubdomain(userSubdomain || '');
-      } else {
-        console.error('User or user.uid is undefined');
       }
     } catch (error) {
       console.error('Error fetching data:', error);
     } finally {
       setLoading(false);
     }
-  };
+  }, [user]);
 
   useEffect(() => {
     loadServers();
-  }, []);
+  }, [loadServers]);
 
-  const handleCreateServer = async (serverName, serverVersion , framework) => {
-    try {
-      if (!serverName || !serverVersion) return;
-      await serviiApi.serverCreate(serverName, serverVersion, framework);
-      await loadServers();
-      setShowCreateServer(false);
-    } catch (error) {
-      console.error('Error creating server:', error);
-    }
-  };
-
-  const handleCreateServerPage = () => {
-    setShowCreateServer(true);
-  };
-
-  const handleCancelCreateServer = () => {
-    setShowCreateServer(false);
-  };
+  const handleCreateServerPage = () => setShowCreateServer(true);
 
   const handleRunServer = async (serverName) => {
     try {
@@ -91,10 +70,13 @@ const DashboardPage = ({ user }) => {
 
   const handleCopyAddress = () => {
     const address = `${subdomain}.servii.fr`;
-    navigator.clipboard.writeText(address)
-
+    navigator.clipboard.writeText(address);
   };
 
+  const favoriteServer = servers[0] || null;
+
+  const serversWithoutFavorite = servers.filter(server => server !== favoriteServer);
+
   if (loading) {
     return (
       <div className={styles.dashboardContainer}>
@@ -110,30 +92,56 @@ const DashboardPage = ({ user }) => {
       {showCreateServer ? (
         navigate('/CreateServer')
       ) : (
-        <div className={styles.cardsContainer}>
-          {servers.length === 0 ? (
-            <CreateServer
-              user={user}
-              onCreateServer={handleCreateServerPage}
-              onCancel={handleCancelCreateServer} 
-              noServers
-            />
-          ) : (
-            <div>
+        <div className={styles.mainContent}>
+
           <div className={styles.iptitle}>
             Adresse de connexion à vos serveurs : 
-                <span onClick={handleCopyAddress}>
+            <span onClick={handleCopyAddress} className={styles.subdomain}>
               {" " + subdomain}.servii.fr
             </span>
           </div>
-              <button
-                className={styles.btncreate}
-                onClick={handleCreateServerPage}
-              >
-                <div>+</div>
+          
+          <div className={styles.headerContainer}>
+            <input
+              type="text"
+              placeholder="Filtrer par nom"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className={styles.searchInput}
+            />
+            <button className={styles.btnCreate} onClick={handleCreateServerPage}>
+              <div className={styles.plusIcon}>+</div>
               <div>Créer un nouveau serveur</div>
             </button>
-              {servers.map((server) => (
+          </div>
+
+          <div className={styles.FavoriteServerContainer}>
+            {favoriteServer ? (
+              <div className={styles.favoriteServerCard}>
+                <ServerCard
+                  key={favoriteServer.id}
+                  status={favoriteServer.running}
+                  version={favoriteServer.version}
+                  name={favoriteServer.name}
+                  framework={favoriteServer.framework}
+                  maxPlayers={favoriteServer.maxPlayers}
+                  countPlayers={favoriteServer.onlinePlayers}
+                  onRunClick={() => handleRunServer(favoriteServer.name)}
+                  onStopClick={() => handleStopServer(favoriteServer.name)}
+                  onDeleteClick={() => handleDeleteServer(favoriteServer.name)}
+                  subdomain={subdomain}
+                  favoriteServer={true}
+                />
+              </div>
+            ) : (
+              <p className={styles.AllserversTitle}>Aucun serveur disponible</p>
+            )}
+          </div>
+          <div className={styles.cardsContainer}>
+            {serversWithoutFavorite.length > 0 ? (
+              serversWithoutFavorite.filter(server => 
+                server.name.toLowerCase().includes(searchTerm.toLowerCase())
+              ).map((server) => (
                 <ServerCard
                   key={server.id}
                   status={server.running}
@@ -147,23 +155,25 @@ const DashboardPage = ({ user }) => {
                   onDeleteClick={() => handleDeleteServer(server.name)}
                   subdomain={subdomain}
                 />
-              ))}
-            </div>
+              ))
+            ) : (
+              <p className={styles.noServerText}>Aucun serveur trouvé</p>
             )}
           </div>
+        </div>
       )}
     </div>
   );
 };
 
+
+
 DashboardPage.propTypes = {
-  user: PropTypes.oneOfType([
-    PropTypes.shape({
+  user: PropTypes.shape({
     uid: PropTypes.string.isRequired,
     displayName: PropTypes.string,
     email: PropTypes.string,
   }),
-  ]),
 };
 
 export default DashboardPage;

src/pages/DashboardPage/DashboardPage.module.scss

@@ -5,54 +5,83 @@ html, body {
   background-color: var(--main-background-color);
 }
 
-
 .dashboardContainer {
   padding-top: var(--navbar-height);
-  background-color: var(--main-background-color);
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: var(--main-background-color);
   color: black;
 }
 
-.cardsContainer {
-  width: 50rem;
-  margin-top: 5rem; 
+.mainContent {
+  width: 100%;
+  padding: 2.5rem;
   display: flex;
-  flex-direction: row;
-  gap: 1rem;
+  flex-direction: column;
   align-items: center;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%; 
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.searchInput {
+  border: .2rem solid #ccc;
+  border-radius: 8px;
+  padding: .8rem 1rem;
+  font-size: 1.25rem;
+  width: 10rem; 
+  flex: none;
+}
+
+.cardsContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 25rem));
+  gap: 1rem;
+  width: 100%;
+  max-width: 60rem; 
+  margin: 0 auto; 
+  justify-items: center;
   justify-content: center;
 }
 
-.iptitle{
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-color);
-  font-style: italic;
-  margin-bottom: 1.5rem;
-}
 
-.iptitle span {
+
+.subdomain {
   color: violet;
   cursor: pointer;
+  text-decoration: none;
 }
 
-.btncreate{
+.btnCreate {
   display: flex;
   justify-content: center;
   align-items: center;
-    flex-direction: column;
-    background-color: white;
-    width: 40rem;
-    height: 10rem;
-
-    
-    border: solid 0.1rem #090325;
+  background-color: #2f2f2f; 
+  border: none;
+  padding: .5rem 1rem;
   cursor: pointer;
-    font-size: 2rem;
+  font-size: 1rem;
   font-weight: 600;
-    border-radius: 1rem;
-    margin-bottom: 3rem;
-    padding: 1.5rem;
+  border-radius: 0.5rem;
+  color: white;
+  transition: background-color 0.3s ease;
+  margin-left: 1rem;
+}
+
+.plusIcon {
+  font-size: 2rem;
+  margin-right: 1rem;
+}
+
+.AllserversTitle, .favoriteServerTitle, .iptitle {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--text-color);
+  margin: 1rem 0;
 }