From 210198eb21d9b237a0b126fec699b4b303c04e66 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 3 Jan 2023 16:43:01 -0300 Subject: [PATCH] feat: add Footer Top --- src/assets/imgs/ArrowIcon.svg | 4 + src/assets/imgs/FacebookIcon.svg | 16 + src/assets/imgs/InstagramIcon.svg | 18 ++ src/assets/imgs/LinkedInIcon.svg | 18 ++ src/assets/imgs/PlusIcon.svg | 3 + src/assets/imgs/TwitterIcon.svg | 11 + src/assets/imgs/WhatsAppIcon.svg | 11 + src/assets/imgs/YoutubeIcon.svg | 11 + src/components/Footer/Footer.module.scss | 390 ++++++++++++++++++++--- src/components/Footer/Footer.tsx | 5 +- src/components/Footer/FooterTop.tsx | 72 +++++ src/global.scss | 3 + src/variaveis.scss | 1 + 13 files changed, 512 insertions(+), 51 deletions(-) create mode 100644 src/assets/imgs/ArrowIcon.svg create mode 100644 src/assets/imgs/FacebookIcon.svg create mode 100644 src/assets/imgs/InstagramIcon.svg create mode 100644 src/assets/imgs/LinkedInIcon.svg create mode 100644 src/assets/imgs/PlusIcon.svg create mode 100644 src/assets/imgs/TwitterIcon.svg create mode 100644 src/assets/imgs/WhatsAppIcon.svg create mode 100644 src/assets/imgs/YoutubeIcon.svg create mode 100644 src/components/Footer/FooterTop.tsx 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 (