EleonoraOtz/desafio-react-e-typescript-eleonora-otz
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/desafio-react-e-typescript #1

Merged
EleonoraOtz merged 19 commits from feature/desafio-react-e-typescript into main 2023-01-17 12:15:43 +00:00
Conversation 0 Commits 19 Files Changed 72 +198 -114
7 changed files with 198 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e90b89edbd - Show all commits

6
src/components/main/index.tsx → src/components/breadcrumbs-title/index.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import styles from "../main/style.module.scss";
import styles from "../breadcrumbs-title/style.module.scss";
import RightArrow from "../../assets/svgs/arrow-point-to-right.svg";
import Home from "../../assets/svgs/home.svg";
const Main = () => {
const Breadcrumb = () => {
return (
<div>
<div className={styles["breadcrumb"]}>
@ -27,4 +27,4 @@ const Main = () => {
);
};
export { Main };
export { Breadcrumb };

0
src/components/main/style.module.scss → src/components/breadcrumbs-title/style.module.scss
View File

89
src/components/footer/AccordionMenu/index.tsx Normal file
View File

@ -0,0 +1,89 @@
import React from "react";
import styles from "./style.module.scss"
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-headless-accordion";
const AccordionMenu = () => {
return (
<div className={styles["accordion-menu"]}>
<Accordion>
<AccordionItem>
<AccordionHeader className={styles["accordion-menu__title"]}>
<h3>Institucional</h3>
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<a href="/">Quem Somos</a>
</li>
<li>
<a href="/">Política de Privacidade</a>
</li>
<li>
<a href="/">Segurança</a>
</li>
<li>
<a className={styles["line"]} href="/">
Seja um Revendedor
</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader className={styles["accordion-menu__title"]}>
<h3>Dúvidas</h3>
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<a href="/">Entrega</a>
</li>
<li>
<a href="/">Pagamento</a>
</li>
<li>
<a href="/">Trocas e Devoluções</a>
</li>
<li>
<a className={styles["line"]} href="/">
Dúvidas Frequentes
</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader className={styles["accordion-menu__title"]}>
<h3>Fale Conosco</h3>
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<p className={styles["atendimento"]}>
Atendimento ao Consumidor
</p>
</li>
<li>
<a href="tel:+551141599504" className={styles["call-link"]}>(11) 4159 9504</a>
</li>
<li>
<p className={styles["atendimento"]}>Atendimento Online</p>
</li>
<li>
<a href="tel:+5511994338825" className={styles["call-link"]}>
(11) 99433-8825
</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
</Accordion>
</div>
)
}
export { AccordionMenu }

74
src/components/footer/AccordionMenu/style.module.scss Normal file
View File

@ -0,0 +1,74 @@
.accordion-menu {
width: 96.88%;
margin: 24px auto 0 auto;
@media (max-width: 599px) {
width: 91.6%;
}
&__title {
font-family: "Roboto", sans-serif;
width: 100%;
margin: 0;
padding: 0;
background: var(--white);
border: none;
h3 {
margin: 0 0 12px;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: capitalize;
display: flex;
justify-content: space-between;
&::after {
content: "+";
cursor: pointer;
}
}
}
ul {
padding: 0;
margin: 0;
li {
list-style: none;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: var(--dark-gray-100);
margin-bottom: 12px;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
a {
text-decoration: none;
color: var(--dark-gray-100);
}
.atendimento {
margin: 0;
font-weight: 500;
}
.line {
text-decoration: underline;
}
}
li .call-link {
cursor: pointer;
}
}
@media (min-width: 1025px) {
display: none;
}
}

33
src/components/footer/index.tsx
View File

@ -1,9 +1,7 @@
import React from "react";
import styles from "../footer/style.module.scss";
import styles from "./style.module.scss";
// Accordion
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-headless-accordion";
// Social media icons
@ -33,6 +31,7 @@ import Whatsapp from "../../assets/svgs/whatsapp.svg";
import Vtex from "../../assets/svgs/vtex-logo.svg";
import M3 from "../../assets/svgs/m3-logo.svg";
import { AccordionMenu } from "./AccordionMenu";
const Footer = () => {
return (
@ -48,33 +47,7 @@ const Footer = () => {
</section>
<section className={styles["footer-top"]}>
<div className={styles["accordion-menu"]}>
<Accordion>
<AccordionItem>
<AccordionHeader className={styles["accordion-menu__title"]}>
<h3>Institucional</h3>
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<a href="/">Quem Somos</a>
</li>
<li>
<a href="/">Política de Privacidade</a>
</li>
<li>
<a href="/">Segurança</a>
</li>
<li>
<a className={styles["line"]} href="/">
Seja um Revendedor
</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
</Accordion>
</div>
<AccordionMenu></AccordionMenu>
<div className={styles["footer-top__menu-list"]}>
<div className={styles["menu"]}>

95
src/components/footer/style.module.scss
View File

@ -68,6 +68,7 @@
width: 96.88%;
margin: 0 0 16px;
border-radius: 0;
padding: 16px 17px;
}
@media (max-width: 599px) {
@ -91,6 +92,11 @@
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
cursor: pointer;
&:hover {
background: var(--dark-gray-200);
}
@media (min-width: 2500px) {
font-size: 24px;
@ -113,53 +119,20 @@
width: 100%;
}
.accordion-menu {
&__title {
width: 100%;
margin: 0;
padding: 0;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: capitalize;
display: flex;
justify-content: space-between;
background: var(--white);
border: none;
h3 {
&::after {
content: "+";
cursor: pointer;
}
}
}
@media (min-width: 1025px) {
display: none;
}
}
&__menu-list {
display: flex;
margin: 38px 100px 38px;
justify-content: space-between;
@media (max-width: 1024px) {
display: none;
margin: 0;
}
//FOOTER MOBILE COMO ESTAVA ANTES
// @media (max-width: 1024px) {
// flex-direction: column;
// justify-content: flex-start;
// margin: 24px 16px 18px 16px;
// }
.menu {
@media (max-width: 1024px) {
display: none;
}
h3 {
font-weight: 500;
font-size: 14px;
@ -172,20 +145,6 @@
font-size: 28px;
line-height: 33px;
}
//FOOTER MOBILE COMO ESTAVA ANTES
@media (max-width: 1024px) {
text-transform: capitalize;
margin: 0 0 12px;
display: flex;
justify-content: space-between;
&::after {
content: "+";
cursor: pointer;
}
}
}
ul {
@ -221,8 +180,6 @@
}
}
// FOOTER MOBILE COMO ESTAVA ANTES
@media (max-width: 1024px) {
display: none;
}
@ -248,6 +205,14 @@
}
}
}
@media (max-width: 1024px) {
margin: 0 16px 30px 16px;
}
@media (max-width: 375px) {
margin: 0 16px 24px 16px;
}
}
p {
@ -279,10 +244,8 @@
justify-content: space-between;
width: 84.38%;
margin: auto;
// gap: 110.41px;
@media (min-width: 2500px) {
// width: 92%;
width: 100%;
margin: 0 100px;
}
@ -314,7 +277,6 @@
}
@media (min-width: 2500px) {
// width: 22.15%;
width: 467px;
margin: 0;
font-size: 20px;
@ -355,13 +317,6 @@
margin: 22px 16px 23px 16px;
}
// @media (max-width: 280px) {
// width: 100%;
// order: 1;
// gap: 11px;
// margin: 22px 16px 23px 16px;
// }
.creditcard {
img {
width: 36px;
@ -371,14 +326,12 @@
}
@media (max-width: 767px) {
// width: 30px;
width: 100%;
}
}
}
.vtex {
// width: 31%;
.vtex-pci {
width: 54.61px;
@ -388,7 +341,6 @@
}
@media (max-width: 767px) {
// width: 45px;
width: 100%;
}
}
@ -462,14 +414,6 @@
gap: 13px;
}
// li:last-child {
// margin-left: 13px;
// @media (max-width: 1024px) {
// margin: 0;
// }
// }
a {
align-items: center;
color: var(--white);
@ -483,7 +427,6 @@
span {
font-size: 10px;
line-height: 12px;
// margin-right: 8px;
@media (min-width: 2500px) {
font-size: 20px;

15
src/pages/Institucional.tsx
View File

@ -1,17 +1,22 @@
import React, { useState } from "react";
import { Header } from "../components/header";
import { Main } from "../components/main";
import { Breadcrumb } from "../components/breadcrumbs-title";
import { Footer } from "../components/footer";
import { BurgerMenu } from "../components/header/MenuModal";
const Institucional = () => {
const [openModal, setOpenModal] = useState(false)
const [openModal, setOpenModal] = useState(false);
return (
<>
<Header handleOpenModal={() => setOpenModal(true)}/>
<BurgerMenu isOpen={openModal} onRequestClose={() => setOpenModal(false)} />
<Main />
<Header handleOpenModal={() => setOpenModal(true)} />
<BurgerMenu
isOpen={openModal}
onRequestClose={() => setOpenModal(false)}
/>
<main>
<Breadcrumb />
</main>
<Footer />
</>
);