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

Merge pull request 'feature/footer' (#20) from feature/footer into development

Browse Source 
Reviewed-on: #20
This commit is contained in:
Savio Carvalho Moraes 2023-01-20 01:39:06 +00:00
commit 35c8e58aa5
14 changed files with 220 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AccordionBody/AccordionBody.tsx
View File

@ -9,11 +9,11 @@ const AccordionBody = () => {
<Tab.Container id="list-group-tabs" defaultActiveKey="#link1">
<Row>
<Col sm={4}>
<ListGroup>
<ListGroup.Item className={styles["acc-item"]} action href="#link1">
<ListGroup className="accList">
<ListGroup.Item variant="dark" action href="#link1">
Sobre
</ListGroup.Item>
<ListGroup.Item action href="#link2">
<ListGroup.Item variant="dark" action href="#link2">
Contato
</ListGroup.Item>
</ListGroup>
@ -50,7 +50,7 @@ const AccordionBody = () => {
</p>
</div>
</Tab.Pane>
<Tab.Pane eventKey="#link2">
<Tab.Pane className="contato-item" eventKey="#link2">
<FormInput></FormInput>
</Tab.Pane>
</Tab.Content>

9
src/components/AccordionBody/accordionBody.module.scss
View File

@ -7,12 +7,3 @@
display: flex;
flex-direction: row;
}
.accordion-header {
}
/*
.list-group-tabs.active {
background-color: red;
}*/
.acc-item .active {
background-color: red;
}

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

@ -0,0 +1,87 @@
import mais from "./assets/image/mais.png";
import { Institutional } from "../Institutional/Institutional";
import { Doubts } from "../Doubts/Doubts";
import { Contact } from "../Contact/Contact";
const AccordionFooter = () => {
return (
<div
className="accordion accordion-flush acc_footer"
id="accordionFlushExample"
>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingOne">
<button
className="accordion-button collapsed acc_btn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Institucional
</button>
</h2>
<div
id="flush-collapseOne"
className="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">
<Institutional></Institutional>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingTwo">
<button
className="accordion-button collapsed acc_btn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Dúvidas
</button>
</h2>
<div
id="flush-collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">
<Doubts></Doubts>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingThree">
<button
className="accordion-button collapsed acc_btn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree"
aria-expanded="false"
aria-controls="flush-collapseThree"
>
Fale Conosco
</button>
</h2>
<div
id="flush-collapseThree"
className="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">
<Contact></Contact>
</div>
</div>
</div>
</div>
);
};
export { AccordionFooter };

BIN
src/components/AccordionFooter/assets/image/mais.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 B

3
src/components/Address/address.module.scss
View File

@ -1,4 +1,5 @@
.endereco {
display: flex;
width: 234px;
height: 24px;
font-family: "Roboto";
@ -9,7 +10,7 @@
text-transform: capitalize;
color: white;
margin: 0 0 0 0;
align-items: center;
@media screen and (min-width: 2500px) {
width: 467px;
height: 47px;

2
src/components/FormInput/formInput.module.scss
View File

@ -1,6 +1,6 @@
.form-wrapper {
width: 100%;
max-width: 748px;
//max-width: 748px;
//min-height: 100vh;
margin: 0 auto;
//padding: 0 12px;

38
src/components/Newsletter/newsletter.module.scss
View File

@ -15,11 +15,11 @@
@media screen and (min-width: 2500px) {
font-size: 36px;
}
.newsForm-wrapper {
display: flex;
flex-direction: row;
margin-top: 8px;
}
}
.newsForm-wrapper {
display: flex;
flex-direction: row;
margin-top: 8px;
}
.newsForm-input {
margin-right: 8px;
@ -63,3 +63,31 @@
font-size: 24px;
}
}
@media screen and (max-width: 1024px) {
.newsForm {
width: 100%;
margin: 16px;
padding: 0 16px 0 16px;
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
font-variant: small-caps;
color: #303030;
}
.newsForm-wrapper {
display: flex;
flex-direction: column;
}
.newsForm-btn {
width: 100%;
margin-top: 16px;
}
.newsForm-input {
width: 100%;
}
}

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>
</>
);
};

1
src/styles/main.scss
View File

@ -9,5 +9,6 @@
@import "partials/bottom_header.scss";
@import "partials/body.scss";
@import "partials/top_footer.scss";
@import "partials/accordionBody.scss";
@import "partials/footer.scss";
@import "partials/bottom_footer.scss";

20
src/styles/partials/accordionBody.scss Normal file
View File

@ -0,0 +1,20 @@
.accList {
width: 100%;
a {
background-color: white;
border-radius: 0;
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
@media screen and (min-width: 2500px) {
font-size: 32px;
line-height: 38px;
}
}
border-right: 1px solid black;
}
.contato-item {
width: 100%;
}

3
src/styles/partials/body.scss
View File

@ -2,13 +2,14 @@
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.institucional-title {
font-family: "Roboto";
font-weight: 400;
font-size: 24px;
line-height: 28.13px;
display: flex;
justify-content: center;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 56.25px;

10
src/styles/partials/bottom_footer.scss
View File

@ -28,3 +28,13 @@
flex-direction: row;
gap: 13px;
}
@media screen and (max-width: 1024px) {
.bottom_footer {
flex-direction: column;
gap: 15px;
padding: 15px 0 15px 16px;
}
.pagamentos {
order: -1;
}
}

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

@ -5,9 +5,47 @@
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;
border-top: 1px solid black;
margin-top: 79px;
padding: 0 0 0 12px;
}
.acc_footer {
width: 100%;
}
.acc_btn {
&::after {
background-image: url("../../components/AccordionFooter/assets/image/mais.png");
}
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #303030;
padding: 12px;
}
.top_footer_socials {
margin-top: 8px;
}
}
@media screen and (min-width: 1025px) {
.top_footerMob_wrapper {
display: none;
}
}