Update code

2026-09-22 13:38:40 +00:00 · 2023-07-21 16:58:55 +07:00
parent 2cd22c69f1
commit 6487515679
67 changed files with 567 additions and 108 deletions
@@ -1,5 +1,5 @@
-dist
+.parcel-cache

 node_modules

-.parcel
+dist
@@ -1,7 +0,0 @@
-{
-  "bracketSameLine": false,
-  "bracketSpacing": true,
-  "embeddedLanguageFormatting": "auto",
-  "printWidth": 120,
-  "tabWidth": 2
-}
@@ -2211,9 +2211,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001516",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001516.tgz",
-      "integrity": "sha512-Wmec9pCBY8CWbmI4HsjBeQLqDTqV91nFVR83DnZpYyRnPI1wePDsTg0bGLPC5VU/3OIZV1fmxEea1b+tFKe86g==",
+      "version": "1.0.30001515",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz",
+      "integrity": "sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==",
      "dev": true,
      "funding": [
        {
@@ -2596,9 +2596,9 @@
      "dev": true
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.461",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.461.tgz",
-      "integrity": "sha512-1JkvV2sgEGTDXjdsaQCeSwYYuhLRphRpc+g6EHTFELJXEiznLt3/0pZ9JuAOQ5p2rI3YxKTbivtvajirIfhrEQ==",
+      "version": "1.4.459",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.459.tgz",
+      "integrity": "sha512-XXRS5NFv8nCrBL74Rm3qhJjA2VCsRFx0OjHKBMPI0otij56aun8UWiKTDABmd5/7GTR021pA4wivs+Ri6XCElg==",
      "dev": true
    },
    "node_modules/entities": {
@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 8426">
-<circle id="Ellipse 43" cx="10" cy="10" r="10" fill="#F54748"/>
-<path id="Vector" d="M16.6613 7.45916C16.4441 6.97793 16.1309 6.54185 15.7392 6.17532C15.3472 5.80769 14.8851 5.51555 14.3779 5.31477C13.852 5.10575 13.288 4.99876 12.7185 5.00001C11.9195 5.00001 11.1401 5.20933 10.4627 5.60472C10.3006 5.6993 10.1467 5.80319 10.0008 5.91638C9.85495 5.80319 9.701 5.6993 9.53894 5.60472C8.86155 5.20933 8.08206 5.00001 7.28313 5.00001C6.70783 5.00001 6.15036 5.10545 5.62368 5.31477C5.11483 5.51634 4.65621 5.80629 4.26241 6.17532C3.87023 6.54143 3.55695 6.97762 3.34032 7.45916C3.11506 7.95999 3 8.49182 3 9.03916C3 9.55549 3.1102 10.0935 3.32897 10.6409C3.5121 11.0983 3.77463 11.5727 4.11008 12.0519C4.64162 12.8101 5.37249 13.6008 6.28 14.4025C7.78388 15.7313 9.27317 16.6492 9.33637 16.6864L9.72045 16.9221C9.8906 17.026 10.1094 17.026 10.2795 16.9221L10.6636 16.6864C10.7268 16.6476 12.2145 15.7313 13.72 14.4025C14.6275 13.6008 15.3584 12.8101 15.8899 12.0519C16.2254 11.5727 16.4895 11.0983 16.671 10.6409C16.8898 10.0935 17 9.55549 17 9.03916C17.0016 8.49182 16.8865 7.95999 16.6613 7.45916Z" fill="#FDC55E"/>
-</g>
-</svg>
@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z" fill="#F54748"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx:bx-search">
+<path id="Vector" d="M10 18C11.775 17.9996 13.4988 17.4054 14.897 16.312L19.293 20.708L20.707 19.294L16.311 14.898C17.405 13.4997 17.9996 11.7754 18 10C18 5.589 14.411 2 10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18ZM10 4C13.309 4 16 6.691 16 10C16 13.309 13.309 16 10 16C6.691 16 4 13.309 4 10C4 6.691 6.691 4 10 4Z" fill="white"/>
+</g>
+</svg>
@@ -6,6 +6,10 @@ html(lang="en")
    link(rel="stylesheet", href="./styles/main.scss")
    title Food Hut
  body
-    .background
-      include layouts/header
+    header.header.flex
+      .logo-wrapper
+        a.logo-link(href="javascript:void(0)")
+          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+      .header-content.flex
+        include layouts/nav-menu
    include layouts/welcome
@@ -1,6 +0,0 @@
-header.header.flex.justify-content-between.mr-auto
-  .logo-wrapper
-    a.logo-link(href="javascript:void(0)")
-      img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-  .header-content.flex.justify-content-between.h-auto
-    include nav-menu
@@ -1,10 +1,10 @@
 - var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];

-nav.nav.mr-auto.h-auto
+nav.nav
  input.toggle-menu(type="checkbox")
  .icon-menu
-  ul.nav-list.flex.justify-content-between.h-auto.w-auto
+  ul.nav-list
    each val in list
      li.nav-item
-        a.nav-link.no-underline(href="javascrip:void(0)")= val
+        a.nav-link.no-underline(href="javascript:void(0)")= val
 a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
@@ -1,3 +1,100 @@
+- var welcome_img_path = "./assets/images/welcome/";
+
 section.welcome
-  include welcome/banner
-  include welcome/content
+  .welcome__banner
+    .welcome__banner-container
+      img.welcome__banner-img(
+        src=welcome_img_path + "welcome-image-mobile.png",
+        alt="Welcome banner image"
+      )
+      picture
+        source(
+          media="(min-width: 840px)",
+          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: 840px)",
+          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"
+        )
+      img.welcome__mint-img(
+        src=welcome_img_path + "mint.png",
+        alt="Mint image"
+      )
+  .welcome__content
+    .welcome__arrow-down-img-wrapper
+      img.welcome__arrow-img-down(
+        src=welcome_img_path + "arrow-desktop-2.png",
+        alt="Arrow image down"
+      )
+    .welcome__orange-img-wrapper
+      picture
+        source(
+          media="(min-width: 840px)",
+          srcset=welcome_img_path + "orange-desktop.png"
+        )
+        img(src=welcome_img_path + "orange.png", alt="Orange background image")
+    .welcome__text-box
+      .welcome__icon-container
+        img.welcome__love-icon(
+          src=welcome_img_path + "love-icon.png",
+          alt="Love icon"
+        )
+      .welcome__head-arrow-container
+        img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
+      p.welcome__text-box-content People Trust us
+    h1.welcome__heading We're
+      = " "
+      span.primary-text serious
+      = " for "
+      span.primary-text food
+      = " & "
+      .delivery-text-box
+        span.secondary-text delivery
+        .welcome__underline-img-container
+          img(src=welcome_img_path + "underline.png", alt="Underline image")
+      = "."
+
+    p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
+    form.welcome__search-form(action="#")
+      .welcome__search-icon-wrapper
+        img.welcome__search-icon(
+          src=welcome_img_path + "search-icon.png",
+          alt="Search icon"
+        )
+      input.welcome__text-input(type="text", placeholder="Search food")
+      button.welcome__submit-btn(type="submit")
+        img.welcome__search-icon-btn(
+          src=welcome_img_path + "search-icon-btn.svg",
+          alt="Search button image"
+        )
+    .welcome__action-container
+      a.welcome__download-btn.btn(href="javascript:void(0)") Download App
+      a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
+        .welcome__play-icon-wrapper
+          svg.welcome__play-icon(
+            width="12",
+            height="12",
+            viewBox="0 0 12 13",
+            fill="none",
+            xmlns="http://www.w3.org/2000/svg"
+          )
+            path(
+              d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
+              fill="currentColor"
+            ) 
+        span.welcome__text-download-btn Watch Video
+    .welcome__slider-container
+      img.welcome__slider-img(
+        src=welcome_img_path + "slider.png",
+        alt="Slider image"
+      )
@@ -1,12 +0,0 @@
- var path = "./assets/images/";
-
-.welcome__banner
-  .welcome__banner-wrapper
-    .welcome__background-banner
-      img(src=path + "background-banner.png", alt="Background banner")
-    .welcome__person-img
-      img(src="./assets/images/person.png", alt="Main character")
-    .welcome__rate-card
-      img(src="./assets/images/rate-card.png", alt="Rate card")
-    .welcome__review-card
-    img(src="./assets/images/review-card.png", alt="Review card")
@@ -1,14 +0,0 @@
-.welcome__content
-  .welcome__text-box
-    .welcome__love-icon
-      img(src="./assets/images/love-icon.svg", alt="Love icon")
-    .welcome__text People Trust us
-  .welcome__title We're serious for food & Delivery.
-  .welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
-  form.welcome__search-form(action="javascript:void(0)")
-    input.welcome__input(type="text")
-    button(type="submit")
-      img(src="./assets/images/search-icon.png", alt="Search icon")
-  .welcome__action
-    a.btn.welcome__button-download(href="javascript:void(0)") Download App
-    a.welcome__button-watch(href="javascript:void(0)") Watch Video
@@ -1,5 +1,6 @@
@mixin base-icon-menu {
-  height: 3px;
+  @include size(36px, 3px);
+
  background: #000000;
  border-radius: 10px;
  transition: 0.3s;
@@ -12,3 +13,62 @@
  position: absolute;
  right: 0;
 }
+
+@mixin flex-container(
+  $justify-content: null,
+  $flex-direction: null,
+  $align-items: null,
+  $gap: null
+) {
+  display: flex;
+  @if $justify-content != null {
+    justify-content: $justify-content;
+  }
+
+  @if $flex-direction != null {
+    flex-direction: $flex-direction;
+  }
+
+  @if $align-items != null {
+    align-items: $align-items;
+  }
+
+  @if $gap != null {
+    gap: $gap;
+  }
+}
+
+@mixin size($width: null, $height: null) {
+  @if $width != null {
+    width: $width;
+  }
+
+  @if $height != null {
+    height: $height;
+  }
+}
+
+@mixin setAbsoluteAndLocation(
+  $top: null,
+  $left: null,
+  $right: null,
+  $bottom: null
+) {
+  position: absolute;
+
+  @if $top != null {
+    top: $top;
+  }
+
+  @if $left != null {
+    left: $left;
+  }
+
+  @if $right != null {
+    right: $right;
+  }
+
+  @if $bottom != null {
+    bottom: $bottom;
+  }
+}
@@ -4,6 +4,7 @@ $secondary-font: "Inter";
 // Color
 $black: #000;
 $white: #fff;
+$gray: #686d77;
 $primary-color: #f54748;
 $secondary-color: #fdc55e;

@@ -12,6 +13,7 @@ $fs-xx-sm: 14px;
 $fs-x-sm: 16px;
 $fs-sm: 17px;
 $fs-md: 18px;
+$fs-x-md: 20px;
 $fs-lg: 24px;
 $fs-x-lg: 48px;
 $fs-xx-lg: 58px;
@@ -1,23 +1,11 @@
-.flex {
-  display: flex;
-}
-
-.justify-content-between {
-  justify-content: space-between;
-}
-
-.mr-auto {
-  margin: auto;
-}
-
-.h-auto {
-  height: auto;
-}
-
-.w-auto {
-  width: auto;
-}
-
 .no-underline {
  text-decoration: none;
 }
+
+.primary-text {
+  color: $primary-color;
+}
+
+.secondary-text {
+  color: $secondary-color;
+}
@@ -4,12 +4,34 @@ $font-path: "../assets/fonts";
  font-family: "Sofia Pro";
  src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
    url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Sofia Pro";
+  src: url("#{$font-path}/sofia-pro-medium.woff2") format("woff2"),
+    url("#{$font-path}/sofia-pro-medium.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Sofia Pro";
+  src: url("#{$font-path}/sofia-pro-semi-bold.woff2") format("woff2"),
+    url("#{$font-path}/sofia-pro-semi-bold.ttf") format("truetype");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Sofia Pro";
+  src: url("#{$font-path}/sofia-pro-bold.woff2") format("woff2"),
+    url("#{$font-path}/sofia-pro-bold.ttf") format("truetype");
+  font-weight: 900;
 }

@font-face {
  font-family: "Inter";
-  src: url("#{$font-path}/inter-regular.woff2") format("woff2"),
-    url("#{$font-path}/inter-regular.ttf") format("truetype");
+  src: url("#{$font-path}/inter.woff2") format("woff2"),
+    url("#{$font-path}/inter.ttf") format("truetype");
 }

 * {
@@ -7,4 +7,5 @@
  color: $white;
  white-space: nowrap;
  transition: 0.2s;
+  text-decoration: none;
 }
@@ -1,11 +1,11 @@
 .logo-wrapper {
-  width: 121px;
-  height: 78px;
+  @include size(121px, 78px);
+
  flex-shrink: 0;
 }

 .logo-link {
+  @include size(100%, 100%);
+
  display: inline-block;
-  width: 100%;
-  height: 100%;
 }
@@ -1,33 +1,28 @@
-$width-icon-menu: 36px;
-
 .icon-menu {
  @include base-icon-menu;

  position: relative;
-  width: $width-icon-menu;
  cursor: pointer;

  &:before {
    @include icon-menu;

    top: -10px;
-    width: $width-icon-menu;
  }

  &:after {
    @include icon-menu;

    top: 10px;
-    width: $width-icon-menu;
  }
 }

 .toggle-menu {
+  @include size(36px, 27px);
+
  position: absolute;
  top: 46px;
  right: 21px;
-  width: 36px;
-  height: 27px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
@@ -48,7 +43,7 @@ $width-icon-menu: 36px;
 }

 .toggle-menu:checked ~ .nav-list {
-  right: 0;
+  display: block;
 }

@media screen and (min-width: 840px) {
@@ -1,21 +1,30 @@
 .header {
+  @include flex-container(space-between, $align-items: center);
+
  position: relative;
-  align-items: center;
-  max-width: $max-width;
+  max-width: 428px;
  min-width: $min-width;
  padding: 24px;
+  margin: auto;
+}
+
+.header-content {
+  @include flex-container(space-between);
 }

@media screen and (min-width: 840px) {
  .header {
    padding-top: 32px;
-    padding-inline: 24px;
+    padding-left: 70px;
+    padding-right: 61px;
    gap: 10px;
+    max-width: 1309px;
  }

  .header-content {
+    @include size(100%, auto);
+
    gap: 10px;
-    width: 100%;
    max-width: 918px;
  }
 }
@@ -1,19 +1,21 @@
 .nav-list {
-  flex-direction: column;
+  @include size(max-content, auto);
+
+  display: none;
  list-style: none;
  transition: 0.1s;
-  position: fixed;
+  position: absolute;
  border: 2px solid $primary-color;
-  top: 0;
-  right: -300px;
-  margin-top: 105px;
-  margin-right: 10px;
-  margin-left: 10px;
+  top: 100px;
+  right: 25px;
  background-color: $white;
+  z-index: 2;
 }

 .nav-download-btn {
  display: none;
+
+  z-index: 1;
 }

 .nav-item {
@@ -36,7 +38,9 @@

@media screen and (min-width: 840px) {
  .nav {
-    width: 100%;
+    @include size(100%, auto);
+
+    margin: auto;
  }

  .nav-download-btn {
@@ -48,6 +52,9 @@
  }

  .nav-list {
+    @include size(auto, auto);
+    @include flex-container(space-between, column);
+
    position: unset;
    flex-direction: row;
    border: none;
@@ -0,0 +1,310 @@
+.delivery-text-box {
+  position: relative;
+  display: inline-block;
+}
+
+.welcome {
+  @include flex-container(center, column);
+  margin: auto;
+  max-width: 428px;
+
+  // Start banner
+  &__banner-container {
+    @include size(428px, auto);
+    @include flex-container(center, column);
+
+    position: relative;
+  }
+
+  &__banner-img {
+    z-index: 1;
+  }
+
+  &__lines-background {
+    @include setAbsoluteAndLocation($top: -76px, $right: 0);
+    @include size(187px, 430px);
+  }
+
+  &__arrow-img-up {
+    @include setAbsoluteAndLocation($top: -15px, $right: 50px);
+
+    @include size(43px, 215px);
+  }
+
+  &__mint-img {
+    @include setAbsoluteAndLocation($bottom: 100px, $right: 0);
+  }
+  // End banner
+
+  // Start content
+  &__content {
+    @include flex-container($flex-direction: column);
+    @include size(calc(428px - 48px), auto);
+
+    position: relative;
+    padding-top: 63.37px;
+    padding-inline: 24px;
+  }
+
+  &__arrow-down-img-wrapper {
+    display: none;
+  }
+
+  &__orange-img-wrapper {
+    @include setAbsoluteAndLocation($top: 0, $right: 35px);
+  }
+
+  &__text-box {
+    @include flex-container($align-items: center, $gap: 6px);
+    @include size(fit-content);
+
+    background-color: #feeae9;
+    border-radius: 100px;
+    padding: 6px;
+    font-size: $fs-xx-sm;
+  }
+
+  &__text-box-content {
+    font-family: $secondary-font;
+  }
+
+  &__icon-container {
+    @include size(20px, 20px);
+  }
+
+  &__love-icon {
+    @include size(100%, 100%);
+  }
+
+  &__head-arrow-container {
+    @include size(13px, 7.3px);
+    @include setAbsoluteAndLocation($right: 107px);
+  }
+
+  &__heading {
+    margin-top: 20px;
+    font-size: $fs-x-lg;
+    text-transform: capitalize;
+    font-weight: 900;
+    max-width: 530px;
+  }
+
+  &__underline-img-container {
+    @include setAbsoluteAndLocation($bottom: -20px, $left: 0px);
+  }
+
+  &__description {
+    margin-top: 35px;
+    font-size: $fs-x-md;
+    line-height: 140%;
+    letter-spacing: -0.2px;
+    max-width: 517px;
+  }
+
+  &__search-form {
+    @include flex-container();
+
+    margin-top: 32px;
+    border-radius: 100px;
+    border: 0.5px solid $black;
+    max-width: 471px;
+  }
+
+  &__search-icon-wrapper {
+    @include size(24px, 24px);
+
+    padding: 14px;
+  }
+
+  &__text-input {
+    @include size(100%, auto);
+
+    font-size: $fs-md;
+    border: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__submit-btn {
+    @include size(42px, 42px);
+
+    background-color: #fdc55e;
+    border-radius: 100px;
+    border: none;
+    padding: 9px;
+    margin: 5px 4px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f7d699;
+      transition: 0.2s;
+    }
+  }
+
+  &__action-container {
+    @include flex-container($gap: 31px);
+    margin-top: 44px;
+  }
+
+  &__watch-video-link {
+    @include flex-container($align-items: center, $gap: 21px);
+
+    position: relative;
+
+    &:hover {
+      .welcome__play-icon-wrapper {
+        width: 100%;
+        background-color: $secondary-color;
+      }
+
+      .welcome__text-download-btn {
+        color: $white;
+      }
+    }
+  }
+
+  &__play-icon {
+    color: $primary-color;
+  }
+
+  &__play-icon-wrapper {
+    @include size(12px, 17px);
+    position: absolute;
+    padding: 17.5px 20px;
+    border-radius: 50px;
+    background-color: $white;
+    box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
+    transition: width 0.5s;
+  }
+
+  &__text-download-btn {
+    color: $gray;
+    font-size: $fs-sm;
+    margin-left: 70px;
+    transition: 0.5s;
+    z-index: 1;
+  }
+
+  &__download-btn:hover {
+    background-color: $secondary-color;
+    transition: 0.2s;
+  }
+
+  &__slider-container {
+    display: none;
+  }
+  // End content
+}
+
+.slider-container {
+  display: none;
+}
+
+@media screen and (min-width: 840px) {
+  .welcome {
+    @include flex-container(
+      $flex-direction: row-reverse,
+      $align-items: center,
+      $justify-content: space-between
+    );
+
+    padding-top: 20px;
+    width: 100%;
+    max-width: $max-width;
+
+    // Start banner
+    &__banner-img {
+      @include size(100%, 100%);
+
+      max-width: 650px;
+    }
+
+    &__lines-background {
+      @include setAbsoluteAndLocation($top: -150px, $right: 0px);
+      @include size(313px, 718px);
+    }
+
+    &__arrow-img-up {
+      @include size(117px, 315px);
+      @include setAbsoluteAndLocation($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;
+      max-width: 560px;
+    }
+
+    &__orange-img-wrapper {
+      @include setAbsoluteAndLocation($top: 170px, $right: -50px);
+      transition: 0.2s;
+    }
+
+    &__heading {
+      font-size: $fs-xx-lg;
+    }
+
+    &__underline-img-container {
+      @include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
+    }
+
+    &__description {
+      font-size: $fs-lg;
+    }
+
+    &__arrow-down-img-wrapper {
+      @include setAbsoluteAndLocation($top: -50px, $left: 220px);
+
+      display: block;
+      transition: 0.2s;
+    }
+
+    &__search-form {
+      @include size(auto, 54px);
+    }
+
+    &__slider-container {
+      display: block;
+      @include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
+    }
+
+    // End content
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .welcome {
+    &__banner-container {
+      padding-right: 74px;
+    }
+
+    &__arrow-img-up {
+      @include setAbsoluteAndLocation($top: 8px, $right: 62px);
+    }
+
+    &__orange-img-wrapper {
+      @include setAbsoluteAndLocation($top: 110px, $right: -50px);
+    }
+
+    &__arrow-down-img-wrapper {
+      @include setAbsoluteAndLocation($top: -95px, $left: 230px);
+    }
+  }
+}
@@ -15,3 +15,4 @@
 // Layouts
@import "./layouts/navbar";
@import "./layouts/header";
+@import "./layouts/welcome";