Thiago.bronisio/desafio-react-e-typescript-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona responsividade e layout do figma completo em todas as telas #4

Merged
Thiago.bronisio merged 1 commits from feature/footer into main 2023-01-04 02:13:11 +00:00
Conversation 0 Commits 1 Files Changed 11 +573 -493
11 changed files with 573 additions and 493 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/img/titleLinks.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

6
src/components/Footer/Footer.tsx
View File

@ -1,7 +1,7 @@
import React from "react"
import LinksFooter from "../LinksFooter/LinksFooter"
import FooterSelosDev from "../FooterSelosDev/FooterSelosDev"
import Newsletter from "../Newsletter/Newsletter"
import LinksFooter from "./LinksFooter/LinksFooter"
import FooterSelosDev from "./FooterSelosDev/FooterSelosDev"
import Newsletter from "./Newsletter/Newsletter"
export function Footer() {
return (

125
src/components/FooterSelosDev/FooterSelosDev.module.scss → src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
View File

@ -7,9 +7,19 @@
background-color: var(--black);
color: var(--white);
@media screen and (max-width: 1024px) {
display: grid;
padding: 15px 16px;
}
&__text {
width: 234px;
height: 24px;
width: 21.667%;
min-height: 24px;
@media screen and (max-width: 1024px) {
margin: 15px 0;
width: 234px;
}
@media screen and (min-width: 2500px) {
width: 467px;
@ -37,6 +47,11 @@
display: flex;
width: 398.61px;
@media screen and (max-width: 1024px) {
order: -1;
width: 100%;
}
@media screen and (min-width: 2500px) {
width: 692px;
height: 66px;
@ -52,76 +67,11 @@
height: 66px;
}
li:nth-child(1) {
width: 36px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 39.27px;
}
}
li:nth-child(2) {
width: 35px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 40.25px;
}
}
li:nth-child(3) {
width: 35px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 40.25px;
}
}
li:nth-child(4) {
width: 37px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 38.33px;
}
}
li:nth-child(5) {
width: 35px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 40.25px;
}
}
li:nth-child(6) {
width: 34px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 39.27px;
}
}
li:nth-child(7) {
width: 36px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 39.27px;
}
}
li:last-child {
width: 54.61px;
margin-right: 0;
@media screen and (min-width: 2500px) {
width: 106px;
height: 66px;
}
}
li {
margin-right: 12px;
figure:last-child {
height: 100%;
@media screen and (max-width: 1024px) {
margin-right: 11px;
}
figure {
@ -130,7 +80,33 @@
align-items: center;
img {
width: 100%;
width: 35px;
height: 20px;
@media screen and (max-width: 1024px) {
width: 100%;
height: 17px;
}
@media screen and (min-width: 2500px) {
width: 70px;
height: 39.27px;
}
}
.img-vtexCertified {
width: 54.61px;
height: 34px;
@media screen and (max-width: 1024px) {
width: 45px;
height: 28px;
}
@media screen and (min-width: 2500px) {
width: 106px;
height: 66px;
}
}
}
}
@ -143,6 +119,11 @@
display: flex;
align-items: center;
margin-right: 12px;
@media screen and (max-width: 1024px) {
margin-right: 11px;
height: 20px;
}
}
}
}
@ -150,6 +131,10 @@
&__devs {
display: flex;
@media screen and (max-width: 1024px) {
width: 100%;
}
div:nth-child(1) {
margin-right: 13px;
}

23
src/components/FooterSelosDev/FooterSelosDev.tsx → src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
View File

@ -1,24 +1,23 @@
import React from "react"
import styleSelosDev from "./FooterSelosDev.module.scss"
import masterCard from "../../assets/img/master.svg"
import visaCard from "../../assets/img/visa.svg"
import americanCard from "../../assets/img/american-express.svg"
import eloCard from "../../assets/img/elo.svg"
import hiperCard from "../../assets/img/hiper.svg"
import paypalCard from "../../assets/img/paypal.svg"
import boletoCard from "../../assets/img/boleto.svg"
import vtexCertifiedCard from "../../assets/img/vtex.svg"
import masterCard from "../../../assets/img/master.svg"
import visaCard from "../../../assets/img/visa.svg"
import americanCard from "../../../assets/img/american-express.svg"
import eloCard from "../../../assets/img/elo.svg"
import hiperCard from "../../../assets/img/hiper.svg"
import paypalCard from "../../../assets/img/paypal.svg"
import boletoCard from "../../../assets/img/boleto.svg"
import vtexCertifiedCard from "../../../assets/img/vtex.svg"
import vtexDev from "../../assets/img/vtex-dev.svg"
import m3 from "../../assets/img/m3.svg"
import vtexDev from "../../../assets/img/vtex-dev.svg"
import m3 from "../../../assets/img/m3.svg"
export default function FooterSelosDev() {
return (
<section className={styleSelosDev["container"]}>
<div className={styleSelosDev["container__text"]}>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
@ -71,7 +70,7 @@ export default function FooterSelosDev() {
<li>
<figure>
<img src={vtexCertifiedCard} alt="Imagem Vetex Certified" />
<img className={styleSelosDev["img-vtexCertified"]} src={vtexCertifiedCard} alt="Imagem Vetex Certified" />
</figure>
</li>
</ul>

357
src/components/Footer/LinksFooter/LinksFooter.module.scss Normal file
View File

@ -0,0 +1,357 @@
.container {
padding: 50px 100px;
display: flex;
@media screen and (max-width: 1024px) {
padding: 24px 16px;
display: block;
}
&__links {
display: flex;
justify-content: space-between;
width: 65.463%;
@media screen and (max-width: 1024px) {
display: block;
width: 100%;
}
&__rodape {
&__title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
margin-bottom: 12px;
text-transform: uppercase;
@media screen and (max-width: 1025px) {
display: flex;
justify-content: space-between;
}
button {
background: transparent;
border: none;
width: 7.8px;
height: 8.28px;
@media screen and (min-width: 1025px) {
display: none;
}
img {
width: 7.8px;
height: 8.28px;
}
}
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
&__institucional {
width: 155px;
list-style: none;
@media screen and (max-width: 1024px) {
width: 100%;
}
@media screen and (min-width: 2500px) {
width: 315px;
}
li:last-child {
margin-bottom: 0;
text-decoration: underline;
}
li {
margin-bottom: 12px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (max-width: 1024px) {
display: none;
}
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
a {
text-decoration: none;
color: var(--black-100);
}
}
}
&__duvidas {
list-style: none;
@media screen and (max-width: 1024px) {
margin: 12px 0;
width: 100%;
}
@media screen and (min-width: 2500px) {
width: 315px;
}
li:last-child {
margin-bottom: 0;
text-decoration: underline;
}
li {
margin-bottom: 12px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (max-width: 1024px) {
display: none;
}
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
a {
text-decoration: none;
color: var(--black-100);
}
}
&__fale-conosco {
width: 155px;
list-style: none;
@media screen and (max-width: 1024px) {
width: 100%;
}
@media screen and (min-width: 2500px) {
width: 315px;
}
.title {
display: flex;
justify-content: space-between;
font-weight: 500;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
margin-bottom: 12px;
text-transform: uppercase;
button {
background: transparent;
border: none;
width: 7.8px;
height: 8.28px;
@media screen and (min-width: 1025px) {
display: none;
}
img {
width: 7.8px;
height: 8.28px;
}
}
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
li:last-child {
margin-bottom: 0;
text-decoration: underline;
}
li:nth-child(2) {
font-weight: 500;
}
li:nth-child(4) {
font-weight: 500;
}
li {
margin-bottom: 12px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (max-width: 1024px) {
display: none;
}
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
a {
text-decoration: none;
color: var(--black-100);
}
}
}
}
&__social-networks {
width: 34.537%;
@media screen and (max-width: 1024px) {
width: 100%;
display: flex;
justify-content: flex-start;
}
&__circles {
display: flex;
justify-content: flex-end;
list-style: none;
li:last-child {
margin-right: 0;
}
li {
position: relative;
width: 35px;
height: 35px;
border: 2px solid var(--black-100);
border-radius: 50%;
margin-right: 10px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 70px;
}
.facebook {
width: 10.16px;
height: 19.62px;
position: absolute;
left: 9px;
top: 4px;
@media screen and (min-width: 2500px) {
width: 20.33px;
height: 39.23px;
left: 22px;
top: 12px;
}
}
.instagram {
width: 19.65px;
height: 19.62px;
position: absolute;
left: 5px;
top: 4px;
@media screen and (min-width: 2500px) {
width: 39.29px;
height: 39.29px;
left: 13px;
top: 12px;
}
}
.twitter {
width: 24.11px;
height: 19.59px;
position: absolute;
left: 3px;
top: 5px;
@media screen and (min-width: 2500px) {
width: 48.23px;
height: 39.18px;
left: 10px;
top: 12px;
}
}
.youtube {
width: 22.39px;
height: 15.64px;
position: absolute;
left: 3.5px;
top: 6.3px;
@media screen and (min-width: 2500px) {
width: 44.77px;
height: 31.35px;
left: 11px;
top: 16px;
}
}
.linkedlin {
width: 15.64px;
height: 15.64px;
position: absolute;
left: 7px;
top: 5px;
@media screen and (min-width: 2500px) {
width: 31.35px;
height: 31.28px;
left: 17px;
top: 15px;
}
}
}
}
}
&__lorem {
margin-top: 12px;
display: flex;
justify-content: flex-end;
@media screen and (max-width: 1024px) {
display: none;
}
p {
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
}
}

113
src/components/Footer/LinksFooter/LinksFooter.tsx Normal file
View File

@ -0,0 +1,113 @@
import React from "react"
import styleLink from "./LinksFooter.module.scss"
import facebook from "../../../assets/img/facebook.svg"
import instagram from "../../../assets/img/instagram.svg"
import twitter from "../../../assets/img/twitter.svg"
import youtube from "../../../assets/img/youtube.svg"
import linkedlin from "../../../assets/img/linkedlin.svg"
import titleLinks from "../../../assets/img/titleLinks.svg"
export default function LinksFooter() {
const titleLink = document.querySelector(".container__links__rodape__title") as HTMLHeadingElement;
console.log(titleLink)
return (
<section className={styleLink["container"]}>
<div className={styleLink["container__links"]}>
<div className={styleLink["container__links__rodape"]}>
<h2 className={styleLink["container__links__rodape__title"]}>Institucional
<button>
<img src={titleLinks} alt="Imagem para expandir lista" />
</button>
</h2>
<ul className={styleLink["container__links__rodape__institucional"]}>
<li><a href="/teste">Quem Somos</a></li>
<li><a href="/teste">Política de Privacidade</a></li>
<li><a href="/teste">Segurança</a></li>
<li><a href="/teste">Seja um Revendedor</a></li>
</ul>
</div>
<div className={styleLink["container__links__rodape"]}>
<h2 className={styleLink["container__links__rodape__title"]}>Dúvidas
<button>
<img src={titleLinks} alt="Imagem para expandir lista" />
</button>
</h2>
<ul className={styleLink["container__links__rodape__duvidas"]}>
<li><a href="/teste">Entrega</a></li>
<li><a href="/teste">Pagamento</a></li>
<li><a href="/teste">Trocas e Devoluções</a></li>
<li><a href="/teste">Dúvidas Frequentes</a></li>
</ul>
</div>
<div className={styleLink["container__links__rodape"]}>
<h2 className={styleLink["container__links__rodape__title"]}>Fale Conosco
<button className={styleLink["button"]}>
<img src={titleLinks} alt="Imagem para expandir lista" />
</button>
</h2>
<ul className={styleLink["container__links__rodape__fale-conosco"]}>
<li><a href="/teste">Atendimento ao Consumidor</a></li>
<li><a href="/teste">{"(11) 4159 9504"}</a></li>
<li><a href="/teste">Atendimento Online</a></li>
<li><a href="/teste">{"(11) 99433-8825"}</a></li>
</ul>
</div>
</div>
<div className={styleLink["container__social-networks"]}>
<ul className={styleLink["container__social-networks__circles"]}>
<li>
<a href="/teste">
<figure>
<img className={styleLink["facebook"]} src={facebook} alt="Imagem Facebook" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["instagram"]} src={instagram} alt="Imagem Instagram" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["twitter"]} src={twitter} alt="Imagem Twitter" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["youtube"]} src={youtube} alt="Imagem Youtube" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["linkedlin"]} src={linkedlin} alt="Imagem Linkedlin" />
</figure>
</a>
</li>
</ul>
<div className={styleLink["container__lorem"]}>
<p>www.loremipsum.com</p>
</div>
</div>
</section>
)
}

35
src/components/Newsletter/Newsletter.module.scss → src/components/Footer/Newsletter/Newsletter.module.scss
View File

@ -9,6 +9,11 @@
padding: 16px 0;
width: 474px;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 16px;
}
@media screen and (min-width: 2500px) {
width: 922px;
}
@ -21,6 +26,12 @@
letter-spacing: 0.05em;
font-variant: small-caps;
@media screen and (max-width: 1024px) {
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
@media screen and (min-width: 2500px) {
font-weight: 500;
font-size: 36px;
@ -30,7 +41,11 @@
&__input-button {
display: flex;
align-items: end;
align-items: flex-end;
@media screen and (max-width: 1024px) {
display: block;
}
input {
width: 340px;
height: 42px;
@ -44,17 +59,22 @@
font-size: 14px;
line-height: 16px;
&::placeholder {
color: var(--gray-100);
@media screen and (max-width: 1024px) {
width: 100%;
height: 50px;
margin: 16px 0;
}
@media screen and (min-width: 2500px) {
width: 668px;
height: 59px;
font-size: 28px;
line-height: 33px;
}
&::placeholder {
color: var(--gray-100);
}
}
button {
@ -73,6 +93,13 @@
letter-spacing: 0.05em;
color: var(--white);
@media screen and (max-width: 1024px) {
width: 100%;
height: 50px;
font-size: 14px;
line-height: 16px;
}
@media screen and (min-width: 2500px) {
width: 246px;
height: 59px;

0
src/components/Newsletter/Newsletter.tsx → src/components/Footer/Newsletter/Newsletter.tsx
View File

315
src/components/LinksFooter/LinksFooter.module.scss
View File

@ -1,315 +0,0 @@
.container {
padding: 50px 100px;
display: flex;
&__links {
display: flex;
width: 100%;
margin: 0 auto;
&__institucional {
width: 155px;
list-style: none;
@media screen and (min-width: 2500px) {
width: 315px;
}
.title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
margin-bottom: 12px;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
li:last-child {
margin-bottom: 0;
text-decoration: underline;
}
li {
margin-bottom: 12px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
a {
text-decoration: none;
color: var(--black-100);
}
}
}
&__duvidas {
margin: 0 121px;
list-style: none;
@media screen and (min-width: 2500px) {
width: 315px;
}
.title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
margin-bottom: 12px;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
li:last-child {
margin-bottom: 0;
text-decoration: underline;
}
li {
margin-bottom: 12px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
a {
text-decoration: none;
color: var(--black-100);
}
}
&__fale-conosco {
width: 155px;
list-style: none;
@media screen and (min-width: 2500px) {
width: 315px;
}
.title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
margin-bottom: 12px;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
li:last-child {
margin-bottom: 0;
text-decoration: underline;
}
li:nth-child(2) {
font-weight: 500;
}
li:nth-child(4) {
font-weight: 500;
}
li {
margin-bottom: 12px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
a {
text-decoration: none;
color: var(--black-100);
}
}
}
&__social-networks {
width: 19.908%;
@media screen and (min-width: 2500px) {
width: 20.419%;
}
&__circles {
display: flex;
list-style: none;
li:last-child {
margin-right: 0;
}
li {
position: relative;
width: 35px;
height: 35px;
border: 2px solid var(--black-100);
border-radius: 50%;
margin-right: 10px;
@media screen and (min-width: 1025px) and (max-width: 1279px) {
width: 30px;
height: 30px;
}
@media screen and (min-width: 2500px) {
width: 70px;
height: 70px;
}
.facebook {
width: 10.16px;
height: 19.62px;
position: absolute;
left: 9px;
top: 4px;
@media screen and (min-width: 1025px) and (max-width: 1279px) {
left: 7.5px;
top: 4px;
}
@media screen and (min-width: 2500px) {
width: 20.33px;
height: 39.23px;
left: 22px;
top: 12px;
}
}
.instagram {
width: 19.65px;
height: 19.62px;
position: absolute;
left: 5px;
top: 4px;
@media screen and (min-width: 1025px) and (max-width: 1279px) {
left: 3px;
top: 3px;
}
@media screen and (min-width: 2500px) {
width: 39.29px;
height: 39.29px;
left: 13px;
top: 12px;
}
}
.twitter {
width: 24.11px;
height: 19.59px;
position: absolute;
left: 3px;
top: 5px;
@media screen and (min-width: 1025px) and (max-width: 1279px) {
left: 1px;
top: 4px;
}
@media screen and (min-width: 2500px) {
width: 48.23px;
height: 39.18px;
left: 10px;
top: 12px;
}
}
.youtube {
width: 22.39px;
height: 15.64px;
position: absolute;
left: 3.5px;
top: 6.3px;
@media screen and (min-width: 1025px) and (max-width: 1279px) {
left: 1.5px;
top: 5px;
}
@media screen and (min-width: 2500px) {
width: 44.77px;
height: 31.35px;
left: 11px;
top: 16px;
}
}
.linkedlin {
width: 15.64px;
height: 15.64px;
position: absolute;
left: 7px;
top: 5px;
@media screen and (min-width: 1025px) and (max-width: 1279px) {
left: 5px;
top: 3px;
}
@media screen and (min-width: 2500px) {
width: 31.35px;
height: 31.28px;
left: 17px;
top: 15px;
}
}
}
}
}
&__lorem {
margin-top: 12px;
p {
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--black-100);
@media screen and (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
}
}

88
src/components/LinksFooter/LinksFooter.tsx
View File

@ -1,88 +0,0 @@
import React from "react"
import styleLink from "./LinksFooter.module.scss"
import facebook from "../../assets/img/facebook.svg"
import instagram from "../../assets/img/instagram.svg"
import twitter from "../../assets/img/twitter.svg"
import youtube from "../../assets/img/youtube.svg"
import linkedlin from "../../assets/img/linkedlin.svg"
export default function LinksFooter() {
return (
<section className={styleLink["container"]}>
<div className={styleLink["container__links"]}>
<ul className={styleLink["container__links__institucional"]}>
<li className={styleLink["title"]}>INSTITUCIONAL</li>
<li><a href="/teste">Quem Somos</a></li>
<li><a href="/teste">Política de Privacidade</a></li>
<li><a href="/teste">Segurança</a></li>
<li><a href="/teste">Seja um Revendedor</a></li>
</ul>
<ul className={styleLink["container__links__duvidas"]}>
<li className={styleLink["title"]}>DÚVIDAS</li>
<li><a href="/teste">Entrega</a></li>
<li><a href="/teste">Pagamento</a></li>
<li><a href="/teste">Trocas e Devoluções</a></li>
<li><a href="/teste">Dúvidas Frequentes</a></li>
</ul>
<ul className={styleLink["container__links__fale-conosco"]}>
<li className={styleLink["title"]}>FALE CONOSCO</li>
<li><a href="/teste">Atendimento ao Consumidor</a></li>
<li><a href="/teste">{"(11) 4159 9504"}</a></li>
<li><a href="/teste">Atendimento Online</a></li>
<li><a href="/teste">{"(11) 99433-8825"}</a></li>
</ul>
</div>
<div className={styleLink["container__social-networks"]}>
<ul className={styleLink["container__social-networks__circles"]}>
<li>
<a href="/teste">
<figure>
<img className={styleLink["facebook"]} src={facebook} alt="Imagem Facebook" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["instagram"]} src={instagram} alt="Imagem Instagram" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["twitter"]} src={twitter} alt="Imagem Twitter" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["youtube"]} src={youtube} alt="Imagem Youtube" />
</figure>
</a>
</li>
<li>
<a href="/teste">
<figure>
<img className={styleLink["linkedlin"]} src={linkedlin} alt="Imagem Linkedlin" />
</figure>
</a>
</li>
</ul>
<div className={styleLink["container__lorem"]}>
<p>www.loremipsum.com</p>
</div>
</div>
</section>
)
}

1
src/pages/Home.tsx
View File

@ -6,7 +6,6 @@ const Home = () => {
return (
<>
<Header />
<h1>teste</h1>
<Footer />
</>
)