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

feat(footer): Criação dos componentes de contato, institucional, dúvidas

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2023-01-11 12:35:24 -03:00
parent e5434d0174
commit 99ecc6b354
8 changed files with 170 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Contact/Contact.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import styles from "./contact.module.scss";
const Contact = () => {
return (
<div className={styles["contatosInfo"]}>
<h2>FALE CONOSCO</h2>
<p>Atendimento Ao Consumidor</p>
<a href="tel:+551141599504">(11) 4159 9504</a>
<p>Atendimento Online</p>
<a className={styles["contatoCel"]} href="tel:+551199433">
(11) 99433 8825
</a>
</div>
);
};
export { Contact };

19
src/components/Contact/contact.module.scss Normal file
View File

@ -0,0 +1,19 @@
.contatosInfo {
margin-bottom: 12px;
h2 {
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
p {
font-size: 12px;
line-height: 14px;
font-weight: 500;
}
a {
text-decoration: none;
font-weight: 400;
font-size: 12px;
line-height: 14px;
}
}

30
src/components/Doubts/Doubts.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import styles from "./doubts.module.scss";
const Doubts = () => {
return (
<ul className={styles["doubtsList"]}>
<li>
<a href="/">
<h2>DÚVIDAS</h2>
</a>
</li>
<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["duvidasFreq"]} href="/">
Dúvidas Frequentes
</a>
</li>
</ul>
);
};
export { Doubts };

32
src/components/Doubts/doubts.module.scss Normal file
View File

@ -0,0 +1,32 @@
.doubtsList {
li {
color: #303030;
margin-bottom: 12px;
@media screen and (min-width: 2500px) {
}
}
a {
font-size: 12px;
line-height: 14.06px;
font-weight: 400;
text-decoration: none;
color: #303030;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 29px;
}
h2 {
font-size: 14px;
font-weight: 500;
line-height: 16.41px;
color: #303030;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
.duvidasFreq {
text-decoration: underline;
}
}

30
src/components/Institutional/Institutional.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import styles from "./institutional.module.scss";
const Institutional = () => {
return (
<ul className={styles["institutionalList"]}>
<li>
<a href="/">
<h2>INSTITUCIONAL</h2>
</a>
</li>
<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["revendedor"]} href="/">
Seja um Revendedor
</a>
</li>
</ul>
);
};
export { Institutional };

32
src/components/Institutional/institutional.module.scss Normal file
View File

@ -0,0 +1,32 @@
.institutionalList {
li {
color: #303030;
margin-bottom: 12px;
@media screen and (min-width: 2500px) {
}
}
a {
font-size: 12px;
line-height: 14.06px;
font-weight: 400;
text-decoration: none;
color: #303030;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 29px;
}
h2 {
font-size: 14px;
font-weight: 500;
line-height: 16.41px;
color: #303030;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
.revendedor {
text-decoration: underline;
}
}

7
src/pages/Home.tsx
View File

@ -1,7 +1,12 @@
import React from "react";
import { Contact } from "../components/Contact/Contact";
const Home = () => {
return <div>{}</div>;
return (
<div>
<Contact></Contact>
</div>
);
};
export { Home };

4
src/styles/common/global.scss
View File

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
* {
margin: 0;
padding: 0;
@ -6,7 +8,7 @@
body,
input,
button {
font-family: sans-serif;
font-family: "Roboto";
font-size: 16px;
color: #333;
}