ThiagoDutraSampaioLeite/desafio-react-e-typescript-thiago-dutra
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria footer newsletter

Browse Source
This commit is contained in:
ThiagoDuutra 2023-01-09 16:53:22 -03:00
parent 4bc4ead765
commit 148f4dff0c
6 changed files with 95 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
react-academy/src/Components/Footer/FooterDesktop/index.tsx
View File

@ -1,4 +1,4 @@
// import React, { useState, useEffect, useCallback } from "react";
import React from "react";
import { NavLink } from "react-router-dom";
import Facebook from "../ImagesFooter/facebook-icon.png";
import Instagram from "../ImagesFooter/instagram-icon.png";
@ -15,6 +15,8 @@ import Boleto from "../ImagesFooter/boleto-icon.png";
import VtexCert from "../ImagesFooter/vtexCert-icon.png";
import VtexIcon from "../ImagesFooter/vtex-icon.png";
import M3 from "../ImagesFooter/m3-icon.png";
import Wpp from "../ImagesFooter/whatsapp.png";
import Top from "../ImagesFooter/top.png";
const FooterDesktop = () => {
return (
@ -296,6 +298,28 @@ const FooterDesktop = () => {
</div>
</div>
</section>
<div className="container-redes">
<div className="footer-newsletter-whatsapp">
<a
href="https://api.whatsapp.com/send?phone=5599999999999"
target="_blank"
title="WhatsApp"
rel="noreferrer noopener"
>
<img src={Wpp} alt="WhatsApp" />
</a>
</div>
<div className="footer-newsletter-scrollUp">
<i
onClick={() => window.scroll({ top: 0, behavior: "smooth" })}
className="footer-newsletter-scrollUp-icon"
>
<img src={Top} alt="ScrollUp" />
</i>
</div>
</div>
</footer>
);
};

24
react-academy/src/Components/Footer/FooterTablets/index.tsx
View File

@ -15,6 +15,8 @@ import Boleto from "../ImagesFooter/boleto-icon.png";
import VtexCert from "../ImagesFooter/vtexCert-icon.png";
import VtexIcon from "../ImagesFooter/vtex-icon.png";
import M3 from "../ImagesFooter/m3-icon.png";
import Wpp from "../ImagesFooter/whatsapp.png";
import Top from "../ImagesFooter/top.png";
import "./style.css";
const FooterTablets = () => {
@ -347,6 +349,28 @@ const FooterTablets = () => {
</div>
</div>
</section>
<div className="container-redes">
<div className="footer-newsletter-whatsapp">
<a
href="https://api.whatsapp.com/send?phone=5599999999999"
target="_blank"
title="WhatsApp"
rel="noreferrer noopener"
>
<img src={Wpp} alt="WhatsApp" />
</a>
</div>
<div className="footer-newsletter-scrollUp">
<i
onClick={() => window.scroll({ top: 0, behavior: "smooth" })}
className="footer-newsletter-scrollUp-icon"
>
<img src={Top} alt="ScrollUp" />
</i>
</div>
</div>
</footer>
);
};

4
react-academy/src/Components/Footer/FooterTablets/style.css
View File

@ -43,6 +43,10 @@
order: 3;
margin-bottom: 15px;
}
footer .container-redes {
bottom: 4%;
}
}
@media screen and (max-width: 430px) {

12
react-academy/src/Components/Footer/style.css
View File

@ -1,3 +1,7 @@
.footer-desktop {
position: relative;
}
.footer-desktop__columns {
display: grid;
grid-template-columns: repeat(4, max-content);
@ -131,3 +135,11 @@
height: 15px;
margin: 0 13px;
}
.container-redes {
text-align: end;
position: fixed;
bottom: 12%;
right: 0;
margin-right: 16px;
}

16
react-academy/src/Components/Newsletter/index.tsx
View File

@ -1,19 +1,9 @@
import React from "react";
import CustomForm from "../CustomForm";
import "./style.css";
const Newsletter = () => {
return (
<div className="footer-newsletter">
<div className="footer-newsletter__input">
<label className="footer-newsletter__title" htmlFor="email">
ASSINE NOSSA NEWSLETTER
</label>
<input name="email" type="email" placeholder="E-mail" />
</div>
<div className="btn-submit">
<button type="submit">ENVIAR</button>
</div>
</div>
);
return <CustomForm />;
};
export default Newsletter;

29
react-academy/src/Components/Newsletter/style.css
View File

@ -3,6 +3,7 @@
justify-content: center;
border-top: 1px solid var(--color-black);
border-bottom: 1px solid var(--color-black);
position: relative;
}
.footer-newsletter__title {
@ -12,18 +13,35 @@
line-height: 21px;
letter-spacing: 1.5px;
margin-top: 16px;
margin-bottom: 8px;
width: 340px;
}
.footer-newsletter__input {
display: flex;
flex-direction: column;
margin-bottom: 16px;
position: relative;
}
.footer-newsletter__input input {
padding: 13px 16px;
border: 1px solid var(--color-gray-300);
border-radius: 4px;
outline: 0;
}
.footer-newsletter__input input.invalid {
border-color: var(--color-red);
}
.footer-newsletter__errorMsg {
font-family: "Roboto", sans-serif;
color: var(--color-red);
font-size: 14px;
font-weight: 500;
position: absolute;
top: 100%;
}
.btn-submit {
@ -45,6 +63,7 @@
border-radius: 4px;
margin-bottom: 16px;
margin-left: 8px;
cursor: pointer;
}
@media screen and (max-width: 1024px) {
@ -56,14 +75,20 @@
.footer-newsletter__title {
margin: 16px 16px 0 16px;
font-size: 14px;
line-height: 16px;
}
.footer-newsletter__input input {
margin: 16px 16px 0 16px;
margin: 16px 16px 0px 16px;
}
.btn-submit button {
width: 100%;
margin: 0 16px 16px 16px;
margin: 10px 16px 16px 16px;
}
.footer-newsletter__errorMsg {
margin-left: 16px;
}
}