criação do newsletter
This commit is contained in:
parent
234856df17
commit
b9ed64f955
60
desafio-5/src/components/news/news.tsx
Normal file
60
desafio-5/src/components/news/news.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import {
|
||||
Formik,
|
||||
Form as FormikForm,
|
||||
Field,
|
||||
ErrorMessage,
|
||||
FormikHelpers,
|
||||
} from "formik";
|
||||
import React, { useState } from "react";
|
||||
import * as Yup from "yup";
|
||||
import style from "../news/style/news.module.scss";
|
||||
|
||||
interface IValue {
|
||||
email: string;
|
||||
}
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<section className={style["newsletter"]}>
|
||||
<div className={style["container"]}>
|
||||
<Formik
|
||||
initialValues={{ email: "" }}
|
||||
onSubmit={(value: IValue, actions: FormikHelpers<IValue>) => {
|
||||
console.log("Newsletter Assinado!!!");
|
||||
actions.resetForm();
|
||||
}}
|
||||
validationSchema={Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email("Email Inválido")
|
||||
.required("Campo Obrigatório"),
|
||||
})}
|
||||
>
|
||||
<FormikForm>
|
||||
<label className={style["newsletter__label"]} htmlFor="email">
|
||||
ASSINE NOSSA NEWSLETTER
|
||||
</label>
|
||||
<div className={style["newsletter__form-group"]}>
|
||||
<Field
|
||||
className={style["newsletter__email"]}
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
/>
|
||||
<button className={style["newsletter__button"]} type="submit">
|
||||
ENVIAR
|
||||
</button>
|
||||
</div>
|
||||
<ErrorMessage
|
||||
className={style["form__error"]}
|
||||
component="span"
|
||||
name="email"
|
||||
/>
|
||||
</FormikForm>
|
||||
</Formik>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Newsletter };
|
||||
|
||||
160
desafio-5/src/components/news/style/news.module.scss
Normal file
160
desafio-5/src/components/news/style/news.module.scss
Normal file
@ -0,0 +1,160 @@
|
||||
.newsletter {
|
||||
margin: 170px 0 25px;
|
||||
padding: 16px 0;
|
||||
|
||||
border: 1px solid var(--black-600);
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 475px;
|
||||
width: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.newsletter__label {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: var(--black-200);
|
||||
}
|
||||
|
||||
.newsletter__form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.newsletter__email {
|
||||
max-width: 312px;
|
||||
width: 100%;
|
||||
|
||||
padding: 14px;
|
||||
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
|
||||
transition: border .2s linear;
|
||||
}
|
||||
|
||||
.newsletter__email::placeholder {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
.newsletter__email:focus {
|
||||
border: 1px solid var(--black-300);
|
||||
}
|
||||
|
||||
.newsletter__button {
|
||||
max-width: 126px;
|
||||
width: 100%;
|
||||
|
||||
padding: 14px 0;
|
||||
margin-left: 8px;
|
||||
|
||||
background: var(--black-600);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-family: var(--roboto);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
cursor: pointer;
|
||||
transition: background 0.2s linear;
|
||||
}
|
||||
|
||||
// .newsletter__button:hover {
|
||||
// background-color: var(--blue-400);
|
||||
// }
|
||||
|
||||
// .newsletter__button:active {
|
||||
// background-color: var(--blue-500);
|
||||
// }
|
||||
|
||||
.form__error {
|
||||
color: #dc143c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.newsletter {
|
||||
margin: 30px 0 24px;
|
||||
padding: 20px 16px 32px;
|
||||
}
|
||||
|
||||
.newsletter__label {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.newsletter__form-group {
|
||||
flex-direction: column;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.newsletter__button,
|
||||
.newsletter__email {
|
||||
max-width: 100%;
|
||||
padding: 18px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.newsletter__email {
|
||||
width: calc(100% - 38px);
|
||||
}
|
||||
|
||||
.newsletter__button {
|
||||
margin: 16px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
|
||||
.container{
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.newsletter__label {
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.newsletter__button {
|
||||
max-width: 246px;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.newsletter__email{
|
||||
max-width: 668px;;
|
||||
}
|
||||
|
||||
.newsletter__email::placeholder {
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@ import React from "react";
|
||||
import { Header } from "../components/Header/header"
|
||||
import { Footer } from "../components/Footer/footer"
|
||||
import { Informacoes } from "../components/informacoes/informacoes"
|
||||
import { Newsletter } from "../components/news/news"
|
||||
|
||||
|
||||
const Home = () => {
|
||||
@ -10,6 +11,9 @@ const Home = () => {
|
||||
<>
|
||||
|
||||
< Header />
|
||||
< Newsletter/>
|
||||
|
||||
|
||||
< Informacoes />
|
||||
< Footer />
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user