Update code and assets file

src/index.pug

@@ -13,16 +13,11 @@ html(lang="en")
     )
     title Food Hut
   body
-    header.header
+    include layouts/header
-      .header-container
+    main
-        .logo-wrapper
+      include sections/welcome
-          a.logo-link(href="javascript:void(0)")
+      include sections/offer
-            img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+      include sections/service
-        .header-content
+      include sections/menu
-          include layouts/nav-menu
+      include sections/platform
-    include layouts/welcome
-    include layouts/offer
-    include layouts/service
-    include layouts/menu
-    include layouts/platform
     include layouts/footer

src/layouts/footer.pug

@@ -5,21 +5,24 @@
 footer.footer
   .footer__container
     .footer__introduction
-      p.footer__branch-name.primary-text Foodhut
+      p.footer__brand-name.primary-text Foodhut
       p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
       .footer__social-media
-        img.facebook-icon(
+        a.footer__social-link(href="javascript:void(0)")
-          src=image_footer_path + "facebook.png",
+          img.facebook-icon(
-          alt="Facebook icon"
+            src=image_footer_path + "facebook.png",
-        )
+            alt="Facebook icon"
-        img.instagram-icon(
+          )
-          src=image_footer_path + "instagram.png",
+        a.footer__social-link(href="javascript:void(0)")
-          alt="Instagram icon"
+          img.instagram-icon(
-        )
+            src=image_footer_path + "instagram.png",
-        img.twitter-icon(
+            alt="Instagram icon"
-          src=image_footer_path + "twitter.png",
+          )
-          alt="Twitter icon"
+        a.footer__social-link(href="javascript:void(0)")
-        )
+          img.twitter-icon(
+            src=image_footer_path + "twitter.png",
+            alt="Twitter icon"
+          )
     .footer__information
       .footer__about-us
         h3.footer__heading.primary-text About Us

src/layouts/header.pug

@@ -0,0 +1,16 @@
+- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
+
+header.header
+  .header-container
+    .logo-wrapper
+      a.logo-link(href="javascript:void(0)")
+        img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+    .header-content
+      nav.nav
+        input.toggle-menu(type="checkbox")
+        .icon-menu
+        ul.nav-list
+          each val in list
+            li.nav-item
+              a.nav-link.link-text(href="javascript:void(0)")= val
+      a.btn.nav-download-btn(href="javascript:void(0)") Download App

src/layouts/nav-menu.pug

@@ -1,10 +0,0 @@
-- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
-
-nav.nav
-  input.toggle-menu(type="checkbox")
-  .icon-menu
-  ul.nav-list
-    each val in list
-      li.nav-item
-        a.nav-link.link-text(href="javascript:void(0)")= val
-a.btn.nav-download-btn(href="javascript:void(0)") Download App

src/layouts/platform.pug

@@ -1,34 +0,0 @@
-- var platform_image_path = "./assets/images/platform/";
-
-section.platform
-  .platform__container
-    .platform__image-container
-      picture
-        source(
-          media="(min-width: 1200px)",
-          srcset=platform_image_path + "main-image-desktop.png"
-        )
-        img.platform__main-image(
-          src=platform_image_path + "main-image-mobile.png",
-          alt="The image introduce the platform"
-        )
-    .platform__content
-      h2.platform__heading It's Now
-        = " "
-        span.primary-text More Easy
-        = " to "
-        span.secondary-text Order
-        = " by Our Mobile "
-        span.primary-text App
-      p.platform__description All you need to do is downlode one of the best delivery apps, makes a and most companies are opting for mobile app devlopment for food delivery.
-      .platform__store-container
-        .platform__google-store
-          img.platform__google-store-image(
-            src=platform_image_path + "chplay.png",
-            alt="Google store image"
-          )
-        .platform__app-store
-          img.platform__app-store-image(
-            src=platform_image_path + "app-store.png",
-            alt="App store image"
-          )

src/sections/menu.pug

@@ -6,7 +6,7 @@
 section.menu
   .menu__container
     h2.menu__heading
-      span.primary-text= Menu
+      span.primary-text Menu
       = " That "
       span.secondary-text Always
       = " Make You Fall In "

src/sections/platform.pug

@@ -0,0 +1,48 @@
+- var platform_image_path = "./assets/images/platform/";
+- var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}];
+
+section.platform
+  .platform__container
+    .platform__image-container
+      each item in list_food_image_path 
+        picture.platform__image-food
+          source(media="(min-width: 1200px)", srcset=item.desktop_image_path)
+          img(src=item.mobile_image_path, alt="Food image")
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=platform_image_path + "background-desktop.png"
+        )
+        img.platform__background-img(
+          src=platform_image_path + "background-mobile.png",
+          alt="Background image"
+        )
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=platform_image_path + "main-image-desktop.png"
+        )
+        img.platform__main-image(
+          src=platform_image_path + "main-image-mobile.png",
+          alt="The image introduce the platform"
+        )
+    .platform__content
+      h2.platform__heading It's Now
+        = " "
+        span.primary-text More Easy
+        = " to "
+        span.secondary-text Order
+        = " by Our Mobile "
+        span.primary-text App
+      p.platform__description All you need to do is downlode one of the best delivery apps, make a and most companies are opting for mobile app devlopment for food delivery
+      .platform__store-container
+        .platform__google-store
+          img.platform__google-store-image(
+            src=platform_image_path + "chplay.png",
+            alt="Google store image"
+          )
+        .platform__app-store
+          img.platform__app-store-image(
+            src=platform_image_path + "app-store.png",
+            alt="App store image"
+          )

src/sections/welcome.pug

@@ -1,36 +1,71 @@
 - var welcome_img_path = "./assets/images/welcome/";
+- var list_food_image_mobile = [{img_mobile_path: welcome_img_path + "food-1-mobile.png", img_desktop_path: welcome_img_path + "food-1-desktop.png"}, {img_mobile_path: welcome_img_path + "food-2-mobile.png", img_desktop_path: welcome_img_path + "food-2-desktop.png"}, {img_mobile_path: welcome_img_path + "food-3-mobile.png", img_desktop_path: welcome_img_path + "food-3-desktop.png"}, {img_mobile_path: welcome_img_path + "food-4-mobile.png", img_desktop_path: welcome_img_path + "food-4-desktop.png"}];
 
 section.welcome
   .welcome__container
     .welcome__banner
       .welcome__banner-container
-        img.welcome__banner-img(
+        .welcome__main-image
-          src=welcome_img_path + "welcome-image-mobile.png",
+          picture
-          alt="Welcome banner image"
+            source(
-        )
+              media="(min-width: 1200px)",
-        picture
+              srcset=welcome_img_path + "welcome-image-desktop.png"
-          source(
+            )
-            media="(min-width: 840px)",
+            img.welcome__banner-img(
-            srcset=welcome_img_path + "lines-background-desktop.png"
+              src=welcome_img_path + "welcome-image-mobile.png",
-          )
+              alt="Welcome banner image"
-          img.welcome__lines-background(
+            )
-            src=welcome_img_path + "lines-background-mobile.png",
+          each item in list_food_image_mobile
-            alt="Lines background"
+            picture.welcome__food-img
-          )
+              source(media="(min-width: 1200px)", srcset=item.img_desktop_path)
-        picture
+              img(src=item.img_mobile_path, alt="Food image")
-          source(
+          picture
-            media="(min-width: 840px)",
+            source(
-            srcset=welcome_img_path + "arrow-desktop.png",
+              media="(min-width: 1200px)",
-            alt="Arrow image"
+              srcset=welcome_img_path + "review-card-desktop.png"
-          )
+            )
-          img.welcome__arrow-img-up(
+            img.welcome__review-card(
-            src=welcome_img_path + "arrow-mobile.png",
+              src=welcome_img_path + "review-card-mobile.png",
-            alt="Arrow image"
+              alt="Review card"
-          )
+            )
-        img.welcome__mint-img(
+          picture
-          src=welcome_img_path + "mint.png",
+            source(
-          alt="Mint image"
+              media="(min-width: 1200px)",
-        )
+              srcset=welcome_img_path + "rate-card-desktop.png"
+            )
+            img.welcome__rate-card(
+              src=welcome_img_path + "rate-card-mobile.png",
+              alt="Review card"
+            )
+        .welcome__background-banner
+          picture
+            source(
+              media="(min-width: 1200px)",
+              srcset=welcome_img_path + "lines-background-desktop.png"
+            )
+            img.welcome__lines-background(
+              src=welcome_img_path + "lines-background-mobile.png",
+              alt="Lines background"
+            )
+          picture
+            source(
+              media="(min-width: 1200px)",
+              srcset=welcome_img_path + "arrow-desktop.png",
+              alt="Arrow image"
+            )
+            img.welcome__arrow-img-up(
+              src=welcome_img_path + "arrow-mobile.png",
+              alt="Arrow image"
+            )
+          picture
+            source(
+              media="(min-width: 1200px)",
+              srcset=welcome_img_path + "mint-desktop.png"
+            )
+            img.welcome__mint-img(
+              src=welcome_img_path + "mint-mobile.png",
+              alt="Mint image"
+            )
     .welcome__content
       .welcome__arrow-down-img-wrapper
         img.welcome__arrow-img-down(

src/styles/abstracts/_mixins.scss

@@ -7,7 +7,7 @@
 }
 
 @mixin base-icon-menu {
-  @include size(36px, 3px);
+  @include size(36px, 5px);
 
   background: #000000;
   border-radius: 10px;
@@ -60,12 +60,7 @@
   }
 }
 
-@mixin set-absolute-and-location(
+@mixin set-location($top: null, $left: null, $right: null, $bottom: null) {
-  $top: null,
-  $left: null,
-  $right: null,
-  $bottom: null
-) {
   @if $top != null {
     top: $top;
   }

src/styles/abstracts/_variables.scss

@@ -8,6 +8,7 @@ $white: #fff;
 $gray: #686d77;
 $primary-color: #f54748;
 $secondary-color: #fdc55e;
+$secondary-light-color: #f7d699;
 
 // Font size
 $fs-xx-sm: 14px;

src/styles/bases/_typography.scss

@@ -42,4 +42,5 @@ $font-path: "../assets/fonts";
 
 * {
   font-family: $primary-font;
+  line-height: normal;
 }

src/styles/components/_button.scss

@@ -1,6 +1,6 @@
 .btn {
   align-self: center;
-  padding: 13px 20px;
+  padding: 11px 20px;
   background-color: $primary-color;
   border-radius: 100px;
   font-size: $fs-md;

src/styles/components/_card-item.scss

@@ -11,14 +11,14 @@
 
 .food-image {
   @extend %absolute;
-  @include set-absolute-and-location($top: 29px);
+  @include set-location($top: 29px);
 
   margin: auto;
 }
 
 .price {
   @extend %absolute;
-  @include set-absolute-and-location($top: 176px, $right: 70px);
+  @include set-location($top: 176px, $right: 70px);
   @include size(52px, 52px);
 
   color: $white;
@@ -32,7 +32,7 @@
 
 .content-card {
   @extend %d-flex, %align-center-col, %absolute;
-  @include set-absolute-and-location($bottom: 60px);
+  @include set-location($bottom: 72px);
   @include size(100%, auto);
 }
 
@@ -41,6 +41,10 @@
   @include flex-layout($align: center, $gap: 10px);
 }
 
+.rate-point {
+  font-size: $fs-md;
+}
+
 .star-container {
   @include size(24px, 22px);
 }
@@ -54,21 +58,21 @@
 .avatar {
   &:first-child {
     @extend %absolute;
-    @include set-absolute-and-location($left: 38px);
+    @include set-location($left: 38px);
 
     z-index: 2;
   }
 
   &:nth-child(2) {
     @extend %absolute;
-    @include set-absolute-and-location($left: 19px);
+    @include set-location($left: 19px);
 
     z-index: 1;
   }
 
   &:last-child {
     @extend %absolute;
-    @include set-absolute-and-location($left: 0);
+    @include set-location($left: 0);
   }
 }
 
@@ -83,7 +87,7 @@
   @include size(100%, auto);
 
   max-width: 243px;
-  margin-top: 16px;
+  margin-top: 13px;
   text-align: center;
   text-transform: capitalize;
   color: $black;
@@ -91,7 +95,7 @@
 
 .order-btn {
   @extend %absolute;
-  @include set-absolute-and-location($bottom: 0px);
+  @include set-location($bottom: 0px);
 
   padding: 10px 20px;
   text-transform: capitalize;

src/styles/components/_toggle-menu.scss

@@ -3,17 +3,18 @@
 
   position: relative;
   cursor: pointer;
+  top: -1px;
 
   &:before {
     @include icon-menu;
 
-    top: -10px;
+    top: -11px;
   }
 
   &:after {
     @include icon-menu;
 
-    top: 10px;
+    top: 11px;
   }
 }
 

src/styles/layouts/_footer.scss

@@ -11,23 +11,35 @@
     max-width: 428px;
   }
 
-  &__branch-name {
+  &__brand-name {
     font-size: $fs-x-lg;
     font-weight: 600;
   }
 
   &__introduction .footer__description {
-    margin-top: 10px;
+    margin-top: 8 px;
     font-size: $fs-md;
     max-width: 325px;
   }
 
   &__social-media {
     @extend %d-flex;
-    @include flex-layout($gap: 30px);
+    @include flex-layout($gap: 30px, $align: center);
     margin-top: 22.6px;
   }
 
+  &__social-link:first-child {
+    @include size(auto, 21px);
+  }
+
+  &__social-link:nth-child(2) {
+    @include size(auto, 19px);
+  }
+
+  &__social-link:nth-child(3) {
+    @include size(auto, 17px);
+  }
+
   &__information {
     @extend %d-flex;
     @include flex-layout($gap: 80px);
@@ -87,6 +99,8 @@
     @extend %mr-ml-auto;
     @include size(fit-content, auto);
 
+    font-size: $fs-x-sm;
+    font-family: $secondary-font;
     margin-top: 80px;
     padding-bottom: 29px;
   }
@@ -97,7 +111,7 @@
     &__container {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      max-width: 1440px;
+      max-width: $max-width;
       width: auto;
       padding-inline: 90px;
       column-gap: 10px;
@@ -126,7 +140,21 @@
     }
 
     &__introduction {
-      margin-top: 15px;
+      padding-top: 119px;
+      padding-left: 112px;
+    }
+
+    &__information {
+      padding-top: 155px;
+    }
+
+    &__description {
+      margin-top: 9px;
+      padding-left: 1px;
+    }
+
+    &__contact {
+      padding-top: 125px;
     }
   }
 }

src/styles/layouts/_header.scss

@@ -1,6 +1,6 @@
 .header {
   @extend %absolute;
-  @include set-absolute-and-location($top: 0, $right: 0, $left: 0);
+  @include set-location($top: 0, $right: 0, $left: 0);
 
   max-width: 428px;
   margin: auto;
@@ -42,5 +42,6 @@
     @include size(100%, auto);
 
     max-width: 918px;
+    padding-bottom: 26px;
   }
 }

src/styles/layouts/_menu.scss

@@ -12,7 +12,7 @@
   &__container {
     @extend %mr-inline-auto;
 
-    padding-top: 150px;
+    padding-top: 110px;
     max-width: 424px;
   }
 
@@ -29,11 +29,11 @@
     @extend %d-flex;
     @include flex-layout($gap: 30px);
 
-    margin-top: 62px;
+    margin-top: 74px;
-    padding-left: 50px;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
+    padding-left: 49px;
 
     &::-webkit-scrollbar {
       display: none;
@@ -60,9 +60,9 @@
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 100%;
-    column-gap: 18px;
+    column-gap: 70px;
     margin-top: 43px;
-    margin-inline: 59px;
+    padding-inline: 59px;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -84,7 +84,6 @@
     }
 
     &__list-category {
-      max-width: 1018px;
       margin-inline: 59px;
     }
 
@@ -98,10 +97,28 @@
 
 @media screen and (min-width: 1200px) {
   .menu {
+    &__container {
+      padding-top: 160px;
+    }
+
+    &__list-category {
+      @include flex-layout($gap: 33px);
+
+      margin-top: 58px;
+    }
+
     &__list-category {
       max-width: 1018px;
       margin-inline: auto;
       padding-left: unset;
+      overflow-x: unset;
+    }
+
+    &__card-list {
+      margin-inline: auto;
+      max-width: 1294px;
+      column-gap: 18px;
+      margin-top: 106px;
     }
   }
 }

src/styles/layouts/_navbar.scss

@@ -10,6 +10,7 @@
   right: 25px;
   background-color: $white;
   z-index: 2;
+  border-radius: 20px;
 }
 
 .nav-download-btn {
@@ -27,8 +28,8 @@
     border-bottom: unset;
   }
 
-  &:hover {
+  &:hover .nav-link {
-    background-color: $secondary-color;
+    color: $secondary-color;
   }
 }
 
@@ -67,13 +68,9 @@
     border-bottom: none;
     padding: 0;
     text-align: center;
-
-    &:hover {
-      background-color: unset;
-    }
   }
 
-  .nav-link:hover {
+  // .nav-link:hover {
-    color: $secondary-color;
+  //   color: $secondary-color;
-  }
+  // }
 }

src/styles/layouts/_offer.scss

@@ -9,13 +9,13 @@
 
     max-width: 380px;
     margin: auto;
-    padding-top: 101px;
+    padding-top: 90px;
     position: relative;
   }
 
   &__dot-background {
     @extend %absolute;
-    @include set-absolute-and-location($top: 168px, $left: 0px);
+    @include set-location($top: 168px, $left: 0px);
 
     display: none;
   }
@@ -32,7 +32,7 @@
     text-transform: capitalize;
     text-align: center;
     color: $black;
-    margin-top: 15px;
+    margin-top: 22px;
     max-width: 856px;
     margin-inline: auto;
   }
@@ -42,7 +42,7 @@
     @include flex-layout($wrap: nowrap, $gap: 70px);
 
     padding-inline: 35px;
-    padding-top: 65px;
+    margin-top: 65px;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -54,7 +54,7 @@
 
   &__rosemary-container {
     @extend %absolute;
-    @include set-absolute-and-location($bottom: -120px, $right: 0);
+    @include set-location($bottom: -95px, $right: 0);
 
     z-index: 0;
   }
@@ -82,7 +82,22 @@
 }
 
 @media screen and (min-width: 1200px) {
-  .offer__dot-background {
+  .offer {
-    display: block;
+    &__dot-background {
+      display: block;
+    }
+
+    &__container {
+      padding-top: 142px;
+    }
+
+    &__description {
+      margin-top: 27px;
+      padding-left: 64px;
+    }
+
+    &__card-list {
+      margin-top: 67px;
+    }
   }
 }

src/styles/layouts/_platform.scss

@@ -18,16 +18,45 @@
 
     position: relative;
     max-width: 100%;
+    text-align: right;
   }
 
   &__main-image {
     @extend %absolute;
-    @include set-absolute-and-location($top: 0, $right: 0);
+    @include set-location($top: 0px, $left: 60px);
+  }
+
+  &__image-food:first-child {
+    @extend %absolute;
+    @include set-location($bottom: 54px, $right: 163px);
+
+    z-index: 1;
+  }
+
+  &__image-food:nth-child(2) {
+    @extend %absolute;
+    @include set-location($bottom: 67px, $right: 118px);
+
+    z-index: 1;
+  }
+
+  &__image-food:nth-child(3) {
+    @extend %absolute;
+    @include set-location($bottom: 92px, $right: 75px);
+
+    z-index: 1;
+  }
+
+  &__image-food:nth-child(4) {
+    @extend %absolute;
+    @include set-location($bottom: 147px, $right: 45px);
+
+    z-index: 1;
   }
 
   &__content {
-    padding-top: 52px;
+    padding-top: 46px;
-    padding-left: 20px;
+    padding-left: 25px;
   }
 
   &__heading {
@@ -39,7 +68,7 @@
   &__description {
     font-size: $fs-md;
     color: $black;
-    margin-top: 23px;
+    margin-top: 31px;
     max-width: 366px;
   }
 
@@ -57,17 +86,39 @@
       @include flex-layout($direction: row-reverse, $align: center);
 
       display: flex;
-      max-width: 1440px;
+      max-width: $max-width;
       max-height: 632px;
       padding-top: 50px;
     }
 
     &__image-container {
-      @include size(704px, 786px);
+      @include size(100%, 500px);
+    }
+
+    &__background-img {
+      @include set-location($top: 0px, $right: 0px);
+
+      position: absolute;
     }
 
     &__main-image {
-      @include set-absolute-and-location($top: 160px, $right: 0);
+      @include set-location($top: 0px, $right: 58px, $left: unset);
+    }
+
+    &__image-food:first-child {
+      @include set-location($bottom: 53px, $right: 160px);
+    }
+
+    &__image-food:nth-child(2) {
+      @include set-location($bottom: 68px, $right: 117px);
+    }
+
+    &__image-food:nth-child(3) {
+      @include set-location($bottom: 90px, $right: 70px);
+    }
+
+    &__image-food:nth-child(4) {
+      @include set-location($bottom: 145px, $right: 43px);
     }
 
     &__heading {
@@ -83,11 +134,50 @@
 @media screen and (min-width: 1200px) {
   .platform {
     &__container {
-      padding-top: 170px;
+      @include flex-layout($justify: space-between);
+
+      display: flex;
+      padding-top: 122px;
+    }
+
+    &__image-container {
+      @include size(600px, 632px);
+
+      text-align: right;
     }
 
     &__main-image {
-      @include set-absolute-and-location($top: 70px, $right: 0);
+      @include set-location($top: 20px, $right: 105px);
+    }
+
+    &__background-img {
+      @include set-location($top: 20px, $right: 00px);
+    }
+
+    &__image-food:first-child {
+      @include set-location($bottom: -65px, $right: 263px);
+    }
+
+    &__image-food:nth-child(2) {
+      @include set-location($bottom: -40px, $right: 190px);
+    }
+
+    &__image-food:nth-child(3) {
+      @include set-location($bottom: -8px, $right: 125px);
+    }
+
+    &__image-food:nth-child(4) {
+      @include set-location($bottom: 80px, $right: 80px);
+    }
+
+    &__heading,
+    &__description,
+    &__store-container {
+      padding-left: 47px;
+    }
+
+    &__description {
+      margin-top: 52px;
     }
   }
 }

src/styles/layouts/_service.scss

@@ -10,7 +10,7 @@
 
   &__background-color {
     @extend %absolute;
-    @include set-absolute-and-location($top: 200px, $left: 0);
+    @include set-location($top: 200px, $left: 0);
     @include size(100%, 50%);
 
     background: linear-gradient(
@@ -30,20 +30,21 @@
 
   &__background-img {
     @extend %absolute;
-    @include set-absolute-and-location($top: 65px, $left: 0);
+    @include set-location($top: 75px, $left: 0);
   }
 
   &__main-img {
     @extend %absolute;
-    @include set-absolute-and-location($top: 60px, $left: 35px);
+    @include set-location($top: 70px, $left: 35px);
   }
 
   &__vegetable-img {
     @extend %absolute;
-    @include set-absolute-and-location($bottom: 0, $left: 50px);
+    @include set-location($bottom: -10px, $left: 50px);
   }
 
   &__content {
+    margin-top: 65px;
     padding-inline: 24px;
 
     z-index: 1;
@@ -70,14 +71,14 @@
     @include flex-layout(
       $direction: column,
       $justify: space-between,
-      $gap: 41px
+      $gap: 40px
     );
 
     max-width: 514px;
     margin-top: 81px;
     &-list {
       @extend %d-flex;
-      @include flex-layout($direction: column, $gap: 30px, $justify: center);
+      @include flex-layout($direction: column, $gap: 33px, $justify: center);
     }
   }
 
@@ -88,6 +89,7 @@
 
   &__name-category {
     font-size: $fs-md;
+    text-transform: capitalize;
   }
 
   &__btn {
@@ -130,12 +132,12 @@
     }
 
     &__background-img {
-      @include set-absolute-and-location($top: 100px, $left: 0);
+      @include set-location($top: 100px, $left: 0);
       @extend %absolute_840;
     }
 
     &__background-color {
-      @include set-absolute-and-location($top: 400px, $left: -100px);
+      @include set-location($top: 400px, $left: -100px);
       @include size(400px, 50%);
 
       border-radius: 50%;
@@ -149,12 +151,12 @@
     }
 
     &__main-img {
-      @include set-absolute-and-location($top: 95px, $left: 35px);
+      @include set-location($top: 95px, $left: 35px);
       @extend %absolute_840;
     }
 
     &__vegetable-img {
-      @include set-absolute-and-location($bottom: 145px, $left: 50px);
+      @include set-location($bottom: 145px, $left: 50px);
       @extend %absolute_840;
     }
 
@@ -186,12 +188,12 @@
     }
 
     &__background-img {
-      @include set-absolute-and-location($top: 0px, $left: 0);
+      @include set-location($top: 0px, $left: 0);
       @extend %absolute_1200;
     }
 
     &__background-color {
-      @include set-absolute-and-location($left: -150px);
+      @include set-location($left: -150px);
       @include size(500px, 50%);
 
       border-radius: 50%;
@@ -212,17 +214,24 @@
     }
 
     &__main-img {
-      @include set-absolute-and-location($top: -17px, $left: 70px);
+      @include set-location($top: 45px, $left: 70px);
-      @extend %absolute_1200;
     }
 
     &__vegetable-img {
-      @include set-absolute-and-location($bottom: 95px, $left: 105px);
+      @include set-location($bottom: 35px, $left: 92px);
-      @extend %absolute_1200;
+    }
+
+    &__background-img {
+      @include set-location($top: 55px, $left: 0);
+    }
+
+    &__category-list {
+      @include flex-layout($gap: 34px);
     }
 
     &__content {
-      padding-top: 50px;
+      padding-top: 78px;
+      padding-left: 29px;
     }
   }
 }

src/styles/layouts/_welcome.scss

@@ -10,13 +10,15 @@
     rgba(245, 71, 72, 0) 100%
   );
 
+  padding-top: 50px;
+
   &__container {
     @extend %d-flex;
     @include flex-layout($justify: center, $direction: column);
 
     margin: auto;
     max-width: 428px;
-    padding-top: 117px;
+    padding-top: 67px;
   }
   // Start banner
   &__banner-container {
@@ -27,25 +29,60 @@
     position: relative;
   }
 
-  &__banner-img {
+  &__main-image {
+    text-align: right;
+    padding-right: 25px;
     z-index: 1;
   }
 
+  &__food-img:nth-child(2) {
+    @extend %absolute;
+    @include set-location($bottom: 75px, $left: 12px);
+  }
+
+  &__food-img:nth-child(3) {
+    @extend %absolute;
+    @include set-location($bottom: -7px, $left: 110);
+  }
+
+  &__food-img:nth-child(4) {
+    @extend %absolute;
+    @include set-location($bottom: 0px, $right: 80px);
+  }
+
+  &__food-img:nth-child(5) {
+    @extend %absolute;
+    @include set-location($bottom: 85px, $right: 15px);
+  }
+
+  &__review-card {
+    @extend %absolute;
+    @include set-location($top: 100px, $left: 10px);
+  }
+
+  &__rate-card {
+    @extend %absolute;
+    @include set-location($top: 103px, $right: 0);
+  }
+
+  &__background-banner {
+    @extend %absolute;
+    @include size(100%, 100%);
+  }
+
   &__lines-background {
     @extend %absolute;
-    @include set-absolute-and-location($top: -76px, $right: 0);
+    @include set-location($top: -85px, $right: 1px);
-    @include size(187px, 430px);
   }
 
   &__arrow-img-up {
     @extend %absolute;
-    @include set-absolute-and-location($top: -15px, $right: 50px);
+    @include set-location($top: -15px, $right: 40px);
-    @include size(43px, 215px);
   }
 
   &__mint-img {
     @extend %absolute;
-    @include set-absolute-and-location($bottom: 100px, $right: 0);
+    @include set-location($bottom: 90px, $right: 0px);
   }
   // End banner
 
@@ -56,7 +93,7 @@
     @include flex-layout($direction: column);
 
     position: relative;
-    padding-top: 63.37px;
+    padding-top: 58px;
     padding-inline: 24px;
   }
 
@@ -68,7 +105,7 @@
 
   &__orange-img-wrapper {
     @extend %absolute;
-    @include set-absolute-and-location($top: 0, $right: 35px);
+    @include set-location($top: 7px, $right: 0);
   }
 
   &__text-box {
@@ -78,7 +115,8 @@
 
     background-color: #feeae9;
     border-radius: 100px;
-    padding: 6px;
+    padding: 4px;
+    margin-left: 10px;
     font-size: $fs-xx-sm;
   }
 
@@ -97,11 +135,11 @@
   &__head-arrow-container {
     @include size(13px, 7.3px);
     @extend %absolute;
-    @include set-absolute-and-location($right: 107px);
+    @include set-location($right: 107px);
   }
 
   &__heading {
-    margin-top: 20px;
+    margin-top: 12px;
     font-size: $fs-xx-lg;
     text-transform: capitalize;
     font-weight: 900;
@@ -110,11 +148,11 @@
 
   &__underline-img-container {
     @extend %absolute;
-    @include set-absolute-and-location($bottom: -20px, $left: 0px);
+    @include set-location($bottom: -27px, $left: 0px);
   }
 
   &__description {
-    margin-top: 35px;
+    margin-top: 40px;
     font-size: $fs-x-md;
     line-height: 140%;
     letter-spacing: -0.2px;
@@ -158,7 +196,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: #f7d699;
+      background-color: $secondary-light-color;
       transition: 0.2s;
     }
   }
@@ -168,7 +206,7 @@
     @include flex-layout($justify: space-between, $gap: 10px);
 
     width: 100%;
-    margin-top: 44px;
+    margin-top: 35px;
     max-width: 376px;
   }
 
@@ -200,7 +238,7 @@
     padding: 17.5px 20px;
     border-radius: 50px;
     background-color: $white;
-    box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
+    box-shadow: 0 25px 50px 3px rgba($color: $primary-color, $alpha: 0.4);
     transition: width 0.5s;
     line-height: 100%;
   }
@@ -236,8 +274,8 @@
     &__container {
       @include flex-layout(
         $direction: row-reverse,
-        $align: center,
+        $justify: space-between,
-        $justify: space-between
+        $align: center
       );
 
       padding-top: 130px;
@@ -245,48 +283,18 @@
       max-width: $max-width;
     }
 
-    // Start banner
-    &__banner-img {
-      @include size(100%, 100%);
-
-      max-width: 650px;
-    }
-
-    &__lines-background {
-      @include set-absolute-and-location($top: -150px, $right: 0px);
-      @include size(313px, 718px);
-    }
-
-    &__arrow-img-up {
-      @include size(117px, 315px);
-      @include set-absolute-and-location($top: -40px, $right: 5px);
-
-      transition: 0.2s;
-    }
-
-    &__head-arrow-container {
-      display: none;
-    }
-
-    &__banner-container {
-      @include size(auto, auto);
-
-      max-width: 1000px;
-      min-width: 500px;
-    }
-    // End banner
-
     // Start content
     &__content {
       @include size(auto, auto);
 
       padding-left: 70px;
       padding-right: 0px;
+      padding-top: 70px;
       max-width: 560px;
     }
 
     &__orange-img-wrapper {
-      @include set-absolute-and-location($top: 170px, $right: -50px);
+      @include set-location($top: 170px, $right: -50px);
 
       transition: 0.2s;
     }
@@ -297,7 +305,7 @@
     }
 
     &__underline-img-container {
-      @include set-absolute-and-location($bottom: -25px, $left: 8px);
+      @include set-location($bottom: -25px, $left: 8px);
     }
 
     &__description {
@@ -317,7 +325,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include set-absolute-and-location($top: -50px, $left: 220px);
+      @include set-location($top: -50px, $left: 220px);
 
       display: block;
       transition: 0.2s;
@@ -329,7 +337,7 @@
 
     &__slider-container {
       display: block;
-      @include set-absolute-and-location($bottom: -135px, $left: 65px);
+      @include set-location($bottom: -135px, $left: 65px);
     }
 
     // End content
@@ -338,20 +346,85 @@
 
 @media screen and (min-width: 1200px) {
   .welcome {
+    padding-top: 0px;
+
+    // Start banner
+    &__banner {
+      padding-right: 96px;
+    }
+
     &__banner-container {
-      padding-right: 74px;
+      @include size(100%, auto);
+    }
+
+    &__main-image {
+      padding-right: 29px;
     }
 
     &__arrow-img-up {
-      @include set-absolute-and-location($top: 8px, $right: 62px);
+      @include set-location($top: 4px, $right: -34px);
     }
 
     &__orange-img-wrapper {
-      @include set-absolute-and-location($top: 110px, $right: -50px);
+      @include set-location($top: 110px, $right: -50px);
     }
 
     &__arrow-down-img-wrapper {
-      @include set-absolute-and-location($top: -75px, $left: 230px);
+      @include set-location($top: -40px, $left: 223px);
+    }
+
+    &__lines-background {
+      @include set-location($top: -85px, $right: -98px);
+    }
+
+    &__review-card {
+      @include set-location($top: 160px, $left: -47px);
+    }
+
+    &__rate-card {
+      @include set-location($top: 168px, $right: -62px);
+    }
+
+    &__food-img:nth-child(2) {
+      @include set-location($bottom: 108px, $left: -68px);
+    }
+
+    &__food-img:nth-child(3) {
+      @include set-location($bottom: -29px, $left: 102);
+    }
+
+    &__food-img:nth-child(4) {
+      @include set-location($bottom: -19px, $right: 107px);
+    }
+
+    &__food-img:nth-child(5) {
+      @include set-location($bottom: 125px, $right: -1px);
+    }
+
+    // End banner
+
+    &__container {
+      @include flex-layout($align: unset, $gap: 50px);
+    }
+
+    &__content {
+      padding-top: 81px;
+    }
+
+    &__text-box {
+      padding-left: 1px;
+    }
+
+    &__description {
+      margin-top: 29px;
+    }
+
+    &__search-form {
+      margin-top: 24px;
+    }
+
+    &__slider-container {
+      @include set-location($bottom: -58px, $left: 68px);
     }
   }
 }