feat(pages): adiciona logica em react e estilos em scss para cada pagina

This commit is contained in:
carloswinter 2023-01-19 23:37:42 -03:00
parent 361c7dabe0
commit 11f8f81502
7 changed files with 216 additions and 0 deletions

12
src/pages/About.tsx Normal file
View File

@ -0,0 +1,12 @@
import { MainText } from "../components/Container-menu/TextContainer";
export const About = () => {
return (
<>
<div className="Main_textArea">
<h2>Sobre</h2>
<MainText />
</div>
</>
);
};

View File

@ -0,0 +1,143 @@
@import "../components/Variables.scss";
form {
position: relative;
display: flex;
flex-direction: column;
padding: 16px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@media (max-width: 1024px) {
padding: 0;
}
@media (min-width: 1025px) {
width: 100%;
padding: 0px;
}
label {
margin: 12px 0 12px 15px;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
input {
height: 14px;
padding: 15px 20px;
border: 1px solid $color-black-800;
border-radius: 25px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-gray-300;
@media (min-width: 2500px) {
height: 31px;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
&::placeholder {
color: $color-gray-300;
}
}
.error {
display: flex;
justify-content: end;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-red;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 24px;
line-height: 28px;
}
}
.checkbox_wrapper {
span {
margin-left: 13px;
margin-right: 2px;
@media (min-width: 2500px) {
font-size: 26px;
}
}
label {
margin-left: 0;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
}
button {
letter-spacing: 0.05em;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
padding: 17px;
background: $color-black;
border-radius: 25px;
color: $color-white;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 32px;
line-height: 38px;
padding: 16px 17px 17px 17px;
}
}
div {
display: flex;
justify-content: center;
align-items: center;
label {
order: 2;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-decoration: underline;
}
input {
order: 3;
width: 18px;
height: 18px;
border: 1px solid $color-black;
border-radius: 3px;
margin: 0 4px 3px;
@media (min-width: 2500px) {
width: 36.4px;
height: 35.15px;
}
}
}
@media (max-width: 1024px) {
h2 {
text-align: center;
}
}
}

13
src/pages/Contact.tsx Normal file
View File

@ -0,0 +1,13 @@
import { ContactForm } from "../components/ContactForm";
import "./Contact.modules.scss";
export const Form = () => {
return (
<>
<div className="Main_textArea">
<h2>Preencha o formulário </h2>
<ContactForm />
</div>
</>
);
};

12
src/pages/Delivery.tsx Normal file
View File

@ -0,0 +1,12 @@
import { MainText } from "../components/Container-menu/TextContainer";
export const Delivery = () => {
return (
<>
<div className="Main_textArea">
<h2>Entrega</h2>
<MainText />
</div>
</>
);
};

12
src/pages/Payments.tsx Normal file
View File

@ -0,0 +1,12 @@
import { MainText } from "../components/Container-menu/TextContainer";
export const Payments = () => {
return (
<>
<div className="Main_textArea">
<h2>Pagamentos</h2>
<MainText />
</div>
</>
);
};

12
src/pages/Privacy.tsx Normal file
View File

@ -0,0 +1,12 @@
import { MainText } from "../components/Container-menu/TextContainer";
export const Privacy = () => {
return (
<>
<div className="Main_textArea">
<h2>Seguraça e Privacidade</h2>
<MainText />
</div>
</>
);
};

12
src/pages/Refund.tsx Normal file
View File

@ -0,0 +1,12 @@
import { MainText } from "../components/Container-menu/TextContainer";
export const Refund = () => {
return (
<>
<div className="Main_textArea">
<h2>Troca ou Devolução</h2>
<MainText />
</div>
</>
);
};