From 11f8f81502f113105f360056d14f3f5a4d49ab9c Mon Sep 17 00:00:00 2001 From: carloswinter Date: Thu, 19 Jan 2023 23:37:42 -0300 Subject: [PATCH 1/2] feat(pages): adiciona logica em react e estilos em scss para cada pagina --- src/pages/About.tsx | 12 +++ src/pages/Contact.modules.scss | 143 +++++++++++++++++++++++++++++++++ src/pages/Contact.tsx | 13 +++ src/pages/Delivery.tsx | 12 +++ src/pages/Payments.tsx | 12 +++ src/pages/Privacy.tsx | 12 +++ src/pages/Refund.tsx | 12 +++ 7 files changed, 216 insertions(+) create mode 100644 src/pages/About.tsx create mode 100644 src/pages/Contact.modules.scss create mode 100644 src/pages/Contact.tsx create mode 100644 src/pages/Delivery.tsx create mode 100644 src/pages/Payments.tsx create mode 100644 src/pages/Privacy.tsx create mode 100644 src/pages/Refund.tsx 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

+ +
+ + ); +}; From 6c0e9f1ba6b79b52418108386af2be37593f176c Mon Sep 17 00:00:00 2001 From: carloswinter Date: Thu, 19 Jan 2023 23:38:42 -0300 Subject: [PATCH 2/2] feat(pages): adiciona router para redirecionar as paginas --- src/App.scss | 95 ++++++++++++++++++++++++++++++++++++++++++ src/App.tsx | 32 ++++++++++++++ src/index.tsx | 15 +++++++ src/react-app-env.d.ts | 1 + src/router.tsx | 23 ++++++++++ 5 files changed, 166 insertions(+) create mode 100644 src/App.scss create mode 100644 src/App.tsx create mode 100644 src/index.tsx create mode 100644 src/react-app-env.d.ts create mode 100644 src/router.tsx diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..994088f --- /dev/null +++ b/src/App.scss @@ -0,0 +1,95 @@ +@import "./components/Variables.scss"; + +body { + margin: 0; +} + +.Container-menu { + display: flex; + flex-direction: column; +} + +.TopContainer_wrapper { + display: flex; + flex-direction: column; +} + +.MainConteiner { + display: flex; + max-width: 100%; + padding-bottom: 66px; + + @media (min-width: 1025px) { + padding: 0 100px; + margin-bottom: 47px; + } + + .Main_textArea { + @media (min-width: 1025px) { + width: 100%; + padding: 10px 0px; + } + + @media (max-width: 1024px) { + padding: 0 16px; + } + + h2 { + margin: 0; + font-family: $fontFamily; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $color-gray-800; + + @media (max-width: 1024px) { + text-align: center; + margin-top: 30px; + } + + @media (min-width: 2500px) { + font-weight: 700; + font-size: 48px; + line-height: 56px; + } + } + + .MainText { + display: flex; + flex-direction: column; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: $color-gray-500; + + p { + margin: 12px 0; + color: $color-gray-500; + font-weight: 400; + font-size: 13px; + line-height: 15px; + font-family: $fontFamily; + + @media (max-width: 1024px) { + font-weight: 400; + font-size: 12px; + line-height: 18px; + text-align: justify; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 26px; + line-height: 30px; + } + } + } + } + + @media (max-width: 1024px) { + flex-direction: column; + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..b54722c --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,32 @@ +import { Router } from "./router"; +import { Navegation } from "./components/Navegation"; + +import { ScreenSize } from "./components/DetectSize"; + +import { HeaderDesktop } from "./components/Header/HeaderDesktop"; +import { HeaderMobile } from "./components/Header/HeaderMobile"; +import { TopContainer } from "./components/Container-menu/TopContainer"; +import { MainFooter } from "./components/Footer/FooterMain"; + +import "./App.scss"; + +export const App = () => { + return ( + ScreenSize(), + ( + <> + {window.innerWidth > 1024 ? : } +
+
+ +
+
+ + +
+ +
+ + ) + ); +}; diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..494dd23 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import { App } from "./App"; + +const root = ReactDOM.createRoot( + document.getElementById("root") as HTMLElement +); +root.render( + + + + + +); diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..216694f --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,23 @@ +import { Routes, Route } from "react-router-dom"; + +import { About } from "./pages/About"; +import { Payments } from "./pages/Payments"; +import { Delivery } from "./pages/Delivery"; +import { Form } from "./pages/Contact"; +import { Privacy } from "./pages/Privacy"; +import { Refund } from "./pages/Refund"; + +export const Router = () => { + return ( + <> + + } /> + } /> + } /> + } /> + } /> + } /> + + + ); +};