feature(header): cria o header desktop

src/components/header/Header.module.scss

@@ -0,0 +1,60 @@
+header {
+  background-color: black;
+}
+
+.header__container {
+  height: 76px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.container__logo {
+  position: absolute;
+  left: 100px;
+  width: 136px;
+}
+
+.container__searchbar {
+  padding: 8px 16px;
+  width: 264px;
+  height: 32px;
+  border: 2px solid #f2f2f2;
+  border-radius: 5px;
+}
+
+.container__cart__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  position: absolute;
+  right: 100px;
+
+  & a {
+    color: white;
+    text-transform: uppercase;
+  }
+}
+
+.cart__wrapper__icon {
+  width: 30px;
+  margin-left: 55px;
+}
+
+.header__container__nav {
+  padding: 14px 0;
+  height: 50px;
+
+  .nav__wrapper {
+    margin-left: 100px;
+  }
+
+  & a {
+    color: white;
+    margin-right: 50px;
+    text-transform: uppercase;
+  }
+}

src/components/header/Header.tsx

@@ -1,7 +1,42 @@
 import React from "react";
+import style from "./Header.module.scss";
+import logoM3 from "../../assets/imgs/logoM3Academy.png";
+import cart from "../../assets/imgs/cart.png";
+import { HeaderNav } from "./HeaderNav";
 
 const Header = () => {
-  return <div></div>;
+  return (
+    <header>
+      <div className={style.header__container}>
+        <a href="/">
+          <img
+            className={style.container__logo}
+            src={logoM3}
+            alt="Logo M3 Academy"
+          />
+        </a>
+        <div className={style.container__searchbar__wrapper}>
+          <input
+            className={style.container__searchbar}
+            type="text"
+            placeholder="Buscar..."
+          />
+        </div>
+        <div className={style.container__cart__wrapper}>
+          <a href="/">Entrar</a>
+          <a href="/">
+            <img
+              className={style.cart__wrapper__icon}
+              src={cart}
+              alt="Carrinho de compras"
+            />
+          </a>
+        </div>
+      </div>
+      <hr />
+      <HeaderNav />
+    </header>
+  );
 };
 
 export { Header };

src/components/header/HeaderNav.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import style from "./Header.module.scss";
+
+const HeaderNav = () => {
+  return (
+    <nav className={style.header__container__nav}>
+      <div className={style.nav__wrapper}>
+        <a href="/">Cursos</a>
+        <a href="/">Saiba mais</a>
+        <a href="/">Institucionais</a>
+      </div>
+    </nav>
+  );
+};
+
+export { HeaderNav };

src/components/main/Main.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+const Main = () => {
+  return <div></div>;
+};
+
+export { Main };

src/global.scss

@@ -12,6 +12,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+a {
+  text-decoration: none;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;

src/pages/Home.tsx

@@ -1,6 +1,12 @@
 import React from "react";
+import { Header } from "../components/header/Header";
+
 const Home = () => {
-  return <div></div>;
+  return (
+    <div>
+      <Header />
+    </div>
+  );
 };
 
 export { Home };