landing page fixes

src/app/landing-page/landing-page-theme.scss

@@ -14,25 +14,27 @@
         h1 {
           color: $main-color;
           font-size: 50px;
-          font-weight: 500;
+          font-weight: bold;
+          font-family: "Roboto";
         }
         p {
           color: $main-color;
           font-size: 20px;
-          font-weight: 300;
+          font-weight: 400;
           margin-top: 20px;
           font-family: "Roboto";
         }
       }
       &__btn {
         background-color: $main-color;
-        padding: 15px 30px;
+        padding: 10px 30px;
         border-radius: 50px;
         color: $white-color;
         margin-top: 20px;
         border: 1px solid $main-color;
         cursor: pointer;
         transition: all 0.5s;
+        font-size: 15px;
         &:hover {
           background-color: $main-blue;
           border: 1px solid $main-blue;
@@ -41,12 +43,13 @@
     }
     .platform {
       width: 100%;
-      padding: 20px 40px;
+      padding: 20px 60px;
       background-color: $white-color;
       div {
         span {
           font-size: 40px;
           color: $main-color;
+          font-weight: 500;
         }
         p {
           color: $main-color;
@@ -85,6 +88,37 @@
       border-radius: 20px;
       padding: 40px 40px;
       margin-top: 20px;
+      position: relative;
+      .content {
+        position: relative;
+        width: 230px;
+        height: 200px;
+        // background-color: aqua;
+        border-radius: 20px;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .overlay {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          right: 0;
+          background: rgba($color: #2e368f, $alpha: 0.3);
+          opacity: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        }
+        &:hover {
+          .overlay {
+            opacity: 1;
+          }
+        }
+      }
       h1 {
         text-align: center;
         color: $main-color;
@@ -136,11 +170,12 @@
             font-size: 18px;
             color: $main-color;
             margin: 10px 0;
+            font-weight: 500;
           }
 
           span {
             color: $main-color;
-            font-size: 15px;
+            font-size: 17px;
             font-family: "Roboto";
             font-weight: 300;
           }
@@ -193,7 +228,7 @@
       ul {
         list-style: none;
         gap: 30px;
-        padding: 20px 0;
+        padding: 40px 0;
         li {
           span {
             color: $main-color;

src/app/landing-page/tools/tools.component.html

@@ -1,14 +1,38 @@
 <section class="tools">
   <h1>See you later 16 different HR tools</h1>
   <div class="gap-30" fxLayout="row wrap" fxLayoutAlign="center center">
-    <img src="../../../assets/images/tool_1.png" alt="" title="" />
-    <img src="../../../assets/images/tool_2.png" alt="" title="" />
-    <img src="../../../assets/images/tool_3.png" alt="" title="" />
-    <img src="../../../assets/images/tool_4.png" alt="" title="" />
-    <img src="../../../assets/images/tool_5.png" alt="" title="" />
-    <img src="../../../assets/images/tool_6.png" alt="" title="" />
-    <img src="../../../assets/images/tool_7.png" alt="" title="" />
-    <img src="../../../assets/images/tool_8.png" alt="" title="" />
+    <div class="content">
+      <img src="../../../assets/images/tool_1.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_2.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_3.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_4.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_5.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_6.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_7.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
+    <div class="content">
+      <img src="../../../assets/images/tool_8.png" alt="" title="" />
+      <div class="overlay"></div>
+    </div>
   </div>
   <p>
     We’re simplifying every aspect of managing a worldwide team, from benefits

src/app/landing-page/why-mt/why-mt.component.html

@@ -15,32 +15,29 @@
       <img src="../../../assets/images/correct.png" alt="" title="" />
       <span
         >Ease of use experience: The platform is designed with a user-friendly
-        experience, making it easy to register, <br />
-        hire, and follow up.</span
+        experience, making it easy to register, hire, and follow up.</span
       >
     </li>
     <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
       <img src="../../../assets/images/correct.png" alt="" title="" />
       <span
         >Comprehensive solution: We offer a comprehensive solution that meets
-        all the requirements of employers<br />
-        and employees.</span
+        all the requirements of employers and employees.</span
       >
     </li>
     <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
       <img src="../../../assets/images/correct.png" alt="" title="" />
       <span
         >Financial management: We provide a legal and easy solution with
-        financial transactions between employers <br />
-        and employees all over the world.</span
+        financial transactions between employers and employees all over the
+        world.</span
       >
     </li>
     <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
       <img src="../../../assets/images/correct.png" alt="" title="" />
       <span
         >Data security: We prioritize data protection by providing a robust and
-        robust system that keeps information <br />
-        confidential.</span
+        robust system that keeps information confidential.</span
       >
     </li>
     <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
@@ -54,8 +51,7 @@
       <img src="../../../assets/images/correct.png" alt="" title="" />
       <span
         >Legal Compliance: We provide a legal solution that ensures the legal
-        relationship between employers <br />
-        and employees around the world.</span
+        relationship between employers and employees around the world.</span
       >
     </li>
   </ul>

src/styles.scss

@@ -14,7 +14,8 @@ body {
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-family: "Montserrat", sans-serif;
+  // font-family: "Montserrat", sans-serif;
+  font-family: "Roboto";
 }
 
 .mt-2 {