-
-
- < img src={logo} alt="Logo M3" className="container__logo__img" />
-
-
-
- 
-
-
-
- Entrar
-
-
- 
-
-
-
-
-
+
+
+
+ );
+}
diff --git a/src/components/Header/HeaderDesk/HeaderTop.tsx b/src/components/Header/HeaderDesk/HeaderTop.tsx
new file mode 100644
index 0000000..a8d91a1
--- /dev/null
+++ b/src/components/Header/HeaderDesk/HeaderTop.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import logo from "../assets/svgs/logo.svg";
+import search from "../assets/svgs/search.svg";
+import cart from "../assets/svgs/cart.svg";
+
+import styleHeader from '../styles/Header.module.scss';
+
+export const HeaderTop = () => {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/Header/HeaderMobile/BurguerMenu.tsx b/src/components/Header/HeaderMobile/BurguerMenu.tsx
new file mode 100644
index 0000000..6ce3d56
--- /dev/null
+++ b/src/components/Header/HeaderMobile/BurguerMenu.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+import closeIcon from "../assets/svgs/icon-close.svg";
+import styleHeader from '../styles/Header.module.scss';
+
+interface MenuMobile {
+ isOpenMenu: boolean;
+ setisOpenMenu: React.Dispatch
+
+
+
+ {/* Esse nav vai viraar um componente */}
+
+
+
+
+ Entrar
+
+ setisOpenMenu(false)}>
+ 
setisOpenMenu(false)} />
+
+
+ setisOpenMenu(false)}>
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Header/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx
new file mode 100644
index 0000000..b2900c4
--- /dev/null
+++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import logo from "../assets/svgs/logo.svg";
+import search from "../assets/svgs/search.svg";
+import cart from "../assets/svgs/cart.svg";
+import burguerIcon from "../assets/svgs/burger-icon.svg";
+
+import styleHeader from '../styles/Header.module.scss';
+import { BurguerMenu } from "./BurguerMenu";
+
+
+
+export const HeaderMobile = () => {
+ const [isOpenMenu, setisOpenMenu] = useState(false);
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Header/assets/svgs/burger-icon.svg b/src/components/Header/assets/svgs/burger-icon.svg
new file mode 100644
index 0000000..6cadeb3
--- /dev/null
+++ b/src/components/Header/assets/svgs/burger-icon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/Header/assets/svgs/cart.svg b/src/components/Header/assets/svgs/cart.svg
new file mode 100644
index 0000000..903aaff
--- /dev/null
+++ b/src/components/Header/assets/svgs/cart.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/components/Header/assets/svgs/icon-close.svg b/src/components/Header/assets/svgs/icon-close.svg
new file mode 100644
index 0000000..e0e6d36
--- /dev/null
+++ b/src/components/Header/assets/svgs/icon-close.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/Header/assets/svgs/logo.svg b/src/components/Header/assets/svgs/logo.svg
new file mode 100644
index 0000000..7f767d8
--- /dev/null
+++ b/src/components/Header/assets/svgs/logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/Header/assets/svgs/search.svg b/src/components/Header/assets/svgs/search.svg
new file mode 100644
index 0000000..03b67bc
--- /dev/null
+++ b/src/components/Header/assets/svgs/search.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/components/Header/styles/Header.module.scss b/src/components/Header/styles/Header.module.scss
new file mode 100644
index 0000000..310fcd7
--- /dev/null
+++ b/src/components/Header/styles/Header.module.scss
@@ -0,0 +1,501 @@
+li {
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: #FFFFFF;
+ position: relative;
+
+ @media (min-width:2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:active,
+ &:visited {
+ text-decoration: none;
+ }
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+
+ // AREA HEADER TOP
+ &__top {
+ background-color: #000;
+ display: flex;
+ height: 75px;
+ border-bottom: 1px solid #C4C4C4;
+
+ @media (min-width:2500px) {
+ height: 100px;
+
+ }
+
+ @media (max-width:1025px) {
+ display: none;
+ }
+
+ .container__header__top {
+ display: flex;
+ align-items: center;
+ margin: 0 7.8125%;
+ width: 100%;
+
+
+ .container__logo {
+ display: block;
+ width: 100%;
+ max-width: 162px;
+
+ @media (min-width:2500px) {
+ max-width: 265.62px;
+ }
+
+ &__img {
+ display: block;
+ width: 100%;
+ height: 25.86px;
+
+ @media (min-width:2500px) {
+ height: 50.5px;
+ }
+ }
+ }
+
+ .container__search {
+ width: 100%;
+ height: 32px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ max-width: 264px;
+
+ @media (min-width:2500px) {
+ max-width: none;
+ width: 24.44444%;
+ height: 57px;
+
+ }
+
+ &__input {
+ width: 262px;
+ font-size: 1rem;
+ outline: none;
+ padding-left: 16px;
+ border-radius: 5px;
+
+ color: #C4C4C4;
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+
+ @media (min-width:2500px) {
+ width: 100%;
+ height: 57px;
+ font-size: 28px;
+ line-height: 33px;
+ }
+
+ &::placeholder {
+ color: #C4C4C4;
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+
+ @media (min-width:2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+
+ &:focus {
+ transition: 0.35s ease;
+ color: #000;
+
+ &::-webkit-input-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+
+ &::-moz-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+
+ &:-ms-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+ }
+
+ &:focus {
+ transition: 0.35s ease;
+ color: #000;
+
+ &::-webkit-input-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+
+ &::-moz-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+
+ &:-ms-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+ }
+ }
+
+ &__link {
+ position: relative;
+ float: right;
+ width: 18px;
+ height: 18px;
+ top: 7px;
+ right: 32px;
+
+ @media (min-width:2500px) {
+ top: 14px;
+ right: 64px;
+
+ img {
+ width: 35.15px;
+ height: 35.15px;
+ }
+ }
+ }
+ }
+
+ .container__menu {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ max-width: 136px;
+ justify-content: space-between;
+
+ @media (min-width:2500px) {
+ max-width: 214.68px;
+
+
+ }
+
+ &__enter {
+ a {
+
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: #FFFFFF;
+
+ @media (min-width:2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+ }
+
+ &__cart {
+ a {
+ img {
+ @media (min-width:2500px) {
+ width: 54.68px;
+ height: 54.68px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .search-container {
+ width: 490px;
+ display: block;
+ margin: 0 auto;
+ }
+
+ .search-icon {
+ position: relative;
+ float: right;
+ width: 75px;
+ height: 75px;
+ top: -62px;
+ right: -45px;
+ }
+ }
+
+ // AREA HEADER BOTTOM
+ &__bottom {
+ width: 100%;
+ height: 44px;
+
+ @media (min-width:2500px) {
+ height: 61px;
+ }
+
+ background-color: #000;
+ display: flex;
+ align-items: center;
+
+ @media (max-width:1025px) {
+ display: none;
+ }
+
+ .navBar {
+ width: 100%;
+ position: relative;
+
+ &__toggle {
+ display: none;
+ }
+ }
+ }
+
+ .navBar__items {
+ width: 100%;
+ max-width: 349px;
+ margin: 0 7.8125%;
+
+
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ padding: 0;
+
+ @media (min-width:2500px) {
+ max-width: 588.62px;
+
+ justify-content: space-between;
+ }
+
+ @media (max-width:1024px) {
+ display: flex;
+ align-items: initial;
+ flex-direction: column;
+ row-gap: 12px;
+ margin: 31px 16px;
+
+ z-index: 9;
+ }
+
+ .list__items__link {
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 0;
+ height: 2px;
+ background: #FFFFFF;
+ transition: all .45s;
+
+
+ }
+
+ @media (max-width:1024px) {
+ color: #C4C4C4;
+ }
+
+ &:hover::before {
+ width: 100%;
+
+ }
+ }
+ }
+
+ // AREA HEADER MOBILE
+ &__mobile {
+ background-color: #000;
+ display: flex;
+ flex-direction: column;
+ height: auto;
+ row-gap: 30.5px;
+ padding: 25px 0;
+
+ @media (min-width:1025px) {
+ display: none;
+ }
+
+ .mobile__wrapper {
+ width: 96.875%;
+ display: flex;
+ margin: 0 16px;
+ align-items: center;
+ justify-content: space-between;
+
+ @media (max-width:768px) {
+
+ width: 94%;
+ }
+
+ @media (max-width:490px) {
+
+ width: 91.466666666666666666666666666667%;
+ }
+
+ .container__hamburguer {
+ background-color: lightgray;
+ width: 30px;
+ height: 30px;
+ }
+ }
+
+ .container__search__mobile {
+ width: 96.875%;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ margin: 0 16px;
+ max-width: 992px;
+ background-color: #FFFFFF;
+ border-radius: 5px;
+
+ @media (max-width:768px) {
+
+ width: 94%;
+ }
+
+ @media (max-width:490px) {
+
+ width: 91.466666666666666666666666666667%;
+ }
+
+ .container__search__input {
+ width: 100%;
+ font-size: 1rem;
+ outline: none;
+ padding-left: 16px;
+ border: none;
+ border-radius: 5px;
+
+
+ &::placeholder {
+ color: #C4C4C4;
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ }
+
+ &:focus {
+ transition: 0.35s ease;
+ color: #000;
+
+ &::-webkit-input-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+
+ &::-moz-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+
+ &:-ms-placeholder {
+ transition: opacity 0.45s ease;
+ opacity: 0;
+ }
+ }
+ }
+
+ .container__search__link {
+ position: relative;
+ float: right;
+ width: 18px;
+ height: 18px;
+ top: 7px;
+ right: 16px;
+ }
+ }
+ }
+}
+
+
+// AREA DO MENU HAMBURGUER
+@media (max-width:1025px) {
+ .wrapper {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ display: flex;
+ justify-items: center;
+ align-items: center;
+
+ opacity: 0;
+ pointer-events: none;
+ transition: all .45s;
+ }
+
+ .wrapper.aberto {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+ .content {
+ position: fixed;
+ top: 0;
+ width: 96.484375%;
+ height: 585px;
+ background-color: #FFFFFF;
+ z-index: 8;
+
+ @media (max-width:490px) {
+ width: 90.4%;
+ }
+
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: all .45s;
+ }
+}
+
+.header__menu {
+ background-color: #000;
+ height: 78px;
+ display: flex;
+ align-items: center;
+
+ &__wrapper {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ margin: 0 16px;
+ }
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..0d5b9bc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,9 +6,14 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: gray;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+a{
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index ec07e49..9bcb06b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import { Header } from './components/Header/Header';
+import { Home } from './pages/Home';
import './index.css';
+
function App() {
return (
-
+
+
+
+
+ 
setisOpenMenu(true)} />
+
+
+
+ < img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
+
+
+
+
+
+
+
-
+