diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index aa069f2..aa638d6 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/src/assets/svgs/close.svg b/src/assets/svgs/close.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/svgs/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/menu.svg b/src/assets/svgs/menu.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/svgs/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index e0d0d1f..d0f0b06 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -1,7 +1,55 @@ import React from "react"; -const Header = () => { - return
-} +import logom3Academy from "../../assets/imgs/Logo-M3Academy.png"; +import styles from "../header/style.module.scss"; +import Search from "../../assets/svgs/search.svg"; +import miniCart from "../../assets/svgs/minicart.svg"; +import BurgerMenu from "../../assets/svgs/menu.svg" -export { Header }; \ No newline at end of file +const Header = () => { + return ( +
+
+
+ + Logo M3 Academy + +
+ + +
+
+ +

Entrar

+ + +
+ Meu carrinho +
+ +
+
+
+ +
+ +
+
+ ); +}; + +export { Header }; diff --git a/src/components/header/style.module.scss b/src/components/header/style.module.scss index e69de29..bdacc23 100644 --- a/src/components/header/style.module.scss +++ b/src/components/header/style.module.scss @@ -0,0 +1,187 @@ +.header-top { + width: 100%; + background: var(--black); + border-bottom: 1px solid var(--light-gray-500); + + &__wrapper { + width: 84.38%; + margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + + @media (min-width:2500px) { + width: 92%; + } + + } + + @media (max-width: 1024px) { + border: none; + } + + &__logo { + width: 12.6%; + + img { + width: 100%; + margin: auto; + } + } + + // Caixa de pesquisa + + &__search-box { + position: relative; + + input { + width: 204px; + background-color: var(--white); + border: 2px solid var(--light-gray-300); + border-radius: 5px; + margin: 22px 0; + padding: 6px 44px 6px 16px; + font-weight: 400; + font-size: 14px; + line-height: 16.41px; + outline: none; + + &::placeholder { + color: var(--light-gray-600); + } + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + padding: 12px 291px 12px 16px; + } + } + + .search-button { + position: absolute; + right: 16px; + background-color: transparent; + border: 0; + padding: 0; + width: 6.72%; + top: 28px; + + img { + width: 100%; + margin: 0; + } + + @media (min-width: 2500px) { + right: 16px; + top: 34px; + } + } + } + + // Links de página do usuário e carrinho + + &__user-info { + display: flex; + align-items: center; + gap: 55px; + // margin: 0 100px 0 0; + + a { + text-decoration: none; + + h2 { + // margin: 0 55px 0 0; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: var(--white); + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } + + .mini-cart { + margin: 0; + + img { + width: 28px; + + @media (min-width: 2500px) { + width: 54.68px; + } + } + } + } +} + +// Menu do header + +.header-bottom { + background: var(--black); + + .nav-menu { + width: 84.38%; + margin: auto; + + @media (min-width:2500px) { + width: 92%; + } + + .burger-menu { + display: none; + + @media (max-width: 1024px) { + display: block; + background: transparent; + border: none; + } + } + + ul { + display: flex; + align-items: center; + text-decoration: none; + margin: 0; + padding: 0; + + @media (max-width: 1024px) { + display: none; + } + + li { + font-weight: 500; + font-size: 14px; + line-height: 16px; + // padding: 14px 27.5px; + text-transform: uppercase; + list-style: none; + color: var(--white); + cursor: pointer; + + // &:hover { + // color: var(--blue); + // } + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + .first-li { + padding: 14px 27.5px 14px 0; + } + + .second-li, + .third-li { + padding: 14px 27.5px; + } + + + } + } +} diff --git a/src/global.scss b/src/global.scss index 028c151..4c750e5 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,28 +1,33 @@ // Fonts -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); $font-family: "Roboto", sans-serif; // Colors +:root { + --white: #ffffff; -$white: #ffffff; + --light-gray-100: #f9f9f9; + --light-gray-200: #f0f0f0; + --light-gray-300: #f2f2f2; + --light-gray-400: #e5e5e5; + --light-gray-500: #c4c4c4; + --light-gray-600: #c6c6c6; -$gray-100: #F9F9F9; -$gray-200: #F0F0F0; -$gray-300: #E5E5E5; -$gray-400: #C4C4C4; -$gray-500: #B9B7B7; -$gray-600: #7D7D7D; -$gray-700: #303030; -$gray-800: #292929; -$gray-900: #100D0E; + --medium-gray-100: #b9b7b7; + --medium-gray-200: #7d7d7d; -$black: #000000; + --dark-gray-100: #303030; + --dark-gray-200: #292929; + --dark-gray-300: #100d0e; -$red: #FF0000; -$green: #008000; -$blue: #00C8FF; + --black: #000000; + + --red: #ff0000; + --green: #008000; + --blue: #00c8ff; +} body { margin: 0; @@ -32,6 +37,6 @@ body { } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/index.tsx b/src/index.tsx index 657c804..6066e75 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,9 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; + import './global.scss'; + import {Institucional} from "./pages/Institucional"; const root = ReactDOM.createRoot( diff --git a/src/pages/Institucional.tsx b/src/pages/Institucional.tsx index c266155..bf83fe7 100644 --- a/src/pages/Institucional.tsx +++ b/src/pages/Institucional.tsx @@ -1,7 +1,12 @@ import React from "react"; +import { Header } from "../components/header"; const Institucional = () => { - return
-} + return ( +
+
+
+ ); +}; -export { Institucional }; \ No newline at end of file +export { Institucional };