src/components/header/Header.tsx

@@ -1,9 +1,36 @@
 import React from 'react';
 import styles from '../../styles/Header.module.scss'
+import logo from '../../assets/img/logo.png'
+import search from '../../assets/img/search.png'
+import cart from '../../assets/img/cart.png'
 
 const Header = () => {
     return(
-        <header className={styles['header-top']}>Header</header>
+        <header>
+            <div className={styles['header__top']}>
+                <img className={styles['header__logo']} src={logo} alt=''></img>
+                <div className={styles['header__container-input']}>
+                    <img className={styles['header__search-icon']} src={search} alt=''/>
+                    <input className={styles['header__search']} type="text" placeholder='Buscar... '  />
+                </div>
+                <div className={styles['header__my-account-cart']}>
+                    <p className={styles['header__account']} >Entrar</p>
+                    <img className={styles['header__cart']} src={cart} alt=''></img>
+                </div>
+            </div>
+            <div className={styles['header__line']}></div>
+            <nav className={styles['header__botton']}>
+                <p className={styles['header__botton-nav-text']}>
+                    Cursos
+                </p>
+                <p className={styles['header__botton-nav-text']}>
+                    Saiba Mais
+                </p>
+                <p className={styles['header__botton-nav-text']}>
+                    Institucionais
+                </p>
+            </nav>
+        </header>
     )
 }
 

src/styles/Header.module.scss

@@ -1,7 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
 @import 'variables.scss';
 
 header {
+	width: 100%;
 	color: $white;
 	padding: 0;
 	background-color: $black;
+
+	.header__top{
+		padding: 25.07px 100px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.header__logo{
+			width: 10.63%;
+			height: 25.86px;
+		}
+
+		.header__container-input{
+			display: flex;
+			align-items: center;
+			justify-content: end;
+			position: relative;
+			width: 20.63%;
+
+
+			.header__search{
+				display: flex;
+				width: 100%;
+				border: 2px solid #F2F2F2;
+				border-radius: 5px;
+				height: 32px;
+				padding-left: 16px;
+			}
+			.header__search-icon{
+				height: 18px;
+				position: absolute;
+				color: #303030;
+				margin-right: 7px;
+			}
+		}
+
+		.header__my-account-cart{
+			display: flex;
+			width: 10.63%;
+			justify-content: space-between;
+			align-items: center;
+
+			.header__account {
+				font-style: normal;
+				font-size: 14px;
+				line-height: 16px;
+				text-transform: uppercase;
+				font-family: 'Roboto', sans-serif;
+			}
+			.header__cart{
+				height: 28px;
+			}
+
+		}
+	}
+
+	.header__line{
+		border-bottom: 1px solid $white;
+	}
+
+	.header__botton{
+		display: flex;
+		width: 27.58%;
+		justify-content: space-between;
+		margin: 0px 100px;
+
+		.header__botton-nav-text {
+			font-family: 'Roboto', sans-serif;
+			font-style: normal;
+			font-size: 14px;
+			line-height: 16px;
+			text-transform: uppercase;
+		}
+	}
+
 }