Merge pull request 'feat: adiciona formulário 375px e 1024px' (#17) from feature/adiciona-formulario-375px-1024px into development

Reviewed-on: #17
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-08 10:13:33 +00:00
commit 698b035baa
9 changed files with 147 additions and 15 deletions

View File

@ -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;
}
}
}
}

View File

@ -103,4 +103,15 @@
}
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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%;
}
}
}
}

View File

@ -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 (
<section className={styles["newsLetter"]}>
<div className={styles["newsLetter__title"]}>
<h1>Assine nossa Newsletter</h1>
</div>
<form className={styles["newsLetter__container"]}>
<input
className={styles["newsLetter__input"]}
type="text"
placeholder="E-mail"
/>
<button className={styles["newsLetter__button"]} type="submit">
Enviar
</button>
</form>
<Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
<Form className={styles["newsLetter__container"]}>
<Field
id="email"
name="email"
className={styles["newsLetter__input"]}
placeholder="E-mail"
/>
<button className={styles["newsLetter__button"]} type="submit">
Enviar
</button>
</Form>
</Formik>
</section>
);
};