From 8f0dff58b49ac6c3969ada07598401b3386a901e Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Sat, 31 Dec 2022 07:39:31 -0300 Subject: [PATCH] feat: cria newsLetter desktop e mobile --- src/components/Footer/index.tsx | 12 ++ src/components/Header/styles.module.scss | 7 +- src/components/InstitutionalMain/index.tsx | 8 ++ .../InstitutionalMain/styles.module.scss | 3 + src/components/NewsLetter/index.tsx | 24 ++++ src/components/NewsLetter/styles.module.scss | 134 ++++++++++++++++++ src/pages/Institutional/index.tsx | 4 + src/styles/global.scss | 2 + 8 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/components/Footer/index.tsx create mode 100644 src/components/InstitutionalMain/index.tsx create mode 100644 src/components/InstitutionalMain/styles.module.scss create mode 100644 src/components/NewsLetter/index.tsx create mode 100644 src/components/NewsLetter/styles.module.scss diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..64851b8 --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { NewsLetter } from "../NewsLetter"; + +const Footer = () => { + return ( + + ); +}; + +export { Footer }; diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss index 189e72b..a00421b 100644 --- a/src/components/Header/styles.module.scss +++ b/src/components/Header/styles.module.scss @@ -51,9 +51,14 @@ border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; + padding: 8px 0 8px 16px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--gray-200); &::placeholder { - padding: 8px 0 8px 16px; font-style: normal; font-weight: 400; font-size: 14px; diff --git a/src/components/InstitutionalMain/index.tsx b/src/components/InstitutionalMain/index.tsx new file mode 100644 index 0000000..c6b0342 --- /dev/null +++ b/src/components/InstitutionalMain/index.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import styles from "./styles.module.scss"; + +const InstitutionalMain = () => { + return
; +}; + +export { InstitutionalMain }; diff --git a/src/components/InstitutionalMain/styles.module.scss b/src/components/InstitutionalMain/styles.module.scss new file mode 100644 index 0000000..50dcf6d --- /dev/null +++ b/src/components/InstitutionalMain/styles.module.scss @@ -0,0 +1,3 @@ +.main { + height: 588px; +} diff --git a/src/components/NewsLetter/index.tsx b/src/components/NewsLetter/index.tsx new file mode 100644 index 0000000..e9ca0d8 --- /dev/null +++ b/src/components/NewsLetter/index.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import styles from "./styles.module.scss"; + +const NewsLetter = () => { + return ( +
+
+

Assine nossa Newsletter

+
+
+ + +
+
+ ); +}; + +export { NewsLetter }; diff --git a/src/components/NewsLetter/styles.module.scss b/src/components/NewsLetter/styles.module.scss new file mode 100644 index 0000000..9ef6079 --- /dev/null +++ b/src/components/NewsLetter/styles.module.scss @@ -0,0 +1,134 @@ +.newsLetter { + display: flex; + flex-direction: column; + align-items: center; + border-width: 1px 0px; + border-style: solid; + border-color: var(--black-500); + width: 100%; + padding: 16px 0; + + &__title { + width: 37.09%; + margin-bottom: 8px; + + h1 { + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: var(--black-400); + text-transform: uppercase; + } + } + + &__container { + display: flex; + justify-content: space-between; + height: 42px; + width: 37.09%; + } + + &__input { + height: 100%; + width: 71.73%; + border: 1px solid var(--white-400); + border-radius: 4px; + padding: 13px 16px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--gray-100); + + &::placeholder { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--gray-100); + } + } + + &__button { + height: 100%; + width: 26.583%; + background: var(--black-500); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + border: none; + color: var(--white-500); + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + @media (max-width: 1024px) { + height: 181px; + padding: 16px; + + &__title { + width: 100%; + + h1 { + font-size: 14px; + line-height: 16px; + } + } + + &__container { + height: 116px; + width: 100%; + flex-direction: column; + } + + &__input { + width: 100%; + height: 50px; + border-radius: 0; + margin-bottom: 16px; + } + + &__button { + width: 100%; + height: 50px; + border-radius: 0; + } + } + + @media (min-width: 2500px) { + &__title { + h1 { + font-size: 36px; + line-height: 42px; + } + } + + &__container { + width: 36.88%; + height: 59px; + } + + &__input { + width: 72.452%; + font-size: 28px; + line-height: 33px; + + &::placeholder { + font-size: 28px; + line-height: 33px; + } + } + + &__button { + width: 26.682%; + font-size: 24px; + line-height: 28px; + } + } +} diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx index 5ff218a..170ba88 100644 --- a/src/pages/Institutional/index.tsx +++ b/src/pages/Institutional/index.tsx @@ -1,5 +1,7 @@ import React, { useState, useEffect } from "react"; +import { Footer } from "../../components/Footer"; import { Header } from "../../components/Header"; +import { InstitutionalMain } from "../../components/InstitutionalMain"; import { MenuMobileModal } from "../../components/MunuMobileModal"; const Institutional = () => { @@ -24,6 +26,8 @@ const Institutional = () => { onRequestClose={() => setMenuMobileModal(false)} />
setMenuMobileModal(true)} /> + +