SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #23

Merged
SavioCarvalhoMoraes merged 68 commits from development into main 2023-01-20 16:46:29 +00:00
Conversation 0 Commits 68 Files Changed 116 +107 -8
4 changed files with 107 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 79cfb5a585 - Show all commits

74
src/components/AccordionFooter/AccordionFooter.tsx Normal file
View File

@ -0,0 +1,74 @@
const AccordionFooter = () => {
return (
<div className="accordion accordion-flush" id="accordionFlushExample">
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingOne">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="flush-collapseOne"
className="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">Primeiro</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingTwo">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="flush-collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">segundo</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingThree">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree"
aria-expanded="false"
aria-controls="flush-collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="flush-collapseThree"
className="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">terceiro</div>
</div>
</div>
</div>
);
};
export { AccordionFooter };

5
src/components/Socials/socials.module.scss
View File

@ -25,3 +25,8 @@
height: 35px;
}
}
@media screen and (max-width: 1024px) {
.siteLink {
display: none;
}
}

25
src/sectors/Footer/TopFooter/TopFooter.tsx
View File

@ -3,21 +3,30 @@ import { Doubts } from "../../../components/Doubts/Doubts";
import { Contact } from "../../../components/Contact/Contact";
import { Socials } from "../../../components/Socials/Socials";
import { Whatsapp } from "../../../components/Whatsapp/Whatsapp";
import { AccordionFooter } from "../../../components/AccordionFooter/AccordionFooter";
const TopFooter = () => {
return (
<div className="top_footer_wrapper">
<Institutional></Institutional>
<>
<div className="top_footer_wrapper">
<Institutional></Institutional>
<Doubts></Doubts>
<Doubts></Doubts>
<Contact></Contact>
<Contact></Contact>
<div className="top_footer_socials">
<Socials></Socials>
<Whatsapp></Whatsapp>
<div className="top_footer_socials">
<Socials></Socials>
<Whatsapp></Whatsapp>
</div>
</div>
</div>
<div className="top_footerMob_wrapper">
<AccordionFooter></AccordionFooter>
<div className="top_footer_socials">
<Socials></Socials>
</div>
</div>
</>
);
};

11
src/styles/partials/top_footer.scss
View File

@ -5,9 +5,20 @@
justify-content: space-between;
padding: 50px 16px 64px 100px;
border-top: 1px solid black;
@media screen and (max-width: 1024px) {
display: none;
}
}
.top_footer_socials {
display: flex;
flex-direction: row;
gap: 50px;
}
@media screen and (max-width: 1024px) {
.top_footerMob_wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
}