add component cardOffer for Home Page when user not connected

frontend/src/components/CardModel/CardOffer.jsx

@@ -1,19 +1,61 @@
+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 className="card-container">
-      <h3 className="pourcentage">Titre de l'offre</h3>
-      <div className="competence">
-        <h3>HTML, CSS, JAVASCRIPT, REACT</h3>
-      </div>
-      <h3 className="label-offre">Titre de l'offre</h3>
-      <h4 className="entreprise-champs">Nom entreprise</h4>
-      <p className="p-description "> Description entreprise</p>
-      <ButtonMini textBtn="Postuler" />
+    <div>
+      {offers.map((offer) => (
+        <div className="card-container">
+          <h3 className="label-offre">{offer.title}</h3>
+          <div className="competence">
+            <h3>HTML, CSS, JAVASCRIPT, REACT</h3>
+          </div>
+          <h5 className="poste-champs">
+            {offer.type} - {offer.city}
+          </h5>
+          <h4 className="entreprise-champs">{offer.company}</h4>
+          <p className="p-description ">{offer.description}</p>
+          <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/pages/HomeOffer/Home.jsx

@@ -5,9 +5,10 @@ import "./Home.css";
 import CardOffre from "../../components/CardModel/CardOffre";
 import { useUserContext } from "../../contexts/UserContext";
 import HomeCard from "../../components/HomeCard/HomeCard";
+import CardOffer from "../../components/CardModel/CardOffer";
 
 function Home() {
-  const { goToOffer, apiService } = useGlobalContext();
+  const { goToOffer, apiService, user } = useGlobalContext();
   const { toggleFavorite } = useUserContext();
   const [matchingOffers, setMatchingOffers] = useState([]);
 
@@ -63,18 +64,29 @@ function Home() {
       />
       <div className="container-page">
         <HomeCard />
-        <h1>
-          Les offres qui <span>matchent !</span>
-        </h1>
+        {user ? (
+          <h1>
+            Les offres qui <span>matchent !</span>
+          </h1>
+        ) : null}
         <div className="offer-container">
-          {matchingOffers.map((offer) => (
-            <CardOffre
-              key={offer.id}
-              offer={offer}
-              toggleFavorite={toggleFavorite}
-              goToOffer={goToOffer}
-            />
-          ))}
+          {user ? (
+            matchingOffers.map((offer) => (
+              <CardOffre
+                key={offer.id}
+                offer={offer}
+                toggleFavorite={toggleFavorite}
+                goToOffer={goToOffer}
+              />
+            ))
+          ) : (
+            <>
+              <CardOffer />
+              <CardOffer />
+              <CardOffer />
+              <CardOffer />
+            </>
+          )}
         </div>
       </div>
     </div>

frontend/src/pages/ProfileUser/user-profile-model.css

@@ -38,6 +38,8 @@
   height: 130px;
   border-radius: 200px;
   margin-bottom: 20px;
+  margin-top: 40px;
+  justify-content: center;
 }
 
 @media all and (min-width: 1000px) {