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 (
+ <>
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor
+
+
+
+
+
Powered by
+
+
Developed by
+
+
+
+ >
+ );
+};
+
+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 (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor
+
+
+
+
+
Powered by
+
+
Developed by
+
+
+
+ >
+ );
+};
+
+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 (
-
+