From 73ab6b28d6a2988dc81fc26423449298fc4e28d9 Mon Sep 17 00:00:00 2001 From: ThiagoDuutra Date: Tue, 3 Jan 2023 10:58:56 -0300 Subject: [PATCH] feat: Adicionado newsletter --- .../Components/Footer/FooterDesktop/index.tsx | 8 +- .../Components/Footer/FooterTablets/index.tsx | 354 ++++++++++++++++++ .../Components/Footer/FooterTablets/style.css | 59 +++ react-academy/src/Components/Footer/index.tsx | 5 +- .../src/Components/Newsletter/index.tsx | 19 + .../src/Components/Newsletter/style.css | 69 ++++ react-academy/src/global.css | 5 +- react-academy/src/router.tsx | 2 + 8 files changed, 513 insertions(+), 8 deletions(-) create mode 100644 react-academy/src/Components/Footer/FooterTablets/index.tsx create mode 100644 react-academy/src/Components/Footer/FooterTablets/style.css create mode 100644 react-academy/src/Components/Newsletter/index.tsx create mode 100644 react-academy/src/Components/Newsletter/style.css diff --git a/react-academy/src/Components/Footer/FooterDesktop/index.tsx b/react-academy/src/Components/Footer/FooterDesktop/index.tsx index f1730c8..a8cc78d 100644 --- a/react-academy/src/Components/Footer/FooterDesktop/index.tsx +++ b/react-academy/src/Components/Footer/FooterDesktop/index.tsx @@ -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>; -// }; const FooterDesktop = () => { return ( -
+
@@ -300,7 +296,7 @@ const FooterDesktop = () => {
- + ); }; export default FooterDesktop; diff --git a/react-academy/src/Components/Footer/FooterTablets/index.tsx b/react-academy/src/Components/Footer/FooterTablets/index.tsx new file mode 100644 index 0000000..97eddc6 --- /dev/null +++ b/react-academy/src/Components/Footer/FooterTablets/index.tsx @@ -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(false); + const [isDuvida, setDuvida] = useState(false); + const [isContact, setContact] = useState(false); + + return ( +
+
+
+
+

setActive(!isActive)} + > + Institucional + {isActive ? "-" : "+"} +

+ {isActive && ( +
    +
  • + + Quem somos + +
    • + +
  • + + Política de Privacidade + +
    • + +
  • + + Segurança + +
    • + +
  • + + Seja um Revendedor + +
    • +
+ )} +
+ +
+

setDuvida(!isDuvida)} + > + Dúvidas + {isDuvida ? "-" : "+"} +

+ + {isDuvida && ( +
    +
  • + + Entrega + +
    • + +
  • + + Pagamento + +
    • + +
  • + + Trocar e Devoluções + +
    • + +
  • + + Dúvidas Frequentes + +
    • +
+ )} +
+ +
+

setContact(!isContact)} + > + Fale Conosco + {isContact ? "-" : "+"} +

+ {isContact && ( + + )} +
+ +
+ +
+
+
+ +
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + +
+ +
    +
  • + Ícone MasterCard +
    • + +
  • + Ícone Visa +
    • + +
  • + Ícone American +
    • + +
  • + Ícone Elo +
    • + +
  • + Ícone HiperCard +
    • + +
  • + Ícone Paypal +
    • + +
  • + Ícone Boleto +
    • + +
    + +
      +
    • + +
      • +
    +
+ + +
+
+
+
+ ); +}; + +export default FooterTablets; diff --git a/react-academy/src/Components/Footer/FooterTablets/style.css b/react-academy/src/Components/Footer/FooterTablets/style.css new file mode 100644 index 0000000..f600292 --- /dev/null +++ b/react-academy/src/Components/Footer/FooterTablets/style.css @@ -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; + } +} diff --git a/react-academy/src/Components/Footer/index.tsx b/react-academy/src/Components/Footer/index.tsx index c50903f..ad3fe74 100644 --- a/react-academy/src/Components/Footer/index.tsx +++ b/react-academy/src/Components/Footer/index.tsx @@ -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
{}
; + return ( +
{width <= 1024 ? : }
+ ); }; export default Footer; diff --git a/react-academy/src/Components/Newsletter/index.tsx b/react-academy/src/Components/Newsletter/index.tsx new file mode 100644 index 0000000..da5fdc6 --- /dev/null +++ b/react-academy/src/Components/Newsletter/index.tsx @@ -0,0 +1,19 @@ +import "./style.css"; + +const Newsletter = () => { + return ( +
+
+ + +
+
+ +
+
+ ); +}; + +export default Newsletter; diff --git a/react-academy/src/Components/Newsletter/style.css b/react-academy/src/Components/Newsletter/style.css new file mode 100644 index 0000000..e7e27ca --- /dev/null +++ b/react-academy/src/Components/Newsletter/style.css @@ -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; + } +} diff --git a/react-academy/src/global.css b/react-academy/src/global.css index 0535202..04dab42 100644 --- a/react-academy/src/global.css +++ b/react-academy/src/global.css @@ -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; } diff --git a/react-academy/src/router.tsx b/react-academy/src/router.tsx index a050ded..3f163e3 100644 --- a/react-academy/src/router.tsx +++ b/react-academy/src/router.tsx @@ -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() { +