desafio-react-e-typescript/src/assets/images/searchicon.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2094 11.6187C14.0951 10.4091 14.6249 8.92334 14.6249 7.31267C14.6249 3.2807 11.3444 0.000183105 7.31245 0.000183105C3.28048 0.000183105 0 3.2807 0 7.31267C0 11.3446 3.28052 14.6252 7.31248 14.6252C8.92315 14.6252 10.409 14.0953 11.6186 13.2095L16.4092 18.0001L18 16.4093C18 16.4092 13.2094 11.6187 13.2094 11.6187V11.6187ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1043 2.25001 7.31267C2.25001 4.52104 4.52086 2.25019 7.31248 2.25019C10.1041 2.25019 12.375 4.52104 12.375 7.31267C12.375 10.1043 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
+</svg>

desafio-react-e-typescript/src/components/Header/Header.module.scss

@@ -0,0 +1,105 @@
+.container-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: black;
+  width: 100%;
+  height: 76px;
+  padding: 24px 100px;
+
+  .container-logo {
+    button {
+      background: transparent;
+    }
+    .academy-logo {
+      width: 100%;
+      max-width: 136px;
+      height: 26px;
+      cursor: pointer;
+    }
+  }
+}
+
+.container-input {
+  width: 100%;
+  max-width: 264px;
+  display: flex;
+  position: relative;
+
+  input {
+    width: 100%;
+    height: 32px;
+    border: 2px solid #f2f2f2;
+    border-radius: 5px;
+    padding: 8px 10px 8px 16px;
+
+    &::placeholder {
+      color: #c6c6c6;
+    }
+  }
+
+  button {
+    position: absolute;
+    outline: 0;
+    width: 18px;
+    height: 18px;
+    right: 0;
+    background-color: transparent;
+    background-image: url(../../assets/images/searchicon.svg);
+    background-repeat: no-repeat;
+    margin: 8px 10px 8px 16px;
+    cursor: pointer;
+  }
+}
+
+.container-login-carrinho {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    background-color: transparent;
+  }
+
+  a {
+    font-family: "Roboto", sans-serif;
+    font-size: 14px;
+    line-height: 16px;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #fff;
+    margin-right: 55px;
+  }
+
+  .carticon {
+    width: 100%;
+    max-width: 28px;
+    height: 28px;
+    cursor: pointer;
+  }
+}
+
+.container-bottom {
+  display: flex;
+  align-items: center;
+  background-color: black;
+  border-top: 1px solid #c4c4c4;
+  width: 100%;
+  height: 44px;
+
+  .container-bottom-menu {
+    width: 100%;
+    margin-left: 100px;
+
+    a {
+      text-decoration: none;
+      color: #fff;
+      font-family: "Roboto", sans-serif;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      margin-right: 55px;
+    }
+  }
+}

desafio-react-e-typescript/src/global.css

@@ -1,13 +1,27 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+button {
+  border: none;
+}