Merge pull request #37 from UNICEFECAR/feature/issue_95

Feature/issue 95
UNICEFECAR · Feb 12, 2024 · d5a2d0d · d5a2d0d
2 parents 9ddbb8d + fc2d4c3
commit d5a2d0d
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 41 deletions.
diff --git a/src/blocks/FindYourself/FindYourself.jsx b/src/blocks/FindYourself/FindYourself.jsx
@@ -5,6 +5,11 @@ import { useWindowDimensions } from "@USupport-components-library/utils";
 
 import "./find-yourself.scss";
 
+import image1 from "./assets/image_1.png";
+import image2 from "./assets/image_2.png";
+import image3 from "./assets/image_3.png";
+import image4 from "./assets/image_4.png";
+
 /**
  * FindYourself
  *
@@ -46,20 +51,28 @@ export const FindYourself = () => {
           </GridItem>
         )}
         <GridItem md={4} lg={6} classes="find-yourself__image-item box box-1">
-          <div className="overlay" />
-          <h3>{t("card_text_1")}</h3>
+          <div className="overlay">
+            <img src={image1} className="box__image" />
+            <h3>{t("card_text_1")}</h3>
+          </div>
         </GridItem>
         <GridItem md={4} lg={6} classes="find-yourself__image-item box box-2">
-          <div className="overlay" />
-          <h3>{t("card_text_2")}</h3>
+          <div className="overlay">
+            <img src={image2} className="box__image" />
+            <h3>{t("card_text_2")}</h3>
+          </div>
         </GridItem>
         <GridItem md={4} lg={6} classes="find-yourself__image-item box box-3">
-          <div className="overlay" />
-          <h3>{t("card_text_3")}</h3>
+          <div className="overlay">
+            <img src={image3} className="box__image" />
+            <h3>{t("card_text_3")}</h3>
+          </div>
         </GridItem>
         <GridItem md={4} lg={6} classes="find-yourself__image-item box box-4">
-          <div className="overlay" />
-          <h3>{t("card_text_4")}</h3>
+          <div className="overlay">
+            <img src={image4} className="box__image" />
+            <h3>{t("card_text_4")}</h3>
+          </div>
         </GridItem>
       </Grid>
     </Block>

diff --git a/src/blocks/FindYourself/assets/image_1.png b/src/blocks/FindYourself/assets/image_1.png
diff --git a/src/blocks/FindYourself/assets/image_2.png b/src/blocks/FindYourself/assets/image_2.png
diff --git a/src/blocks/FindYourself/assets/image_3.png b/src/blocks/FindYourself/assets/image_3.png
diff --git a/src/blocks/FindYourself/assets/image_4.png b/src/blocks/FindYourself/assets/image_4.png
diff --git a/src/blocks/FindYourself/find-yourself.scss b/src/blocks/FindYourself/find-yourself.scss
@@ -30,6 +30,13 @@
     text-align: center;
     min-width: 40.7rem;
 
+    & h2,
+    & h3,
+    & p,
+    & .paragraph {
+      color: $color_white_ff !important;
+    }
+
     &__h3 {
       text-align: center;
       @media screen and (min-width: $screen-md) {
@@ -67,13 +74,6 @@
     }
   }
 
-  & h2,
-  & h3,
-  & p,
-  & .paragraph {
-    color: $color_white_ff !important;
-  }
-
   &__text-item {
     width: 100vw;
     @include themify($themes, "background-color", "color_purple_200e2f");
@@ -84,6 +84,13 @@
     align-items: center;
     justify-content: center;
     min-width: 40.7rem;
+
+    & h2,
+    & h3,
+    & p,
+    & .paragraph {
+      color: $color_white_ff !important;
+    }
   }
 
   &__text {
@@ -117,28 +124,28 @@
       background-repeat: no-repeat;
       background-size: cover;
       justify-self: center;
-    }
 
-    &.box-1 {
-      .no-webp & {
-        background-image: url("./assets/NeedHelp.png");
+      & h3 {
+        color: #6a4a4c;
+        margin-top: 1rem;
+        font-weight: $font_medium;
       }
-      .webp & {
-        background-image: url("./assets/NeedHelp.webp");
+
+      & img {
+        width: 10.5rem;
       }
+    }
+
+    &.box-1 {
+      background-color: #fe9c91;
       margin-top: $spacing_4_8;
       @media screen and (min-width: $screen-md) {
         place-self: end;
       }
     }
 
     &.box-2 {
-      .no-webp & {
-        background-image: url("./assets/OnlineConsultations.png");
-      }
-      .webp & {
-        background-image: url("./assets/OnlineConsultations.webp");
-      }
+      background-color: #bbe0fa;
       margin-top: $spacing_3_2;
       @media screen and (min-width: $screen-md) {
         margin-top: $spacing_4_8;
@@ -147,44 +154,52 @@
     }
 
     &.box-3 {
-      .no-webp & {
-        background-image: url("./assets/FreeResources.png");
-      }
-      .webp & {
-        background-image: url("./assets/FreeResources.webp");
-      }
+      background-color: #6085cb;
       margin-top: $spacing_3_2;
+
+      & h3 {
+        color: #fff3d7;
+      }
+
       @media screen and (min-width: $screen-md) {
         margin-top: $spacing_4_8;
         place-self: end;
       }
     }
 
     &.box-4 {
-      .no-webp & {
-        background-image: url("./assets/EasyAndSelfAccess.png");
-      }
-      .webp & {
-        background-image: url("./assets/EasyAndSelfAccess.webp");
-      }
+      background-color: #fdccbe;
       margin-top: $spacing_3_2;
+
       @media screen and (min-width: $screen-md) {
         margin-top: $spacing_4_8;
         place-self: start;
       }
+
+      & img {
+        width: 9rem;
+        padding-right: 2rem;
+      }
+
+      & h3 {
+        margin-top: 1.5rem;
+        color: #535150;
+      }
     }
 
     & > .overlay {
-      @include themify($themes, "background-color", "color_black_010101");
       border-radius: $border_radius_4_0;
       height: inherit;
       position: absolute;
       width: inherit;
       z-index: $z_index_1;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
     }
 
     h3 {
-      position: relative;
       text-align: center;
       z-index: $z_index_2;
     }