diff --git a/src/Header/ContentMenuHeader.tsx b/src/Header/ContentMenuHeader.tsx
new file mode 100644
index 0000000..a11f752
--- /dev/null
+++ b/src/Header/ContentMenuHeader.tsx
@@ -0,0 +1,19 @@
+import { NavLink } from "react-router-dom";
+
+export const ContentMenuHeader = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/Header/HeaderDesktop.modules.scss b/src/Header/HeaderDesktop.modules.scss
new file mode 100644
index 0000000..f584e4f
--- /dev/null
+++ b/src/Header/HeaderDesktop.modules.scss
@@ -0,0 +1,148 @@
+@import "../Variables.scss";
+
+.HeaderDesktop {
+ display: flex;
+ justify-content: space-between;
+ height: 31px;
+ padding: 22px 100px;
+ background: $color-black;
+ font-family: $fontFamily;
+ border-bottom: 1px solid $color-gray;
+
+ @media (min-width: 2500px) {
+ height: 56px;
+ }
+
+ .m3LogoWrapper {
+ display: flex;
+ align-items: center;
+
+ .M3Logo {
+ width: 100%;
+ @media (min-width: 2500px) {
+ width: 265.62px;
+ height: 50.5px;
+ }
+ }
+ }
+
+ .Search_Header_wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 24.445%;
+ max-width: 515px;
+
+ .Search_Header {
+ position: relative;
+ width: 100%;
+ height: 12px;
+ padding: 8px 16px;
+ border: 2px solid $color-white-100;
+ border-radius: 5px;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-gray;
+
+ &::placeholder {
+ color: $color-gray;
+ }
+
+ @media (min-width: 2500px) {
+ height: 33px;
+ padding: 12px 16px;
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+ }
+ .Search_Header_wrapper::after {
+ position: absolute;
+ content: "";
+ width: 18px;
+ height: 18px;
+ top: 7px;
+ right: 16px;
+ background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
+ background-repeat: no-repeat;
+ cursor: pointer;
+
+ @media (min-width: 2500px) {
+ width: 35.15px;
+ height: 35.15px;
+ background-size: contain;
+ top: 10px;
+ }
+ }
+ .Headerlinks {
+ display: flex;
+ gap: 55px;
+
+ .EnterLink {
+ display: flex;
+ align-items: center;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-white;
+ text-decoration: none;
+
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+
+ .CartIcon_Wrapper {
+ display: flex;
+ align-items: center;
+
+ a {
+ display: flex;
+ align-items: center;
+ }
+
+ .CartIcon {
+ width: 100%;
+ }
+ }
+ }
+}
+
+.ContentHeader_wrapper {
+ padding: 14px 100px;
+ background: $color-black;
+ font-family: $fontFamily;
+ font-style: normal;
+ gap: 55px;
+ display: flex;
+ height: 16px;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+
+ @media (min-width: 2500px) {
+ height: 33px;
+ }
+
+ button {
+ padding: 0;
+ background: $color-black;
+ border: none;
+ color: $color-white;
+ cursor: pointer;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ font-family: $fontFamily;
+ @media (min-width: 2500px) {
+ font-weight: 500;
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+}
diff --git a/src/Header/HeaderDesktop.tsx b/src/Header/HeaderDesktop.tsx
new file mode 100644
index 0000000..c29e19e
--- /dev/null
+++ b/src/Header/HeaderDesktop.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
+import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
+
+import { ContentMenuHeader } from "./ContentMenuHeader";
+
+import "./HeaderDesktop.modules.scss";
+
+export const HeaderDesktop = () => {
+ return (
+ <>
+
+
+
+ 
+
+
+
+
+
+
+
+ ENTRAR
+
+
+
+ 
+
+
+
+
+
+
+ );
+};
diff --git a/src/Header/HeaderMobile.modules.scss b/src/Header/HeaderMobile.modules.scss
new file mode 100644
index 0000000..a5111c1
--- /dev/null
+++ b/src/Header/HeaderMobile.modules.scss
@@ -0,0 +1,130 @@
+@import "../Variables.scss";
+
+.HeaderMobile {
+ display: flex;
+ flex-direction: column;
+ padding: 25px 16px;
+ background: $color-black;
+
+ .topHeaderMobile {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 25px;
+
+ .ModalWrapper {
+ position: fixed;
+ left: 0;
+ top: 0;
+
+ pointer-events: none;
+ opacity: 0;
+ transition: all 0.2s ease-in-out;
+
+ .ModalContent {
+ z-index: 8;
+
+ .ContentHeader_wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 585px;
+ background: $color-white;
+ padding: 31px 16px;
+ gap: 12px;
+ z-index: 8;
+
+ button {
+ color: $color-gray;
+ background: $color-white;
+ }
+ }
+ }
+
+ .Modaltop {
+ display: flex;
+ justify-content: space-between;
+ padding: 31px 16px;
+ background: $color-black;
+ color: $color-white;
+ font-family: $fontFamily;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ z-index: 8;
+
+ .CloseButton {
+ border: none;
+ background: $color-black;
+ }
+ }
+ }
+
+ .ModalWrapper.opened {
+ display: flex;
+ flex-direction: column;
+ width: calc(100% - 36px);
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: 8;
+
+ pointer-events: all;
+ opacity: 1;
+ }
+
+ .ModalOuverlay {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+
+ background-color: rgba(69, 69, 69, 0.7);
+ }
+ }
+
+ .MenuIcon {
+ background: $color-black;
+ border: none;
+
+ @media (max-width: 1024px) {
+ padding-left: 0;
+ }
+ }
+
+ .Search_Header_wrapper {
+ position: relative;
+ width: 100%;
+
+ .Search_Header {
+ width: 96.372%;
+ border: 2px solid $color-white-100;
+ border-radius: 5px;
+ padding: 10px 16px;
+ color: $color-black;
+
+ @media (max-width: 375px) {
+ width: 89.508%;
+ height: 12px;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ }
+
+ &::placeholder {
+ color: $color-gray;
+ }
+ }
+ }
+ .Search_Header_wrapper::after {
+ position: absolute;
+ content: "";
+ width: 18px;
+ height: 18px;
+ right: 16px;
+ top: 10px;
+ background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
+ cursor: pointer;
+ }
+}
diff --git a/src/Header/HeaderMobile.tsx b/src/Header/HeaderMobile.tsx
new file mode 100644
index 0000000..e87fc82
--- /dev/null
+++ b/src/Header/HeaderMobile.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+
+import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
+import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
+import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
+import { MenuHeader } from "../MenuHeader";
+
+import "./HeaderMobile.modules.scss";
+
+export const HeaderMobile = () => {
+ const [isOpened, setIsOpened] = useState(false);
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};