Update code

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "printWidth": 120,
+  "tabWidth": 2
+}

src/assets/images/love-icon.svg

@@ -0,0 +1,6 @@
+<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>

src/index.pug

@@ -6,9 +6,6 @@ html(lang="en")
     link(rel="stylesheet", href="./styles/main.scss")
     title Food Hut
   body
-    header.header
+    .background
-      .logo-wrapper
+      include layouts/header
-        a.logo-link(href="javascript:void(0)")
+      include layouts/welcome
-          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-      .header-content
-        include nav-menu

src/layouts/header.pug

@@ -0,0 +1,6 @@
+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

src/layouts/nav-menu.pug

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

src/layouts/welcome.pug

@@ -0,0 +1,3 @@
+section.welcome
+  include welcome/banner
+  include welcome/content

src/layouts/welcome/banner.pug

@@ -0,0 +1,12 @@
+- 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")

src/layouts/welcome/content.pug

@@ -0,0 +1,14 @@
+.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

src/nav-item.pug

@@ -1,3 +0,0 @@
-mixin navItem(content)
-  li.nav-item
-    a.nav-link(href="javascrip:void(0)")= content

src/nav-menu.pug

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

src/styles/abstracts/_mixins.scss

@@ -1,6 +1,5 @@
 @mixin base-icon-menu {
   height: 3px;
-  width: auto;
   background: #000000;
   border-radius: 10px;
   transition: 0.3s;

src/styles/bases/_base.scss

@@ -0,0 +1,23 @@
+.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;
+}

src/styles/bases/_reset.scss

@@ -0,0 +1,143 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote {
+  &:before,
+  &:after {
+    content: "";
+    content: none;
+  }
+}
+
+q {
+  &:before,
+  &:after {
+    content: "";
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/styles/bases/_typography.scss

@@ -1,11 +1,17 @@
 $font-path: "../assets/fonts";
 
 @font-face {
-  src: url("#{$font-path}/sofia-pro-regular.otf") format("opentype");
   font-family: "Sofia Pro";
+  src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
+    url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
 }
 
 @font-face {
-  src: url("#{$font-path}/inter-regular.ttf") format("truetype");
   font-family: "Inter";
+  src: url("#{$font-path}/inter-regular.woff2") format("woff2"),
+    url("#{$font-path}/inter-regular.ttf") format("truetype");
+}
+
+* {
+  font-family: $primary-font;
 }

src/styles/bases/reset.scss

@@ -1,54 +0,0 @@
-$background-color_1: transparent;
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  &:before {
-    box-sizing: border-box;
-  }
-  &:after {
-    box-sizing: border-box;
-  }
-}
-img {
-  display: block;
-  max-width: 100%;
-}
-picture {
-  display: block;
-  max-width: 100%;
-}
-svg {
-  display: block;
-  max-width: 100%;
-}
-video {
-  display: block;
-  max-width: 100%;
-}
-input {
-  background-color: $background-color_1;
-  outline: none;
-}
-select {
-  background-color: $background-color_1;
-  outline: none;
-}
-textarea {
-  background-color: $background-color_1;
-  outline: none;
-}
-button {
-  cursor: pointer;
-  background-color: $background-color_1;
-  outline: none;
-  border: 0;
-}
-body {
-  min-height: 100vh;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 1;
-}

src/styles/components/_button.scss

@@ -1,22 +1,10 @@
 .btn {
   align-self: center;
-  display: none;
   padding: 13px 20px;
   background-color: $primary-color;
   border-radius: 100px;
   font-size: $fs-md;
   color: $white;
-  text-decoration: none;
   white-space: nowrap;
   transition: 0.2s;
 }
-
-@media screen and (min-width: 840px) {
-  .btn {
-    display: block;
-
-    &:hover {
-      background-color: $secondary-color;
-    }
-  }
-}

src/styles/components/_toggle-menu.scss

@@ -1,29 +1,31 @@
+$width-icon-menu: 36px;
+
 .icon-menu {
   @include base-icon-menu;
 
   position: relative;
-  top: 27px;
+  width: $width-icon-menu;
-  width: 36px;
   cursor: pointer;
 
   &:before {
     @include icon-menu;
 
     top: -10px;
-    width: 36px;
+    width: $width-icon-menu;
   }
 
   &:after {
     @include icon-menu;
 
     top: 10px;
-    width: 36px;
+    width: $width-icon-menu;
   }
 }
 
 .toggle-menu {
   position: absolute;
-  top: 40px;
+  top: 46px;
+  right: 21px;
   width: 36px;
   height: 27px;
   cursor: pointer;
@@ -46,7 +48,7 @@
 }
 
 .toggle-menu:checked ~ .nav-list {
-  right: 0px;
+  right: 0;
 }
 
 @media screen and (min-width: 840px) {

src/styles/layouts/_header.scss

@@ -1,11 +1,9 @@
 .header {
   position: relative;
-  display: flex;
+  align-items: center;
-  justify-content: space-between;
   max-width: $max-width;
   min-width: $min-width;
   padding: 24px;
-  margin: auto;
 }
 
 @media screen and (min-width: 840px) {
@@ -16,11 +14,8 @@
   }
 
   .header-content {
-    display: flex;
-    justify-content: space-between;
     gap: 10px;
     width: 100%;
     max-width: 918px;
-    height: auto;
   }
 }

src/styles/layouts/_navbar.scss

@@ -1,19 +1,23 @@
 .nav-list {
+  flex-direction: column;
   list-style: none;
   transition: 0.1s;
   position: fixed;
   border: 2px solid $primary-color;
-  top: 0px;
+  top: 0;
   right: -300px;
-  width: auto;
+  margin-top: 105px;
-  height: auto;
-  margin-top: 80px;
   margin-right: 10px;
-  z-index: 2;
+  margin-left: 10px;
+  background-color: $white;
+}
+
+.nav-download-btn {
+  display: none;
 }
 
 .nav-item {
-  font-size: 14px;
+  font-size: $fs-xx-sm;
   padding: 14px;
   border-bottom: 1px solid $black;
 
@@ -27,29 +31,33 @@
 }
 
 .nav-link {
-  text-decoration: none;
   color: $black;
 }
 
 @media screen and (min-width: 840px) {
   .nav {
-    margin: auto;
     width: 100%;
-    height: auto;
+  }
+
+  .nav-download-btn {
+    display: block;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
   }
 
   .nav-list {
     position: unset;
-    display: flex;
+    flex-direction: row;
-    justify-content: space-between;
     border: none;
-    margin: auto;
     max-width: 600px;
+    margin: unset;
   }
 
   .nav-item {
     border-bottom: none;
-    padding: 0px;
+    padding: 0;
 
     &:hover {
       background-color: unset;

src/styles/main.scss

@@ -3,18 +3,15 @@
 @import "./abstracts/variables";
 
 // Bases
+@import "./bases/base";
 @import "./bases/typography";
-@import "./bases/reset.scss";
+@import "./bases/reset";
 
 // Components
 @import "./components/button";
-@import "./components/menu-button";
+@import "./components/toggle-menu";
 @import "./components/logo";
 
 // Layouts
 @import "./layouts/navbar";
 @import "./layouts/header";
-
-* {
-  font-family: $primary-font;
-}