diff --git a/src/components/Main/About/styles.module.scss b/src/components/Main/About/styles.module.scss index 2c81ae1..1b39a5d 100644 --- a/src/components/Main/About/styles.module.scss +++ b/src/components/Main/About/styles.module.scss @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; width: 100%; - height: 285px; + min-height: 285px; &__text { width: 69.26%; @@ -26,4 +26,19 @@ color: var(--gray-300); } } + + @media (max-width: 1024px) { + flex-direction: column; + + &__text { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + p { + text-align: justify; + } + } + } } diff --git a/src/components/Main/Contact/styles.module.scss b/src/components/Main/Contact/styles.module.scss index 3f34c51..8e8e089 100644 --- a/src/components/Main/Contact/styles.module.scss +++ b/src/components/Main/Contact/styles.module.scss @@ -103,4 +103,15 @@ } } } + + @media (max-width: 1024px) { + flex-direction: column; + + &__text { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + } } diff --git a/src/components/Main/Delivery/styles.module.scss b/src/components/Main/Delivery/styles.module.scss index 2c81ae1..1b39a5d 100644 --- a/src/components/Main/Delivery/styles.module.scss +++ b/src/components/Main/Delivery/styles.module.scss @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; width: 100%; - height: 285px; + min-height: 285px; &__text { width: 69.26%; @@ -26,4 +26,19 @@ color: var(--gray-300); } } + + @media (max-width: 1024px) { + flex-direction: column; + + &__text { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + p { + text-align: justify; + } + } + } } diff --git a/src/components/Main/ExchangeAndReturn/styles.module.scss b/src/components/Main/ExchangeAndReturn/styles.module.scss index 2c81ae1..1b39a5d 100644 --- a/src/components/Main/ExchangeAndReturn/styles.module.scss +++ b/src/components/Main/ExchangeAndReturn/styles.module.scss @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; width: 100%; - height: 285px; + min-height: 285px; &__text { width: 69.26%; @@ -26,4 +26,19 @@ color: var(--gray-300); } } + + @media (max-width: 1024px) { + flex-direction: column; + + &__text { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + p { + text-align: justify; + } + } + } } diff --git a/src/components/Main/MainMenu/styles.module.scss b/src/components/Main/MainMenu/styles.module.scss index 0117a71..7dbf3cd 100644 --- a/src/components/Main/MainMenu/styles.module.scss +++ b/src/components/Main/MainMenu/styles.module.scss @@ -29,4 +29,11 @@ background: var(--black-500); color: var(--white-500); } + + @media (max-width: 1024px) { + border-width: none; + border-style: none; + width: 100%; + margin-bottom: 30px; + } } diff --git a/src/components/Main/Payment/styles.module.scss b/src/components/Main/Payment/styles.module.scss index 2c81ae1..1b39a5d 100644 --- a/src/components/Main/Payment/styles.module.scss +++ b/src/components/Main/Payment/styles.module.scss @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; width: 100%; - height: 285px; + min-height: 285px; &__text { width: 69.26%; @@ -26,4 +26,19 @@ color: var(--gray-300); } } + + @media (max-width: 1024px) { + flex-direction: column; + + &__text { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + p { + text-align: justify; + } + } + } } diff --git a/src/components/Main/SecurityAndPrivacy/styles.module.scss b/src/components/Main/SecurityAndPrivacy/styles.module.scss index 2c81ae1..4b1c55c 100644 --- a/src/components/Main/SecurityAndPrivacy/styles.module.scss +++ b/src/components/Main/SecurityAndPrivacy/styles.module.scss @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; width: 100%; - height: 285px; + min-height: 285px; &__text { width: 69.26%; @@ -15,6 +15,10 @@ line-height: 28px; color: var(--black-400); margin: 12px 0; + + @media (max-width: 299px) { + font-size: 22px; + } } p { @@ -26,4 +30,19 @@ color: var(--gray-300); } } + + @media (max-width: 1024px) { + flex-direction: column; + + &__text { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + p { + text-align: justify; + } + } + } } diff --git a/src/components/Main/styles.module.scss b/src/components/Main/styles.module.scss index 7cb4bd5..7de6ba5 100644 --- a/src/components/Main/styles.module.scss +++ b/src/components/Main/styles.module.scss @@ -70,4 +70,23 @@ color: var(--black-400); } } + + @media (max-width: 1024px) { + padding: 0 16px; + margin-bottom: 81px; + + &__container { + width: 100%; + } + + &__title { + height: 148px; + position: relative; + + h1 { + position: absolute; + bottom: 30%; + } + } + } } diff --git a/src/components/NewsLetter/index.tsx b/src/components/NewsLetter/index.tsx index e9ca0d8..0d46ca7 100644 --- a/src/components/NewsLetter/index.tsx +++ b/src/components/NewsLetter/index.tsx @@ -1,22 +1,38 @@ import React from "react"; import styles from "./styles.module.scss"; +import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; + +interface FormikValues { + email: string; +} + +const initialValues = { + email: "", +}; const NewsLetter = () => { + const handleFormikSubmit = (values: FormikValues) => { + console.log(values); + }; + return (

Assine nossa Newsletter

-
- - -
+ +
+ + + +
); };