Adicionando sass nas partes principais

assets/scss/banners-promocionais-statico.scss

@@ -0,0 +1,44 @@
+@mixin banners-promocionais($cor, $url-image) {
+  background-color: $cor;
+  background-image: url($url-image);
+}
+
+.banners-promocionais-statico{
+  margin-top: 30px;
+
+  .banners-promocionais-statico-12x{
+    @include banners-promocionais($rosa, '../images/parcele-em-12x.jpg');
+  }
+
+  .banners-promocionais-statico-todo-br{
+    @include banners-promocionais($roxo, '../images/entrega-para-todo-brasil.jpg');
+  } 
+
+  .banners-promocionais-statico-12x,
+  .banners-promocionais-statico-todo-br{
+    background-size: cover;
+    height: 105px;
+    padding: 20px 60px;
+    color: $branco;
+
+    svg, p{
+      margin: 0;
+      padding: 0;
+    }
+
+    svg{
+      font-size: 55px;
+    }
+
+    p{
+      font-weight: 100;
+      font-size: 23px;
+      line-height: 110%;
+      margin-left: 20px;
+      strong{
+        font-weight: bold;
+      }
+    }
+
+  }
+}

assets/scss/config.scss

@@ -0,0 +1,15 @@
+body{
+ color: $cor-secundaria;
+}
+
+a{
+  text-decoration: none !important;
+}
+
+h1,h2,h3,h4,h5{
+  font-weight: bold;
+}
+
+h1{
+  font-size: 26px;
+}

assets/scss/header.scss

@@ -0,0 +1,54 @@
+header{
+  background: $cor-primaria;
+  padding: 25px;
+
+  form{
+    input[type="text"]{
+      background: $branco;
+      width: 100%;
+      border-radius: 100px;
+      border: none;
+      padding: 10px 20px;
+    }
+
+    button{
+      background: none;
+      border: none;
+      position: absolute;
+      right: 25px;
+    }
+  }
+
+  ul{
+    li{
+      position: relative;
+      span.notificacao{
+        color: $branco;
+        background: $rosa;
+
+        position: absolute;
+        top: -10px;
+        left: 5px;
+
+        font-size: 10px;
+        width: 15px;
+        height: 15px;
+
+        border-radius: 100%;
+      }
+
+      a{
+        font-size:16px;
+        font-weight: bold;
+        color: $cor-secundaria;
+        svg{
+          font-size: 23px;
+        }
+
+        &:hover{
+          color: initial;
+        }
+      }
+    }
+  }
+}

assets/scss/nav-produtos.scss

@@ -0,0 +1,45 @@
+nav.nav-produtos{
+  background: $cor-secundaria;
+  color: $branco;
+
+  a{
+    color: $branco;
+  }
+
+  ul.nav{
+    li{
+      position: relative;
+      padding: 10px;
+
+      svg{
+        font-size: 20px;
+        margin-right: 10px;
+      }
+
+      &:hover{
+        background: darken($color: $cor-secundaria, $amount: 30);
+        ul.nav{
+          display: block;
+        }
+      }
+
+      ul.nav{
+        z-index: 999;
+        display:none;
+
+        position: absolute;
+        top:44px;
+        left: 0px;
+
+        background: $cor-secundaria;
+        border-top: solid $cor-primaria 10px;
+
+        width: 100%;
+
+        li{
+          padding: 10px 25px;
+        }
+      }
+    }
+  }
+}

assets/scss/style.scss

@@ -1,5 +1,17 @@
 //Fonts
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');
 
-//Framewor
-@import './bootstrap.scss';
+//Variaveis
+@import "./variaveis.scss";
+
+//Components
+@import "./header.scss";
+@import "./nav-produtos.scss";
+@import "./banners-promocionais-statico.scss";
+@import "./produtos.scss";
+
+//Framework
+@import "./bootstrap.scss";
+
+//Config
+@import "./config.scss";

assets/scss/variaveis.scss

@@ -0,0 +1,8 @@
+$branco: #FFF;
+$rosa:#FF0F9A;
+$amarelo: #FFC107;
+$cinza: #343A40;
+$roxo: #B343C3;
+
+$cor-primaria: $amarelo;
+$cor-secundaria: $cinza;