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

feature/footer #3

Merged
cainamilech merged 13 commits from feature/footer into develop 2023-01-10 14:49:35 +00:00
Conversation 0 Commits 13 Files Changed 47 +187 -5
7 changed files with 187 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d2b9622f02 - Show all commits

2
react-project/src/assets/styles/variables.scss
View File

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
:root {
--font-roboto: "Roboto", sans-serif;

6
react-project/src/components/Footer/Footer.tsx
View File

@ -1,5 +1,6 @@
import { Newsletter } from "./Newsletter";
import { Links } from "./Links";
import { SitemapAccordion } from "./SitemapAccordion";
import { Sitemap } from "./Sitemap";
import footer from "./assets/modules/Footer.module.scss";
@ -9,7 +10,8 @@ const Footer = () => {
<Newsletter />
<div className={footer["wrapper"]}>
<Links />
<Sitemap />
<SitemapAccordion />
<div>REDES SOCIAIS</div>
</div>
</footer>

65
react-project/src/components/Footer/Sitemap.tsx Normal file
View File

@ -0,0 +1,65 @@
import sitemap from "./assets/modules/Sitemap.module.scss";
const Sitemap = () => {
return (
<div className={sitemap["sitemap"]}>
<div className={sitemap["sitemap__col"]}>
<h4>Institucional</h4>
<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 href="/">Seja um Revendedor</a>
</li>
</ul>
</div>
<div className={sitemap["sitemap__col"]}>
<h4>Dúvidas</h4>
<ul>
<li>
<a href="/">Entrega</a>
</li>
<li>
<a href="/">Pagamento</a>
</li>
<li>
<a href="/">Trocas e Devoluções</a>
</li>
<li>
<a href="/">Dúvidas Frequentes</a>
</li>
</ul>
</div>
<div className={sitemap["sitemap__col"]}>
<h4>Fale Conosco</h4>
<ul>
<li>
<span>Atendimento Ao Consumidor</span>
</li>
<li>
<a href="tel:1141599504">(11) 4159 9504</a>
</li>
<li>
<span>Atendimento Online</span>
</li>
<li>
<a href="tel:11994338825">(11) 99433-8825</a>
</li>
</ul>
</div>
</div>
);
};
export { Sitemap };

6
react-project/src/components/Footer/Links.tsx → react-project/src/components/Footer/SitemapAccordion.tsx
View File

@ -5,11 +5,11 @@ import {
AccordionItem,
} from "react-headless-accordion";
import links from "./assets/modules/Links.module.scss";
import links from "./assets/modules/SitemapAccordion.module.scss";
import more from "./assets/svgs/more.svg";
const Links = () => {
const SitemapAccordion = () => {
return (
<Accordion className={links["accordion"]} alwaysOpen={true}>
<AccordionItem>
@ -87,4 +87,4 @@ const Links = () => {
);
};
export { Links };
export { SitemapAccordion };

40
react-project/src/components/Footer/assets/modules/Newsletter.module.scss
View File

@ -25,6 +25,11 @@
letter-spacing: 0.05em;
margin-bottom: 8px;
@media screen and (min-width: 2500px) {
font-size: 36px;
line-height: 42px;
}
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 16px;
@ -34,6 +39,7 @@
form {
position: relative;
display: flex;
input {
padding: 13px 16px;
@ -47,6 +53,13 @@
height: 42px;
margin-right: 8px;
@media screen and (min-width: 2500px) {
width: 668px;
height: 59px;
font-size: 28px;
line-height: 33px;
}
@media screen and (max-width: 1024px) {
padding: 17px 16px;
height: 50px;
@ -61,6 +74,13 @@
font-size: 14px;
line-height: 16px;
color: var(--gray-100);
@media screen and (min-width: 2500px) {
width: 668px;
height: 59px;
font-size: 28px;
line-height: 33px;
}
}
}
@ -79,6 +99,13 @@
letter-spacing: 0.05em;
cursor: pointer;
@media screen and (min-width: 2500px) {
width: 246px;
height: 59px;
font-size: 24px;
line-height: 28px;
}
@media screen and (max-width: 1024px) {
width: 100%;
height: 50px;
@ -100,6 +127,12 @@
line-height: 12px;
color: var(--red-100);
@media screen and (min-width: 2500px) {
top: 60px;
font-size: 13px;
line-height: 15px;
}
@media screen and (max-width: 1024px) {
left: unset;
right: 2px;
@ -116,6 +149,13 @@
line-height: 12px;
color: var(--green-100);
@media screen and (min-width: 2500px) {
top: 60px;
left: 250px;
font-size: 13px;
line-height: 15px;
}
@media screen and (max-width: 1024px) {
left: 2px;
top: 50px;

67
react-project/src/components/Footer/assets/modules/Sitemap.module.scss Normal file
View File

@ -0,0 +1,67 @@
.sitemap {
display: flex;
gap: 121px;
@media screen and (max-width: 1024px) {
display: none;
}
&__col {
width: 155px;
@media screen and (min-width: 2500px) {
width: 315px;
}
h4 {
margin-bottom: 12px;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: var(--black-200);
text-transform: uppercase;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
ul {
list-style: none;
li {
margin-bottom: 12px;
a {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--black-200);
text-decoration: none;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
span {
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: var(--black-200);
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
&:last-child {
text-decoration: underline;
}
}
}
}
}

6
react-project/src/components/Footer/assets/modules/Links.module.scss → react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss
View File

@ -1,5 +1,9 @@
.accordion {
width: 100%;
@media screen and (min-width: 1025px) {
display: none;
}
button {
width: 100%;
display: flex;
@ -19,6 +23,8 @@
}
ul {
list-style: none;
li {
margin-bottom: 12px;