diff --git a/src/assets/imgs/ArrowIcon.svg b/src/assets/imgs/ArrowIcon.svg
new file mode 100644
index 0000000..ecb7c6c
--- /dev/null
+++ b/src/assets/imgs/ArrowIcon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/imgs/FacebookIcon.svg b/src/assets/imgs/FacebookIcon.svg
new file mode 100644
index 0000000..a39ce39
--- /dev/null
+++ b/src/assets/imgs/FacebookIcon.svg
@@ -0,0 +1,16 @@
+
diff --git a/src/assets/imgs/InstagramIcon.svg b/src/assets/imgs/InstagramIcon.svg
new file mode 100644
index 0000000..b9a0a65
--- /dev/null
+++ b/src/assets/imgs/InstagramIcon.svg
@@ -0,0 +1,18 @@
+
diff --git a/src/assets/imgs/LinkedInIcon.svg b/src/assets/imgs/LinkedInIcon.svg
new file mode 100644
index 0000000..98ac2b6
--- /dev/null
+++ b/src/assets/imgs/LinkedInIcon.svg
@@ -0,0 +1,18 @@
+
diff --git a/src/assets/imgs/PlusIcon.svg b/src/assets/imgs/PlusIcon.svg
new file mode 100644
index 0000000..d64bfd8
--- /dev/null
+++ b/src/assets/imgs/PlusIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/imgs/TwitterIcon.svg b/src/assets/imgs/TwitterIcon.svg
new file mode 100644
index 0000000..0b8a286
--- /dev/null
+++ b/src/assets/imgs/TwitterIcon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/imgs/WhatsAppIcon.svg b/src/assets/imgs/WhatsAppIcon.svg
new file mode 100644
index 0000000..2314673
--- /dev/null
+++ b/src/assets/imgs/WhatsAppIcon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/imgs/YoutubeIcon.svg b/src/assets/imgs/YoutubeIcon.svg
new file mode 100644
index 0000000..78aff2c
--- /dev/null
+++ b/src/assets/imgs/YoutubeIcon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 91fe1ee..bb4848f 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -66,16 +66,22 @@ footer {
align-items: center;
justify-content: space-between;
max-width: 398.61px;
+ // width: 36.898%;
padding-left: 0;
column-gap: 12px;
@media (min-width: 2500px) {
max-width: 692px;
+ // width: 30.078%;
}
@media (max-width: 1025px) {
order: 1;
+ //
+ // width: 30.64%;
}
@media (max-width: 376px) {
- column-gap: 11.33px;
+ column-gap: 11px;
+ //
+ // width: 100%;
}
& .Line {
width: 1px;
@@ -96,67 +102,75 @@ footer {
}
& .MasterCard,
.Boleto {
- width: 10.457%;
- height: 20.2px;
- @media (min-width: 2500px) {
- width: 12.92%;
- height: 39.27px;
+ & img {
+ min-width: 36px;
+ height: 20.2px;
+ @media (min-width: 2500px) {
+ min-width: 70px;
+ height: 39.27px;
+ }
+ @media (max-width: 376px) {
+ min-width: 30px;
+ height: 17px;
+ }
}
- @media (max-width: 1025px) {
- width: 9.26%;
- height: 16.97px;
+ }
+ & .Elo {
+ & img {
+ min-width: 37px;
+ height: 20.26px;
+ @media (min-width: 2500px) {
+ min-width: 70px;
+ height: 38.33px;
+ }
+ @media (max-width: 376px) {
+ min-width: 30px;
+ height: 17px;
+ }
}
}
& .Visa,
.Diners,
.HiperCard {
- width: 10.55%;
- height: 20.13px;
- @media (min-width: 2500px) {
- width: 12.92%;
- height: 40.25px;
- }
- @media (max-width: 1025px) {
- width: 8.79%;
- height: 16.97px;
+ & img {
+ min-width: 35px;
+ height: 20.13px;
+ @media (min-width: 2500px) {
+ min-width: 70px;
+ height: 39.27px;
+ }
+ @media (max-width: 376px) {
+ min-width: 30px;
+ height: 17px;
+ }
}
}
-
- & .Elo {
- width: 11.284%;
- height: 20.26px;
- @media (min-width: 2500px) {
- width: 12.92%;
- height: 38.33px;
- }
- @media (max-width: 1025px) {
- width: 8.866%;
- height: 16.97px;
- }
- }
-
& .Pagseguro {
- width: 10.485%;
- height: 19.07px;
- @media (min-width: 2500px) {
- width: 12.92%;
- height: 39.27px;
- }
- @media (max-width: 1025px) {
- width: 8.58%;
- height: 16.97px;
+ & img {
+ min-width: 34px;
+ height: 19.07px;
+ @media (min-width: 2500px) {
+ min-width: 70px;
+ height: 39.27px;
+ }
+ @media (max-width: 376px) {
+ min-width: 30px;
+ height: 17px;
+ }
}
}
& .VtexPci {
- width: 17.173%;
- height: 34px;
- @media (min-width: 2500px) {
- width: 15.347%;
- height: 66px;
- }
- @media (max-width: 1025px) {
- width: 12.735%;
- height: 28px;
+ & img {
+ min-width: 54.61px;
+ height: 34px;
+ @media (min-width: 2500px) {
+ min-width: 106px;
+ height: 66px;
+ }
+ @media (max-width: 376px) {
+ min-width: 45px;
+ height: 28px;
+ }
}
}
}
@@ -205,3 +219,279 @@ footer {
}
}
}
+
+//Footer Top
+.Footer__Top {
+ flex-grow: 1;
+ height: 239px;
+ background: $white;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ @media (min-width: 2500px) {
+ height: 297px;
+ }
+ @media (max-width: 1025px) {
+ height: auto;
+ }
+ div {
+ width: 84.378%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 40px 0 50px;
+ @media (min-width: 2500px) {
+ width: 92.002%;
+ }
+ @media (max-width: 1025px) {
+ flex-direction: column;
+ width: 96.875%;
+ padding: 24px 0;
+ }
+ @media (max-width: 376px) {
+ width: 91.484%;
+ }
+ .Menu__List {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ // column-gap: 121px;
+ column-gap: calc(100% - 90%);
+ padding-left: 0;
+ margin: 10px 0 0;
+ list-style: none;
+ position: relative;
+ width: 65.445%;
+ height: 139px;
+ & :nth-child(3n) {
+ & :nth-child(2n) {
+ & a {
+ font-weight: 500;
+ }
+ }
+ }
+
+ @media (min-width: 2500px) {
+ width: 66.544%;
+ height: 197px;
+ margin: 23.24px 0 0;
+ }
+ @media (max-width: 1025px) {
+ width: 100%;
+ height: auto;
+ margin: 0;
+ column-gap: 0px;
+ display: flex;
+ flex-direction: column;
+ }
+ &__Group {
+ list-style: none;
+ padding-left: 0px;
+ row-gap: 6px;
+ display: flex;
+ flex-direction: column;
+ & input {
+ display: none;
+ // position: absolute;
+ // right: 0;
+ // margin: 0;
+ }
+ & input:checked ~ .Menu__List__Group__SubTitle {
+ @media (max-width: 1025px) {
+ width: 100%;
+ height: auto;
+ max-height: 200px;
+ transition: all 0.4s linear;
+ }
+ }
+ @media (min-width: 2500px) {
+ row-gap: 12px;
+ }
+ @media (max-width: 1025px) {
+ width: 100%;
+ row-gap: 0;
+ margin-bottom: 12px;
+ }
+ & label {
+ display: none;
+ @media (max-width: 1025px) {
+ display: block;
+ }
+ & span {
+ @media (max-width: 1025px) {
+ background-position: center;
+ background-repeat: no-repeat;
+ display: block;
+ width: 7.8px;
+ height: 8.28px;
+ position: absolute;
+ right: 0;
+ cursor: pointer;
+ }
+ & img {
+ @media (max-width: 1025px) {
+ top: 0;
+ position: absolute;
+ }
+ }
+ }
+ }
+ & :nth-child(7n) {
+ & a {
+ text-decoration-line: underline;
+ }
+ }
+ & li {
+ min-width: 155px;
+ & a {
+ text-decoration: none;
+ font-family: "Roboto";
+ font-style: normal;
+ color: $primary-200;
+ }
+ }
+ &__Title {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ font-family: "Roboto";
+ font-style: normal;
+ color: $primary-200;
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+ &__SubTitle {
+ @media (max-width: 1025px) {
+ width: 100%;
+ overflow: hidden;
+ max-height: 0;
+ transition: all 0.4s;
+ }
+ & a {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: capitalize;
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 28px;
+ }
+ }
+ }
+ }
+ }
+ .Redes__Sociais {
+ padding-left: 0;
+ margin: 0;
+ display: flex;
+ column-gap: 50px;
+ position: absolute;
+ right: 16px;
+ @media (min-width: 2500px) {
+ column-gap: 18px;
+ }
+ @media (max-width: 1025px) {
+ position: relative;
+ right: 0;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ column-gap: 0px;
+ }
+ &__Lista {
+ list-style: none;
+ padding-left: 0;
+ margin-top: 10px;
+ row-gap: 6px;
+ display: flex;
+ flex-direction: column;
+ @media (max-width: 1025px) {
+ margin-top: 0;
+ }
+ @media (min-width: 2500px) {
+ margin-top: 23.24px;
+ }
+ &__SocialMedia {
+ display: flex;
+ list-style: none;
+ padding-left: 0;
+ column-gap: 10px;
+ & li {
+ width: 35.01px;
+ height: 35.01px;
+ @media (min-width: 2500px) {
+ width: 70.18px;
+ height: 70px;
+ }
+ & a {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ & img {
+ width: 100%;
+ height: 100%;
+ left: 2px;
+ position: relative;
+ }
+ }
+ }
+ }
+ &__Site {
+ & a {
+ font-family: "Roboto";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $primary-200;
+ text-decoration: none;
+ @media (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+ }
+ }
+ &__SubLista {
+ padding-left: 0;
+ @media (max-width: 1025px) {
+ position: fixed;
+ right: 16px;
+ top: calc(100% - 105px);
+ }
+ & li {
+ width: 34.01px;
+ height: 34.01px;
+ list-style: none;
+ @media (min-width: 2500px) {
+ width: 66px;
+ height: 66px;
+ }
+ & img {
+ @media (min-width: 2500px) {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ & a {
+ & img {
+ @media (min-width: 2500px) {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+ & :first-of-type {
+ margin-bottom: 5px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 3f71ea5..603567c 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,11 +1,14 @@
import styles from "./Footer.module.scss";
import { FooterBottom } from "./FooterBottom";
+import { FooterTop } from "./FooterTop";
const Footer = () => {
return (