forked from M3-Academy/desafio-react-e-typescript
feat(footer): ajuste de rotas e estilos, move imagens para assets de cada componente
This commit is contained in:
parent
b33c70b7be
commit
baaa2ee267
@ -1,15 +1,13 @@
|
||||
.floating-icons-wrapper {
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 190px;
|
||||
|
||||
bottom: 198px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
padding: 0;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
bottom: 229.24px;
|
||||
}
|
||||
@ -24,8 +22,8 @@
|
||||
}
|
||||
|
||||
.whatsapp-button {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
img {
|
||||
@ -41,12 +39,12 @@
|
||||
}
|
||||
|
||||
.up-button {
|
||||
background: #c4c4c4;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
padding: 13.5px 10.5px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 13.5px 10.5px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #c4c4c4;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
width: 66px;
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import whatsapp from "./assets/whatsapp-icon.svg";
|
||||
import arrowUp from "./assets/arrow-up.svg";
|
||||
|
||||
import styles from "./FloatingIcons.module.scss";
|
||||
|
||||
import whatsapp from "../assets/whatsapp-icon.svg";
|
||||
import arrowUp from "../assets/arrow-up.svg";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const FloatingIcons = () => {
|
||||
return (
|
||||
<div className={styles["floating-icons-wrapper"]}>
|
||||
<button className={styles["whatsapp-button"]}>
|
||||
<a href="web.whatsapp.com">
|
||||
<a href="https://wa.me/551141599504" target="blank">
|
||||
<img src={whatsapp} alt="Ícone do WhatsApp" />
|
||||
</a>
|
||||
</button>
|
||||
|
||||
|
Before Width: | Height: | Size: 891 B After Width: | Height: | Size: 891 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@ -3,24 +3,22 @@
|
||||
padding: 50px 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// gap: 158px;
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
padding: 24px 16px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 24px 16px;
|
||||
|
||||
}
|
||||
|
||||
.social-links {
|
||||
p {
|
||||
a {
|
||||
margin: 12px 0 0;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
margin: 12px 0 0;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
font-size: 28px;
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React from "react";
|
||||
import { FloatingIcons } from "./FloatingIcons/FloatingIcons";
|
||||
|
||||
import styles from "./Footer.module.scss";
|
||||
import { FloatingIcons } from "./FloatingIcons/FloatingIcons";
|
||||
import { FooterBottom } from "./FooterBottom/FooterBottom";
|
||||
import { Newsletter } from "./Newsletter/Newsletter";
|
||||
import { SiteMap } from "./SiteMap/SiteMap";
|
||||
import { SocialMedia } from "./SocialMedia/SocialMedia";
|
||||
|
||||
import styles from "./Footer.module.scss";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className={styles["container"]}>
|
||||
@ -15,7 +16,7 @@ const Footer = () => {
|
||||
<SiteMap />
|
||||
<div className={styles["social-links"]}>
|
||||
<SocialMedia />
|
||||
<p>www.loremipsum.com</p>
|
||||
<a href="https://m3ecommerce.com/">www.loremipsum.com</a>
|
||||
</div>
|
||||
<FloatingIcons />
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
.container {
|
||||
background: #000000;
|
||||
padding: 15px 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// gap: 110.41px;
|
||||
padding: 15px 100px;
|
||||
background: #000000;
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
padding: 15px 16px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"paymentSolutions"
|
||||
"address"
|
||||
"authors";
|
||||
gap: 15px;
|
||||
padding: 15px 16px;
|
||||
}
|
||||
|
||||
.address {
|
||||
@ -24,7 +23,6 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
// background-color: yellow;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
@ -43,10 +41,7 @@
|
||||
.payment-solutions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
gap: 12px;
|
||||
// justify-self: center;
|
||||
// background-color: cyan;
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
grid-area: paymentSolutions;
|
||||
@ -56,11 +51,9 @@
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
.payment-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
@ -69,8 +62,6 @@
|
||||
}
|
||||
|
||||
li {
|
||||
// transition: all 0.2s ease-in-out;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
@ -85,12 +76,6 @@
|
||||
width: 100%; //30px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
// &:hover {
|
||||
// border-radius: 50%;
|
||||
// background: #292929;
|
||||
// color: white;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -127,17 +112,16 @@
|
||||
}
|
||||
|
||||
.authors {
|
||||
// background-color: magenta;
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
// justify-self: end;
|
||||
gap: 13px;
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
grid-area: authors;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -145,7 +129,6 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
font-size: 20px;
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "./FooterBottom.module.scss";
|
||||
import Master from "./assets/Master.svg";
|
||||
import Visa from "./assets/Visa.svg";
|
||||
import Amex from "./assets/Diners.svg";
|
||||
import Elo from "./assets/Elo.svg";
|
||||
import Hipercard from "./assets/Hiper.svg";
|
||||
import Paypal from "./assets/Pagseguro.svg";
|
||||
import Boleto from "./assets/Boleto.svg";
|
||||
import PCI from "./assets/vtex-pci-200.svg";
|
||||
import VtexIcon from "./assets/vtex-icon.svg";
|
||||
import M3Icon from "./assets/m3-icon.svg";
|
||||
|
||||
import Master from "../assets/Master.svg";
|
||||
import Visa from "../assets/Visa.svg";
|
||||
import Amex from "../assets/Diners.svg";
|
||||
import Elo from "../assets/Elo.svg";
|
||||
import Hipercard from "../assets/Hiper.svg";
|
||||
import Paypal from "../assets/Pagseguro.svg";
|
||||
import Boleto from "../assets/Boleto.svg";
|
||||
import PCI from "../assets/vtex-pci-200.svg";
|
||||
import VtexIcon from "../assets/vtex-icon.svg";
|
||||
import M3Icon from "../assets/m3-icon.svg";
|
||||
import styles from "./FooterBottom.module.scss";
|
||||
|
||||
const PaymentSolutions = [
|
||||
{
|
||||
@ -52,7 +52,7 @@ const FooterBottom = () => {
|
||||
<span>elit, sed do eiusmod tempor</span>
|
||||
</div>
|
||||
<div className={styles["payment-solutions"]}>
|
||||
<ul className={styles["menu-list"]}>
|
||||
<ul className={styles["payment-list"]}>
|
||||
{PaymentSolutions.map((item, index) => (
|
||||
<li key={index}>
|
||||
<img src={item.src} alt={item.alt} />
|
||||
@ -66,13 +66,17 @@ const FooterBottom = () => {
|
||||
</div>
|
||||
<div className={styles["authors"]}>
|
||||
<p>Powered by</p>
|
||||
<img
|
||||
src={VtexIcon}
|
||||
alt="Logo da VTEX"
|
||||
className={styles["vtex-icon"]}
|
||||
/>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<img
|
||||
src={VtexIcon}
|
||||
alt="Logo da VTEX"
|
||||
className={styles["vtex-icon"]}
|
||||
/>
|
||||
</a>
|
||||
<p>Developed by</p>
|
||||
<img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]} />
|
||||
<a href="https://m3ecommerce.com/a-empresa/">
|
||||
<img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@ -1,32 +1,28 @@
|
||||
.container {
|
||||
// width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 37.03%; // 474px;
|
||||
grid-template-columns: 37.03%; //474px;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #000000;
|
||||
border-bottom: 1px solid #000000;
|
||||
// background: yellow;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
grid-template-columns: 36.88%; // 474px;
|
||||
grid-template-columns: 36.88%; //922px;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
// width: calc(100% - 32px);
|
||||
grid-template-columns: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
// background-color: blue;
|
||||
margin: 0 0 8px;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
// letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: #303030;
|
||||
text-align: left;
|
||||
@ -40,12 +36,10 @@
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
// text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
// background-color: green;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -58,18 +52,17 @@
|
||||
|
||||
input {
|
||||
flex-grow: 1; // 340px;
|
||||
// width: 78.34%;
|
||||
padding: 12px 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #c4c4c4; // #000000?
|
||||
color: #000000;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
font-size: 28px;
|
||||
@ -79,21 +72,20 @@
|
||||
@media screen and (width <= 1024px) {
|
||||
width: calc(100% - 32px);
|
||||
padding: 17px 16px;
|
||||
|
||||
// margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// &::placeholder {
|
||||
// color: #c4c4c4;
|
||||
// }
|
||||
&::placeholder {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: #000000;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
padding: 14px 40px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
background: #000000;
|
||||
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@ -104,18 +96,16 @@
|
||||
color: #ffffff;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
padding: 14px 77px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
padding: 14px 77px;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
width: 100%;
|
||||
padding: 17px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding: 17px;
|
||||
|
||||
// margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Formik, FormikHelpers } from "formik";
|
||||
import React from "react";
|
||||
import { Form } from "react-router-dom";
|
||||
import { Formik, FormikHelpers } from "formik";
|
||||
|
||||
import NewsletterSchema from "../../../schema/NewsletterSchema";
|
||||
|
||||
import styles from "./Newsletter.module.scss";
|
||||
|
||||
interface FormValues {
|
||||
email: string;
|
||||
}
|
||||
@ -34,10 +34,7 @@ const Newsletter = () => {
|
||||
>
|
||||
{({ resetForm }) => (
|
||||
<div className={styles["container"]}>
|
||||
<h3 className={styles["title"]}>
|
||||
{/* ASSINE NOSSA NEWSLETTER */}
|
||||
assine nossa newsletter
|
||||
</h3>
|
||||
<h3 className={styles["title"]}>ASSINE NOSSA NEWSLETTER</h3>
|
||||
<Form className={styles["form-wrapper"]}>
|
||||
<input type="email" placeholder="E-mail" />
|
||||
<button>ENVIAR</button>
|
||||
|
||||
@ -18,8 +18,6 @@
|
||||
.submenu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
@ -31,6 +29,7 @@
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
margin: 0;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
@ -38,7 +37,6 @@
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #303030;
|
||||
margin: 0;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
font-size: 28px;
|
||||
@ -48,9 +46,6 @@
|
||||
@media screen and (width <= 1024px) {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// &.active {
|
||||
// }
|
||||
}
|
||||
|
||||
.open-icon {
|
||||
@ -58,22 +53,22 @@
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #000000;
|
||||
width: 7.8px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: #000000;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
background: #000000;
|
||||
width: 1px;
|
||||
height: 8.28px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: #000000;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@ -90,14 +85,13 @@
|
||||
}
|
||||
|
||||
.list-items {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
// transition: all 0.2s ease-in-out; hover? active?
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
a {
|
||||
font-family: "Roboto";
|
||||
@ -105,9 +99,13 @@
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #303030;
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
color: #303030;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(2);
|
||||
}
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
font-size: 24px;
|
||||
@ -122,8 +120,8 @@
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
text-transform: capitalize;
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
font-size: 24px;
|
||||
@ -132,7 +130,6 @@
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
// hover em vez de last-child?
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -1,57 +1,58 @@
|
||||
import React, { useState, useContext } from "react";
|
||||
import { WidthContext } from "../../../contexts/WidthContext";
|
||||
|
||||
import { List } from "../../List/List";
|
||||
import { WidthContext } from "../../../contexts/WidthContext";
|
||||
|
||||
import styles from "./SiteMap.module.scss";
|
||||
|
||||
const institucionalLinks = [
|
||||
{
|
||||
name: "Quem Somos",
|
||||
value: "sobre",
|
||||
value: "institucionais/sobre",
|
||||
},
|
||||
{
|
||||
name: "Política de Privacidade",
|
||||
value: "politica-de-privacidade",
|
||||
value: "institucionais/seguranca-e-privacidade",
|
||||
},
|
||||
{
|
||||
name: "Segurança",
|
||||
value: "seguranca-e-privacidade",
|
||||
value: "institucionais/seguranca-e-privacidade",
|
||||
},
|
||||
{
|
||||
name: "Seja um Revendedor",
|
||||
value: "seja-um-revendedor",
|
||||
value: "institucionais/contato",
|
||||
},
|
||||
];
|
||||
|
||||
const duvidasLinks = [
|
||||
{
|
||||
name: "Entrega",
|
||||
value: "entrega",
|
||||
value: "institucionais/entrega",
|
||||
},
|
||||
{
|
||||
name: "Pagamento",
|
||||
value: "forma-de-pagamento",
|
||||
value: "institucionais/forma-de-pagamento",
|
||||
},
|
||||
{
|
||||
name: "Trocas e Devoluções",
|
||||
value: "troca-e-devolucao",
|
||||
value: "institucionais/troca-e-devolucao",
|
||||
},
|
||||
{
|
||||
name: "Dúvidas Frequentes",
|
||||
value: "duvidas-frequentes",
|
||||
value: "institucionais/troca-e-devolucao",
|
||||
},
|
||||
];
|
||||
|
||||
const faleConoscoLinks = [
|
||||
{
|
||||
name: "Atendimento ao Consumidor",
|
||||
phoneNumber: "(11) 4159 9504",
|
||||
value: "atendimento-ao-consumidor",
|
||||
phoneNumber: "+1141599504",
|
||||
value: "(11) 4159 9504",
|
||||
},
|
||||
{
|
||||
name: "Atendimento Online",
|
||||
phoneNumber: "(11) 4159 9504",
|
||||
value: "politica-de-privacidade",
|
||||
phoneNumber: "+1141599504",
|
||||
value: "(11) 4159 9504",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -2,28 +2,26 @@
|
||||
.menu-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
li {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
a {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
||||
&:hover {
|
||||
border-radius: 50%;
|
||||
filter: brightness(1.8);
|
||||
}
|
||||
|
||||
@media screen and (width >= 2500px) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.5);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,11 +11,11 @@ import styles from "./SocialMedia.module.scss";
|
||||
const socialMediaLinks = [
|
||||
{
|
||||
icon: <Facebook />,
|
||||
value: "https://www.facebook.com/digitalm3/",
|
||||
value: "https://www.facebook.com/digitalm3",
|
||||
},
|
||||
{
|
||||
icon: <Instagram />,
|
||||
value: "https://www.instagram.com/m3.ecommerce/",
|
||||
value: "https://www.instagram.com/m3.ecommerce",
|
||||
},
|
||||
{
|
||||
icon: <Twitter />,
|
||||
|
||||
@ -15,7 +15,7 @@ const List = (props: ListProps) => {
|
||||
item.phoneNumber ? (
|
||||
<li key={index}>
|
||||
<p>{item.name}</p>
|
||||
<Link to={item.value}>{item.phoneNumber}</Link>
|
||||
<a href={`tel:${item.phoneNumber}`}>{item.value}</a>
|
||||
</li>
|
||||
) : (
|
||||
<li key={index}>
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
// 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
// sans-serif;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
};
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// code {
|
||||
// font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
// monospace;
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user