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
-
+
{PaymentSolutions.map((item, index) => (
-
@@ -66,13 +66,17 @@ const FooterBottom = () => {
Powered by
-
+
+
+
Developed by
-
+
+
+
);
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