diff --git a/src/App.tsx b/src/App.tsx index 87ab44a..c163a12 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,8 @@ import Header from "./components/Header"; import Home from "./components/Home"; import Institutional from "./components/Institutional"; import Footer from "./components/Footer"; +import { AsideMenuContextProvider } from "./contexts/asideMenuContext"; +import AsideMenu from "./components/AsideMenu"; const router = createBrowserRouter([ { @@ -20,9 +22,12 @@ const router = createBrowserRouter([ function App() { return (
-
- -
); } diff --git a/src/assets/svg/Aside.svg b/src/assets/svg/Aside.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/svg/Aside.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/Exit.svg b/src/assets/svg/Exit.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/svg/Exit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/AsideMenu/index.tsx b/src/components/AsideMenu/index.tsx new file mode 100644 index 0000000..020d019 --- /dev/null +++ b/src/components/AsideMenu/index.tsx @@ -0,0 +1,37 @@ +import styles from "./styles.module.scss"; +import Exit from "../../assets/svg/Exit.svg"; +import { useAside } from "../../contexts/asideMenuContext"; + +export default function AsideMenu() { + const { setAsideMenuOpen, isAsideMenuOpen } = useAside(); + return ( +
+
+
+ + +
+
+ + + +
+
+
+ ); +} diff --git a/src/components/AsideMenu/styles.module.scss b/src/components/AsideMenu/styles.module.scss new file mode 100644 index 0000000..47abd09 --- /dev/null +++ b/src/components/AsideMenu/styles.module.scss @@ -0,0 +1,64 @@ +.blackout { + position: fixed; + inset: 0; + background: rgba(69, 69, 69, 0.7); + z-index: 999; +} + +.closed { + transform: translateX(-100%); +} + +.invisible { + visibility: hidden; + pointer-events: none; +} + +.container { + position: absolute; + transition: 0.3s; + left: 0%; + right: 3.52%; + top: 0%; + bottom: 57.02%; +} + +.in_out { + display: flex; + justify-content: space-between; + background-color: black; + padding: 31px 0 31px 16px; + + .in_button { + background-color: black; + color: white; + border: 0; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + .out_button { + background-color: black; + color: white; + border: 0; + padding-right: 16px; + } +} +.aside_buttons_div { + display: flex; + flex-direction: column; + gap: 12px; + background-color: white; + height: 585px; + padding: 31px 0 0 16px; + .aside_buttons { + display: flex; + border: 0; + justify-content: flex-start; + background-color: white; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: #c4c4c4; + } +} diff --git a/src/components/ContactForm/styles.module.scss b/src/components/ContactForm/styles.module.scss index 681840c..28dd2f3 100644 --- a/src/components/ContactForm/styles.module.scss +++ b/src/components/ContactForm/styles.module.scss @@ -12,6 +12,10 @@ max-height: 46px; border: 1px solid #100d0e; border-radius: 25px; + + &::placeholder { + color: #b9b7b7; + } } form { > div { @@ -33,6 +37,7 @@ line-height: 19px; border-radius: 25px; cursor: pointer; + letter-spacing: 0.05em; } } .label_form { @@ -106,3 +111,34 @@ } } } + +@media screen and (max-width: 1024px) { + .form_title { + margin-top: 30px !important; + } + .contact_form { + .Field { + width: 100% !important; + font-size: 14px; + line-height: 16px; + } + .label_form { + font-size: 14px; + line-height: 16px; + } + .confirm_form { + span { + font-size: 14px; + line-height: 16px; + } + label { + font-size: 14px; + line-height: 16px; + } + } + .confirm_span { + font-size: 12px; + line-height: 14px; + } + } +} diff --git a/src/components/Footer/styles.module.scss b/src/components/Footer/styles.module.scss index f652c41..2a44888 100644 --- a/src/components/Footer/styles.module.scss +++ b/src/components/Footer/styles.module.scss @@ -97,6 +97,7 @@ .news_button { width: 100% !important; + box-shadow: none !important; } } } @@ -154,6 +155,7 @@ font-weight: 400; font-size: 1.09vw; line-height: 16px; + color: #303030; } } @@ -162,11 +164,61 @@ gap: 0.78vw; a { - height: 2.73vw; + height: 35px; } img { - width: 2.73vw; + height: 35px; + } + } +} + +@media screen and (min-width: 2500px) { + .redes_sociais_svg { + a { + height: 70px !important; + } + img { + height: 70px !important; + } + } +} + +@media screen and (max-width: 1024px) { + .footer_top { + padding: 24px 0 24px 16px; + display: flex; + flex-direction: column; + gap: 12px; + + .menu_list { + display: flex; + flex-direction: column; + gap: 12px; + .menu_list_title { + font-weight: 500; + font-weight: bold; + font-size: 1.09vw; + display: flex; + justify-content: flex-start; + } + a { + display: none; + } + span { + display: none; + } + } + .redes_sociais { + p { + font-size: 14px; + line-height: 16px; + } + } + .redes_sociais_svg { + img { + width: 35px; + } } } } @@ -261,16 +313,36 @@ padding-left: 16px; gap: 15px; + p { + font-size: 10px !important; + line-height: 12px !important; + text-transform: capitalize; + } + .pagamentos { margin-top: 15px; order: -1; + .certificado { + img { + width: 54.61px; + } + } .bandeiras { margin-left: unset; + img { + width: 36px; + } } } .logos { margin-left: unset; + margin-bottom: 15px; + + p { + font-size: 10px !important; + line-height: 12px !important; + } } } } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 7b175a6..c76a12c 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,13 +2,24 @@ import styles from "./styles.module.scss"; import M3Logo from "../../assets/svg/M3logo.svg"; import Lupa from "../../assets/svg/lupa.svg"; import Cart from "../../assets/svg/cart.svg"; +import AsideMenu from "../../assets/svg/Aside.svg"; +import { useAside } from "../../contexts/asideMenuContext"; export default function Header() { + const { setAsideMenuOpen } = useAside(); return ( <>
+ logo m3 diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss index dfd2338..fc95614 100644 --- a/src/components/Header/styles.module.scss +++ b/src/components/Header/styles.module.scss @@ -1,10 +1,15 @@ // --------------------- Header Top --------------------- // .header_top { + position: relative; background: black; - padding: 1.72vw 0; + padding: 25px 0; color: white; + .aside_menu { + display: none; + } + .first_div { display: flex; align-items: center; @@ -17,10 +22,6 @@ } .search { - width: 20.63vw; - background: white; - border-radius: 5px; - border: 2px solid #f2f2f2; position: relative; display: flex; align-items: center; @@ -28,9 +29,13 @@ gap: 3.79%; input { + padding-left: 16px; + width: 20.63vw; + background: white; + border-radius: 5px; + border: 2px solid #f2f2f2; display: flex; height: 32px; - width: 77.27%; border: 0; font-size: 1.09vw; @@ -43,7 +48,8 @@ cursor: pointer; height: 1.41vw; display: flex; - position: relative; + position: absolute; + right: 16px; } } @@ -93,6 +99,51 @@ } } +@media screen and (max-width: 1024px) { + .header_top { + .first_div { + .aside_menu { + display: flex; + padding-left: 16px; + background-color: black; + border: 0; + } + } + height: 139px; + .search { + position: absolute !important; + bottom: 25px !important; + left: 16px !important; + right: 16px !important; + input { + width: 100% !important; + font-size: 14px !important; + line-height: 16px !important; + } + img { + width: 18px !important; + } + } + .m3_logo { + width: 236px !important; + height: 25.86px !important; + padding: 0 !important; + } + .header_button { + .button_entrar { + display: none !important; + } + .cart_button { + img { + position: absolute !important; + width: 28px !important; + right: 16px !important; + } + } + } + } +} + // --------------------- Header Bottom --------------------- // .header_bottom { @@ -113,3 +164,9 @@ cursor: pointer; } } + +@media screen and (max-width: 1024px) { + .header_bottom { + display: none; + } +} diff --git a/src/components/Home/styles.module.scss b/src/components/Home/styles.module.scss index 5151d8e..af61382 100644 --- a/src/components/Home/styles.module.scss +++ b/src/components/Home/styles.module.scss @@ -110,3 +110,62 @@ } } } + +@media screen and (max-width: 1024px) { + .bread_crumb { + margin-left: 16px; + + .bread_crumb_home { + height: 16px; + } + + .bread_crumb_arrow { + height: 8px; + } + + h2 { + font-size: 12px; + line-height: 14px; + } + } + + .tab_title { + margin: 80px 0 40px; + + h2 { + font-size: 24px; + } + } + + .tab_layout { + display: flex; + flex-direction: column; + margin: 0 16px; + + .tabs { + margin: 0; + border-right: none; + .tab_active { + width: 100% !important; + } + + button { + width: 100% !important; + } + } + } + + .tab_content { + margin-bottom: 81px; + + h2 { + display: flex; + align-items: center; + justify-content: center; + } + p { + font-size: 12px; + line-height: 18px; + } + } +} diff --git a/src/contexts/asideMenuContext.tsx b/src/contexts/asideMenuContext.tsx new file mode 100644 index 0000000..212460e --- /dev/null +++ b/src/contexts/asideMenuContext.tsx @@ -0,0 +1,27 @@ +import React, { createContext, ReactNode, useContext, useState } from "react"; + +interface AsideMenuContextProviderProps { + isAsideMenuOpen: boolean; + setAsideMenuOpen: React.Dispatch>; +} + +export const asideMenuContext = createContext( + {} as AsideMenuContextProviderProps +); + +export function useAside() { + return useContext(asideMenuContext); +} + +export function AsideMenuContextProvider({ + children, +}: { + children: ReactNode; +}) { + const [isAsideMenuOpen, setAsideMenuOpen] = useState(false); + return ( + + {children} + + ); +}