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/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.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 3c5b5dc..95c3c15 100644 --- a/src/components/Caminhos/caminhos.module.scss +++ b/src/components/Caminhos/caminhos.module.scss @@ -5,13 +5,18 @@ 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; - @media screen and (min-width: 2500px) { + align-items: center; + } + @media screen and (min-width: 2500px) { + align-items: flex-start; + p { 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/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/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/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/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/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..323d71a 100644 --- a/src/components/SearchBox/searchBox.module.scss +++ b/src/components/SearchBox/searchBox.module.scss @@ -10,14 +10,15 @@ gap: 10px; width: 264px; 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; @@ -45,6 +46,8 @@ &::placeholder { font-size: 28px; } + right: 54px; + top: 10px; } @media screen and (max-width: 1024px) { right: 30px; 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/components/Whatsapp/assets/image/seta.png b/src/components/Whatsapp/assets/image/seta.png new file mode 100644 index 0000000..a6ac7ea Binary files /dev/null and b/src/components/Whatsapp/assets/image/seta.png differ diff --git a/src/index.tsx b/src/index.tsx index 239a017..0e13047 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,12 +9,14 @@ import { RoutesUrl } from "./components/Router/Router"; import { Header } from "./sectors/Header/Header"; import { Footer } from "./sectors/Footer/Footer"; import { Newsletter } from "./components/Newsletter/Newsletter"; +import { ContactWhat } from "./sectors/ContactWhat/ContactWhat"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( +
    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/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/accordionBody.scss b/src/styles/partials/accordionBody.scss index 5ee2d52..86dc244 100644 --- a/src/styles/partials/accordionBody.scss +++ b/src/styles/partials/accordionBody.scss @@ -18,3 +18,52 @@ .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; + } + } +} +.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; + } + @media screen and (max-width: 1024px) { + text-align: justify; + } + } +} 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; 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/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; + } + } +} 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;