offerpage

frontend/src/components/Headers/HeaderLongResearch.jsx

@@ -1,20 +1,18 @@
 import "./header.css";
 import PropTypes from "prop-types";
-import Input from "../Inputs/Input";
+import InputSearch from "../Inputs/InputSearch";
 
 function HeaderLongResearch({ textTitle, textTitle2 }) {
   return (
-    <header className="header">
+    <header className="header with-round-bottom">
       <nav>
         <i className="fa-solid fa-arrow-left" />
         <i className="fa-solid fa-bars" />
       </nav>
       <div className="header-content">
         <h1>{textTitle}</h1>
         <h2>{textTitle2}</h2>
-      </div>
-      <div className="input-research-container">
-        <Input className="input-research" showInput />
+        <InputSearch holderText="Recherche..." />
       </div>
     </header>
   );

frontend/src/components/Headers/header.css

@@ -73,7 +73,9 @@ border-radius 24%
   border-radius: 50px;
 }
 .input-research-container {
-  width: 100%;
+  height: 40px;
+  border-radius: 30px;
+  width: 80%;
   justify-content: center;
   background-color: var(--background-input);
   padding: 15px 20px;
@@ -84,7 +86,3 @@ border-radius 24%
   font-weight: 500;
   margin-top: 5px;
 }
-
-.input-research {
-  width: 80%;
-}

frontend/src/components/Inputs/InputSearch.jsx

@@ -0,0 +1,14 @@
+import "./input-search.css";
+
+function inputsearch() {
+  return (
+    <div>
+      <div className="background-search">
+        <label htmlFor="searchInput">Search:</label>
+        <input type="text" id="searchInput" name="searchInput" />
+      </div>
+    </div>
+  );
+}
+
+export default inputsearch;

frontend/src/components/Inputs/input-search.css

@@ -0,0 +1,24 @@
+.container-search {
+  margin: 40px 0 10px 0;
+}
+
+.background-search {
+  background-color: white;
+  padding: 10px 20px;
+  border-radius: 100px;
+  border: none;
+  color: var(--second-color);
+  font-size: 16px;
+  font-weight: 500;
+  width: 80%;
+  margin-top: 10px;
+  margin-left: 20px;
+}
+.background-search input {
+  width: 100%;
+  border-style: none;
+}
+::placeholder {
+  color: var(--text-exemple);
+  font-style: italic;
+}

frontend/src/pages/HomeOffer/Home.jsx

@@ -1,11 +1,12 @@
 import CardOffre from "../../components/CardModel/CardOffre";
-import HeaderLongTitreSsTitre from "../../components/Headers/HeaderLongTitreSsTitre";
+import HeaderLongResearch from "../../components/Headers/HeaderLongResearch";
 
 function Home() {
   return (
     <>
-      <HeaderLongTitreSsTitre />
+      <HeaderLongResearch textTitle="Bienvenue sur" textTitle2="nos offres" />
       <div className="container-page">
+        <h2>Les offres qui matchent !</h2>
         <CardOffre />
         <CardOffre />
         <CardOffre />