From d659c072d369a8df0dfdfbc3142274d6b2e0794d Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Fri, 30 Dec 2022 18:24:31 -0300 Subject: [PATCH] feat(home): ajustando footers mobile home --- .../FooterBottom/FooterBottom.module.scss | 110 ++++++++++++++++-- .../FooterNewsletter.module.scss | 80 +++++++++++-- .../Footer/FooterTop/FooterTop.module.scss | 71 +++++++++-- src/components/Footer/FooterTop/FooterTop.tsx | 12 +- src/components/MenuMobile/MenuMobile.tsx | 2 +- 5 files changed, 244 insertions(+), 31 deletions(-) diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/Footer/FooterBottom/FooterBottom.module.scss index efa8497..d19ffd3 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.module.scss +++ b/src/components/Footer/FooterBottom/FooterBottom.module.scss @@ -2,7 +2,6 @@ .footer__bottom { width: calc(100% - 200px); - height: 34px; padding: 15px 100px; display: flex; @@ -11,15 +10,35 @@ background-color: $color-black; + @media #{$mq-tablet}, #{$mq-mobile} { + width: calc(100% - 32px); + height: 116px; + flex-direction: column; + align-items: flex-start; + padding: 15px 16px; + } + &__paragrafo { font-family: $font-family; font-style: normal; font-weight: 400; - font-size: 10px; - line-height: 12px; + font-size: 20px; + line-height: 23px; text-transform: capitalize; color: $color-white; + + @media #{$mq-desktop} { + font-size: 10px; + line-height: 12px; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 10px; + line-height: 12px; + order: 2; + white-space: nowrap; + } } @@ -28,6 +47,10 @@ justify-content: center; align-items: center; + @media #{$mq-tablet}, #{$mq-mobile} { + order: 1; + } + &__cards{ list-style: none; display: flex; @@ -37,9 +60,39 @@ &__card { margin-right: 12px; - img { + width: 70px; + + @media #{$mq-desktop}, #{$mq-tablet} { width: 35px; } + + @media #{$mq-mobile} { + width: 30px; + margin-right: 11px; + } + + @media (max-width: 370px) { + margin-right: 5px; + } + @media (max-width: 300px) { + margin-right: 2.5px; + } + + img { + width: 70px; + + @media #{$mq-desktop}, #{$mq-tablet} { + width: 35px; + } + + @media #{$mq-mobile} { + width: 30px; + } + + @media (max-width: 310px) { + width: 25px; + } + } } } &__divider { @@ -47,6 +100,34 @@ height: 24px; background: $color-primary-400; margin-right: 12px; + + @media #{$mq-mobile} { + margin-right: 10px; + } + + @media (max-width: 370px) { + margin-right: 5px; + } + + } + &__security { + list-style: none; + img { + width: 106px; + height: 66px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + width: 54px; + height: 34px; + } + + @media (max-width: 320px) { + width: 40px; + } + @media (max-width: 300px) { + width: 30px; + } + } } } @@ -55,6 +136,10 @@ align-items: center; justify-content: center; + @media #{$mq-tablet}, #{$mq-mobile} { + order: 3; + } + &__logo{ margin-right: 13px; text-decoration: none; @@ -64,17 +149,26 @@ justify-content: center; span { - font-family: 'Roboto'; + font-family: $font-family; font-style: normal; font-weight: 400; - font-size: 10px; - line-height: 12px; + font-size: 20px; + line-height: 23px; text-transform: capitalize; color: $color-white; margin-right: 13px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + font-size: 10px; + line-height: 12px; + } } img { - height: 16px; + height: 30px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + height: 16px; + } } } } diff --git a/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss b/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss index 0825dc0..4effeb4 100644 --- a/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss +++ b/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss @@ -10,6 +10,11 @@ justify-content: center; padding: 16px 0; + @media #{$mq-tablet}, #{$mq-mobile} { + padding: 16px; + width: calc(100% - 32px); + } + &__formik { display: flex; align-items: center; @@ -24,15 +29,29 @@ gap: 8px; width: 37%; + @media #{$mq-tablet}, #{$mq-mobile} { + width: 100%; + } + &__title { font-family: $font-family; font-style: normal; font-weight: 500; - font-size: 18px; - line-height: 21px; + font-size: 36px; + line-height: 42px; letter-spacing: 0.05em; font-variant: small-caps; color: $color-black-500; + + @media #{$mq-desktop} { + font-size: 18px; + line-height: 21px; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 14px; + line-height: 16px; + } } &__input-btn { @@ -41,11 +60,15 @@ justify-content: center; width: 100%; position: relative; + + @media #{$mq-tablet}, #{$mq-mobile} { + flex-direction: column; + } } &__input { width: 71.72%; - height: 16px; + height: 30px; display: flex; flex-direction: row; align-items: flex-start; @@ -54,22 +77,41 @@ font-family: $font-family; font-style: normal; font-weight: 400; - font-size: 14px; - line-height: 16px; + font-size: 28px; + line-height: 33px; color: $color-primary-400; background: #FFFFFF; border: 1px solid $color-primary-600; border-radius: 4px; + @media #{$mq-desktop} { + font-size: 14px; + line-height: 16px; + height: 16px; + } + @media #{$mq-tablet}, #{$mq-mobile} { + width: calc(100% - 32px); + font-size: 14px; + line-height: 16px; + padding: 17px 16px; + height: 16px; + } &::placeholder { font-family: $font-family; font-style: normal; font-weight: 400; + font-size: 28px; + line-height: 33px; font-size: 14px; line-height: 16px; color: $color-primary-400; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + font-size: 14px; + line-height: 16px; + } } } @@ -85,18 +127,25 @@ text-align: right; color: #FF0000; + + @media #{$mq-tablet}, #{$mq-mobile} { + left: initial; + right: 0; + bottom: initial; + top: -18px; + } } &__btn { width: 28%; - height: 42px; + height: 59px; // padding: 14px 20px; border: none; font-family: $font-family; font-style: normal; font-weight: 700; - font-size: 12px; - line-height: 14px; + font-size: 24px; + line-height: 28px; letter-spacing: 0.05em; display: flex; align-items: center; @@ -107,6 +156,21 @@ border-radius: 4px; margin-left: 8px; cursor: pointer; + + @media #{$mq-desktop} { + font-size: 12px; + line-height: 14px; + height: 42px; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + width: 100%; + margin-left: 0; + margin-top: 8px; + font-size: 14px; + line-height: 16px; + height: 44px; + } } } } diff --git a/src/components/Footer/FooterTop/FooterTop.module.scss b/src/components/Footer/FooterTop/FooterTop.module.scss index 6f08b19..dea2650 100644 --- a/src/components/Footer/FooterTop/FooterTop.module.scss +++ b/src/components/Footer/FooterTop/FooterTop.module.scss @@ -7,11 +7,20 @@ justify-content: space-between; padding: 50px 100px; + @media #{$mq-tablet}, #{$mq-mobile} { + width: calc(100% - 32px); + padding: 24px 16px; + } + &__wrapper { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; + + @media #{$mq-tablet}, #{$mq-mobile} { + flex-direction: column; + } } &__block { @@ -21,17 +30,27 @@ align-items: center; margin-right: 121px; + @media #{$mq-tablet}, #{$mq-mobile} { + margin: 0; + } + &__title { width: 100%; margin-bottom: 12px; font-family: $font-family; font-style: normal; font-weight: 500; - font-size: 14px; - line-height: 16px; + font-size: 28px; + line-height: 33px; text-transform: uppercase; color: $color-black-500; text-align: start; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + font-size: 14px; + line-height: 16px; + + } } &__item-list { @@ -42,6 +61,10 @@ padding: 0px; gap: 12px; + @media #{$mq-tablet}, #{$mq-mobile} { + display: none; + } + } &__item:last-child { text-decoration: underline; @@ -52,11 +75,15 @@ font-family: $font-family; font-style: normal; font-weight: 400; - font-size: 12px; - line-height: 14px; + font-size: 24px; + line-height: 28px; text-transform: capitalize; color: $color-black-500; + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + font-size: 12px; + line-height: 14px; + } } } @@ -68,6 +95,10 @@ align-items: flex-start; margin-left: 37px; + @media #{$mq-tablet}, #{$mq-mobile} { + margin-left: 0; + } + &__social-medias { display: flex; align-items: flex-start; @@ -76,18 +107,42 @@ list-style: none; &__logo { - width: 35px; - height: 35px; + width: 70px; + height: 70px; margin-right: 10px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + width: 35px; + height: 35px; + } + a img { + width: 70px; + height: 70px; + margin-right: 10px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + width: 35px; + height: 35px; + } + } } &__site { font-family: $font-family; font-style: normal; font-weight: 400; - font-size: 14px; - line-height: 16px; + font-size: 28px; + line-height: 33px; color: $color-black-500; + + @media #{$mq-desktop} { + font-size: 14px; + line-height: 16px; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + display: none; + } } } } diff --git a/src/components/Footer/FooterTop/FooterTop.tsx b/src/components/Footer/FooterTop/FooterTop.tsx index f36de74..c0ba663 100644 --- a/src/components/Footer/FooterTop/FooterTop.tsx +++ b/src/components/Footer/FooterTop/FooterTop.tsx @@ -53,7 +53,7 @@ const FooterTop = () => {
  • - Entrega + Trocas e Devoluções
  • @@ -65,27 +65,27 @@ const FooterTop = () => {
    -

    INSTITUCIONAL

    +

    Fale Conosco

    diff --git a/src/components/MenuMobile/MenuMobile.tsx b/src/components/MenuMobile/MenuMobile.tsx index 8d1a89a..ef2f93b 100644 --- a/src/components/MenuMobile/MenuMobile.tsx +++ b/src/components/MenuMobile/MenuMobile.tsx @@ -10,7 +10,7 @@ interface MenuMobileProps { const MenuMobile = ({menuIsVisible, setMenuIsVisible }: MenuMobileProps) => { return (
    setMenuIsVisible(false)}> -
    setMenuIsVisible(true)}> +