diff --git a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss index 4141e55..a84b2ae 100644 --- a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss +++ b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss @@ -1,15 +1,13 @@ .floating-icons-wrapper { + padding: 0; position: fixed; right: 16px; - bottom: 190px; - + bottom: 198px; display: flex; flex-direction: column; align-items: center; gap: 5px; - padding: 0; - @media screen and (width >= 2500px) { bottom: 229.24px; } @@ -24,8 +22,8 @@ } .whatsapp-button { - border: 0; padding: 0; + border: 0; background: transparent; img { @@ -41,12 +39,12 @@ } .up-button { - background: #c4c4c4; - border: 0; - border-radius: 50%; - padding: 13.5px 10.5px; width: 34px; height: 34px; + padding: 13.5px 10.5px; + border: 0; + border-radius: 50%; + background: #c4c4c4; @media screen and (width >= 2500px) { width: 66px; diff --git a/src/components/Footer/FloatingIcons/FloatingIcons.tsx b/src/components/Footer/FloatingIcons/FloatingIcons.tsx index d070572..daf6519 100644 --- a/src/components/Footer/FloatingIcons/FloatingIcons.tsx +++ b/src/components/Footer/FloatingIcons/FloatingIcons.tsx @@ -1,16 +1,16 @@ import React from "react"; +import { Link } from "react-router-dom"; + +import whatsapp from "./assets/whatsapp-icon.svg"; +import arrowUp from "./assets/arrow-up.svg"; import styles from "./FloatingIcons.module.scss"; -import whatsapp from "../assets/whatsapp-icon.svg"; -import arrowUp from "../assets/arrow-up.svg"; -import { Link } from "react-router-dom"; - const FloatingIcons = () => { return (
diff --git a/src/components/Footer/assets/arrow-up.svg b/src/components/Footer/FloatingIcons/assets/arrow-up.svg similarity index 100% rename from src/components/Footer/assets/arrow-up.svg rename to src/components/Footer/FloatingIcons/assets/arrow-up.svg diff --git a/src/components/Footer/assets/whatsapp-icon.svg b/src/components/Footer/FloatingIcons/assets/whatsapp-icon.svg similarity index 100% rename from src/components/Footer/assets/whatsapp-icon.svg rename to src/components/Footer/FloatingIcons/assets/whatsapp-icon.svg diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 09d2c22..a9cff59 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -3,24 +3,22 @@ padding: 50px 100px; display: flex; justify-content: space-between; - // gap: 158px; @media screen and (width <= 1024px) { + padding: 24px 16px; flex-direction: column; gap: 12px; - padding: 24px 16px; - } .social-links { - p { + a { + margin: 12px 0 0; font-family: "Roboto"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; color: #303030; - margin: 12px 0 0; @media screen and (width >= 2500px) { font-size: 28px; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 8210a8c..cef7ed8 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,12 +1,13 @@ import React from "react"; -import { FloatingIcons } from "./FloatingIcons/FloatingIcons"; -import styles from "./Footer.module.scss"; +import { FloatingIcons } from "./FloatingIcons/FloatingIcons"; import { FooterBottom } from "./FooterBottom/FooterBottom"; import { Newsletter } from "./Newsletter/Newsletter"; import { SiteMap } from "./SiteMap/SiteMap"; import { SocialMedia } from "./SocialMedia/SocialMedia"; +import styles from "./Footer.module.scss"; + const Footer = () => { return (
diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/Footer/FooterBottom/FooterBottom.module.scss index afcb7f6..23cc58b 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.module.scss +++ b/src/components/Footer/FooterBottom/FooterBottom.module.scss @@ -1,19 +1,18 @@ .container { - background: #000000; + padding: 15px 100px; display: flex; align-items: center; justify-content: space-between; - // gap: 110.41px; - padding: 15px 100px; + background: #000000; @media screen and (width <= 1024px) { + padding: 15px 16px; display: grid; grid-template-areas: "paymentSolutions" "address" "authors"; gap: 15px; - padding: 15px 16px; } .address { @@ -24,7 +23,6 @@ line-height: 12px; text-transform: capitalize; color: #ffffff; - // background-color: yellow; p { margin: 0; @@ -43,10 +41,7 @@ .payment-solutions { display: flex; align-items: center; - // justify-content: center; gap: 12px; - // justify-self: center; - // background-color: cyan; @media screen and (width <= 1024px) { grid-area: paymentSolutions; @@ -56,11 +51,9 @@ gap: 11px; } - .menu-list { + .payment-list { margin: 0; padding: 0; - list-style: none; - text-decoration: none; display: flex; gap: 12px; @@ -69,8 +62,6 @@ } li { - // transition: all 0.2s ease-in-out; - img { width: 35px; height: 20px; @@ -85,12 +76,6 @@ width: 100%; //30px; height: 17px; } - - // &:hover { - // border-radius: 50%; - // background: #292929; - // color: white; - // } } } } @@ -127,17 +112,16 @@ } .authors { - // background-color: magenta; display: flex; - gap: 13px; align-items: center; - // justify-self: end; + gap: 13px; @media screen and (width <= 1024px) { grid-area: authors; } p { + margin: 0; font-family: "Roboto"; font-style: normal; font-weight: 400; @@ -145,7 +129,6 @@ line-height: 12px; text-transform: capitalize; color: #ffffff; - margin: 0; @media screen and (width >= 2500px) { font-size: 20px; diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx index eade6fe..a78c604 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.tsx +++ b/src/components/Footer/FooterBottom/FooterBottom.tsx @@ -1,17 +1,17 @@ import React from "react"; -import styles from "./FooterBottom.module.scss"; +import Master from "./assets/Master.svg"; +import Visa from "./assets/Visa.svg"; +import Amex from "./assets/Diners.svg"; +import Elo from "./assets/Elo.svg"; +import Hipercard from "./assets/Hiper.svg"; +import Paypal from "./assets/Pagseguro.svg"; +import Boleto from "./assets/Boleto.svg"; +import PCI from "./assets/vtex-pci-200.svg"; +import VtexIcon from "./assets/vtex-icon.svg"; +import M3Icon from "./assets/m3-icon.svg"; -import Master from "../assets/Master.svg"; -import Visa from "../assets/Visa.svg"; -import Amex from "../assets/Diners.svg"; -import Elo from "../assets/Elo.svg"; -import Hipercard from "../assets/Hiper.svg"; -import Paypal from "../assets/Pagseguro.svg"; -import Boleto from "../assets/Boleto.svg"; -import PCI from "../assets/vtex-pci-200.svg"; -import VtexIcon from "../assets/vtex-icon.svg"; -import M3Icon from "../assets/m3-icon.svg"; +import styles from "./FooterBottom.module.scss"; const PaymentSolutions = [ { @@ -52,7 +52,7 @@ const FooterBottom = () => { elit, sed do eiusmod tempor
-

Powered by

- Logo da VTEX + + Logo da VTEX +

Developed by

- Logo da M3 + + Logo da M3 +
); diff --git a/src/components/Footer/assets/Boleto.svg b/src/components/Footer/FooterBottom/assets/Boleto.svg similarity index 100% rename from src/components/Footer/assets/Boleto.svg rename to src/components/Footer/FooterBottom/assets/Boleto.svg diff --git a/src/components/Footer/assets/Diners.svg b/src/components/Footer/FooterBottom/assets/Diners.svg similarity index 100% rename from src/components/Footer/assets/Diners.svg rename to src/components/Footer/FooterBottom/assets/Diners.svg diff --git a/src/components/Footer/assets/Elo.svg b/src/components/Footer/FooterBottom/assets/Elo.svg similarity index 100% rename from src/components/Footer/assets/Elo.svg rename to src/components/Footer/FooterBottom/assets/Elo.svg diff --git a/src/components/Footer/assets/Hiper.svg b/src/components/Footer/FooterBottom/assets/Hiper.svg similarity index 100% rename from src/components/Footer/assets/Hiper.svg rename to src/components/Footer/FooterBottom/assets/Hiper.svg diff --git a/src/components/Footer/assets/Master.svg b/src/components/Footer/FooterBottom/assets/Master.svg similarity index 100% rename from src/components/Footer/assets/Master.svg rename to src/components/Footer/FooterBottom/assets/Master.svg diff --git a/src/components/Footer/assets/Pagseguro.svg b/src/components/Footer/FooterBottom/assets/Pagseguro.svg similarity index 100% rename from src/components/Footer/assets/Pagseguro.svg rename to src/components/Footer/FooterBottom/assets/Pagseguro.svg diff --git a/src/components/Footer/assets/Visa.svg b/src/components/Footer/FooterBottom/assets/Visa.svg similarity index 100% rename from src/components/Footer/assets/Visa.svg rename to src/components/Footer/FooterBottom/assets/Visa.svg diff --git a/src/components/Footer/assets/m3-icon.svg b/src/components/Footer/FooterBottom/assets/m3-icon.svg similarity index 100% rename from src/components/Footer/assets/m3-icon.svg rename to src/components/Footer/FooterBottom/assets/m3-icon.svg diff --git a/src/components/Footer/assets/vtex-icon.svg b/src/components/Footer/FooterBottom/assets/vtex-icon.svg similarity index 100% rename from src/components/Footer/assets/vtex-icon.svg rename to src/components/Footer/FooterBottom/assets/vtex-icon.svg diff --git a/src/components/Footer/assets/vtex-pci-200.svg b/src/components/Footer/FooterBottom/assets/vtex-pci-200.svg similarity index 100% rename from src/components/Footer/assets/vtex-pci-200.svg rename to src/components/Footer/FooterBottom/assets/vtex-pci-200.svg diff --git a/src/components/Footer/Newsletter/Newsletter.module.scss b/src/components/Footer/Newsletter/Newsletter.module.scss index f739e44..3033157 100644 --- a/src/components/Footer/Newsletter/Newsletter.module.scss +++ b/src/components/Footer/Newsletter/Newsletter.module.scss @@ -1,32 +1,28 @@ .container { - // width: 100%; display: grid; - grid-template-columns: 37.03%; // 474px; + grid-template-columns: 37.03%; //474px; justify-content: center; padding: 16px 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000; - // background: yellow; @media screen and (width >= 2500px) { - grid-template-columns: 36.88%; // 474px; + grid-template-columns: 36.88%; //922px; } @media screen and (width <= 1024px) { - // width: calc(100% - 32px); grid-template-columns: 100%; padding: 16px; } .title { - // background-color: blue; margin: 0 0 8px; font-family: "Roboto"; font-style: normal; font-weight: 500; font-size: 18px; line-height: 21px; - letter-spacing: 0.05em; + // letter-spacing: 0.05em; font-variant: small-caps; color: #303030; text-align: left; @@ -40,12 +36,10 @@ margin-bottom: 16px; font-size: 14px; line-height: 16px; - // text-transform: uppercase; } } .form-wrapper { - // background-color: green; display: flex; align-items: center; justify-content: center; @@ -58,18 +52,17 @@ input { flex-grow: 1; // 340px; - // width: 78.34%; padding: 12px 16px; - background: #ffffff; border: 1px solid #e5e5e5; border-radius: 4px; + background: #ffffff; font-family: "Roboto"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; - color: #c4c4c4; // #000000? + color: #000000; @media screen and (width >= 2500px) { font-size: 28px; @@ -79,21 +72,20 @@ @media screen and (width <= 1024px) { width: calc(100% - 32px); padding: 17px 16px; - - // margin-bottom: 16px; } - // &::placeholder { - // color: #c4c4c4; - // } + &::placeholder { + color: #c4c4c4; + } } button { - background: #000000; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 4px; padding: 14px 40px; border: 0; + border-radius: 4px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + background: #000000; + font-family: "Roboto"; font-style: normal; font-weight: 700; @@ -104,18 +96,16 @@ color: #ffffff; @media screen and (width >= 2500px) { + padding: 14px 77px; font-size: 24px; line-height: 28px; - padding: 14px 77px; } @media screen and (width <= 1024px) { width: 100%; + padding: 17px; font-size: 14px; line-height: 16px; - padding: 17px; - - // margin-bottom: 16px; } } } diff --git a/src/components/Footer/Newsletter/Newsletter.tsx b/src/components/Footer/Newsletter/Newsletter.tsx index 4d759e9..8eb2992 100644 --- a/src/components/Footer/Newsletter/Newsletter.tsx +++ b/src/components/Footer/Newsletter/Newsletter.tsx @@ -1,10 +1,10 @@ -import { Formik, FormikHelpers } from "formik"; import React from "react"; import { Form } from "react-router-dom"; +import { Formik, FormikHelpers } from "formik"; + import NewsletterSchema from "../../../schema/NewsletterSchema"; import styles from "./Newsletter.module.scss"; - interface FormValues { email: string; } @@ -34,10 +34,7 @@ const Newsletter = () => { > {({ resetForm }) => (
-

- {/* ASSINE NOSSA NEWSLETTER */} - assine nossa newsletter -

+

ASSINE NOSSA NEWSLETTER

diff --git a/src/components/Footer/SiteMap/SiteMap.module.scss b/src/components/Footer/SiteMap/SiteMap.module.scss index 569f240..7243bee 100644 --- a/src/components/Footer/SiteMap/SiteMap.module.scss +++ b/src/components/Footer/SiteMap/SiteMap.module.scss @@ -18,8 +18,6 @@ .submenu { margin: 0; padding: 0; - list-style: none; - text-decoration: none; display: flex; flex-direction: column; gap: 12px; @@ -31,6 +29,7 @@ } .subtitle-text { + margin: 0; font-family: "Roboto"; font-style: normal; font-weight: 500; @@ -38,7 +37,6 @@ line-height: 16px; text-transform: uppercase; color: #303030; - margin: 0; @media screen and (width >= 2500px) { font-size: 28px; @@ -48,9 +46,6 @@ @media screen and (width <= 1024px) { text-transform: none; } - - // &.active { - // } } .open-icon { @@ -58,22 +53,22 @@ &::before { content: ""; - background: #000000; width: 7.8px; height: 1px; position: absolute; top: 50%; left: 50%; + background: #000000; transform: translate(-50%, -50%); } &::after { content: ""; - background: #000000; width: 1px; height: 8.28px; position: absolute; top: 50%; left: 50%; + background: #000000; transform: translate(-50%, -50%); } @@ -90,14 +85,13 @@ } .list-items { + padding: 0; display: flex; flex-direction: column; gap: 12px; - padding: 0; - list-style: none; li { - // transition: all 0.2s ease-in-out; hover? active? + transition: all 0.2s ease-in-out; a { font-family: "Roboto"; @@ -105,9 +99,13 @@ font-weight: 400; font-size: 12px; line-height: 14px; + color: #303030; text-transform: capitalize; text-decoration: none; - color: #303030; + + &:hover { + filter: brightness(2); + } @media screen and (width >= 2500px) { font-size: 24px; @@ -122,8 +120,8 @@ font-weight: 500; font-size: 12px; line-height: 14px; - text-transform: capitalize; color: #303030; + text-transform: capitalize; @media screen and (width >= 2500px) { font-size: 24px; @@ -132,7 +130,6 @@ } &:last-child { - // hover em vez de last-child? a { text-decoration: underline; } diff --git a/src/components/Footer/SiteMap/SiteMap.tsx b/src/components/Footer/SiteMap/SiteMap.tsx index df66836..2208203 100644 --- a/src/components/Footer/SiteMap/SiteMap.tsx +++ b/src/components/Footer/SiteMap/SiteMap.tsx @@ -1,57 +1,58 @@ import React, { useState, useContext } from "react"; -import { WidthContext } from "../../../contexts/WidthContext"; + import { List } from "../../List/List"; +import { WidthContext } from "../../../contexts/WidthContext"; import styles from "./SiteMap.module.scss"; const institucionalLinks = [ { name: "Quem Somos", - value: "sobre", + value: "institucionais/sobre", }, { name: "Política de Privacidade", - value: "politica-de-privacidade", + value: "institucionais/seguranca-e-privacidade", }, { name: "Segurança", - value: "seguranca-e-privacidade", + value: "institucionais/seguranca-e-privacidade", }, { name: "Seja um Revendedor", - value: "seja-um-revendedor", + value: "institucionais/contato", }, ]; const duvidasLinks = [ { name: "Entrega", - value: "entrega", + value: "institucionais/entrega", }, { name: "Pagamento", - value: "forma-de-pagamento", + value: "institucionais/forma-de-pagamento", }, { name: "Trocas e Devoluções", - value: "troca-e-devolucao", + value: "institucionais/troca-e-devolucao", }, { name: "Dúvidas Frequentes", - value: "duvidas-frequentes", + value: "institucionais/troca-e-devolucao", }, ]; const faleConoscoLinks = [ { name: "Atendimento ao Consumidor", - phoneNumber: "(11) 4159 9504", - value: "atendimento-ao-consumidor", + phoneNumber: "+1141599504", + value: "(11) 4159 9504", }, { name: "Atendimento Online", - phoneNumber: "(11) 4159 9504", - value: "politica-de-privacidade", + phoneNumber: "+1141599504", + value: "(11) 4159 9504", }, ]; diff --git a/src/components/Footer/SocialMedia/SocialMedia.module.scss b/src/components/Footer/SocialMedia/SocialMedia.module.scss index 2e3fd4b..22c18d5 100644 --- a/src/components/Footer/SocialMedia/SocialMedia.module.scss +++ b/src/components/Footer/SocialMedia/SocialMedia.module.scss @@ -2,28 +2,26 @@ .menu-list { margin: 0; padding: 0; - list-style: none; - text-decoration: none; display: flex; gap: 10px; li { - transition: all 0.2s ease-in-out; - a { + transition: all 0.2s ease-in-out; + svg { width: 35px; height: 35px; + &:hover { + border-radius: 50%; + filter: brightness(1.8); + } + @media screen and (width >= 2500px) { width: 70px; height: 70px; } - - &:hover { - filter: brightness(1.5); - border-radius: 50%; - } } } } diff --git a/src/components/Footer/SocialMedia/SocialMedia.tsx b/src/components/Footer/SocialMedia/SocialMedia.tsx index 4c969fa..ba9894f 100644 --- a/src/components/Footer/SocialMedia/SocialMedia.tsx +++ b/src/components/Footer/SocialMedia/SocialMedia.tsx @@ -11,11 +11,11 @@ import styles from "./SocialMedia.module.scss"; const socialMediaLinks = [ { icon: , - value: "https://www.facebook.com/digitalm3/", + value: "https://www.facebook.com/digitalm3", }, { icon: , - value: "https://www.instagram.com/m3.ecommerce/", + value: "https://www.instagram.com/m3.ecommerce", }, { icon: , diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index f62f783..d7eae6c 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -15,7 +15,7 @@ const List = (props: ListProps) => { item.phoneNumber ? (
  • {item.name}

    - {item.phoneNumber} + {item.value}
  • ) : (
  • diff --git a/src/global.scss b/src/global.scss index 5620cc2..103c812 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,13 +1,17 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); + body { margin: 0; -// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', -// 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', -// sans-serif; -// -webkit-font-smoothing: antialiased; -// -moz-osx-font-smoothing: grayscale; + padding: 0; + box-sizing: border-box; + height: 100%; + + ul { + list-style: none; + }; + + a { + text-decoration: none; + } } -// code { -// font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', -// monospace; -// }