Compare commits
12 Commits
feature/he
...
main
Author | SHA1 | Date | |
---|---|---|---|
0377e6d0f3 | |||
291161a98c | |||
f756910644 | |||
b64324d5d8 | |||
38cf21d8cb | |||
eb01d373a1 | |||
0e7c2db1e5 | |||
91df2c1afc | |||
0d79a59d4a | |||
1169893527 | |||
21a8cae899 | |||
a89b3ba94d |
@ -1,9 +1,20 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import icons from "./assets/modules/FixedIcons.module.scss";
|
||||
|
||||
import whats from "./assets/svgs/whatsapp.svg";
|
||||
import arrow from "./assets/svgs/arrow.svg";
|
||||
|
||||
const FixedIcons = () => {
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrollTop(window.scrollY);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={icons["icons"]}>
|
||||
<a
|
||||
@ -15,14 +26,16 @@ const FixedIcons = () => {
|
||||
<img src={whats} alt="Ícone WhatsApp" />
|
||||
</figure>
|
||||
</a>
|
||||
<div
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
className={icons["icons__arrow"]}
|
||||
>
|
||||
<figure>
|
||||
<img src={arrow} alt="Ícone subir ao topo" />
|
||||
</figure>
|
||||
</div>
|
||||
{scrollTop > 0 ? (
|
||||
<div
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
className={icons["icons__arrow"]}
|
||||
>
|
||||
<figure>
|
||||
<img src={arrow} alt="Ícone subir ao topo" />
|
||||
</figure>
|
||||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -2,6 +2,7 @@
|
||||
position: fixed;
|
||||
bottom: 200px;
|
||||
right: 16px;
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
bottom: 215px;
|
||||
|
@ -3,14 +3,14 @@ import footer from "./assets/modules/FooterBottom.module.scss";
|
||||
import { Payments } from "./Payments";
|
||||
import { Developed } from "./Developed";
|
||||
|
||||
import master from "./assets/svgs/master.svg";
|
||||
import visa from "./assets/svgs/visa.svg";
|
||||
import diners from "./assets/svgs/diners.svg";
|
||||
import elo from "./assets/svgs/elo.svg";
|
||||
import hiper from "./assets/svgs/hiper.svg";
|
||||
import paypal from "./assets/svgs/paypal.svg";
|
||||
import boleto from "./assets/svgs/boleto.svg";
|
||||
import vtexPci from "./assets/svgs/vtex-pci.svg";
|
||||
import master from "./assets/svgs/master.png";
|
||||
import visa from "./assets/svgs/visa.png";
|
||||
import diners from "./assets/svgs/diners.png";
|
||||
import elo from "./assets/svgs/elo.png";
|
||||
import hiper from "./assets/svgs/hiper.png";
|
||||
import paypal from "./assets/svgs/paypal.png";
|
||||
import boleto from "./assets/svgs/boleto.png";
|
||||
import vtexPci from "./assets/svgs/vtex-pci.png";
|
||||
|
||||
const FooterBottom = () => {
|
||||
return (
|
||||
|
@ -1,7 +1,7 @@
|
||||
import newsletter from "./assets/modules/Newsletter.module.scss";
|
||||
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import { useState } from "react";
|
||||
|
||||
import newsletter from "./assets/modules/Newsletter.module.scss";
|
||||
import NewsletterSchema from "./assets/schemas/NewsletterSchema";
|
||||
|
||||
interface IEmailType {
|
||||
@ -9,30 +9,44 @@ interface IEmailType {
|
||||
}
|
||||
|
||||
const Newsletter = () => {
|
||||
const [feedback, setFeedback] = useState(false);
|
||||
const Feedback = () => {
|
||||
setFeedback(!feedback);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={newsletter["newsletter"]}>
|
||||
<div className={newsletter["newsletter__wrapper"]}>
|
||||
<h3>ASSINE NOSSA NEWSLETTER</h3>
|
||||
<Formik
|
||||
onSubmit={(values: IEmailType, actions) => {
|
||||
Feedback();
|
||||
actions.resetForm();
|
||||
const sent = document.querySelector(
|
||||
"#emailsent"
|
||||
) as HTMLSpanElement;
|
||||
sent.innerHTML = "Email cadastrado com sucesso!";
|
||||
}}
|
||||
initialValues={{ email: "" }}
|
||||
validationSchema={NewsletterSchema}
|
||||
>
|
||||
<Form>
|
||||
<Field placeholder="E-mail" id="email" name="email" />
|
||||
<Field
|
||||
placeholder="E-mail"
|
||||
id="email"
|
||||
name="email"
|
||||
onBlur={() => {
|
||||
setFeedback(false);
|
||||
}}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={newsletter["invalid"]}
|
||||
/>
|
||||
<button type="submit">ENVIAR</button>
|
||||
<span id="emailsent" className={newsletter["success"]}></span>
|
||||
|
||||
{feedback ? (
|
||||
<span className={newsletter["success"]}>
|
||||
Email cadastrado com sucesso!
|
||||
</span>
|
||||
) : undefined}
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
|
@ -4,6 +4,7 @@ import {
|
||||
AccordionHeader,
|
||||
AccordionItem,
|
||||
} from "react-headless-accordion";
|
||||
import { useState } from "react";
|
||||
import { Link } from "./Link";
|
||||
|
||||
import links from "./assets/modules/SitemapAccordion.module.scss";
|
||||
@ -11,12 +12,26 @@ import links from "./assets/modules/SitemapAccordion.module.scss";
|
||||
import more from "./assets/svgs/more.svg";
|
||||
|
||||
const SitemapAccordion = () => {
|
||||
const [institucional, setInstitucional] = useState(false);
|
||||
const [duvidas, setDuvidas] = useState(false);
|
||||
const [faleConosco, setFaleConosco] = useState(false);
|
||||
|
||||
const changeIcon1 = () => {
|
||||
setInstitucional(!institucional);
|
||||
};
|
||||
const changeIcon2 = () => {
|
||||
setDuvidas(!duvidas);
|
||||
};
|
||||
const changeIcon3 = () => {
|
||||
setFaleConosco(!faleConosco);
|
||||
};
|
||||
|
||||
return (
|
||||
<Accordion className={links["accordion"]} alwaysOpen={true}>
|
||||
<AccordionItem>
|
||||
<AccordionHeader>
|
||||
<AccordionHeader onClick={changeIcon1}>
|
||||
<h4>Institucional</h4>
|
||||
<img src={more} alt="Icone de +" />
|
||||
{institucional ? <span>-</span> : <img src={more} alt="Icone de +" />}
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody>
|
||||
@ -30,9 +45,9 @@ const SitemapAccordion = () => {
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionHeader>
|
||||
<AccordionHeader onClick={changeIcon2}>
|
||||
<h4>Dúvidas</h4>
|
||||
<img src={more} alt="Icone de +" />
|
||||
{duvidas ? <span>-</span> : <img src={more} alt="Icone de +" />}
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody>
|
||||
@ -46,9 +61,9 @@ const SitemapAccordion = () => {
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionHeader>
|
||||
<AccordionHeader onClick={changeIcon3}>
|
||||
<h4>Fale Conosco</h4>
|
||||
<img src={more} alt="Icone de +" />
|
||||
{faleConosco ? <span>-</span> : <img src={more} alt="Icone de +" />}
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody>
|
||||
|
@ -20,6 +20,12 @@
|
||||
line-height: 16px;
|
||||
color: var(--black-200);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
color: var(--black-200);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
BIN
react-project/src/components/Footer/assets/svgs/boleto.png
Normal file
After Width: | Height: | Size: 816 B |
Before Width: | Height: | Size: 18 KiB |
BIN
react-project/src/components/Footer/assets/svgs/diners.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 92 KiB |
@ -1,3 +0,0 @@
|
||||
<svg width="2" height="24" viewBox="0 0 2 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0.908936" y1="2.18557e-08" x2="0.908934" y2="24" stroke="#C4C4C4"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 179 B |
BIN
react-project/src/components/Footer/assets/svgs/elo.png
Normal file
After Width: | Height: | Size: 888 B |
Before Width: | Height: | Size: 25 KiB |
BIN
react-project/src/components/Footer/assets/svgs/hiper.png
Normal file
After Width: | Height: | Size: 745 B |
Before Width: | Height: | Size: 24 KiB |
BIN
react-project/src/components/Footer/assets/svgs/master.png
Normal file
After Width: | Height: | Size: 739 B |
Before Width: | Height: | Size: 14 KiB |
BIN
react-project/src/components/Footer/assets/svgs/paypal.png
Normal file
After Width: | Height: | Size: 888 B |
Before Width: | Height: | Size: 28 KiB |
BIN
react-project/src/components/Footer/assets/svgs/visa.png
Normal file
After Width: | Height: | Size: 1000 B |
Before Width: | Height: | Size: 26 KiB |
BIN
react-project/src/components/Footer/assets/svgs/vtex-pci.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
@ -1,9 +0,0 @@
|
||||
<svg width="56" height="34" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect x="0.408936" width="54.6061" height="34" fill="url(#pattern0)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_6214_933" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
|
||||
</pattern>
|
||||
<image id="image0_6214_933" width="200" height="126" xlink:href="data:image/png;base64,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"/>
|
||||
</defs>
|
||||
</svg>
|
Before Width: | Height: | Size: 4.2 KiB |
@ -11,7 +11,7 @@
|
||||
.content {
|
||||
position: absolute;
|
||||
background-color: var(--white);
|
||||
width: 97.4609%;
|
||||
width: 96.4845%;
|
||||
height: 585px;
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
@ -69,4 +69,5 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
z-index: 2;
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import MaskedInput from "react-text-mask";
|
||||
import { useState } from "react";
|
||||
|
||||
import FormSchema from "./assets/schemas/FormSchema";
|
||||
|
||||
@ -23,10 +24,20 @@ const initialValues = {
|
||||
telefone: "",
|
||||
instagram: "",
|
||||
terms: false,
|
||||
/*sent: false,*/
|
||||
};
|
||||
|
||||
const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
|
||||
const dateMask = [
|
||||
/[0-3]/,
|
||||
/\d/,
|
||||
".",
|
||||
/[0-1]/,
|
||||
/\d/,
|
||||
".",
|
||||
/[1-2]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
];
|
||||
const cpfMask = [
|
||||
/\d/,
|
||||
/\d/,
|
||||
@ -62,16 +73,22 @@ const phoneNumberMask = [
|
||||
];
|
||||
|
||||
const Contato = () => {
|
||||
const [feedback, setFeedback] = useState(false);
|
||||
const Feedback = () => {
|
||||
setFeedback(true);
|
||||
setTimeout(() => {
|
||||
setFeedback(false);
|
||||
}, 14000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={contato["forms"]}>
|
||||
<h2>Preencha o formulário</h2>
|
||||
|
||||
<Formik
|
||||
onSubmit={(values: IFormikValues, actions) => {
|
||||
console.log(values);
|
||||
Feedback();
|
||||
actions.resetForm();
|
||||
const sent = document.querySelector("#sent") as HTMLSpanElement;
|
||||
sent.innerHTML = "*Formulário enviado com sucesso!";
|
||||
}}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
@ -183,7 +200,12 @@ const Contato = () => {
|
||||
</div>
|
||||
|
||||
<button type="submit">CADASTRE-SE</button>
|
||||
<span id="sent" className={contato["forms__success"]}></span>
|
||||
|
||||
{feedback ? (
|
||||
<span className={contato["forms__success"]}>
|
||||
*Formulário enviado com sucesso!
|
||||
</span>
|
||||
) : undefined}
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
@ -17,7 +17,7 @@
|
||||
|
||||
.home {
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 31.25px;
|
||||
width: 31.22px;
|
||||
height: 31.25px;
|
||||
}
|
||||
}
|
||||
|
@ -50,6 +50,7 @@
|
||||
padding: 15px 20px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 63px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@ -110,6 +111,7 @@
|
||||
width: 36.4px;
|
||||
height: 35.15px;
|
||||
right: -50px;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|