Update homepage

aelassas · Nov 30, 2024 · 79eef07 · 79eef07
1 parent 9e7f5a9
commit 79eef07
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 49 deletions.
diff --git a/frontend/src/assets/css/home.css b/frontend/src/assets/css/home.css
@@ -5,48 +5,6 @@ div.home {
   align-items: center;
   overflow: hidden auto;
   background-color: #fff;
-}
-
-/* Device width is less than or equal to 960px */
-
-@media only screen and (width <=960px) {
-  div.home div.home-content {
-    padding: 60px 0;
-    justify-content: flex-start !important;
-    height: 800px;
-  }
-
-  div.home-cover {
-    font-size: 40px;
-    font-weight: 800;
-    padding: 20px 5px 10px 5px;
-  }
-
-  div.home div.home-content div.home-search {
-    width: calc(100% - 40px);
-    padding: 20px;
-    margin: 10px 0;
-  }
-
-  div.home div.car-size div.boxes {
-    display: flex;
-    flex-direction: column;
-  }
-
-  div.home div.car-size div.boxes div.box {
-    margin-bottom: 30px;
-  }
-}
-
-/* Device width is between 500px and 960px */
-
-@media only screen and (width >=500px) and (width <=960px) {
-  div.home footer div.secure-payment {
-    bottom: 0;
-  }
-}
-
-div.home {
   transform: translate3d(0, 0, 0);
 }
 
@@ -69,7 +27,7 @@ div.home div.home-content::before {
   height: 100%;
   width: 100%;
   content: "";
-  background: rgba(51, 51, 51, .22);
+  background: rgb(51 51 51 / 22%);
   clear: both;
   z-index: 1;
 }
@@ -83,7 +41,7 @@ div.home div.home-cover {
 }
 
 div.home div.home-content div.home-search {
-  box-shadow: 0px 3px 5px -1px #00000033, 0px 1px 18px 0px #0000001F, 0px 6px 10px 0px #00000024;
+  box-shadow: 0 3px 5px -1px #0003, 0 1px 18px 0 #0000001F, 0 6px 10px 0 #00000024;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -109,7 +67,7 @@ div.home div.destinations {
   flex-direction: column;
   align-items: center;
   background-color: #f9f9f9;
-  padding: 50px 0 60px 0;
+  padding: 50px 0 60px;
 }
 
 div.home div.destinations h1 {
@@ -183,10 +141,47 @@ div.home div.car-size div.boxes div.box div.box-content span.unit {
 
 div.home div.home-map {
   width: 80%;
-  margin: 15px 0 30px 0;
+  margin: 15px 0 30px;
 }
 
-/* Device width is greater than or equal to 960px */
+@media only screen and (width <=960px) {
+  div.home div.home-content {
+    padding: 60px 0;
+    justify-content: flex-start !important;
+    height: 800px;
+  }
+
+  div.home-cover {
+    font-size: 40px;
+    font-weight: 800;
+    padding: 20px 5px 10px;
+  }
+
+  div.home div.home-content div.home-search {
+    width: calc(100% - 40px);
+    padding: 20px;
+    margin: 10px 0;
+  }
+
+  div.home div.car-size div.boxes {
+    display: flex;
+    flex-direction: column;
+  }
+
+  div.home div.car-size div.boxes div.box {
+    margin-bottom: 30px;
+  }
+
+  div.home div.home-map {
+    width: 100%;
+    padding: 5px;
+  }
+
+  div.home div.home-map .map {
+    min-height: 0;
+    height: 340px;
+  }
+}
 
 @media only screen and (width >=960px) {
   div.home div.home-content {

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -67,8 +67,8 @@ const Home = () => {
 
         </div>
 
-        <div className="home-suppliers" style={suppliers.length === 0 ? { margin: 0 } : undefined}>
-          {suppliers.length > 0 && (
+        <div className="home-suppliers" style={suppliers.length < 4 ? { margin: 0 } : undefined}>
+          {suppliers.length > 3 && (
             <>
               <h1>{strings.SUPPLIERS_TITLE}</h1>
               <SupplierCarrousel suppliers={suppliers} />