diff --git a/pagina-institucional/public/index.html b/pagina-institucional/public/index.html index 92780d8..eef0a85 100644 --- a/pagina-institucional/public/index.html +++ b/pagina-institucional/public/index.html @@ -8,6 +8,12 @@ name="description" content="Web site created using create-react-app" /> + + + Pagina Institucional diff --git a/pagina-institucional/src/assets/seta.svg b/pagina-institucional/src/assets/seta.svg index 762a1d8..a217195 100644 --- a/pagina-institucional/src/assets/seta.svg +++ b/pagina-institucional/src/assets/seta.svg @@ -1,3 +1,3 @@ - - + + diff --git a/pagina-institucional/src/components/Footer/FooterBottom.tsx b/pagina-institucional/src/components/Footer/FooterBottom.tsx index 3a5990e..0dfe794 100644 --- a/pagina-institucional/src/components/Footer/FooterBottom.tsx +++ b/pagina-institucional/src/components/Footer/FooterBottom.tsx @@ -16,21 +16,43 @@ const FooterBottom = () => {
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor -

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor
- logo mastercard - logo visa - logo mastercard - logo mastercard - logo mastercard - logo mastercard - logo mastercard + logo mastercard + logo visa + logo mastercard + logo mastercard + logo mastercard + logo mastercard + logo mastercard

____

logo vtexpci
diff --git a/pagina-institucional/src/components/Footer/FooterBottomMobile.tsx b/pagina-institucional/src/components/Footer/FooterBottomMobile.tsx new file mode 100644 index 0000000..ad43086 --- /dev/null +++ b/pagina-institucional/src/components/Footer/FooterBottomMobile.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import master from "../../../src/assets/Master.svg"; +import visa from "../../../src/assets/Visa.svg"; +import diners from "../../../src/assets/Diners.svg"; +import elo from "../../../src/assets/Elo.svg"; +import hiper from "../../../src/assets/Hiper.svg"; +import pagseguro from "../../../src/assets/Pagseguro.svg"; +import boleto from "../../../src/assets/Boleto.svg"; +import vtexpci from "../../../src/assets/vtex-pci-200.svg"; +import vtex from "../../../src/assets/vtex.svg"; +import m3 from "../../../src/assets/m3footer.svg"; +import styles from "../../style/FooterBottomMobile.module.scss"; + +const FooterBottomMobile = () => { + return ( +
+
+
+ logo mastercard + logo visa + logo mastercard + logo mastercard + logo mastercard + logo mastercard + logo mastercard +

____

+ logo vtexpci +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + +
+ +
+

Powered by

+ logo vtex +

Developed by

+ logo m3 +
+
+
+ ); +}; + +export { FooterBottomMobile }; diff --git a/pagina-institucional/src/components/Footer/FooterMenu.tsx b/pagina-institucional/src/components/Footer/FooterMenu.tsx index 916552d..aba2c38 100644 --- a/pagina-institucional/src/components/Footer/FooterMenu.tsx +++ b/pagina-institucional/src/components/Footer/FooterMenu.tsx @@ -7,6 +7,7 @@ import youtube from "../../../src/assets/youtube.svg"; import linkedin from "../../../src/assets/linkedin.svg"; import whatsapp from "../../../src/assets/whatsapp.svg"; import elipse from "../../../src/assets/elipse.svg"; +import seta from "../../../src/assets/seta.svg"; const FooterMenu = () => { return ( @@ -93,23 +94,39 @@ const FooterMenu = () => {
- logo facebook + logo facebook - logo instagram + logo instagram - logo twitter + logo twitter - logo youtube + logo youtube - logo linkedin + logo linkedin

www.loremipsum.com

@@ -123,7 +140,8 @@ const FooterMenu = () => { logo whatsapp - logo whatsapp + logo whatsapp + seta
diff --git a/pagina-institucional/src/components/Footer/FooterTopMobile.tsx b/pagina-institucional/src/components/Footer/FooterTopMobile.tsx index 10ffe57..2cb3d78 100644 --- a/pagina-institucional/src/components/Footer/FooterTopMobile.tsx +++ b/pagina-institucional/src/components/Footer/FooterTopMobile.tsx @@ -8,6 +8,9 @@ import insta from "../../../src/assets/insta.svg"; import twitter from "../../../src/assets/twitter.svg"; import youtube from "../../../src/assets/youtube.svg"; import linkedin from "../../../src/assets/linkedin.svg"; +import whatsapp from "../../../src/assets/whatsapp.svg"; +import elipse from "../../../src/assets/elipse.svg"; +import seta from "../../../src/assets/seta.svg"; const FooterTopMobile = () => { return ( @@ -37,6 +40,14 @@ const FooterTopMobile = () => {

www.loremipsum.com

+ +
+ + logo whatsapp + + logo whatsapp + seta +
); }; diff --git a/pagina-institucional/src/components/HamburguerHeader.tsx b/pagina-institucional/src/components/Header/HamburguerHeader.tsx similarity index 94% rename from pagina-institucional/src/components/HamburguerHeader.tsx rename to pagina-institucional/src/components/Header/HamburguerHeader.tsx index 06303ec..02cfc2f 100644 --- a/pagina-institucional/src/components/HamburguerHeader.tsx +++ b/pagina-institucional/src/components/Header/HamburguerHeader.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; -import close from "../assets/close.svg"; -import styles from "../style/HamburguerHeader.module.scss"; +import close from "../../assets/close.svg"; +import styles from "../../style/HamburguerHeader.module.scss"; const MenuContext = React.createContext<{ isOpen: boolean; diff --git a/pagina-institucional/src/components/Header.tsx b/pagina-institucional/src/components/Header/Header.tsx similarity index 83% rename from pagina-institucional/src/components/Header.tsx rename to pagina-institucional/src/components/Header/Header.tsx index 3d151ce..9939bde 100644 --- a/pagina-institucional/src/components/Header.tsx +++ b/pagina-institucional/src/components/Header/Header.tsx @@ -1,8 +1,8 @@ import React from "react"; -import logo from "../assets/Logo-M3Academy.png"; -import searchImage from "../assets/search-img.png"; -import cart from "../assets/cart.png"; -import styles from "../style/Header.module.scss"; +import logo from "../../assets/Logo-M3Academy.png"; +import searchImage from "../../assets/search-img.png"; +import cart from "../../assets/cart.png"; +import styles from "../../style/Header.module.scss"; const Header = () => { return ( diff --git a/pagina-institucional/src/components/HeaderBottom.tsx b/pagina-institucional/src/components/Header/HeaderBottom.tsx similarity index 91% rename from pagina-institucional/src/components/HeaderBottom.tsx rename to pagina-institucional/src/components/Header/HeaderBottom.tsx index 02c380a..304f863 100644 --- a/pagina-institucional/src/components/HeaderBottom.tsx +++ b/pagina-institucional/src/components/Header/HeaderBottom.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "../style/HeaderBottom.module.scss"; +import styles from "../../style/HeaderBottom.module.scss"; const HeaderBottom = () => { return ( diff --git a/pagina-institucional/src/components/HeaderMobile.tsx b/pagina-institucional/src/components/Header/HeaderMobile.tsx similarity index 84% rename from pagina-institucional/src/components/HeaderMobile.tsx rename to pagina-institucional/src/components/Header/HeaderMobile.tsx index 65c1b49..082ed80 100644 --- a/pagina-institucional/src/components/HeaderMobile.tsx +++ b/pagina-institucional/src/components/Header/HeaderMobile.tsx @@ -1,9 +1,9 @@ import React from "react"; import { HamburguerHeader } from "./HamburguerHeader"; -import logom3 from "../assets/Logo-M3Academy.png"; -import cart from "../assets/cart.png"; -import searchImage from "../assets/search-img.png"; -import styles from "../style/HeaderMobile.module.scss"; +import logom3 from "../../assets/Logo-M3Academy.png"; +import cart from "../../assets/cart.png"; +import searchImage from "../../assets/search-img.png"; +import styles from "../../style/HeaderMobile.module.scss"; const HeaderMobile = () => { return ( diff --git a/pagina-institucional/src/components/AccordionMenu.tsx b/pagina-institucional/src/components/Main/AccordionMenu.tsx similarity index 94% rename from pagina-institucional/src/components/AccordionMenu.tsx rename to pagina-institucional/src/components/Main/AccordionMenu.tsx index 8b56d26..fb7fda0 100644 --- a/pagina-institucional/src/components/AccordionMenu.tsx +++ b/pagina-institucional/src/components/Main/AccordionMenu.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "../style/AccordionMenu.module.scss"; +import styles from "../../style/AccordionMenu.module.scss"; type AccordionMenuProps = { items: { title: string; diff --git a/pagina-institucional/src/components/FormCustom.tsx b/pagina-institucional/src/components/Main/FormCustom.tsx similarity index 93% rename from pagina-institucional/src/components/FormCustom.tsx rename to pagina-institucional/src/components/Main/FormCustom.tsx index 667cb2a..10c561e 100644 --- a/pagina-institucional/src/components/FormCustom.tsx +++ b/pagina-institucional/src/components/Main/FormCustom.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; -import FormSchema from "./schema/FormSchema"; -import styles from "../style/FormCustom.module.scss"; +import FormSchema from "../schema/FormSchema"; +import styles from "../../style/FormCustom.module.scss"; interface IFormikValues { name: string; @@ -26,8 +26,6 @@ const FormCustom = () => { values: IFormikValues, actions: FormikHelpers ) => { - actions.resetForm(); - actions.setStatus({ success: "Email sent !" }); }; return (
diff --git a/pagina-institucional/src/components/Main.tsx b/pagina-institucional/src/components/Main/Main.tsx similarity index 84% rename from pagina-institucional/src/components/Main.tsx rename to pagina-institucional/src/components/Main/Main.tsx index 1999b06..88461d6 100644 --- a/pagina-institucional/src/components/Main.tsx +++ b/pagina-institucional/src/components/Main/Main.tsx @@ -1,10 +1,10 @@ import React from "react"; -import AccordionMenu from "../components/AccordionMenu"; -import styles from "../style/Main.module.scss"; -import { MenuInfo } from "../components/MenuInfo"; -import { FormCustom } from "../components/FormCustom"; -import home from "../assets/home.svg"; -import seta from "../assets/seta.svg"; +import AccordionMenu from "./AccordionMenu"; +import styles from "../../style/Main.module.scss"; +import { MenuInfo } from "./MenuInfo"; +import { FormCustom } from "./FormCustom"; +import home from "../../assets/home.svg"; +import seta from "../../assets/seta.svg"; const items = [ { diff --git a/pagina-institucional/src/components/MenuInfo.tsx b/pagina-institucional/src/components/Main/MenuInfo.tsx similarity index 96% rename from pagina-institucional/src/components/MenuInfo.tsx rename to pagina-institucional/src/components/Main/MenuInfo.tsx index b8f9aba..4255ffa 100644 --- a/pagina-institucional/src/components/MenuInfo.tsx +++ b/pagina-institucional/src/components/Main/MenuInfo.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "../style/MenuInfo.module.scss"; +import styles from "../../style/MenuInfo.module.scss"; const MenuInfo = () => { return ( diff --git a/pagina-institucional/src/components/Newsletter.tsx b/pagina-institucional/src/components/Newsletter/Newsletter.tsx similarity index 50% rename from pagina-institucional/src/components/Newsletter.tsx rename to pagina-institucional/src/components/Newsletter/Newsletter.tsx index c51e42a..ddb36e0 100644 --- a/pagina-institucional/src/components/Newsletter.tsx +++ b/pagina-institucional/src/components/Newsletter/Newsletter.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "../style/Newsletter.module.scss"; +import styles from "../../style/Newsletter.module.scss"; const Newsletter = () => { return ( @@ -7,8 +7,14 @@ const Newsletter = () => {

Assine nossa Newsletter

- - + +
diff --git a/pagina-institucional/src/pages/Home.tsx b/pagina-institucional/src/pages/Home.tsx index 34fb078..eeec056 100644 --- a/pagina-institucional/src/pages/Home.tsx +++ b/pagina-institucional/src/pages/Home.tsx @@ -1,18 +1,19 @@ import React from "react"; import { Route } from "react-router"; import { BrowserRouter } from "react-router-dom"; -import { Header } from "../components/Header"; -import { HeaderBottom } from "../components/HeaderBottom"; -import { Main } from "../components/Main"; -import { HeaderMobile } from "../components/HeaderMobile"; -import { Newsletter } from "../components/Newsletter"; +import { Header } from "../components/Header/Header"; +import { HeaderBottom } from "../components/Header/HeaderBottom"; +import { Main } from "../components/Main/Main"; +import { HeaderMobile } from "../components/Header/HeaderMobile"; +import { Newsletter } from "../components/Newsletter/Newsletter"; import { FooterMenu } from "../components/Footer/FooterMenu"; import { FooterBottom } from "../components/Footer/FooterBottom"; +import { FooterBottomMobile } from "../components/Footer/FooterBottomMobile"; import { FooterTopMobile } from "../components/Footer/FooterTopMobile"; const Home = () => { return ( - <> +
@@ -20,8 +21,9 @@ const Home = () => { + - + ); }; diff --git a/pagina-institucional/src/style/AccordionMenu.module.scss b/pagina-institucional/src/style/AccordionMenu.module.scss index 98fdb52..db166cb 100644 --- a/pagina-institucional/src/style/AccordionMenu.module.scss +++ b/pagina-institucional/src/style/AccordionMenu.module.scss @@ -2,12 +2,18 @@ display: flex; flex-direction: column; justify-content: space-around; + font-family: 'Roboto', sans-serif; + } .accordionItem { display: flex; flex-direction: row; max-height: 500px; + + @media (max-width: 1024px) { + flex-direction: column; + } } .accordionTitle { @@ -18,7 +24,6 @@ font-size: 16px; line-height: 19px; margin-bottom: 10px; - max-width: 302px; max-height: 50px; height: 39px; display: flex; @@ -26,6 +31,10 @@ margin-left: 100px; color: #7d7d7d; + @media (max-width: 1024px) { + margin-left: 16px; + } + @media (min-width: 2500px) { font-weight: 400; font-size: 32px; @@ -39,6 +48,13 @@ .accordionTitle.active { background-color: black; color: white; + max-width: 302px; + + @media (max-width: 1024px) { + width: 96.88%; + max-width: none; + margin-right: auto; + } @media (min-width: 2500px) { } width: 590px; @@ -47,11 +63,16 @@ .accordionContent { margin-left: 50px; - width: 748px; max-height: 50px; + width: 100%; + + @media (max-width: 1024px) { + margin-left: 16px; + max-height: 0; + width: 96.78%; + } @media (min-width: 2500px) { margin-left: 150px; } } - diff --git a/pagina-institucional/src/style/FooterBottom.module.scss b/pagina-institucional/src/style/FooterBottom.module.scss index ff20d17..4d3bf08 100644 --- a/pagina-institucional/src/style/FooterBottom.module.scss +++ b/pagina-institucional/src/style/FooterBottom.module.scss @@ -2,6 +2,15 @@ background: #000; color: white; margin-top: 64px; + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + display: none; + } + + @media (min-width: 2500px) { + min-height: 96px; + } .footerBox { display: flex; @@ -12,14 +21,21 @@ .footerText { width: 234px; - height: 24px; + display: flex; + align-self: center; font-style: normal; font-weight: 400; font-size: 10px; line-height: 12px; text-transform: capitalize; color: #ffffff; - margin: 17px 0; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 467px; + } } .footerLogos, @@ -28,6 +44,15 @@ gap: 12px; } + .footerLogosimg { + width: 35px; + + @media (min-width: 2500px) { + width: 70px; + height: 40px; + } + } + .footerRisco { transform: rotate(90deg); margin: 0; @@ -35,6 +60,7 @@ } .FooterName { + margin-right: 100px; display: flex; gap: 13px; } @@ -43,10 +69,23 @@ display: flex; align-self: center; width: 44.92px; + + @media (min-width: 2500px) { + width: 84.22px; + height: 30px; + } } .footerdevelopedm3 { width: 28.66px; + display: flex; + align-self: center; + justify-content: center; + + @media (min-width: 2500px) { + width: 54.95px; + height: 30px; + } } .footerDevLogo { @@ -59,6 +98,12 @@ text-transform: capitalize; display: flex; align-self: center; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 110px; + } } .footerDevLogom3 { @@ -72,5 +117,13 @@ color: #ffffff; display: flex; align-self: center; + + @media (min-width: 2500px) { + width: 125px; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + } } } diff --git a/pagina-institucional/src/style/FooterBottomMobile.module.scss b/pagina-institucional/src/style/FooterBottomMobile.module.scss new file mode 100644 index 0000000..26c88c8 --- /dev/null +++ b/pagina-institucional/src/style/FooterBottomMobile.module.scss @@ -0,0 +1,113 @@ +.footer_wrapper { + background: #000; + color: white; + margin-top: 64px; + font-family: 'Roboto', sans-serif; + + @media (min-width: 1025px) { + display: none; + } + + @media (min-width: 2500px) { + min-height: 96px; + } + + .footerBox { + display: flex; + justify-content: space-between; + margin: 0 0 0 100px; + max-width: 100%; + + @media (max-width: 1024px) { + justify-content: none; + flex-direction: column; + margin-left: 16px; + } + } + + .footerText { + width: 234px; + height: 24px; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + + @media (max-width: 1024px) { + margin-top: 15px; + margin-bottom: 15px; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 467px; + } + } + + .footerLogos { + display: flex; + gap: 12px; + @media (max-width: 1024px) { + margin-top: 15px; + flex-wrap: wrap; + } + } + + .footerLogosimg { + @media (min-width: 2500px) { + width: 70px; + height: 40px; + } + } + + .footerRisco { + transform: rotate(90deg); + margin: 0; + width: 24px; + } + + .FooterName { + margin-bottom: 15px; + display: flex; + gap: 13px; + } + + .footerdeveloped { + display: flex; + align-self: center; + width: 44.92px; + } + + .footerdevelopedm3 { + width: 28.66px; + } + + .footerDevLogo { + width: 53px; + height: 12px; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + display: flex; + align-self: center; + } + + .footerDevLogom3 { + width: 61px; + height: 12px; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + display: flex; + align-self: center; + } +} diff --git a/pagina-institucional/src/style/FooterMenu.module.scss b/pagina-institucional/src/style/FooterMenu.module.scss index df0813b..327d809 100644 --- a/pagina-institucional/src/style/FooterMenu.module.scss +++ b/pagina-institucional/src/style/FooterMenu.module.scss @@ -9,6 +9,7 @@ @media (max-width: 1024px) { display: none; } + font-family: "Roboto", sans-serif; display: flex; justify-content: space-between; margin: 50px 0 0 100px; @@ -25,6 +26,13 @@ font-size: 14px; line-height: 16px; text-transform: uppercase; + color: #303030; + @media (min-width: 2500px) { + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + } li, @@ -44,6 +52,13 @@ width: 155px; height: 15px; margin-bottom: 15px; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } .textCont { @@ -55,6 +70,14 @@ line-height: 14px; text-transform: capitalize; color: #303030; + @media (min-width: 2500px) { + font-weight: 500; + font-size: 24px; + line-height: 28px; + text-transform: capitalize; + width: 100%; + color: #303030; + } } .telCont { @@ -66,6 +89,15 @@ line-height: 14px; text-transform: capitalize; color: #303030; + + @media (min-width: 2500px) { + width: 100%; + font-weight: 400; + font-size: 24px; + line-height: 28px; + text-transform: capitalize; + color: #303030; + } } .logos { @@ -73,11 +105,23 @@ gap: 10px; } + .logosimg { + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + .textSite { font-weight: 400; font-size: 14px; line-height: 16px; color: #303030; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } .linkZap { @@ -86,5 +130,20 @@ right: 16px; display: flex; flex-direction: column; + + @media (min-width: 2500px) { + width: 66px; + height: 66px; + } + } + + .imgZap { + position: relative; + } + + .imgSeta { + position: absolute; + right: 10px; + bottom: 18px; } } diff --git a/pagina-institucional/src/style/FooterTopMobile.module.scss b/pagina-institucional/src/style/FooterTopMobile.module.scss index 972e2c3..4857d3e 100644 --- a/pagina-institucional/src/style/FooterTopMobile.module.scss +++ b/pagina-institucional/src/style/FooterTopMobile.module.scss @@ -1,4 +1,6 @@ .Footer_Wrapper { + font-family: "Roboto", sans-serif; + @media (min-width: 1025px) { display: none; } @@ -18,4 +20,27 @@ .link { margin-left: 16px; } + + .linkZap { + position: fixed; + bottom: 0; + right: 16px; + display: flex; + flex-direction: column; + + @media (min-width: 2500px) { + width: 66px; + height: 66px; + } + } + + .imgZap { + position: relative; + } + + .imgSeta { + position: absolute; + right: 10px; + bottom: 18px; + } } diff --git a/pagina-institucional/src/style/FormCustom.module.scss b/pagina-institucional/src/style/FormCustom.module.scss index 9f2c3c1..3a6eb52 100644 --- a/pagina-institucional/src/style/FormCustom.module.scss +++ b/pagina-institucional/src/style/FormCustom.module.scss @@ -2,6 +2,7 @@ width: 95%; display: flex; flex-direction: column; + font-family: "Roboto", sans-serif; span { color: #ff0000; @@ -11,7 +12,20 @@ text-align: center; margin-bottom: 13px; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + input { + @media (min-width: 2500px) { + position: relative; + width: 36.4px; + height: 35.15px; + top: 9px; + } cursor: pointer; } } @@ -24,26 +38,67 @@ label { margin-bottom: 12px; margin-left: 12px; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } } input { + width: 89.755%; background: #ffffff; border: 1px solid #100d0e; border-radius: 25px; height: 46px; padding: 0 20px; margin-bottom: 12px; + color: #b9b7b7; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + width: 1638px; + height: 63px; + color: #b9b7b7; + } + @media (max-width: 1024px) { + margin-left: auto; + margin-right: auto; + } } } button { - width: 748px; + width: 95.095%; height: 52.44px; background: #000000; border-radius: 25px; margin-bottom: 25px; color: white; cursor: pointer; + + @media (min-width: 2500px) { + color: white; + font-weight: 400; + font-size: 32px; + line-height: 38px; + letter-spacing: 0.05em; + width: 1680px; + height: 63px; + } + + @media (max-width: 1024px) { + align-content: center; + display: flex; + margin-left: auto; + margin-right: auto; + justify-content: center; + align-self: center; + flex-wrap: wrap; + } } } @@ -61,5 +116,5 @@ color: #ff0000; margin: 0; top: 15px; - right: 0; + right: 55px; } diff --git a/pagina-institucional/src/style/HamburguerHeader.module.scss b/pagina-institucional/src/style/HamburguerHeader.module.scss index 62d0819..94d2023 100644 --- a/pagina-institucional/src/style/HamburguerHeader.module.scss +++ b/pagina-institucional/src/style/HamburguerHeader.module.scss @@ -7,6 +7,7 @@ padding: 5px 0; background: transparent; border: none; + font-family: "Roboto", sans-serif; } .buttonOpen { diff --git a/pagina-institucional/src/style/Header.module.scss b/pagina-institucional/src/style/Header.module.scss index 5b251c6..c4cb41c 100644 --- a/pagina-institucional/src/style/Header.module.scss +++ b/pagina-institucional/src/style/Header.module.scss @@ -3,6 +3,7 @@ height: 76px; border-bottom: 1px solid #c4c4c4; display: grid; + font-family: "Roboto", sans-serif; @media (min-width: 2500px) { height: 101px; diff --git a/pagina-institucional/src/style/HeaderBottom.module.scss b/pagina-institucional/src/style/HeaderBottom.module.scss index 0509f56..683276a 100644 --- a/pagina-institucional/src/style/HeaderBottom.module.scss +++ b/pagina-institucional/src/style/HeaderBottom.module.scss @@ -1,5 +1,6 @@ .header___wrapper { background: #000; + font-family: "Roboto", sans-serif; .headerContainer { display: flex; diff --git a/pagina-institucional/src/style/HeaderMobile.module.scss b/pagina-institucional/src/style/HeaderMobile.module.scss index 1844d40..cb12bbc 100644 --- a/pagina-institucional/src/style/HeaderMobile.module.scss +++ b/pagina-institucional/src/style/HeaderMobile.module.scss @@ -5,6 +5,7 @@ display: grid; background: black; height: 139px; + font-family: "Roboto", sans-serif; .HeaderBox { margin: 0 16px; @@ -51,7 +52,7 @@ margin-right: auto; @media (max-width: 375px) { - width: 90.4%; + width: 91.47%; } .searchtext { diff --git a/pagina-institucional/src/style/Main.module.scss b/pagina-institucional/src/style/Main.module.scss index f61d358..49014c7 100644 --- a/pagina-institucional/src/style/Main.module.scss +++ b/pagina-institucional/src/style/Main.module.scss @@ -8,6 +8,7 @@ letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 80px; + font-family: "Roboto", sans-serif; @media (min-width: 2500px) { font-style: normal; @@ -28,6 +29,13 @@ h2 { display: flex; align-items: center; color: #292929; + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + justify-content: center; + display: flex; + width: 100%; + } @media (min-width: 2500px) { font-size: 48px; @@ -39,6 +47,12 @@ h2 { .boxPagamento { margin-top: -50px; height: 500px; + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + position: relative; + top: 235px; + } @media (min-width: 2500px) { margin-top: -90px; @@ -47,6 +61,13 @@ h2 { .boxEntrega { margin-top: -100px; + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + position: relative; + top: 235px; + } + @media (min-width: 2500px) { margin-top: -140px; } @@ -54,19 +75,46 @@ h2 { .boxTroca { margin-top: -150px; + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + position: relative; + top: 235px; + } @media (min-width: 2500px) { margin-top: -190px; } } +.boxSobre { + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + position: relative; + top: 235px; + } +} + .boxSegurança { + font-family: "Roboto", sans-serif; + margin-top: -200px; + @media (max-width: 1024px) { + position: relative; + top: 235px; + } @media (min-width: 2500px) { margin-top: -240px; } } .boxContato { + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + position: relative; + top: 235px; + } margin-top: -250px; @media (min-width: 2500px) { margin-top: -290px; @@ -74,15 +122,22 @@ h2 { } .itemBox { + font-family: "Roboto", sans-serif; + height: 585px; } .mainIcon { + font-family: "Roboto", sans-serif; margin-top: 30px; margin-left: 100px; display: flex; gap: 10px; + @media (max-width: 1024px) { + margin-left: 16px; + } + .IconHouse { @media (min-width: 2500px) { width: 31.22px; @@ -98,6 +153,7 @@ h2 { } } p { + font-family: "Roboto", sans-serif; font-style: normal; font-weight: 400; font-size: 12px; diff --git a/pagina-institucional/src/style/MenuFooterMobile.module.scss b/pagina-institucional/src/style/MenuFooterMobile.module.scss index 9359210..c990cb4 100644 --- a/pagina-institucional/src/style/MenuFooterMobile.module.scss +++ b/pagina-institucional/src/style/MenuFooterMobile.module.scss @@ -1,5 +1,7 @@ .container { margin-bottom: 12px; + font-family: 'Roboto', sans-serif; + } .button { diff --git a/pagina-institucional/src/style/MenuInfo.module.scss b/pagina-institucional/src/style/MenuInfo.module.scss index ac450c8..ff8688d 100644 --- a/pagina-institucional/src/style/MenuInfo.module.scss +++ b/pagina-institucional/src/style/MenuInfo.module.scss @@ -5,8 +5,14 @@ font-weight: 400; font-size: 13px; line-height: 15px; - color: #7d7d7d; + font-family: 'Roboto', sans-serif; + + + @media (max-width: 1024px) { + width: 96.875%; + height: 142px; + } @media (min-width: 2500px) { font-style: normal; font-weight: 400; diff --git a/pagina-institucional/src/style/Newsletter.module.scss b/pagina-institucional/src/style/Newsletter.module.scss index 8313d25..94f87f4 100644 --- a/pagina-institucional/src/style/Newsletter.module.scss +++ b/pagina-institucional/src/style/Newsletter.module.scss @@ -5,8 +5,19 @@ justify-content: center; align-items: center; flex-direction: column; + font-family: "Roboto", sans-serif; + + @media (min-width: 2500px) { + margin-top: 325px; + } + + @media (max-width: 1024px) { + margin-top: 340px; + } .title { + font-family: "Roboto", sans-serif; + font-style: normal; font-weight: 500; font-size: 18px; @@ -16,16 +27,56 @@ margin-top: 16; margin-bottom: 8px; color: #303030; + @media (min-width: 2500px) { + font-weight: 500; + font-size: 36px; + line-height: 42px; + letter-spacing: 0.05em; + font-variant: small-caps; + } } .emailInput { + font-family: "Roboto", sans-serif; + width: 306px; height: 14px; padding: 13px 16px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 4px; + color: #c4c4c4; + + @media (max-width: 1024px) { + width: 87.555%; + margin-left: auto; + margin-right: auto; + } + + @media (min-width: 2500px) { + width: 668px; + height: 59px; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + color: #c4c4c4; + } } + .boxNews { + font-family: "Roboto", sans-serif; + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + width: 100%; + } + @media (min-width: 2500px) { + display: flex; + gap: 8px; + } + } + .btn { width: 126px; height: 42px; @@ -41,6 +92,26 @@ cursor: pointer; margin-left: 8px; margin-bottom: 25px; - } + @media (max-width: 1024px) { + margin-top: 16px; + width: 96.875%; + margin-left: auto; + margin-right: auto; + } + + @media (min-width: 2500px) { + display: flex; + width: 246px; + height: 59px; + font-weight: 700; + font-size: 24px; + line-height: 28px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + letter-spacing: 0.05em; + } + } }