Dev

frontend/src/App.css

@@ -121,8 +121,9 @@ body {
 .container-page.with-rounded-border {
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
-  padding-top: 70px;
+  padding-top: 10px;
   margin-top: -170px;
+  margin-bottom: 100px;
 }
 
 #sign.container-page.with-rounded-border,

frontend/src/App.jsx

@@ -1,12 +1,14 @@
 import { Outlet } from "react-router-dom";
 import Navbar from "./components/NavBar/NavBar";
+import Footer from "./components/Footer/Footer";
 import "./App.css";
 
 function App() {
   return (
     <>
       <Navbar />
       <Outlet />
+      <Footer />
     </>
   );
 }

frontend/src/components/CardModel/CardOffer.jsx

@@ -0,0 +1,86 @@
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import ButtonMini from "../Boutons/ButtonMini";
+import "./card-model.css";
+import { useGlobalContext } from "../../contexts/GlobalContext";
+
+function CardOffer() {
+  const globalContext = useGlobalContext();
+  const [offers, setOffers] = useState([]);
+  useEffect(() => {
+    const getAllOffer = async () => {
+      try {
+        const response = await globalContext.apiService.get(
+          `${import.meta.env.VITE_BACKEND_URL}/api/offer`
+        );
+        setOffers(response.data);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    getAllOffer();
+  }, []);
+
+  return (
+    <div>
+      {offers.map((offer) => (
+        <div className="card-container" key={offer.id}>
+          <h3 className="label-offre">{offer.title}</h3>
+          <h5 className="poste-champs">
+            {offer.type} - {offer.city}
+          </h5>
+          <h4 className="entreprise-champs">{offer.company}</h4>
+          <p className="p-description ">{offer.mission}</p>
+          <ButtonMini textBtn="Postuler" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+//   return (
+//     <div>
+//       {offers.map((offer) => (
+//         <div className="card-container" key={offer.id}>
+//           {" "}
+//           {/* Ajoutez une clé unique pour chaque élément de la liste */}
+//           <h3 className="label-offre">{offer.title}</h3>{" "}
+//           {/* Utilisez la propriété 'title' pour afficher le titre de l'offre */}
+//           <div className="competence">
+//             {/* Affichez les compétences de l'offre si nécessaire */}
+//             {offer.competences.map((competence) => (
+//               <h3 key={competence.id}>{competence.name}</h3>
+//             ))}
+//           </div>
+//           <h5 className="poste-champs">
+//             {offer.type} - {offer.city}
+//           </h5>
+//           <h4 className="entreprise-champs">{offer.company}</h4>{" "}
+//           {/* Utilisez la propriété 'company' pour afficher le nom de l'entreprise */}
+//           <p className="p-description">{offer.description}</p>{" "}
+//           {/* Utilisez la propriété 'description' pour afficher la description de l'offre */}
+//           <ButtonMini textBtn="Postuler" />
+//         </div>
+//       ))}
+//     </div>
+//   );
+// }
+
+CardOffer.propTypes = {
+  offer: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    title: PropTypes.string.isRequired,
+    company: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    city: PropTypes.string.isRequired,
+    info: PropTypes.string.isRequired,
+    competences: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        name: PropTypes.string.isRequired,
+      })
+    ).isRequired,
+  }).isRequired,
+};
+
+export default CardOffer;

frontend/src/components/CardModel/card-model.css

@@ -3,7 +3,7 @@
   padding: 30px;
   border-radius: 6px;
   box-shadow: 5px 5px 15px 8px rgba(217, 217, 217, 0.53);
-  margin: 20px 0;
+  margin: 30px 0;
   overflow: hidden;
 }
 

frontend/src/components/Dashboards/RowDash2.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import "./RowDash.css";
 import { useGlobalContext } from "../../contexts/GlobalContext";
-import { useAdminContext } from "../../contexts/AdminContext";
+// import { useAdminContext } from "../../contexts/AdminContext";
 
 function RowDash2() {
   const { apiService } = useGlobalContext();
-  const { goToEditUser } = useAdminContext();
+  // const { goToEditUser } = useAdminContext();
   const [users, setUsers] = useState([]);
 
   const fetchUsers = async () => {
@@ -48,14 +48,14 @@ function RowDash2() {
           <p className="bigArray-box">{user.email}</p>
           <p>{user.is_admin}</p>
           <div className="icon-dash">
-            <button
+            {/* <button
               type="button"
               aria-label="editeuser"
               onClick={() => goToEditUser(user.id)}
               className="invisible-button"
             >
               <i className="fa-solid fa-pen" />
-            </button>
+            </button> */}
             <button
               type="button"
               aria-label="deleteuser"

frontend/src/components/Footer/Footer.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { MDBFooter } from "mdb-react-ui-kit";
+
+export default function Footer() {
+  return (
+    <MDBFooter bgColor="light" className="text-center text-lg-left">
+      <div
+        className="text-center p-3"
+        style={{ backgroundColor: "#c91f61", color: "white" }}
+      >
+        &copy; {new Date().getFullYear()} Copyright:{" "}
+        <a className="text-light" href="https://mdbootstrap.com/">
+          Externatic.com
+        </a>
+      </div>
+    </MDBFooter>
+  );
+}

frontend/src/components/Headers/HeaderLongResearch.jsx

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 
 function HeaderLongResearch({ textTitle, textTitle2 }) {
   return (
-    <header className="  header with-round-bottom ">
-      <div className=" container header-content">
+    <header className="header with-round-bottom">
+      <div className="container-header-content">
         <h1>{textTitle}</h1>
-        <h2>{textTitle2}</h2>
+        <h2 className="text-title-2">{textTitle2}</h2>
       </div>
     </header>
   );

frontend/src/components/Headers/HeaderLongUser.jsx

@@ -1,10 +1,9 @@
 import "./header.css";
 import { useState } from "react";
-import PropTypes from "prop-types";
 import Unknow from "../../assets/no-profile.jpg";
 import { useGlobalContext } from "../../contexts/GlobalContext";
 
-function HeaderLongUser({ textTitle, textTitle2 }) {
+function HeaderLongUser() {
   const [file, setFile] = useState();
   const { apiService, setUser, user } = useGlobalContext();
 
@@ -45,28 +44,26 @@ function HeaderLongUser({ textTitle, textTitle2 }) {
             alt=""
           />
         </div>
-        <form onSubmit={handleSubmit}>
-          <input
-            type="file"
-            accept="image/*"
-            onChange={(e) => setFile(e.target.files[0])}
-          />
-          <button type="submit">Modifier</button>
-        </form>
-        <h1>
-          {textTitle} {textTitle2}
-        </h1>
+        <div className="form-img">
+          <form className="yooo" onSubmit={handleSubmit}>
+            <label htmlFor="file" className="label-file">
+              {" "}
+              Choisir une image
+            </label>
+            <input
+              id="file"
+              className="input-img"
+              type="file"
+              accept="image/*"
+              onChange={(e) => setFile(e.target.files[0])}
+            />
+            <button type="submit">Modifier</button>
+          </form>
+        </div>
+        <h1>Modifier votre profil</h1>
       </div>
     </header>
   );
 }
 
-HeaderLongUser.propTypes = {
-  textTitle: PropTypes.string,
-  textTitle2: PropTypes.string,
-};
-HeaderLongUser.defaultProps = {
-  textTitle: "Titre par défaut",
-  textTitle2: "Titre 2 par défaut",
-};
 export default HeaderLongUser;

frontend/src/components/Headers/header.css

@@ -3,7 +3,7 @@
   background-color: var(--main-color);
   padding-bottom: 40px;
   margin-top: -50px;
-  padding-top: 80px;
+  padding-top: 50px;
 }
 
 .edit-profile-btn {
@@ -39,8 +39,7 @@
 
 .header .header-content h1 {
   font-weight: 500;
-  margin-left: 30px;
-  margin-right: 30px;
+  margin-bottom: 180px;
 }
 
 .header .header-content h2 {
@@ -49,6 +48,13 @@
   margin-right: 30px;
   margin-top: -10px;
 }
+.container-header-content {
+  padding-left: 30px;
+}
+
+.text-title-2 {
+  padding-top: 30px;
+}
 
 .header .header-content.user {
   display: flex;
@@ -63,11 +69,35 @@
 }
 
 .header .profile-img-container img {
-  width: 100%;
+  width: 100px;
   height: auto;
   border-radius: 50%;
 }
 
+.input-img {
+  display: none;
+}
+.form-img {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  padding: 20px 0;
+}
+.label-file {
+  cursor: pointer;
+  color: black;
+  background-color: white;
+  padding: 7px 12px;
+  border-radius: 50px;
+}
+
+.yooo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
 .header .header-content.user button {
   margin-top: -15px;
   background-color: white;
@@ -100,4 +130,8 @@
   .edit-profile-btn {
     margin-top: -200px;
   }
+
+  .header .header-content h1 {
+    margin: 80px 0 130px 0;
+  }
 }

frontend/src/components/HomeCard/HomeCard.css

@@ -0,0 +1,50 @@
+.big-homeCard-container {
+  padding: 60px 0;
+}
+.big-homeCard-container span {
+  color: var(--second-color);
+  font-weight: 600;
+  font-style: italic;
+}
+
+.big-homeCard-container h1 {
+  padding-bottom: 20px;
+}
+
+.homeCard-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  color: black;
+}
+
+.card-one,
+.card-two,
+.card-three {
+  padding: 30px 15px;
+  margin: 20px 0;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(85, 85, 85, 0.2);
+  background-color: var(--background-input);
+}
+
+.homeCard-container i {
+  font-size: 30px;
+  padding-bottom: 15px;
+  color: var(--main-color);
+}
+
+@media screen and (min-width: 768px) {
+  .homeCard-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 50px;
+  }
+  .card-one,
+  .card-two,
+  .card-three {
+    margin: 30px 0;
+    width: 30%;
+  }
+}