forked from M3-Academy/desafio-react-e-typescript
feat: Adicionado newsletter #3
@ -16,13 +16,9 @@ import VtexCert from "../ImagesFooter/vtexCert-icon.png";
|
||||
import VtexIcon from "../ImagesFooter/vtex-icon.png";
|
||||
import M3 from "../ImagesFooter/m3-icon.png";
|
||||
|
||||
// type toggleStateType = {
|
||||
// state: boolean;
|
||||
// modifier: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
// };
|
||||
const FooterDesktop = () => {
|
||||
return (
|
||||
<section className="footer-desktop">
|
||||
<footer className="footer-desktop">
|
||||
<div className="footer-desktop__container">
|
||||
<div className="footer-desktop__columns">
|
||||
<div className="footer-desktop__links">
|
||||
@ -300,7 +296,7 @@ const FooterDesktop = () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
export default FooterDesktop;
|
||||
|
||||
354
react-academy/src/Components/Footer/FooterTablets/index.tsx
Normal file
354
react-academy/src/Components/Footer/FooterTablets/index.tsx
Normal file
@ -0,0 +1,354 @@
|
||||
import React, { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Facebook from "../ImagesFooter/facebook-icon.png";
|
||||
import Instagram from "../ImagesFooter/instagram-icon.png";
|
||||
import Twitter from "../ImagesFooter/twitter-icon.png";
|
||||
import Youtube from "../ImagesFooter/youtube-icon.png";
|
||||
import Linkedin from "../ImagesFooter/linkedin-icon.png";
|
||||
import Master from "../ImagesFooter/Master-icon.png";
|
||||
import Visa from "../ImagesFooter/visa-icon.png";
|
||||
import American from "../ImagesFooter/american-icon.png";
|
||||
import Elo from "../ImagesFooter/elo-icon.png";
|
||||
import Hiper from "../ImagesFooter/hiper-icon.png";
|
||||
import Paypal from "../ImagesFooter/paypal-icon.png";
|
||||
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 "./style.css";
|
||||
|
||||
const FooterTablets = () => {
|
||||
const [isActive, setActive] = useState<boolean>(false);
|
||||
const [isDuvida, setDuvida] = useState<boolean>(false);
|
||||
const [isContact, setContact] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<footer className="footer-desktop">
|
||||
<div className="footer-desktop__container">
|
||||
<div className="footer-desktop__columns">
|
||||
<div className="footer-desktop__links">
|
||||
<h4
|
||||
className="footer-desktop__title"
|
||||
onClick={() => setActive(!isActive)}
|
||||
>
|
||||
Institucional
|
||||
<span>{isActive ? "-" : "+"}</span>
|
||||
</h4>
|
||||
{isActive && (
|
||||
<ul className="footer-link__itemList">
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/quem-somos"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Quem somos
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/politica-de-privacidade"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Política de Privacidade
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/seguranca"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Segurança
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/seja-um-revendedor"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Seja um Revendedor
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="footer-desktop__links">
|
||||
<h4
|
||||
className="footer-desktop__title"
|
||||
onClick={() => setDuvida(!isDuvida)}
|
||||
>
|
||||
Dúvidas
|
||||
<span>{isDuvida ? "-" : "+"}</span>
|
||||
</h4>
|
||||
|
||||
{isDuvida && (
|
||||
<ul className="footer-link__itemList">
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/quem-somos"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Entrega
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/politica-de-privacidade"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Pagamento
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/seguranca"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Trocar e Devoluções
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<NavLink
|
||||
to="/institucional/seja-um-revendedor"
|
||||
className="footer-links__link"
|
||||
>
|
||||
Dúvidas Frequentes
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="footer-desktop__links">
|
||||
<h4
|
||||
className="footer-desktop__title"
|
||||
onClick={() => setContact(!isContact)}
|
||||
>
|
||||
Fale Conosco
|
||||
<span>{isContact ? "-" : "+"}</span>
|
||||
</h4>
|
||||
{isContact && (
|
||||
<ul className="footer-link__itemList">
|
||||
<li className="footer-link__item">
|
||||
<span className="footer-links__title">
|
||||
Atendimento ao Consumidor
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<a className="footer-links__link" href="tel:1141599504">
|
||||
(11) 4159 9504
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<span className="footer-links__title">
|
||||
Atendimento Online
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="footer-link__item">
|
||||
<a className="footer-links__link" href="tel:11994338825">
|
||||
<u>(11) 1199433-8825</u>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="footer-desktop__links">
|
||||
<ul
|
||||
className="footer-link__itemList
|
||||
social-medias"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
title="Facebook"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="footer-links__IconSocial"
|
||||
src={Facebook}
|
||||
alt="Ícone Facebook"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
title="Instagram"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="footer-links__IconSocial"
|
||||
src={Instagram}
|
||||
alt="Ícone Instagram"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
title="Twitter"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="footer-links__IconSocial"
|
||||
src={Twitter}
|
||||
alt="Ícone Twitter"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
title="Youtube"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="footer-links__IconSocial"
|
||||
src={Youtube}
|
||||
alt="Ícone Youtube"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
title="Linkedin"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className="footer-links__IconSocial"
|
||||
src={Linkedin}
|
||||
alt="Ícone Linkedin"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="footer-desktop__infos">
|
||||
<div className="footer-infos__container">
|
||||
<div className="footer-infos__structure">
|
||||
<div className="footer-infos__text">
|
||||
<span className="footer-infos__description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="footer-infos__payment">
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={Master}
|
||||
alt="Ícone MasterCard"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={Visa}
|
||||
alt="Ícone Visa"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={American}
|
||||
alt="Ícone American"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={Elo}
|
||||
alt="Ícone Elo"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={Hiper}
|
||||
alt="Ícone HiperCard"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={Paypal}
|
||||
alt="Ícone Paypal"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img
|
||||
className="footer-link__payment"
|
||||
src={Boleto}
|
||||
alt="Ícone Boleto"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<div className="footer-infos__divider"></div>
|
||||
|
||||
<ul className="footer-infos__vtexCert">
|
||||
<li>
|
||||
<img className="vtexCert" src={VtexCert} alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<div className="footer-infos__contDev">
|
||||
<div className="footer-infos__developed">
|
||||
<a
|
||||
href="https://www.vtex.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>Powered by</span>
|
||||
|
||||
<img className="vtexIcon" src={VtexIcon} alt="Ícone Vtex" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://m3ecommerce.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>Developed by</span>
|
||||
<img className="m3Icon" src={M3} alt="Ícone M3" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterTablets;
|
||||
59
react-academy/src/Components/Footer/FooterTablets/style.css
Normal file
59
react-academy/src/Components/Footer/FooterTablets/style.css
Normal file
@ -0,0 +1,59 @@
|
||||
@media screen and (max-width: 1024px) {
|
||||
footer .footer-desktop__columns {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin: 24px 16px 24px 16px;
|
||||
}
|
||||
|
||||
footer .footer-desktop__links {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer .footer-desktop__title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
footer .footer-desktop__links:last-child {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer .footer-infos__structure {
|
||||
flex-direction: column;
|
||||
align-items: initial;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
footer .footer-infos__text {
|
||||
order: 2;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
footer .footer-infos__payment {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
footer .footer-infos__contDev {
|
||||
order: 3;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 430px) {
|
||||
footer .footer-infos__payment img {
|
||||
width: 30px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
footer .footer-infos__vtexCert img {
|
||||
width: 45px;
|
||||
height: 28px;
|
||||
margin: 11px 0;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import FooterDesktop from "./FooterDesktop";
|
||||
import FooterTablets from "./FooterTablets";
|
||||
import "./style.css";
|
||||
|
||||
const Footer = () => {
|
||||
@ -16,7 +17,9 @@ const Footer = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <footer>{<FooterDesktop />}</footer>;
|
||||
return (
|
||||
<footer>{width <= 1024 ? <FooterTablets /> : <FooterDesktop />}</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
19
react-academy/src/Components/Newsletter/index.tsx
Normal file
19
react-academy/src/Components/Newsletter/index.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Newsletter;
|
||||
69
react-academy/src/Components/Newsletter/style.css
Normal file
69
react-academy/src/Components/Newsletter/style.css
Normal file
@ -0,0 +1,69 @@
|
||||
.footer-newsletter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: 1px solid var(--color-black);
|
||||
border-bottom: 1px solid var(--color-black);
|
||||
}
|
||||
|
||||
.footer-newsletter__title {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 1.5px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.footer-newsletter__input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer-newsletter__input input {
|
||||
padding: 13px 16px;
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.btn-submit button {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 1.5px;
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.footer-newsletter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-newsletter__title {
|
||||
margin: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.footer-newsletter__input input {
|
||||
margin: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.btn-submit button {
|
||||
width: 100%;
|
||||
margin: 0 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&700&display=swap");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
@ -27,6 +29,7 @@ li {
|
||||
--color-white: #fff;
|
||||
--color-white-100: #f0f0f0;
|
||||
|
||||
--color-gray-200: #c4c4c4;
|
||||
--color-gray-100: #303030;
|
||||
--color-gray-200: #c4c4c4;
|
||||
--color-gray-300: #e5e5e5;
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import ReactDOM from "react-dom/client";
|
||||
import { Routes, Route, Navigate } from "react-router-dom";
|
||||
import Header from "./Components/Header";
|
||||
import Footer from "./Components/Footer";
|
||||
import NewsLetter from "./Components/Newsletter";
|
||||
|
||||
export default function Router() {
|
||||
return (
|
||||
@ -10,6 +11,7 @@ export default function Router() {
|
||||
<Routes>
|
||||
<Route></Route>
|
||||
</Routes>
|
||||
<NewsLetter />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user