+
institucional
+
- setStep("sobre")}>Sobre
- setStep("pagamento")}>Forma de Pagamento
@@ -42,13 +44,13 @@ function Institucional() {
- setStep("seguranca")}>Segurança e Privacidade
- setStep("contato")}>Contato
-
-
institucional
-
{render()}
+
+ {render()}
+
);
}
diff --git a/src/schema/schema.tsx b/src/schema/schema.tsx
index 10ced79..05831a1 100644
--- a/src/schema/schema.tsx
+++ b/src/schema/schema.tsx
@@ -1,10 +1,17 @@
import * as Yup from "yup";
+
export default Yup.object().shape({
name: Yup.string().min(3).required("Campo obrigatório"),
+
email: Yup.string().required("Campo obrigatório").email("Email inválido"),
- cpf: Yup.string().required("Campo obrigatório"),
- data: Yup.string().required("Campo obrigatório"),
- tel: Yup.string().required("Campo obrigatório"),
+
+ cpf: Yup.string().matches(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/, "CPF inválido").required("Campo obrigatório"),
+
+ data: Yup.string().matches(/\d{2,}\/\d{2,}\/\d{4,}/, "Data de nascimento inválida").required("Campo obrigatório"),
+
+ tel: Yup.string().matches(/\(\d{2}\)\d{5}\-\d{4}/, "Número de telefone inválido").required("Campo obrigatório"),
+
insta: Yup.string(),
+
});
diff --git a/src/styles/Contato.module.scss b/src/styles/Contato.module.scss
index f723f09..1cd7bba 100644
--- a/src/styles/Contato.module.scss
+++ b/src/styles/Contato.module.scss
@@ -1,3 +1,11 @@
+.contato__container {
+ padding: 0px 30px;
+}
+
+.contato__container form {
+ width: 100%;
+}
+
.contato__title {
font-family: 'Roboto', sans-serif;
font-style: normal;
@@ -9,8 +17,10 @@
}
-form {
- max-width: 391px;
+.form__formik {
+ display: flex;
+ flex-direction: column;
+ width: 58.44%;
margin-top: 33px;
}
@@ -24,7 +34,7 @@ input::placeholder {
}
.form__container {
- position: relative;
+ width: 100%;
}
@@ -41,20 +51,17 @@ input::placeholder {
}
.form__container input {
+ width: 96%;
font-family: 'Roboto', sans-serif;
- font-weight: 400;
- font-size: 14px;
- line-height: 23px;
color: #B9B7B7;
background: #FFFFFF;
border: 1px solid #100D0E;
border-radius: 25px;
- padding: 11px 227px 10px 28px;
+ padding: 15px 2px 15px 20px;
}
.form__check {
display: flex;
- align-items: center;
justify-content: center;
gap: 8px;
padding: 21px 0 21px;
@@ -67,8 +74,8 @@ input::placeholder {
}
.form__button {
- width: 391.49px;
- height: 52.47px;
+ width: 100%;
+ height: 52.44px;
left: 500px;
top: 979px;
background: #000000;
@@ -105,3 +112,8 @@ button:active {
}
+@media (max-width: 1024px) {
+ .contato__title {
+ text-align: center;
+ }
+}
diff --git a/src/styles/Devolucao.module.scss b/src/styles/Devolucao.module.scss
index 4e76957..12f2806 100644
--- a/src/styles/Devolucao.module.scss
+++ b/src/styles/Devolucao.module.scss
@@ -1,3 +1,7 @@
+.devolucao__container {
+ padding: 0px 30px;
+}
+
.devolucao__title {
font-family: 'Roboto', sans-serif;
font-style: normal;
@@ -16,7 +20,12 @@
line-height: 15px;
color: #7D7D7D;
text-align: left;
- max-width: 715px;
padding-bottom: 171px;
}
+@media (max-width: 1024px) {
+ .devolucao__title {
+ text-align: center;
+ }
+}
+
diff --git a/src/styles/Entrega.module.scss b/src/styles/Entrega.module.scss
index a1b9020..bb47e09 100644
--- a/src/styles/Entrega.module.scss
+++ b/src/styles/Entrega.module.scss
@@ -1,3 +1,7 @@
+.entrega__container {
+ padding: 0px 30px;
+}
+
.entrega__title {
font-family: 'Roboto', sans-serif;
font-style: normal;
@@ -16,7 +20,12 @@
line-height: 15px;
color: #7D7D7D;
text-align: left;
- max-width: 715px;
padding-bottom: 171px;
}
+@media (max-width: 1024px) {
+ .entrega__title {
+ text-align: center;
+ }
+}
+
diff --git a/src/styles/Institucional.module.scss b/src/styles/Institucional.module.scss
index 22bcf9e..5537569 100644
--- a/src/styles/Institucional.module.scss
+++ b/src/styles/Institucional.module.scss
@@ -2,34 +2,31 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
-.main__container {
+.inst__container {
display: flex;
- justify-content: center;
- max-width: 80%;
+ padding-left: 100px;
}
-.main__container ul {
- border-right: 1px solid #E5E5E5;
- margin: 150px 32px 78px 118px;
+.inst__container ul {
+ padding: 0;
+ border-right: 1px solid #000000;
+ width: 23.59%;
+ height: 285px;
list-style: none;
- max-height: 270px;
- max-width: 270px;
}
-.main__container li {
+.inst__container li {
+ padding: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #7D7D7D;
text-align: left;
- margin-bottom: 24px;
- margin-right: 78px;
- height: 39px;
-
+
}
-.main__container li:hover {
+.inst__container li:hover {
background-color: #000000;
cursor: pointer;
font-family: 'Roboto', sans-serif;
@@ -40,7 +37,8 @@
padding: 10px 16px;
}
-.title__desktop {
+.title {
+ display: flex;
font-weight: 300;
font-size: 24px;
line-height: 29px;
@@ -48,67 +46,32 @@
text-transform: uppercase;
color: #292929;
margin-bottom: 51px;
- margin-top: 80px;
+ justify-content: center;
}
-@media screen and (max-width: 1080px) {
- .main__container {
- max-width: 80%;
- }
+.rend__container {
+ width: 55.44%;
}
-@media screen and (max-width: 768px) {
- .main__container {
- flex-direction: column;
- align-items: center;
- max-width: 343px;
- margin: 0 auto;
+@media (max-width: 1024px) {
+ .inst__container {
+ align-items: center;
+ padding-left: 16px;
+ flex-direction: column;
}
- .main__container ul {
- margin: 33px 25px 22px 7px;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- }
+ .rend__container {
+ width: 100%;
+ }
+ .inst__container ul {
+ width: 100%;
+ margin: 33px 25px 22px 7px;
+ display: flex;
+ flex-direction: column;
+ border-right: none;
+ }
- .main__contato-subtitle {
- margin-top: 22px;
- }
-
- .title__desktop {
- display: none;
- }
-
- .title__mobile {
-
- font-style: normal;
- font-weight: 300;
- font-size: 24px;
- line-height: 29px;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: #292929;
- margin: 75px 92px 33px 83px;
-
- }
-}
-
-@media screen and (min-width: 769px) {
- .title__mobile {
- display: none
- }
-}
-
-@media screen and (max-width: 475px) {
- .main__container ul {
- align-items: center;
- }
-}
-
-@media screen and (max-width: 375px) {
- .main__container ul {
- max-width: 70%;
- margin: 0 auto;
- }
+ .inst__contato-subtitle {
+ margin-top: 22px;
+ }
}
diff --git a/src/styles/Main.module.scss b/src/styles/Main.module.scss
index d9d9aec..40668ea 100644
--- a/src/styles/Main.module.scss
+++ b/src/styles/Main.module.scss
@@ -1,7 +1,7 @@
.main__route {
display: flex;
padding: 29px 100px;
- width: 8%;
+ width: 10%;
justify-content: space-around;
align-items: center;
@@ -10,10 +10,6 @@
height: 16px;
}
- .main__arrow {
- width: 4.47%;
- height: 8px;
- }
p {
font-family: 'Roboto', sans-serif;
@@ -24,3 +20,10 @@
color: #C4C4C4;
}
}
+
+@media (max-width: 1024px) {
+
+ .main__route{
+ padding: 29px 16px;
+ }
+}
diff --git a/src/styles/Pagamento.module.scss b/src/styles/Pagamento.module.scss
index c070043..7d3a394 100644
--- a/src/styles/Pagamento.module.scss
+++ b/src/styles/Pagamento.module.scss
@@ -1,3 +1,8 @@
+.pagamento__container {
+
+ padding: 0px 30px;
+}
+
.pagamento__title {
font-family: 'Roboto', sans-serif;
font-style: normal;
@@ -16,7 +21,12 @@
line-height: 15px;
color: #7D7D7D;
text-align: left;
- max-width: 715px;
padding-bottom: 171px;
}
+@media (max-width: 1024px) {
+ .pagamento__title {
+ text-align: center;
+ }
+}
+
diff --git a/src/styles/Scroll.module.scss b/src/styles/Scroll.module.scss
new file mode 100644
index 0000000..597d38e
--- /dev/null
+++ b/src/styles/Scroll.module.scss
@@ -0,0 +1,16 @@
+
+.arrow__up{
+ background-color: #C4C4C4;
+ border-radius: 100%;
+ width: 34px;
+ height: 34px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.arrow__up img{
+ width: 7px;
+ display: flex;
+}
+
diff --git a/src/styles/Seguranca.module.scss b/src/styles/Seguranca.module.scss
index c81cf1b..dc6c563 100644
--- a/src/styles/Seguranca.module.scss
+++ b/src/styles/Seguranca.module.scss
@@ -1,3 +1,8 @@
+.seguranca__container {
+
+ padding: 0px 30px;
+}
+
.seguranca__title {
font-family: 'Roboto', sans-serif;
font-style: normal;
@@ -16,8 +21,12 @@
line-height: 15px;
color: #7D7D7D;
text-align: left;
- max-width: 715px;
padding-bottom: 171px;
}
+@media (max-width: 1024px) {
+ .seguranca__title {
+ text-align: center;
+ }
+}
diff --git a/src/styles/Sobre.module.scss b/src/styles/Sobre.module.scss
index aa461e1..bccc815 100644
--- a/src/styles/Sobre.module.scss
+++ b/src/styles/Sobre.module.scss
@@ -1,3 +1,8 @@
+.sobre__container {
+
+ padding: 0px 30px;
+}
+
.sobre__title {
font-family: 'Roboto', sans-serif;
font-style: normal;
@@ -16,8 +21,12 @@
line-height: 15px;
color: #7D7D7D;
text-align: left;
- max-width: 715px;
padding-bottom: 171px;
}
+@media (max-width: 1024px) {
+ .sobre__title {
+ text-align: center;
+ }
+}
diff --git a/src/styles/Whats.module.scss b/src/styles/Whats.module.scss
new file mode 100644
index 0000000..523b848
--- /dev/null
+++ b/src/styles/Whats.module.scss
@@ -0,0 +1,17 @@
+.container__icon {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: fixed;
+ right: 0;
+ bottom:0;
+ padding: 16px;
+ z-index: 1;
+}
+
+
+
+.icon__whats img {
+ width: 34px;
+}
+
diff --git a/src/utils/validates.tsx b/src/utils/validates.tsx
new file mode 100644
index 0000000..b746cde
--- /dev/null
+++ b/src/utils/validates.tsx
@@ -0,0 +1,46 @@
+export const numberPhone = [
+ "(",
+ /\d/,
+ /\d/,
+ ")",
+ /\d/,
+ /\d/,
+ /\d/,
+ /\d/,
+ /\d/,
+ "-",
+ /\d/,
+ /\d/,
+ /\d/,
+ /\d/
+ ];
+
+export const numberCpf = [
+ /\d/,
+ /\d/,
+ /\d/,
+ ".",
+ /\d/,
+ /\d/,
+ /\d/,
+ ".",
+ /\d/,
+ /\d/,
+ /\d/,
+ "-",
+ /\d/,
+ /\d/,
+ ];
+
+export const numberNascimento = [
+ /\d/,
+ /\d/,
+ "/",
+ /\d/,
+ /\d/,
+ "/",
+ /\d/,
+ /\d/,
+ /\d/,
+ /\d/
+ ];