diff --git a/desafio5/package-lock.json b/desafio5/package-lock.json index 68f112b..93a20dc 100644 --- a/desafio5/package-lock.json +++ b/desafio5/package-lock.json @@ -20,6 +20,9 @@ "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "sass": "^1.57.1" } }, "node_modules/@adobe/css-tools": { @@ -8609,6 +8612,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "devOptional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14479,6 +14488,23 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "devOptional": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/desafio5/package.json b/desafio5/package.json index 178045b..1d8cf6e 100644 --- a/desafio5/package.json +++ b/desafio5/package.json @@ -39,5 +39,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "sass": "^1.57.1" } } diff --git a/desafio5/src/assets/img/Boleto.svg b/desafio5/src/assets/img/Boleto.svg new file mode 100644 index 0000000..f006c0a --- /dev/null +++ b/desafio5/src/assets/img/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Diners.svg b/desafio5/src/assets/img/Diners.svg new file mode 100644 index 0000000..3c30d9c --- /dev/null +++ b/desafio5/src/assets/img/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Elo.svg b/desafio5/src/assets/img/Elo.svg new file mode 100644 index 0000000..b2adb7d --- /dev/null +++ b/desafio5/src/assets/img/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Hiper.svg b/desafio5/src/assets/img/Hiper.svg new file mode 100644 index 0000000..3e7fe78 --- /dev/null +++ b/desafio5/src/assets/img/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Master.svg b/desafio5/src/assets/img/Master.svg new file mode 100644 index 0000000..6c93215 --- /dev/null +++ b/desafio5/src/assets/img/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Pagseguro.svg b/desafio5/src/assets/img/Pagseguro.svg new file mode 100644 index 0000000..0018b69 --- /dev/null +++ b/desafio5/src/assets/img/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Visa.svg b/desafio5/src/assets/img/Visa.svg new file mode 100644 index 0000000..322fa95 --- /dev/null +++ b/desafio5/src/assets/img/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/face.svg b/desafio5/src/assets/img/face.svg new file mode 100644 index 0000000..59cfda0 --- /dev/null +++ b/desafio5/src/assets/img/face.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio5/src/assets/img/insta.svg b/desafio5/src/assets/img/insta.svg new file mode 100644 index 0000000..4574a17 --- /dev/null +++ b/desafio5/src/assets/img/insta.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/desafio5/src/assets/img/link.svg b/desafio5/src/assets/img/link.svg new file mode 100644 index 0000000..653ecfa --- /dev/null +++ b/desafio5/src/assets/img/link.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/desafio5/src/assets/img/m3-develop.svg b/desafio5/src/assets/img/m3-develop.svg new file mode 100644 index 0000000..780c92a --- /dev/null +++ b/desafio5/src/assets/img/m3-develop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/assets/img/twitter.svg b/desafio5/src/assets/img/twitter.svg new file mode 100644 index 0000000..bf71aac --- /dev/null +++ b/desafio5/src/assets/img/twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/assets/img/up-button.svg b/desafio5/src/assets/img/up-button.svg new file mode 100644 index 0000000..adb26a4 --- /dev/null +++ b/desafio5/src/assets/img/up-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/assets/img/vtex-pci-200.svg b/desafio5/src/assets/img/vtex-pci-200.svg new file mode 100644 index 0000000..5b503f6 --- /dev/null +++ b/desafio5/src/assets/img/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/vtex-powered.svg b/desafio5/src/assets/img/vtex-powered.svg new file mode 100644 index 0000000..b6fd99e --- /dev/null +++ b/desafio5/src/assets/img/vtex-powered.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/desafio5/src/assets/img/whatsapp.svg b/desafio5/src/assets/img/whatsapp.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/desafio5/src/assets/img/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio5/src/assets/img/youtube.svg b/desafio5/src/assets/img/youtube.svg new file mode 100644 index 0000000..d94b497 --- /dev/null +++ b/desafio5/src/assets/img/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/components/Footer/Footer.tsx b/desafio5/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..533e129 --- /dev/null +++ b/desafio5/src/components/Footer/Footer.tsx @@ -0,0 +1,149 @@ +import React from "react"; +import master from "../../assets/img/Master.svg"; +import visa from "../../assets/img/Visa.svg"; +import amex from "../../assets/img/Diners.svg"; +import elo from "../../assets/img/Elo.svg"; +import hiper from "../../assets/img/Hiper.svg"; +import paypal from "../../assets/img/Pagseguro.svg"; +import boleto from "../../assets/img/Boleto.svg"; +import vtex from "../../assets/img/vtex-pci-200.svg"; +import vtexP from "../../assets/img/vtex-powered.svg"; +import m3 from "../../assets/img/m3-develop.svg"; +import facebook from "../../assets/img/face.svg"; +import instagram from "../../assets/img/insta.svg"; +import twitter from "../../assets/img/twitter.svg"; +import youtube from "../../assets/img/youtube.svg"; +import linkedin from "../../assets/img/link.svg"; +import style from "./footer.module.scss"; + +const Footer = () => { + return ( + <> +
+
+

INSTITUCIONAL

+
+ Quem Somos + + Política de Privacidade + + Segurança + + + Seja um Revendedor + +
+
+ +
+

DÚVIDAS

+
+ Entrega + + Pagamento + + Troca e Devoluções + + + Dúvidas Frequentes + +
+
+ +
+

FALE CONOSCO

+
+

Atendimento ao Consumidor

+ (11) 4159 9504 +

Atendimento Online

+ + (11) 99433-8825 + +
+
+ +
+
+ + Logo Facebook + + + Logo Instagram + + + Logo Twitter + + + Logo Youtube + + + Logo Linkedin + +
+ + www.loremipsum.com + +
+
+ + . + + + . + +
+
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor +

+
+
+ Mastercard + Visa + American Express + Elo + Hipercard + Pay Pal + Boleto + + Vtex +
+
+

Powered by

+ Vtex +

Developed by

+ logo M3 +
+
+ + ); +}; + +export default Footer; diff --git a/desafio5/src/components/Footer/FooterMobile.tsx b/desafio5/src/components/Footer/FooterMobile.tsx new file mode 100644 index 0000000..88489ae --- /dev/null +++ b/desafio5/src/components/Footer/FooterMobile.tsx @@ -0,0 +1,196 @@ +import React, { useState } from "react"; +import master from "../../assets/img/Master.svg"; +import visa from "../../assets/img/Visa.svg"; +import amex from "../../assets/img/Diners.svg"; +import elo from "../../assets/img/Elo.svg"; +import hiper from "../../assets/img/Hiper.svg"; +import paypal from "../../assets/img/Pagseguro.svg"; +import boleto from "../../assets/img/Boleto.svg"; +import vtex from "../../assets/img/vtex-pci-200.svg"; +import vtexP from "../../assets/img/vtex-powered.svg"; +import m3 from "../../assets/img/m3-develop.svg"; +import facebook from "../../assets/img/face.svg"; +import instagram from "../../assets/img/insta.svg"; +import twitter from "../../assets/img/twitter.svg"; +import youtube from "../../assets/img/youtube.svg"; +import linkedin from "../../assets/img/link.svg"; +import style from "./footerMobile.module.css"; + +interface AccordionStates { + institucional: boolean; + duvidas: boolean; + faleConosco: boolean; +} + +const FooterMobile = () => { + const [accordions, setAccordions] = useState({ + institucional: false, + duvidas: false, + faleConosco: false, + }); + const toggleAccordion = ( + name: "institucional" | "duvidas" | "faleConosco" + ) => { + setAccordions({ ...accordions, [name]: !accordions[name] }); + }; + return ( + <> +
+
+ +
+ Quem Somos + + Política de Privacidade + + Segurança + + + Seja um Revendedor + +
+
+ +
+ +
+ Entrega + + Pagamento + + Troca e Devoluções + + + Dúvidas Frequentes + +
+
+ +
+ + +
+

Atendimento ao Consumidor

+ (11) 4159 9504 +

Atendimento Online

+ + (11) 99433-8825 + +
+
+ +
+
+ + Logo Facebook + + + Logo Instagram + + + Logo Twitter + + + Logo Youtube + + + Logo Linkedin + +
+ + www.loremipsum.com + +
+
+ + . + + + . + +
+
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor +

+
+
+ Mastercard + Visa + American Express + Elo + Hipercard + Pay Pal + Boleto + + Vtex +
+
+

Powered by

+ Vtex +

Developed by

+ logo M3 +
+
+ + ); +}; + +export default FooterMobile; diff --git a/desafio5/src/components/Footer/footer.module.scss b/desafio5/src/components/Footer/footer.module.scss new file mode 100644 index 0000000..6fd7f28 --- /dev/null +++ b/desafio5/src/components/Footer/footer.module.scss @@ -0,0 +1,177 @@ +.footer-top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 50px 100px; +} + +h2 { + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: #303030; + margin: 0; + margin-bottom: 12px; + text-transform: uppercase; +} + +h3 { + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + margin: 0; + margin-bottom: 12px; +} + +a { + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + text-decoration: none; + cursor: pointer; + margin-bottom: 12px; +} + +.institucional, +.duvidas, +.fale-conosco { + display: flex; + flex-direction: column; +} + +.last-link { + margin: 0; + text-decoration: underline; +} + +.icons-top { + width: 35px; + height: 35px; + margin-left: 10px; +} + +.icon-facebook { + width: 35px; + height: 35px; +} + +.url-link { + text-transform: lowercase; +} + +.footer-bottom { + background: #000000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 100px; +} + +.first-text { + width: 22%; + min-width: 234px; +} + +.cards { + display: flex; + align-items: center; +} + +.icons { + width: 36px; + height: 20px; + margin-right: 12px; +} + +.icon-vtex { + width: 55px; + height: 34px; + margin-left: 12px; +} + +.vtexP { + width: 45px; + height: 16px; + margin: 0 13px; +} + +.m3 { + width: 28.66px; + height: 15.65px; + margin-left: 13px; +} + +.powered { + display: flex; + align-items: center; +} + +.wrapper { + display: flex; + flex-direction: column; +} + +.divisor { + border: 1px solid #c4c4c4; + height: 24px; + width: 1px; +} + +p { + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; +} + +.float-buttons { + position: fixed; + top: 80%; + right: 2%; + display: flex; + flex-direction: column; +} + +.button-whats { + height: 34px; + width: 34px; + background-image: url("../../assets/img/whatsapp.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + border: 0; + margin: 0; + cursor: pointer; +} + +.up-button { + margin-top: 5px; + width: 34px; + height: 34px; + background-image: url("../../assets/img/up-button.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + margin-bottom: 0; + border: 0; +} + +@media screen and (max-width: 1024px) { + .footer-top, + .footer-bottom { + display: none; + } +} diff --git a/desafio5/src/components/Footer/footerMobile.module.css b/desafio5/src/components/Footer/footerMobile.module.css new file mode 100644 index 0000000..aace8ef --- /dev/null +++ b/desafio5/src/components/Footer/footerMobile.module.css @@ -0,0 +1,191 @@ +.footer-top { + flex-direction: column; + padding: 24px 16px; + align-items: flex-start; +} + +.button-title { + margin-bottom: 12px; + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: #303030; + display: flex; + justify-content: space-between; + width: 100%; +} + +.signal { + font-size: 20px; + width: 16px; + height: 16px; + display: flex; + justify-content: center; + align-items: center; +} + +.url-link { + text-transform: lowercase; +} + +button { + border: 0; + background-color: transparent; + padding: 0; +} + +.wrapper { + display: flex; + flex-direction: column; + overflow: hidden; + max-height: 0; + transition: all 700ms ease-in-out; +} + +.wrapper.active { + max-height: 500px; +} + +.icons-top, +.icon-facebook { + width: 35px; + height: 35px; +} + +.icons-top { + margin-left: 10px; +} + +p { + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; +} + +.footer-bottom { + flex-direction: column; + align-items: flex-start; + background: #000000; + display: flex; + justify-content: space-between; + padding: 15px 16px; +} + +.first-text { + display: flex; + order: 1; + margin-bottom: 15px; + width: 22%; + min-width: 234px; +} + +.powered { + display: flex; + align-items: center; + order: 2; +} + +.cards { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.icons { + width: 36px; + height: 20px; + margin-right: 11px; +} + +.icon-vtex { + width: 55px; + height: 34px; + margin-left: 12px; +} + +.vtexP { + width: 45px; + height: 16px; + margin: 0 13px; +} + +.m3 { + width: 28.66px; + height: 15.65px; + margin-left: 13px; +} + +.divisor { + border: 1px solid #c4c4c4; + height: 24px; + width: 1px; +} + +.last-link { + text-decoration: underline; +} + +.float-buttons { + position: fixed; + top: 80%; + right: 2%; + display: flex; + flex-direction: column; +} + +.button-whats { + height: 34px; + width: 34px; + background-image: url("../../assets/img/whatsapp.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + border: 0; + margin: 0; + cursor: pointer; +} + +.up-button { + margin-top: 5px; + width: 34px; + height: 34px; + background-image: url("../../assets/img/up-button.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + margin-bottom: 0; + border: 0; +} + +@media screen and (min-width: 1025px) { + .footer-top, + .footer-bottom { + display: none; + } +} + +@media screen and (max-width: 428px) { + .icons { + width: 30px; + height: 17px; + margin-right: 11px; + } + .icon-vtex { + width: 45px; + height: 28px; + margin-left: 11px; + } +} + +@media screen and (max-width: 374px) { + .cards { + display: block; + } +} diff --git a/desafio5/src/components/Header/Header.tsx b/desafio5/src/components/Header/Header.tsx index 7c03795..2c323b2 100644 --- a/desafio5/src/components/Header/Header.tsx +++ b/desafio5/src/components/Header/Header.tsx @@ -6,7 +6,7 @@ import style from "./header.module.css"; const Header = () => { return ( -
+