diff --git a/src/assets/img/boleto.png b/src/assets/img/boleto.png new file mode 100644 index 0000000..aa3078e Binary files /dev/null and b/src/assets/img/boleto.png differ diff --git a/src/assets/img/diners.png b/src/assets/img/diners.png new file mode 100644 index 0000000..17ebf70 Binary files /dev/null and b/src/assets/img/diners.png differ diff --git a/src/assets/img/elo.png b/src/assets/img/elo.png new file mode 100644 index 0000000..46707b0 Binary files /dev/null and b/src/assets/img/elo.png differ diff --git a/src/assets/img/hiper.png b/src/assets/img/hiper.png new file mode 100644 index 0000000..db0c41c Binary files /dev/null and b/src/assets/img/hiper.png differ diff --git a/src/assets/img/master.png b/src/assets/img/master.png new file mode 100644 index 0000000..792a73b Binary files /dev/null and b/src/assets/img/master.png differ diff --git a/src/assets/img/pagseguro.png b/src/assets/img/pagseguro.png new file mode 100644 index 0000000..cf36d10 Binary files /dev/null and b/src/assets/img/pagseguro.png differ diff --git a/src/assets/img/visa.png b/src/assets/img/visa.png new file mode 100644 index 0000000..4fd14cc Binary files /dev/null and b/src/assets/img/visa.png differ diff --git a/src/assets/img/vtex.png b/src/assets/img/vtex.png new file mode 100644 index 0000000..c745c7b Binary files /dev/null and b/src/assets/img/vtex.png differ diff --git a/src/assets/svg/arrow.svg b/src/assets/svg/arrowRight.svg similarity index 100% rename from src/assets/svg/arrow.svg rename to src/assets/svg/arrowRight.svg diff --git a/src/assets/svg/arrowTop.svg b/src/assets/svg/arrowTop.svg new file mode 100644 index 0000000..4928a01 --- /dev/null +++ b/src/assets/svg/arrowTop.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/facebook.svg b/src/assets/svg/facebook.svg new file mode 100644 index 0000000..1d90a05 --- /dev/null +++ b/src/assets/svg/facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/instagram.svg b/src/assets/svg/instagram.svg new file mode 100644 index 0000000..22c8446 --- /dev/null +++ b/src/assets/svg/instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/linkedin.svg b/src/assets/svg/linkedin.svg new file mode 100644 index 0000000..ca97a86 --- /dev/null +++ b/src/assets/svg/linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/m3.svg b/src/assets/svg/m3.svg new file mode 100644 index 0000000..0eeb905 --- /dev/null +++ b/src/assets/svg/m3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/twitter.svg b/src/assets/svg/twitter.svg new file mode 100644 index 0000000..f57be2c --- /dev/null +++ b/src/assets/svg/twitter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svg/vtex.svg b/src/assets/svg/vtex.svg new file mode 100644 index 0000000..7e8d17b --- /dev/null +++ b/src/assets/svg/vtex.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/whatsapp.svg b/src/assets/svg/whatsapp.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/src/assets/svg/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svg/youtube.svg b/src/assets/svg/youtube.svg new file mode 100644 index 0000000..a6855b9 --- /dev/null +++ b/src/assets/svg/youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/styles/partials/header/Form.module.scss b/src/components/Header/Form.module.scss similarity index 100% rename from src/styles/partials/header/Form.module.scss rename to src/components/Header/Form.module.scss diff --git a/src/components/Header/Form.tsx b/src/components/Header/Form.tsx index a1c0935..5c2b207 100644 --- a/src/components/Header/Form.tsx +++ b/src/components/Header/Form.tsx @@ -2,7 +2,7 @@ import React from "react"; // Estilos -import styleForm from "../../styles/partials/header/Form.module.scss"; +import styleForm from "./Form.module.scss"; // Imagem import search from "../../assets/svg/search.svg"; diff --git a/src/styles/partials/header/HeaderWrapper.module.scss b/src/components/Header/HeaderWrapper.module.scss similarity index 100% rename from src/styles/partials/header/HeaderWrapper.module.scss rename to src/components/Header/HeaderWrapper.module.scss diff --git a/src/components/Header/LogoM3.tsx b/src/components/Header/LogoM3.tsx index 97aa835..474f58d 100644 --- a/src/components/Header/LogoM3.tsx +++ b/src/components/Header/LogoM3.tsx @@ -2,7 +2,11 @@ import logoM3 from "../../assets/svg/logo.svg"; const LogoM3 = () => { - return M3 Academy; + return ( + + M3 Academy{" "} + + ); }; export { LogoM3 }; diff --git a/src/styles/partials/header/Menu.module.scss b/src/components/Header/Menu.module.scss similarity index 72% rename from src/styles/partials/header/Menu.module.scss rename to src/components/Header/Menu.module.scss index 1404bd4..4854b19 100644 --- a/src/styles/partials/header/Menu.module.scss +++ b/src/components/Header/Menu.module.scss @@ -1,5 +1,6 @@ -.header-menu { +.menu { display: none; + cursor: pointer; @media (max-width: 1024px) { display: flex; diff --git a/src/components/Header/Menu.tsx b/src/components/Header/Menu.tsx index 63d9dce..63a74a4 100644 --- a/src/components/Header/Menu.tsx +++ b/src/components/Header/Menu.tsx @@ -2,15 +2,15 @@ import React from "react"; // Estilos -import styleMenu from "../../styles/partials/header/Menu.module.scss"; +import styleMenu from "./Menu.module.scss"; // Imagens import menu from "../../assets/svg/menu.svg"; const Menu = () => { return ( -
- Menu +
+ Menu
); }; diff --git a/src/styles/partials/header/Nav.module.scss b/src/components/Header/Nav.module.scss similarity index 83% rename from src/styles/partials/header/Nav.module.scss rename to src/components/Header/Nav.module.scss index 01c4621..677f554 100644 --- a/src/styles/partials/header/Nav.module.scss +++ b/src/components/Header/Nav.module.scss @@ -23,5 +23,10 @@ text-transform: uppercase; color: #fff; text-decoration: none; + transition: all 0.3s linear; + + &:hover { + font-weight: 500; + } } } diff --git a/src/components/Header/Nav.tsx b/src/components/Header/Nav.tsx index a72498e..0e33e14 100644 --- a/src/components/Header/Nav.tsx +++ b/src/components/Header/Nav.tsx @@ -2,22 +2,22 @@ import React from "react"; // Estilos -import styleNav from "../../styles/partials/header/Nav.module.scss"; +import styleNav from "./Nav.module.scss"; const Nav = () => { return ( diff --git a/src/components/Header/User.module.scss b/src/components/Header/User.module.scss new file mode 100644 index 0000000..a4a452a --- /dev/null +++ b/src/components/Header/User.module.scss @@ -0,0 +1,30 @@ +.user { + display: flex; + align-items: center; + + a { + color: #fff; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + transition: all 0.3s linear; + + &:first-child { + margin-right: 55px; + } + + &:hover { + font-weight: 500; + } + + @media (max-width: 1024px) { + margin-right: 0; + + &:first-child { + display: none; + } + } + } +} diff --git a/src/components/Header/User.tsx b/src/components/Header/User.tsx index 262484c..40b8ac2 100644 --- a/src/components/Header/User.tsx +++ b/src/components/Header/User.tsx @@ -2,17 +2,19 @@ import React from "react"; // Estilos -import styleUser from "../../styles/partials/header/User.module.scss"; +import styleUser from "./User.module.scss"; // Imagem import cart from "../../assets/svg/cart.svg"; const User = () => { return ( -
-

Entrar

+
+ Entrar - Carrinho + + Carrinho +
); }; diff --git a/src/components/footer/FooterBottom.module.scss b/src/components/footer/FooterBottom.module.scss new file mode 100644 index 0000000..e1a18d2 --- /dev/null +++ b/src/components/footer/FooterBottom.module.scss @@ -0,0 +1,98 @@ +.footerBottom { + padding: 15px 100px; + background-color: #000; + color: #fff; + display: flex; + align-items: center; + justify-content: space-between; + + @media (max-width: 1024px) { + display: grid; + padding: 20px 16px; + grid-template-rows: repeat(3, max-content); + } + + .footerBottom-text { + grid-row: 2; + + p { + max-width: 42ch; + text-transform: capitalize; + font-size: 10px; + font-weight: 400; + line-height: 12px; + + @media (max-width: 1024px) { + margin: 20px 0 15px 0; + } + } + } + + .footerBottom-icons { + display: flex; + align-items: center; + + div { + margin-right: 12px; + + @media (max-width: 375px) { + margin-right: 11px; + img { + width: 30px; + } + } + + @media (max-width: 374px) { + margin-right: 4px; + } + + &:last-child { + img { + @media (max-width: 375px) { + margin-left: 11px; + width: 45px; + } + + @media (max-width: 374px) { + margin-left: 4px; + } + + margin-left: 12px; + } + } + + @media (min-width: 376px) and (max-width: 1024px) { + margin-right: 10px; + } + } + + span { + border-left: 2px solid #c4c4c4; + height: 25px; + margin-bottom: 5px; + } + } + + .footerBottom-credits { + display: flex; + align-items: center; + + p { + font-size: 10px; + font-weight: 400; + line-height: 12px; + margin-right: 12px; + } + + .footerBottom-credits-powered { + display: flex; + align-items: center; + margin-right: 13px; + } + + .footerBottom-credits-developed { + display: flex; + align-items: center; + } + } +} diff --git a/src/components/footer/FooterBottom.tsx b/src/components/footer/FooterBottom.tsx new file mode 100644 index 0000000..928eecd --- /dev/null +++ b/src/components/footer/FooterBottom.tsx @@ -0,0 +1,81 @@ +// Bibliotecas +import React from "react"; + +// Imagens +import mastercard from "../../assets/img/master.png"; +import visa from "../../assets/img/visa.png"; +import diners from "../../assets/img/diners.png"; +import elo from "../../assets/img/elo.png"; +import hiper from "../../assets/img/hiper.png"; +import pagseguro from "../../assets/img/pagseguro.png"; +import boleto from "../../assets/img/boleto.png"; +import vtexcertified from "../../assets/img/vtex.png"; + +import m3 from "../../assets/svg/m3.svg"; +import vtex from "../../assets/svg/vtex.svg"; + +// Estilos +import styleFooterBottom from "./FooterBottom.module.scss"; + +const FooterBottom = () => { + return ( +
+
+

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

+
+ +
+
+ MasterCard +
+ +
+ Visa +
+ +
+ Diners +
+ +
+ Elo +
+ +
+ HiperCard +
+ +
+ PagSeguro +
+ +
+ Boleto +
+ + + +
+ VTEX +
+
+ +
+
+

Powered by

+ VTEX +
+ +
+

Developed by

+ M3 +
+
+
+ ); +}; + +export { FooterBottom }; diff --git a/src/components/footer/FooterTop.module.scss b/src/components/footer/FooterTop.module.scss new file mode 100644 index 0000000..1d15b38 --- /dev/null +++ b/src/components/footer/FooterTop.module.scss @@ -0,0 +1,78 @@ +.footerTop { + padding: 50px 100px; + display: flex; + justify-content: space-between; + + @media (max-width: 1024px) { + display: block; + padding: 24px 16px; + } + + h3 { + margin-bottom: 12px; + font-size: 14px; + font-weight: 500; + line-height: 16px; + text-transform: uppercase; + + @media (max-width: 1024px) { + text-transform: capitalize; + } + } + + li { + list-style: none; + margin-bottom: 12px; + + a { + font-size: 12px; + font-weight: 400; + line-height: 14px; + text-decoration: none; + color: #303030; + } + + &:last-child { + text-decoration: underline; + } + } + + .footerTop-fale-conosco { + p:nth-child(2), + p:nth-child(4) { + font-size: 12px; + font-weight: 500; + line-height: 14px; + max-width: 20ch; + } + + p:nth-child(3), + p:nth-child(5) { + font-weight: 400; + margin: 12px 0; + font-size: 12px; + font-weight: 400; + line-height: 14px; + + &:last-child { + text-decoration: underline; + } + } + } + + .footerTop-icons { + .footerTop-icons-wrapper { + a { + margin-left: 10px; + + &:first-child { + margin-left: 0px; + } + } + } + + p { + margin-top: 12px; + } + } +} diff --git a/src/components/footer/FooterTop.tsx b/src/components/footer/FooterTop.tsx new file mode 100644 index 0000000..b7a6a62 --- /dev/null +++ b/src/components/footer/FooterTop.tsx @@ -0,0 +1,86 @@ +// Bibliotecas +import React from "react"; + +// Imagens +import facebook from "../../assets/svg/facebook.svg"; +import instragrm from "../../assets/svg/instagram.svg"; +import twitter from "../../assets/svg/twitter.svg"; +import youtube from "../../assets/svg/youtube.svg"; +import linkedin from "../../assets/svg/linkedin.svg"; + +// Estilos +import styleFooterTop from "./FooterTop.module.scss"; + +const FooterTop = () => { + return ( +
+
+

Institucional

+ +
+ +
+

Dúvidas

+ +
+ +
+

Fale Conosco

+

Atendimento Ao Consumidor

+

(11) 4159-9504

+

Atendimento Online

+

(11) 99433-8825

+
+ +
+
+ + Facebook + + + Instagram + + + Twitter + + + YouTube + + + LinkedIn + +
+ +

www.loremipsum.com

+
+
+ ); +}; + +export { FooterTop }; diff --git a/src/components/footer/Newsletter.module.scss b/src/components/footer/Newsletter.module.scss new file mode 100644 index 0000000..5b560dd --- /dev/null +++ b/src/components/footer/Newsletter.module.scss @@ -0,0 +1,78 @@ +.newsletter { + margin-top: 70px; + border: 1px solid #000; + border-left: none; + border-right: none; + display: flex; + justify-content: center; + + @media (max-width: 1024px) { + display: block; + } + + .newsletter-wrapper { + padding: 16px 0; + + @media (max-width: 1024px) { + padding: 16px; + } + + h2 { + font-size: 18px; + font-weight: 500; + line-height: 21px; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 7px; + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } + } + + .newsletter-form { + input { + height: 42px; + width: 340px; + border-radius: 4px; + padding: 13px 16px 13px 16px; + outline: none; + border: 1px solid #e5e5e5; + margin-right: 8px; + + @media (max-width: 1024px) { + margin: 0 0 16px 0; + border-radius: 0; + border: 1px solid #c4c4c4; + width: 100%; + } + + &::placeholder { + color: #c4c4c4; + } + } + + button { + height: 42px; + width: 126px; + border-radius: 4px; + background: #000000; + color: #fff; + font-size: 12px; + font-weight: 700; + line-height: 14px; + letter-spacing: 0.05em; + text-transform: uppercase; + outline: none; + border: none; + + @media (max-width: 1024px) { + width: 100%; + height: 50px; + border-radius: 0; + } + } + } + } +} diff --git a/src/components/footer/Newsletter.tsx b/src/components/footer/Newsletter.tsx new file mode 100644 index 0000000..960faa8 --- /dev/null +++ b/src/components/footer/Newsletter.tsx @@ -0,0 +1,22 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleNewsletter from "./Newsletter.module.scss"; + +const Newsletter = () => { + return ( +
+
+

Assine nossa newsletter

+ +
+ + +
+
+
+ ); +}; + +export { Newsletter }; diff --git a/src/components/global/ButtonsGlobal.module.scss b/src/components/global/ButtonsGlobal.module.scss new file mode 100644 index 0000000..aae3330 --- /dev/null +++ b/src/components/global/ButtonsGlobal.module.scss @@ -0,0 +1,18 @@ +.buttons { + display: flex; + flex-direction: column; + position: fixed; + right: 16px; + bottom: 16px; + + div { + display: flex; + justify-content: center; + margin-top: 5px; + width: 34px; + height: 34px; + border-radius: 50%; + background-color: #c4c4c4; + cursor: pointer; + } +} diff --git a/src/components/global/ButtonsGlobal.tsx b/src/components/global/ButtonsGlobal.tsx new file mode 100644 index 0000000..36cd654 --- /dev/null +++ b/src/components/global/ButtonsGlobal.tsx @@ -0,0 +1,33 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleButtons from "./ButtonsGlobal.module.scss"; + +// Imagens +import whatsapp from "../../assets/svg/whatsapp.svg"; +import arrow from "../../assets/svg/arrowTop.svg"; + +const ButtonsGlobal = () => { + function scrollTop() { + window.scrollTo(0, 0); + } + + return ( +
+ + WhatsApp + + +
+ Voltar para cima +
+
+ ); +}; + +export { ButtonsGlobal }; diff --git a/src/styles/partials/institucional/Breadcrumb.module.scss b/src/components/section/Breadcrumb.module.scss similarity index 95% rename from src/styles/partials/institucional/Breadcrumb.module.scss rename to src/components/section/Breadcrumb.module.scss index 18c7456..aff3c99 100644 --- a/src/styles/partials/institucional/Breadcrumb.module.scss +++ b/src/components/section/Breadcrumb.module.scss @@ -1,4 +1,4 @@ -.nav-main { +.breadcrumb { padding: 30px 100px 0 100px; display: flex; align-items: center; diff --git a/src/components/institucional/Breadcrumb.tsx b/src/components/section/Breadcrumb.tsx similarity index 61% rename from src/components/institucional/Breadcrumb.tsx rename to src/components/section/Breadcrumb.tsx index e17bf86..69c92fb 100644 --- a/src/components/institucional/Breadcrumb.tsx +++ b/src/components/section/Breadcrumb.tsx @@ -2,15 +2,15 @@ import React from "react"; // Estilos -import styleBreadcrumb from "../../styles/partials/institucional/Breadcrumb.module.scss"; +import styleBreadcrumb from "./Breadcrumb.module.scss"; // Imagens import home from "../../assets/svg/home.svg"; -import arrow from "../../assets/svg/arrow.svg"; +import arrow from "../../assets/svg/arrowRight.svg"; const Breadcrumb = () => { return ( -
+
Home Flecha

Institucional

diff --git a/src/styles/partials/institucional/InstitucionalContent.module.scss b/src/components/section/InstitucionalContent.module.scss similarity index 94% rename from src/styles/partials/institucional/InstitucionalContent.module.scss rename to src/components/section/InstitucionalContent.module.scss index 525646a..e60aada 100644 --- a/src/styles/partials/institucional/InstitucionalContent.module.scss +++ b/src/components/section/InstitucionalContent.module.scss @@ -1,4 +1,4 @@ -.accordion-content { +.institucionalContent{ h2 { margin: 12px 0; font-size: 24px; diff --git a/src/components/institucional/InstitucionalContent.tsx b/src/components/section/InstitucionalContent.tsx similarity index 90% rename from src/components/institucional/InstitucionalContent.tsx rename to src/components/section/InstitucionalContent.tsx index dd34f04..24c0180 100644 --- a/src/components/institucional/InstitucionalContent.tsx +++ b/src/components/section/InstitucionalContent.tsx @@ -2,11 +2,11 @@ import React from "react"; // Estilos -import styleInstitucionalContent from "../../styles/partials/institucional/InstitucionalContent.module.scss"; +import styleInstitucionalContent from "./InstitucionalContent.module.scss"; const InstitucionalContent = () => { return ( -
+

Sobre

diff --git a/src/styles/partials/institucional/NavInstitucional.module.scss b/src/components/section/NavInstitucional.module.scss similarity index 96% rename from src/styles/partials/institucional/NavInstitucional.module.scss rename to src/components/section/NavInstitucional.module.scss index ce82a0f..75b7fe8 100644 --- a/src/styles/partials/institucional/NavInstitucional.module.scss +++ b/src/components/section/NavInstitucional.module.scss @@ -1,4 +1,4 @@ -.accordion-nav { +.NavInstitucional { border-right: 1px solid #000; margin-right: 30px; diff --git a/src/components/institucional/NavInstitucional.tsx b/src/components/section/NavInstitucional.tsx similarity index 81% rename from src/components/institucional/NavInstitucional.tsx rename to src/components/section/NavInstitucional.tsx index ee58cb8..9247a23 100644 --- a/src/components/institucional/NavInstitucional.tsx +++ b/src/components/section/NavInstitucional.tsx @@ -2,11 +2,11 @@ import React from "react"; // Estilos -import styleNavInstitucional from "../../styles/partials/institucional/NavInstitucional.module.scss"; +import styleNavInstitucional from "./NavInstitucional.module.scss"; const NavInstitucional = () => { return ( -