diff --git a/public/index.html b/public/index.html index aa069f2..8bc7932 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,9 @@ + + + - - - - - - - - - - - diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg deleted file mode 100644 index f57d95b..0000000 --- a/src/assets/svg/logo.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg deleted file mode 100644 index 9455c4d..0000000 --- a/src/assets/svg/search.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss deleted file mode 100644 index d99f468..0000000 --- a/src/components/Header/Header.scss +++ /dev/null @@ -1,3 +0,0 @@ -header{ - background-color: #000; -} \ No newline at end of file diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 65695b9..a163e21 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,34 +1,17 @@ import React from "react"; -import './Header.scss'; -import logo from "../../assets/svg/logo.svg" -import search from "../../assets/svg/search.svg" -import cart from "../../assets/svg/cart.svg" +import { HeaderTop } from "./HeaderDesk/HeaderTop"; +import { HeaderBottom } from "./HeaderDesk/HeaderBottom"; +import { HeaderMobile } from "./HeaderMobile/HeaderMobile"; -const Header = ()=>{ +import styleHeader from './styles/Header.module.scss'; + +export const Header = () => { return ( -
-
-
- < img src={logo} alt="Logo M3" className="container__logo__img" /> -
-
- - -
-
- - Entrar - - - icone de cart - -
-
-
- -
+
+ + +
) } -export {Header} \ No newline at end of file diff --git a/src/components/Header/HeaderDesk/HeaderBottom.tsx b/src/components/Header/HeaderDesk/HeaderBottom.tsx new file mode 100644 index 0000000..da18f3b --- /dev/null +++ b/src/components/Header/HeaderDesk/HeaderBottom.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import styleHeader from '../styles/Header.module.scss'; + +export const HeaderBottom = () => { + return ( +
+ +
+ ); +} 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 ( +
+
+
+ < img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} /> +
+
+ + + Icone de busca + +
+
+ + Entrar + + + + icone de cart + + +
+
+
+ ); +} 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> + +} + +export const BurguerMenu = ({ isOpenMenu, setisOpenMenu }: MenuMobile) => { + + return ( + + < div className={isOpenMenu + ? `${styleHeader["wrapper"]} ${styleHeader['aberto']}` + : `${styleHeader["wrapper"]}`} > + +
+
+
+ + Entrar + + setisOpenMenu(false)}> + Botão de fechar setisOpenMenu(false)} /> + +
+
+ {/* Esse nav vai viraar um componente */} + + +
+
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 ( +
+
+
+ + Menu Hamburguer setisOpenMenu(true)} /> + +
+
+ < img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} /> +
+
+ + icone de cart + +
+
+
+ + + Icone de busca + +
+ +
+ ); +} \ 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 ( -
-
-
+ ); } @@ -15,5 +14,5 @@ const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..87bf3df --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import { Header } from "../components/Header/Header"; + + +export const Home = ()=>{ + return( + <> +
+ + ) +} \ No newline at end of file diff --git a/variables.scss b/variables.scss new file mode 100644 index 0000000..ed9b4c0 --- /dev/null +++ b/variables.scss @@ -0,0 +1,28 @@ +/* fonts */ +@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); +$font-family: "Open Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; + +/* Colors */ +$color-black: #000000; +$color-black2: #292929; +$color-black3: #58595B; + +$color-white: #fff; + +$color-gray: #6c6c6c; +$color-gray2: #7D7D7D; +$color-gray3: #f0f0f0; +$color-gray4: #8d8d8d; +$color-gray5: #e5e5e5; +$color-gray6: #C4C4C4; +$color-gray7: #e0e0e0; + +$color-blue: #4267b2; +$color-blue2: #00C8FF; + + +$color-green: #4caf50; + +$color-orange: #f15a31;