From ea6ea69a0b5516dc8d9480e63eddd0d767f39559 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 19 Jan 2023 23:41:43 -0300 Subject: [PATCH 1/4] =?UTF-8?q?feat(form):=20Adicionado=20os=20estilos=20m?= =?UTF-8?q?obile=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; From ac15184ac40df324778b63246c745bdfa910a4a7 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 20 Jan 2023 11:57:08 -0300 Subject: [PATCH 2/4] feat(scroll): Adicionado o scroll na tela --- src/components/ScrollPage/ScrollPage.tsx | 32 ++++++++++++++++++ .../SearchBox/searchBox.module.scss | 4 ++- src/components/Whatsapp/assets/image/seta.png | Bin 0 -> 3436 bytes src/index.tsx | 2 ++ src/sectors/ContactWhat/ContactWhat.tsx | 13 +++++++ src/sectors/Footer/TopFooter/TopFooter.tsx | 1 - src/styles/main.scss | 1 + src/styles/partials/scroll.scss | 21 ++++++++++++ 8 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 src/components/ScrollPage/ScrollPage.tsx create mode 100644 src/components/Whatsapp/assets/image/seta.png create mode 100644 src/sectors/ContactWhat/ContactWhat.tsx create mode 100644 src/styles/partials/scroll.scss diff --git a/src/components/ScrollPage/ScrollPage.tsx b/src/components/ScrollPage/ScrollPage.tsx new file mode 100644 index 0000000..77d394a --- /dev/null +++ b/src/components/ScrollPage/ScrollPage.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import setaImg from "../Whatsapp/assets/image/seta.png"; + +function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} + +const ScrollPage = () => { + let mybutton = document.getElementById("myBtn") as HTMLElement; + function scrollFunction() { + if ( + document.body.scrollTop > 80 || + document.documentElement.scrollTop > 80 + ) { + mybutton.style.display = "block"; + } else { + mybutton.style.display = "none"; + } + } + + window.onscroll = function () { + scrollFunction(); + }; + return ( + + ); +}; + +export { ScrollPage }; diff --git a/src/components/SearchBox/searchBox.module.scss b/src/components/SearchBox/searchBox.module.scss index 1669f12..aff345b 100644 --- a/src/components/SearchBox/searchBox.module.scss +++ b/src/components/SearchBox/searchBox.module.scss @@ -10,7 +10,7 @@ gap: 10px; width: 264px; height: 32px; - + font-size: 28px; background: #ffffff; border: 2px solid #f2f2f2; @@ -45,6 +45,8 @@ &::placeholder { font-size: 28px; } + right: 54px; + top: 10px; } @media screen and (max-width: 1024px) { right: 30px; diff --git a/src/components/Whatsapp/assets/image/seta.png b/src/components/Whatsapp/assets/image/seta.png new file mode 100644 index 0000000000000000000000000000000000000000..a6ac7ea879e6f3a11e32152f71b2a7730ecbf171 GIT binary patch literal 3436 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 O0000 +
    diff --git a/src/sectors/ContactWhat/ContactWhat.tsx b/src/sectors/ContactWhat/ContactWhat.tsx new file mode 100644 index 0000000..98a38fb --- /dev/null +++ b/src/sectors/ContactWhat/ContactWhat.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { Whatsapp } from "../../components/Whatsapp/Whatsapp"; +import { ScrollPage } from "../../components/ScrollPage/ScrollPage"; +const ContactWhat = () => { + return ( +
    + + +
    + ); +}; + +export { ContactWhat }; diff --git a/src/sectors/Footer/TopFooter/TopFooter.tsx b/src/sectors/Footer/TopFooter/TopFooter.tsx index 0c67c45..27f81c5 100644 --- a/src/sectors/Footer/TopFooter/TopFooter.tsx +++ b/src/sectors/Footer/TopFooter/TopFooter.tsx @@ -17,7 +17,6 @@ const TopFooter = () => {
    -
    diff --git a/src/styles/main.scss b/src/styles/main.scss index ad6a2e7..cd6f90b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -12,3 +12,4 @@ @import "partials/accordionBody.scss"; @import "partials/footer.scss"; @import "partials/bottom_footer.scss"; +@import "partials/scroll.scss"; diff --git a/src/styles/partials/scroll.scss b/src/styles/partials/scroll.scss new file mode 100644 index 0000000..0f121e4 --- /dev/null +++ b/src/styles/partials/scroll.scss @@ -0,0 +1,21 @@ +.scroll-wrapper { + display: flex; /* Hidden by default */ + position: fixed; /* Fixed/sticky position */ + bottom: 20px; /* Place the button at the bottom of the page */ + right: 30px; /* Place the button 30px from the right */ + z-index: 99; /* Make sure it does not overlap */ + flex-direction: column; + gap: 5px; +} +#myBtn { + border: none; /* Remove borders */ + outline: none; /* Remove outline */ + cursor: pointer; /* Add a mouse pointer on hover */ + + background-color: transparent; + @media screen and (min-width: 2500px) { + img { + width: 66px; + } + } +} From 269978c29b587092a02c8b7448bafaadc6ac93d9 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 20 Jan 2023 12:49:23 -0300 Subject: [PATCH 3/4] fix: Consertado os estilos do body --- src/components/Address/address.module.scss | 2 ++ src/components/Caminhos/caminhos.module.scss | 2 ++ src/components/Cart/cart.module.scss | 2 +- src/components/Enter/enter.module.scss | 1 + .../Newsletter/newsletter.module.scss | 3 ++ src/components/Payments/payments.module.scss | 4 +++ .../SearchBox/searchBox.module.scss | 3 +- src/components/Socials/socials.module.scss | 4 +++ src/styles/partials/accordionBody.scss | 28 +++++++++++++++++++ src/styles/partials/bottom_footer.scss | 11 +++++++- src/styles/partials/navigation.scss | 5 ++++ src/styles/partials/top_footer.scss | 2 ++ 12 files changed, 64 insertions(+), 3 deletions(-) diff --git a/src/components/Address/address.module.scss b/src/components/Address/address.module.scss index fa8fc9f..010e534 100644 --- a/src/components/Address/address.module.scss +++ b/src/components/Address/address.module.scss @@ -12,9 +12,11 @@ margin: 0 0 0 0; align-items: center; @media screen and (min-width: 2500px) { + display: flex; width: 467px; height: 47px; font-size: 20px; line-height: 23px; + align-items: center; } } diff --git a/src/components/Caminhos/caminhos.module.scss b/src/components/Caminhos/caminhos.module.scss index 3c5b5dc..21ea896 100644 --- a/src/components/Caminhos/caminhos.module.scss +++ b/src/components/Caminhos/caminhos.module.scss @@ -5,12 +5,14 @@ align-items: baseline; margin: 30px 0 0 100px; p { + display: flex; font-family: "Roboto"; font-style: normal; font-weight: 400; font-size: 12px; text-transform: uppercase; color: #c4c4c4; + align-items: center; @media screen and (min-width: 2500px) { font-size: 24px; } diff --git a/src/components/Cart/cart.module.scss b/src/components/Cart/cart.module.scss index fd040a1..b9153d4 100644 --- a/src/components/Cart/cart.module.scss +++ b/src/components/Cart/cart.module.scss @@ -12,6 +12,6 @@ height: 28px; @media screen and (min-width: 2500px) { width: 54.68px; - height: 38.91px; + height: 54.68px; } } diff --git a/src/components/Enter/enter.module.scss b/src/components/Enter/enter.module.scss index 09d1155..aff2454 100644 --- a/src/components/Enter/enter.module.scss +++ b/src/components/Enter/enter.module.scss @@ -6,6 +6,7 @@ font-size: 14px; color: #ffffff; text-decoration: none; + @media screen and (min-width: 2500px) { width: 105px; height: 33px; diff --git a/src/components/Newsletter/newsletter.module.scss b/src/components/Newsletter/newsletter.module.scss index a3cc239..96e2017 100644 --- a/src/components/Newsletter/newsletter.module.scss +++ b/src/components/Newsletter/newsletter.module.scss @@ -14,6 +14,8 @@ margin: 16px 0 16px 0; @media screen and (min-width: 2500px) { font-size: 36px; + width: 922px; + height: 109.24px; } } .newsForm-wrapper { @@ -42,6 +44,7 @@ @media screen and (min-width: 2500px) { width: 636px; height: 59px; + margin-top: 8px; } } .newsForm-btn { diff --git a/src/components/Payments/payments.module.scss b/src/components/Payments/payments.module.scss index bffead2..a008374 100644 --- a/src/components/Payments/payments.module.scss +++ b/src/components/Payments/payments.module.scss @@ -12,6 +12,10 @@ width: 70px; height: 40.25px; } + @media screen and (max-width: 1024px) { + width: 30px; + height: 17px; + } } } diff --git a/src/components/SearchBox/searchBox.module.scss b/src/components/SearchBox/searchBox.module.scss index aff345b..323d71a 100644 --- a/src/components/SearchBox/searchBox.module.scss +++ b/src/components/SearchBox/searchBox.module.scss @@ -12,12 +12,13 @@ height: 32px; font-size: 28px; background: #ffffff; - + font-size: 14px; border: 2px solid #f2f2f2; border-radius: 5px; @media screen and (min-width: 2500px) { width: 515.62px; height: 57px; + font-size: 28px; } @media screen and (max-width: 1024px) { width: 992px; diff --git a/src/components/Socials/socials.module.scss b/src/components/Socials/socials.module.scss index 21f300b..cdfdcff 100644 --- a/src/components/Socials/socials.module.scss +++ b/src/components/Socials/socials.module.scss @@ -23,6 +23,10 @@ img { width: 35px; height: 35px; + @media screen and (min-width: 2500px) { + width: 70px; + height: 70px; + } } } @media screen and (max-width: 1024px) { diff --git a/src/styles/partials/accordionBody.scss b/src/styles/partials/accordionBody.scss index 9b4f992..b89a7ef 100644 --- a/src/styles/partials/accordionBody.scss +++ b/src/styles/partials/accordionBody.scss @@ -36,3 +36,31 @@ } } } +.conteudo { + h2 { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + + color: #292929; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + } + p { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 15px; + + color: #7d7d7d; + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + } +} diff --git a/src/styles/partials/bottom_footer.scss b/src/styles/partials/bottom_footer.scss index 4e1dea8..246200b 100644 --- a/src/styles/partials/bottom_footer.scss +++ b/src/styles/partials/bottom_footer.scss @@ -6,20 +6,29 @@ margin: 0 auto; padding: 20px 100px; justify-content: space-between; + align-items: center; + @media screen and (max-width: 1024px) { + align-items: flex-start; + } } .bottom_footer_itens { display: flex; flex-direction: row; align-items: center; + @media screen and (min-width: 2500px) { + } } .pagamentos { display: flex; flex-direction: row; - + align-items: center; p { color: white; + @media screen and (min-width: 2500px) { + font-size: 50px; + } } gap: 5px; } diff --git a/src/styles/partials/navigation.scss b/src/styles/partials/navigation.scss index 935aad2..6dd1417 100644 --- a/src/styles/partials/navigation.scss +++ b/src/styles/partials/navigation.scss @@ -56,3 +56,8 @@ height: 585px; } } +@media screen and (min-width: 2500px) { + .navbar-nav { + gap: 55px; + } +} diff --git a/src/styles/partials/top_footer.scss b/src/styles/partials/top_footer.scss index 5db6c4a..09ed8c4 100644 --- a/src/styles/partials/top_footer.scss +++ b/src/styles/partials/top_footer.scss @@ -31,6 +31,8 @@ .acc_btn { &::after { background-image: url("../../components/AccordionFooter/assets/image/mais.png"); + width: 30px; + background-size: 14px; } font-family: "Roboto"; font-style: normal; From da0bcd439a8f6c48a9110b067d5cfc55611cdee2 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 20 Jan 2023 13:42:31 -0300 Subject: [PATCH 4/4] fix: Consertado o texto do body --- src/components/Caminhos/Caminhos.tsx | 38 +++++++++----------- src/components/Caminhos/caminhos.module.scss | 5 ++- src/components/FormInput/FormInput.tsx | 19 ++-------- src/styles/partials/accordionBody.scss | 3 ++ 4 files changed, 26 insertions(+), 39 deletions(-) diff --git a/src/components/Caminhos/Caminhos.tsx b/src/components/Caminhos/Caminhos.tsx index 5d49f93..7f6da21 100644 --- a/src/components/Caminhos/Caminhos.tsx +++ b/src/components/Caminhos/Caminhos.tsx @@ -7,27 +7,23 @@ import React, { useState } from "react"; const Caminhos = (prop: { titulo: string }) => { return ( <> - - - +
      +
    • + + Home image + +
      • +
    • +

      >

      +
      • +
    • +

      {prop.titulo}

      +
      • +
    ); }; diff --git a/src/components/Caminhos/caminhos.module.scss b/src/components/Caminhos/caminhos.module.scss index 21ea896..95c3c15 100644 --- a/src/components/Caminhos/caminhos.module.scss +++ b/src/components/Caminhos/caminhos.module.scss @@ -13,7 +13,10 @@ text-transform: uppercase; color: #c4c4c4; align-items: center; - @media screen and (min-width: 2500px) { + } + @media screen and (min-width: 2500px) { + align-items: flex-start; + p { font-size: 24px; } } diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx index 3a0d5fb..8cb08b7 100644 --- a/src/components/FormInput/FormInput.tsx +++ b/src/components/FormInput/FormInput.tsx @@ -29,17 +29,7 @@ const FormInput = () => { tel: "", instagram: "", termos: false, - }; /* - const formik = useFormik({ - initialValues: { - nome: "", - email: "", - cpf: "", - nascimento: "", - tel: "", - instagram: "", - termos: false, - },*/ + }; validationSchema: Yup.object({ nome: Yup.string() .required("*Campo Obrigatório") @@ -57,12 +47,7 @@ const FormInput = () => { tel: Yup.string().required("*Campo Obrigatório"), instagram: Yup.string().required("*Campo Obrigatório"), termos: Yup.boolean().required("*").isTrue(), - }); /* - onSubmit: function (values) { - alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}. - Age: ${values.nascimento},${values.tel},${values.instagram}`); - }, - });*/ + }); const validacao = Yup.object().shape({ nome: Yup.string() .required("*Campo Obrigatório") diff --git a/src/styles/partials/accordionBody.scss b/src/styles/partials/accordionBody.scss index b89a7ef..86dc244 100644 --- a/src/styles/partials/accordionBody.scss +++ b/src/styles/partials/accordionBody.scss @@ -62,5 +62,8 @@ font-size: 26px; line-height: 30px; } + @media screen and (max-width: 1024px) { + text-align: justify; + } } }