From ea6ea69a0b5516dc8d9480e63eddd0d767f39559 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 19 Jan 2023 23:41:43 -0300 Subject: [PATCH] =?UTF-8?q?feat(form):=20Adicionado=20os=20estilos=20mobil?= =?UTF-8?q?e=20do=20formul=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AccordionBody/AccordionBody.tsx | 116 +++++++++++++++--- .../FormInput/formInput.module.scss | 7 ++ .../NavigationBar/NavigationBar.tsx | 2 +- src/components/Router/Router.tsx | 11 +- src/pages/Home.tsx | 10 +- src/pages/Saiba.tsx | 13 ++ src/sectors/Body/CursosBody.tsx | 4 +- src/sectors/Body/HomeBody.tsx | 11 ++ src/sectors/Body/InstitucionaisBody.tsx | 4 +- src/sectors/Body/SaibaBody.tsx | 11 ++ src/styles/partials/accordionBody.scss | 18 +++ src/styles/partials/body.scss | 10 +- 12 files changed, 178 insertions(+), 39 deletions(-) create mode 100644 src/pages/Saiba.tsx create mode 100644 src/sectors/Body/HomeBody.tsx create mode 100644 src/sectors/Body/SaibaBody.tsx diff --git a/src/components/AccordionBody/AccordionBody.tsx b/src/components/AccordionBody/AccordionBody.tsx index 9923b1b..0850617 100644 --- a/src/components/AccordionBody/AccordionBody.tsx +++ b/src/components/AccordionBody/AccordionBody.tsx @@ -7,21 +7,33 @@ import styles from "./accordionBody.module.scss"; const AccordionBody = () => { return ( - - + + Sobre + Forma de Pagamento + + + Entrega + + + Troca e Devolução + + + Segurança e Privacidade + + Contato - + -
+

Sobre

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed @@ -31,26 +43,90 @@ const AccordionBody = () => { irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. Sed ut perspiciatis unde omnis - iste natus error sit voluptatem accusantium doloremque - laudantium, totam rem aperiam, eaque ipsa quae ab illo - inventore veritatis et quasi architecto beatae vitae dicta - sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit - aspernatur aut odit aut fugit, sed quia consequuntur magni - dolores eos qui ratione voluptatem sequi nesciunt. Neque porro - quisquam est, qui dolorem ipsum quia dolor sit amet, - consectetur, adipisci velit, sed quia non numquam eius modi - tempora incidunt ut labore et dolore magnam aliquam quaerat - voluptatem. Ut enim ad minima veniam, quis nostrum - exercitationem ullam corporis suscipit laboriosam, nisi ut - aliquid ex ea commodi consequatur? Quis autem vel eum iure - reprehenderit qui in ea voluptate velit esse quam nihil - molestiae consequatur, vel illum qui dolorem eum fugiat quo - voluptas nulla pariatur? + mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque + ipsa quae ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem + quia voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Neque porro quisquam est, qui dolorem ipsum quia + dolor sit amet, consectetur, adipisci velit, sed quia non + numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam + corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur? Quis autem vel eum iure reprehenderit qui in ea + voluptate velit esse quam nihil molestiae consequatur, vel + illum qui dolorem eum fugiat quo voluptas nulla pariatur?

+
+

Forma de Pagamento

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+ + +
+

Entrega

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+ + +
+

Troca e Devolução

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+ + +
+

Segurança e Privacidade

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+ + diff --git a/src/components/FormInput/formInput.module.scss b/src/components/FormInput/formInput.module.scss index 0cdf771..93d3c10 100644 --- a/src/components/FormInput/formInput.module.scss +++ b/src/components/FormInput/formInput.module.scss @@ -17,6 +17,11 @@ @media screen and (min-width: 2500px) { font-size: 48px; } + @media screen and (max-width: 1024px) { + display: flex; + align-items: center; + justify-content: center; + } } .form-wrapper form { width: 100%; @@ -93,6 +98,8 @@ } #check { + display: flex; + align-items: center; font-size: 15px; border: 1px solid #000000; border-radius: 3px; diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx index 0e4f629..1e2b185 100644 --- a/src/components/NavigationBar/NavigationBar.tsx +++ b/src/components/NavigationBar/NavigationBar.tsx @@ -59,7 +59,7 @@ const NavigationBar = () => {
  • - + SAIBA MAIS
    • diff --git a/src/components/Router/Router.tsx b/src/components/Router/Router.tsx index 81e380f..ba63df2 100644 --- a/src/components/Router/Router.tsx +++ b/src/components/Router/Router.tsx @@ -5,15 +5,7 @@ import { Home } from "../../pages/Home"; import { Teste } from "../../pages/Teste"; import { Cursos } from "../../pages/Cursos"; import { Institucionais } from "../../pages/Institucionais"; -/* -import Home from "./Home"; -import Sobre from "./Sobre"; -import Usuario from "./Usuario"; - - - -*/ - +import { Saiba } from "../../pages/Saiba"; const RoutesUrl = () => { return ( @@ -23,6 +15,7 @@ const RoutesUrl = () => { path="/institucionais" element={} /> + } /> ); }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 54a651a..822e1a8 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,8 +1,12 @@ import React from "react"; -import { Header } from "../sectors/Header/Header"; -import { Footer } from "../sectors/Footer/Footer"; +import { HomeBody } from "../sectors/Body/HomeBody"; + const Home = (prop: { titulo: string }) => { - return
    ; + return ( +
    + +
    + ); }; export { Home }; diff --git a/src/pages/Saiba.tsx b/src/pages/Saiba.tsx new file mode 100644 index 0000000..05c3758 --- /dev/null +++ b/src/pages/Saiba.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { SaibaBody } from "../sectors/Body/SaibaBody"; +import { Caminhos } from "../components/Caminhos/Caminhos"; +const Saiba = (prop: { titulo: string }) => { + return ( +
    + + +
    + ); +}; + +export { Saiba }; diff --git a/src/sectors/Body/CursosBody.tsx b/src/sectors/Body/CursosBody.tsx index c4f5a8e..edd6925 100644 --- a/src/sectors/Body/CursosBody.tsx +++ b/src/sectors/Body/CursosBody.tsx @@ -2,8 +2,8 @@ import React from "react"; const CursosBody = () => { return ( -
    -

    Cursos

    ; +
    +

    CURSOS

    ;
    ); }; diff --git a/src/sectors/Body/HomeBody.tsx b/src/sectors/Body/HomeBody.tsx new file mode 100644 index 0000000..8a774df --- /dev/null +++ b/src/sectors/Body/HomeBody.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +const HomeBody = () => { + return ( +
    +

    BEM-VINDO

    +
    + ); +}; + +export { HomeBody }; diff --git a/src/sectors/Body/InstitucionaisBody.tsx b/src/sectors/Body/InstitucionaisBody.tsx index 36834bf..d4402d1 100644 --- a/src/sectors/Body/InstitucionaisBody.tsx +++ b/src/sectors/Body/InstitucionaisBody.tsx @@ -2,8 +2,8 @@ import React from "react"; import { AccordionBody } from "../../components/AccordionBody/AccordionBody"; const InstitucionaisBody = () => { return ( -
    -

    INSTITUCIONAL

    +
    +

    INSTITUCIONAL

    ); diff --git a/src/sectors/Body/SaibaBody.tsx b/src/sectors/Body/SaibaBody.tsx new file mode 100644 index 0000000..4d08b76 --- /dev/null +++ b/src/sectors/Body/SaibaBody.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +const SaibaBody = () => { + return ( +
    +

    SAIBA MAIS

    +
    + ); +}; + +export { SaibaBody }; diff --git a/src/styles/partials/accordionBody.scss b/src/styles/partials/accordionBody.scss index 5ee2d52..9b4f992 100644 --- a/src/styles/partials/accordionBody.scss +++ b/src/styles/partials/accordionBody.scss @@ -18,3 +18,21 @@ .contato-item { width: 100%; } +@media screen and (max-width: 1025px) { + .fileiraItens { + flex-direction: column; + } + .conteudoLista { + width: 100%; + margin-top: 30px; + } + .indexLista { + width: 100%; + } + .conteudo { + h2 { + display: flex; + justify-content: center; + } + } +} diff --git a/src/styles/partials/body.scss b/src/styles/partials/body.scss index b5b2048..478f680 100644 --- a/src/styles/partials/body.scss +++ b/src/styles/partials/body.scss @@ -1,15 +1,21 @@ -.institucional-wrapper { +.body-wrapper { width: 100%; display: flex; flex-direction: column; + margin: 80px 0 80px 0; + padding: 0 100px 0 100px; + @media screen and (max-width: 1025px) { + padding: 0 16px 0 16px; + } } -.institucional-title { +.body-title { font-family: "Roboto"; font-weight: 400; font-size: 24px; line-height: 28.13px; display: flex; justify-content: center; + margin-bottom: 80px; @media screen and (min-width: 2500px) { font-size: 48px; line-height: 56.25px;