diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 0000000..49136d7 --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const About = () => { + return ( + <> +
+

Sobre

+ +
+ + ); +}; diff --git a/src/pages/Contact.modules.scss b/src/pages/Contact.modules.scss new file mode 100644 index 0000000..e0d1380 --- /dev/null +++ b/src/pages/Contact.modules.scss @@ -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; + } + } +} diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx new file mode 100644 index 0000000..ffabeaf --- /dev/null +++ b/src/pages/Contact.tsx @@ -0,0 +1,13 @@ +import { ContactForm } from "../components/ContactForm"; +import "./Contact.modules.scss"; + +export const Form = () => { + return ( + <> +
+

Preencha o formulário

+ +
+ + ); +}; diff --git a/src/pages/Delivery.tsx b/src/pages/Delivery.tsx new file mode 100644 index 0000000..80e343c --- /dev/null +++ b/src/pages/Delivery.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Delivery = () => { + return ( + <> +
+

Entrega

+ +
+ + ); +}; diff --git a/src/pages/Payments.tsx b/src/pages/Payments.tsx new file mode 100644 index 0000000..ddb3c24 --- /dev/null +++ b/src/pages/Payments.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Payments = () => { + return ( + <> +
+

Pagamentos

+ +
+ + ); +}; diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx new file mode 100644 index 0000000..8296b80 --- /dev/null +++ b/src/pages/Privacy.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Privacy = () => { + return ( + <> +
+

Seguraça e Privacidade

+ +
+ + ); +}; diff --git a/src/pages/Refund.tsx b/src/pages/Refund.tsx new file mode 100644 index 0000000..2217af7 --- /dev/null +++ b/src/pages/Refund.tsx @@ -0,0 +1,12 @@ +import { MainText } from "../components/Container-menu/TextContainer"; + +export const Refund = () => { + return ( + <> +
+

Troca ou Devolução

+ +
+ + ); +};