From 0ef5cc3e18faf941679382102403455a21075299 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Fri, 13 Jan 2023 20:15:07 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Cria=20valida=C3=A7=C3=B5es=20do=20form?= =?UTF-8?q?ul=C3=A1rio=20de=20contato?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 15 ++ package.json | 1 + public/index.html | 15 -- src/assets/imgs/arrow-up.png | Bin 0 -> 1594 bytes src/assets/imgs/whatsapp.png | Bin 0 -> 1893 bytes src/assets/svgs/arrow-up.svg | 4 + src/assets/svgs/whatsapp.svg | 10 +- src/components/contato/custom-form/index.tsx | 74 ++++--- .../contato/custom-form/style.module.scss | 98 ++++------ src/components/contato/style.module.scss | 3 +- src/components/entrega/style.module.scss | 3 +- src/components/footer/index.tsx | 35 ++-- src/components/footer/newsletter/index.tsx | 47 +++++ .../footer/newsletter/style.module.scss | 135 +++++++++++++ src/components/footer/style.module.scss | 184 +++++------------- src/components/header/index.tsx | 2 +- src/components/pagamento/style.module.scss | 1 + src/components/seguranca/style.module.scss | 1 + src/components/sidebar/index.tsx | 85 ++++++-- src/components/sidebar/style.module.scss | 64 +++--- src/components/sobre/style.module.scss | 1 + src/components/troca/style.module.scss | 1 + src/pages/Institucional.tsx | 2 + src/schema/FormSchema.tsx | 3 +- src/schema/NewsFormSchema.tsx | 6 + 25 files changed, 485 insertions(+), 305 deletions(-) create mode 100644 src/assets/imgs/arrow-up.png create mode 100644 src/assets/imgs/whatsapp.png create mode 100644 src/assets/svgs/arrow-up.svg create mode 100644 src/components/footer/newsletter/index.tsx create mode 100644 src/components/footer/newsletter/style.module.scss create mode 100644 src/schema/NewsFormSchema.tsx diff --git a/package-lock.json b/package-lock.json index c548ed1..4106447 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-modal": "^3.16.1", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", + "react-scroll-to-top": "^3.0.0", "react-text-mask": "^5.5.0", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -14252,6 +14253,14 @@ } } }, + "node_modules/react-scroll-to-top": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz", + "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==", + "peerDependencies": { + "react": "^16.8.0 || 17.x || ^18" + } + }, "node_modules/react-text-mask": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz", @@ -27118,6 +27127,12 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-scroll-to-top": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz", + "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==", + "requires": {} + }, "react-text-mask": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz", diff --git a/package.json b/package.json index 52d143c..210fb36 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-modal": "^3.16.1", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", + "react-scroll-to-top": "^3.0.0", "react-text-mask": "^5.5.0", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/public/index.html b/public/index.html index b1e5e6e..24b55e5 100644 --- a/public/index.html +++ b/public/index.html @@ -9,21 +9,6 @@ name="description" content="Web site created using create-react-app" /> - - - - M3 Academy diff --git a/src/assets/imgs/arrow-up.png b/src/assets/imgs/arrow-up.png new file mode 100644 index 0000000000000000000000000000000000000000..2f59074285c4554478ef1a0412df4f3408531e81 GIT binary patch literal 1594 zcmV-A2F3Y_P)`6pHRCt`_ob7JYNEC+OGj^cjLk+5+5{TedK!J*G_z5oE`U)sl zK)HhD4i@fUdj*s$pj?5ol)z8i0s?^`1_VMNSR<;o>UeziN1c$QNt+LUB<=IdmF@96 zZ_k+-k7q(ifG1C$7*fh43k>Ve9EY1Z`2!i0j)YQ~M*WwxwsS&nq8~gU{yAcGztq3aL3>QE_N_oe! zEH|n`BQe6ZZ6lM({0(3>it^fEJ}N`HGQzg)Y-qr(ZiRG7*M@X##N)@0XOvQRV@!c| zaf#@TX`1t$+}ySiJro7a_$Q1GubrFPG9qjX?gPlTb6*O$QcA0xRB71=+qUze2}TFP z(x5FfS~9}6?Yyq*b`P}&t>O`p)yjZuM`=*LK?Cdc#Tdrjfk*|G-48!2Klf~4QUt=#bR-mneWD@DLsN9 zxZdc+ZHp1*b^*I98mjT6lq2;ivL!WkVM^4KZImK45fMg1DLGB)5k`eu{<|h3wrfmw z8})UqM8sZ-hBDPrQHhAX6b)r`U7sx5gCGrjHDiT{P=NdAKGb1)5hzRG-ox{=n5197cXAK;NW152`^r}faiHT-oLuKilwC`NGSnqnmRBrfP6lWOePbh)Cxr8 z3IIE+YlHFeaU42ysFK^h?_+s+8NYu0YPpQ{^>sLogN==ivQP{R3}9knB9=CTnLWYG zZj^;qn;@mc($W%ES6ACEXJcanj^ki`eI3jU0LWxA*uQ^&lyb|w7XaQzS>l&3U!au2 z+S*#BBAp_ogyT3^Sy_Qn3ZCb6RbDfg+0~iZi89!FmpjD zr3$e=r4P_F%_RVM^ytxlNNA|tgSeBElOqBEnE77XYEq;C{2ov(q$VR}f*^PRRDIyt zqv_#JPEL*hRYPoMo=Z}zx21ZzxP=i1%R1$439FD!(rIbNL(?W<- st^ANi5Crd;*~w%wh0B*OyK!s$9}kn8aQ2fbz5oCK07*qoM6N<$f=W2(qW}N^ literal 0 HcmV?d00001 diff --git a/src/assets/imgs/whatsapp.png b/src/assets/imgs/whatsapp.png new file mode 100644 index 0000000000000000000000000000000000000000..0b65db6937f6b09f83cbb44c938fd02c2666ebbe GIT binary patch literal 1893 zcmV-r2b%baP)~&&({uxDX3b79xSIE6@jtToQrANGm1^Szx*AV)0L!8#$eQ>7KFB6uvR;773*nMb6P6%LThD(wQ+k=(H<#}0{z#eWblUCrpL5Rl zedjwR>dRfu#>P0S$L&AWRjVB_sDMJW>P|30hb zDI`J>;uSW1h3I{$a`jsVTicli1>h`5SpAt1su zqBG@&zCW&ris4C!4LNn0%py=s;(-7K?rJkbS@!{%s}P1eoTterf=S^4(Q-G-keyyM z-GL^r2q1wrpe;@(*;<6rJDi^^F~JRP#|ZZ(8N1%Z)*_59vXiC=e8rcwbDJDqZ)U@{ zYM(6YgQY1)u}IlduW4H2@g^bsbd&AV+G$f)H?5wxie~UWxPJEr_5b!6-QaD^DBK}R zHo8cYYbb&)G3U`a^l9c}+MepAryfh{&+%CL_%pO;#XA&35>_r!XAwqMd4)UzOMnPy zxE;MG-=MMaF^U`9r6y~;)H;h$9D<1zyOzG?C<1`X#F56fR)v5yh~yI>z`6x5x}LYW zYa_)Gv=u`H^LbSWQES+q+Un^%xDVn*9GOviID?jJcG4sO0;5;9c@(YX$a-4Q*k!tN zYFf0rObQ4Aix3g6g(Q$<#*Quoi}0q%yW5Sif(WbTJx8%bAr%|h_%BTn6W5^0QByYp z8M%g5%qikHmM}>4oa|XB%SCY!Fl-iW*zrq)6j$!uD`jN%i!}M*^1q%3pmcQfD>`=R z1jQ9uBF?}`w2*vo_S&zW&O6Qm92p&;ID^oDVA)ANIDPdeSNDJmeSYB!ial%$a@l7Z z4k8?L@%uaR4Ul!PH6&yyK#u{lcd`l$qT)K~s>O5--#~<;F8+@^h1(1@4g?Ycpf|X1 z>!R)J7=^|(K~qOyAplZxPA-DEMra~e&{Kn$#hPvw)=~kx z#t+KVTT*i+sWK-I1H=n7@P+x$({yFJ?RjVn9vAprw-G9=Xvyp))#n{Xz7(!DUb@e& zmZu;TB|4yVZA%s8kgH#A|5wmshFfwM4SI>sxzCNk`BrS>amf1Q%a*UrdSsR^20jB~ z1`y8od|#}IfA^16vv%(>0kYv(+_2Z8crR!b^) z!f|3=SaG5j^bWX6E4f>Baua}lLa(69Gw_cLl@-W_u&Fj&mL}X8_f@=DuR?j1G+6TeLNm z6MaluOaCj<*scE@Yg}u@*uWtCxs5g`$Vs6)X!*r;uBCzD=R2`_$bclqCPeV!DIZ z8&{f|JQdsmmH0)$Tbb&FFz#tc(`1Ib$T2|?K%Hv{xCQRt*4Y2j6EOm{0YP!csUFQ& zlBurQE^bkP+Pux6y8Q%?)%7l^9Bm%M6Z{?Uop?6sJJVL}HEendH2yGBc}5n?68)Cw zGVPP3*2b4eZi(KQQ}^%(e^RdeWC7;s!%mI2!W4u*b!~($gQ+ttpkMSRS0}1MY{;p7 zGIDs?aDJ9RujVaNUr3^OvdkcOy6-b6#(krm+?cdcyoMjsu>2tnsdB~hSdT1~X=J)g f!&-00000NkvXXu0mjfGXiK+ literal 0 HcmV?d00001 diff --git a/src/assets/svgs/arrow-up.svg b/src/assets/svgs/arrow-up.svg new file mode 100644 index 0000000..65dadad --- /dev/null +++ b/src/assets/svgs/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/whatsapp.svg b/src/assets/svgs/whatsapp.svg index c332214..53c5037 100644 --- a/src/assets/svgs/whatsapp.svg +++ b/src/assets/svgs/whatsapp.svg @@ -1,12 +1,10 @@ - - - - + + - + - + diff --git a/src/components/contato/custom-form/index.tsx b/src/components/contato/custom-form/index.tsx index a1382ad..0d72a1b 100644 --- a/src/components/contato/custom-form/index.tsx +++ b/src/components/contato/custom-form/index.tsx @@ -1,9 +1,8 @@ -import React from "react"; +import React, { useState } from "react"; -import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; +import { Formik, Form, Field, ErrorMessage } from "formik"; import FormSchema from "../../../schema/FormSchema"; - import styles from "./style.module.scss"; interface IFormikValues { @@ -27,67 +26,89 @@ const initialValues = { }; const CustomForm = () => { - const handleFormikSubmit = (values: IFormikValues) => { - // console.log(values); + const [successFeedback, setSuccessFeedback] = useState(false); + + const handleFormikSubmit = (values: IFormikValues, { resetForm }: any) => { + resetForm(); + setSuccessFeedback(true); + setTimeout(() => setSuccessFeedback(false), 3000); + console.log(values); }; return (
{ - console.log(handleFormikSubmit); - resetForm(); - }} + onSubmit={handleFormikSubmit} initialValues={initialValues} validationSchema={FormSchema} >
-
+
- +
-
+
- +
-
+
- +
-
+
- +
-
+
- +
-
+
{ className="invalid-feedback" />
-
-
diff --git a/src/components/contato/custom-form/style.module.scss b/src/components/contato/custom-form/style.module.scss index 2990701..8912e93 100644 --- a/src/components/contato/custom-form/style.module.scss +++ b/src/components/contato/custom-form/style.module.scss @@ -1,8 +1,8 @@ .form-wrapper { - // width: 58.438%; + width: 100%; // height: auto; - div { + .form-inputs { display: flex; flex-direction: column; position: relative; @@ -60,70 +60,54 @@ line-height: 28px; } } + } - .terms { - // position: relative; + .form-terms { + display: flex; + justify-content: center; - &__content { - display: flex; - align-items: end; - align-self: center; - justify-content: center; - margin: 0 0 12px; - text-decoration: underline; - font-weight: 400; - font-size: 14px; - line-height: 16px; + &__content { + display: flex; + align-items: end; + align-self: center; + justify-content: center; + margin: 0 0 12px; + text-decoration: underline; + font-weight: 400; + font-size: 14px; + line-height: 16px; - &::before { - text-decoration: none; - content: "* "; - color: var(--red); - } + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + + input { + border: 1px solid var(--black); + border-radius: 3px; + width: 18px; + height: 18px; + margin: 0 0 0 4.28px; @media (min-width: 2500px) { - font-size: 28px; - line-height: 33px; - } - - input { - border: 1px solid var(--black); - border-radius: 3px; - width: 18px; - height: 18px; - margin: 0 0 0 4.28px; - - @media (min-width: 2500px) { - width: 36.4px; - height: 36.4px; - } - } - - input[value="true"] { - color: var(--blue); + width: 36.4px; + height: 36.4px; } } } - // p { - // position: absolute; - // font-size: 14px; - // line-height: 16px; - // color: var(--red); - // right: 464px; - // top: -13px; + &__red { + margin: 0 4px 0 0; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--red); - // @media (min-width: 2500px) { - // font-size: 28px; - // line-height: 33px; - // right: 995px; - // top: -23px; - // } - - // @media (max-width: 1024px) { - // right: 577px; - // } - // } + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } } button { @@ -150,7 +134,7 @@ } } - p { + .success-feedback { font-weight: 400; font-size: 12px; line-height: 14px; diff --git a/src/components/contato/style.module.scss b/src/components/contato/style.module.scss index 7e56421..903b7ff 100644 --- a/src/components/contato/style.module.scss +++ b/src/components/contato/style.module.scss @@ -1,6 +1,5 @@ .contato { - width: 60.782%; - // width: 58.438%; + width: 58.438%; height: auto; margin: 0 0 0 30px; diff --git a/src/components/entrega/style.module.scss b/src/components/entrega/style.module.scss index 6198a16..0f714f8 100644 --- a/src/components/entrega/style.module.scss +++ b/src/components/entrega/style.module.scss @@ -1,5 +1,5 @@ .entrega { - width: 58.438%; + width: 85.22%; height: auto; margin: 0 0 0 30px; @@ -48,6 +48,7 @@ @media (max-width: 1024px) { font-size: 12px; line-height: 18px; + text-align: justify; } } } diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index ba2f8c7..6dd0d1d 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import styles from "./style.module.scss"; +import ScrollToTop from "react-scroll-to-top" // Social media icons @@ -27,6 +28,10 @@ import PCIVtex from "../../assets/svgs/vtex-pci-200.svg"; import Whatsapp from "../../assets/svgs/whatsapp.svg"; +// Scroll up + +import { ReactComponent as ScrollUp } from "../../assets/svgs/arrow-up.svg" + // Vtex e M3 logo import Vtex from "../../assets/svgs/vtex-logo.svg"; @@ -36,16 +41,6 @@ import { AccordionMenu } from "./AccordionMenu"; const Footer = () => { return (
-
-
-

- Assine nossa newsletter -

- - -
-
-
@@ -109,31 +104,31 @@ const Footer = () => {
-
+
Fale conosco pelo Whatsapp + + < ScrollToTop smooth component={ } />
); diff --git a/src/components/footer/newsletter/index.tsx b/src/components/footer/newsletter/index.tsx new file mode 100644 index 0000000..0584793 --- /dev/null +++ b/src/components/footer/newsletter/index.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +import { Formik, Form, Field, ErrorMessage } from "formik"; +import NewsFormSchema from "../../../schema/NewsFormSchema"; + +import styles from "./style.module.scss"; + +interface IFormikValues { + Email: string; +} + +const initialValues = { + Email: "", +}; + +const Newsletter = () => { + + const handleFormikSubmit = (values: IFormikValues, { resetForm }: any) => { + resetForm(); + console.log(values); + }; + + return ( +
+
+

Assine nossa newsletter

+ +
+ + + + +
+
+
+ ); +}; + +export { Newsletter }; diff --git a/src/components/footer/newsletter/style.module.scss b/src/components/footer/newsletter/style.module.scss new file mode 100644 index 0000000..279eeec --- /dev/null +++ b/src/components/footer/newsletter/style.module.scss @@ -0,0 +1,135 @@ +.newsletter { + width: 100%; + border-width: 1px 0px; + border-style: solid; + border-color: var(--black); + background: var(--white); + margin-top: 70px; + + &__wrapper { + width: 37.032%; + margin: 16px auto; + + @media (min-width: 2500px) { + width: 36.88%; + } + + @media (max-width: 1024px) { + width: 96.88%; + margin: 16px; + } + + @media (max-width: 599px) { + width: 91.6%; + } + } + + &__title { + margin: 0 0 8px; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--dark-gray-100); + + @media (min-width: 2500px) { + font-size: 36px; + line-height: 42px; + } + + @media (max-width: 1024px) { + margin: 0 0 16px; + font-size: 14px; + line-height: 16px; + } + } + + form { + position: relative; + } + + input { + width: 64.557%; + border: 1px solid var(--light-gray-400); + border-radius: 4px; + padding: 13px 16px; + color: var(--light-gray-500); + font-weight: 400; + font-size: 14px; + line-height: 16px; + + &::placeholder { + color: var(--light-gray-500); + } + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + + @media (max-width: 1024px) { + width: 96.88%; + margin: 0 0 16px; + border-radius: 0; + padding: 16px 17px; + } + + @media (max-width: 599px) { + width: 90%; + } + } + + span { + position: absolute; + left: 2px; + bottom: -14px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-align: right; + color: var(--red); + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + button { + width: 26.585%; + padding: 14px 20px; + margin-left: 8px; + background: var(--black); + color: var(--white); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border: none; + border-radius: 4px; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 12px; + line-height: 14px; + letter-spacing: 0.05em; + text-align: center; + text-transform: uppercase; + cursor: pointer; + + &:hover { + background: var(--dark-gray-200); + } + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + + @media (max-width: 1024px) { + width: 100%; + margin: 0; + border-radius: 0; + font-size: 14px; + line-height: 16px; + box-shadow: none; + } + } +} diff --git a/src/components/footer/style.module.scss b/src/components/footer/style.module.scss index 1bec498..b560b33 100644 --- a/src/components/footer/style.module.scss +++ b/src/components/footer/style.module.scss @@ -1,119 +1,3 @@ -.newsletter { - width: 100%; - border-width: 1px 0px; - border-style: solid; - border-color: var(--black); - background: var(--white); - margin-top: 70px; - - &__wrapper { - width: 37.032%; - margin: 16px auto; - - @media (min-width: 2500px) { - width: 36.88%; - } - - @media (max-width: 1024px) { - width: 96.88%; - margin: 16px; - } - - @media (max-width: 599px) { - width: 91.6%; - } - } - - &__title { - margin: 0 0 8px; - font-weight: 500; - font-size: 18px; - line-height: 21px; - letter-spacing: 0.05em; - text-transform: uppercase; - color: var(--dark-gray-100); - - @media (min-width: 2500px) { - font-size: 36px; - line-height: 42px; - } - - @media (max-width: 1024px) { - margin: 0 0 16px; - font-size: 14px; - line-height: 16px; - } - } - - input { - width: 64.557%; - border: 1px solid var(--light-gray-400); - border-radius: 4px; - padding: 13px 16px; - color: var(--light-gray-500); - font-weight: 400; - font-size: 14px; - line-height: 16px; - - &::placeholder { - color: var(--light-gray-500); - } - - @media (min-width: 2500px) { - font-size: 28px; - line-height: 33px; - } - - @media (max-width: 1024px) { - width: 96.88%; - margin: 0 0 16px; - border-radius: 0; - padding: 16px 17px; - } - - @media (max-width: 599px) { - width: 90%; - } - } - - button { - width: 26.585%; - padding: 14px 20px; - margin-left: 8px; - background: var(--black); - color: var(--white); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border: none; - border-radius: 4px; - font-family: "Roboto", sans-serif; - font-weight: 700; - font-size: 12px; - line-height: 14px; - letter-spacing: 0.05em; - text-align: center; - text-transform: uppercase; - cursor: pointer; - - &:hover { - background: var(--dark-gray-200); - } - - @media (min-width: 2500px) { - font-size: 24px; - line-height: 28px; - } - - @media (max-width: 1024px) { - width: 100%; - margin: 0; - border-radius: 0; - font-size: 14px; - line-height: 16px; - box-shadow: none; - } - } -} - .footer-top { @media (max-width: 1024px) { width: 100%; @@ -211,7 +95,6 @@ } } - a { text-decoration: none; color: var(--dark-gray-100); @@ -221,14 +104,14 @@ font-weight: 400; font-size: 14px; line-height: 16px; - + @media (min-width: 2500px) { font-size: 28px; line-height: 33px; } - + @media (max-width: 1024px) { - margin: 0 16px 24px; + margin: 0 16px 24px; } } } @@ -309,14 +192,14 @@ @media (min-width: 768px) and (max-width: 1024px) { width: 46.134%; - margin: 21.94px 0 21.94px 16px; + margin: 15px 0 11px 16px; } @media (max-width: 767px) { width: 100%; order: 1; gap: 11px; - margin: 22px 16px 23px 16px; + margin: 22px 16px 11px 16px; } .creditcard { @@ -334,7 +217,6 @@ } .vtex { - .vtex-pci { width: 54.61px; @@ -440,26 +322,58 @@ } } -.whatsapp-button { +.whatsapp-scrollup { + display: flex; + flex-direction: column; + align-items: center; position: fixed; - bottom: 190px; - right: 16px; z-index: 9999; - img { - width: 34px; + a { + position: fixed; + bottom: 225px; + right: 16px; - @media (min-width: 2500px) { - width: 100%; + @media (max-width: 1024px) { + bottom: 91px; + right: 17px; + } + + @media (max-width: 767px) { + bottom: 69px; + right: 17px; } } - @media (max-width: 1024px) { - bottom: 27.31px; - right: 17px; + button { + position: fixed; + bottom: 224px; + right: 50px; + background: transparent; + margin: 0; + padding: 0; + width: 0; + height: 0; + + @media (max-width: 1024px) { + bottom: 92px; + right: 51px; + } + + @media (max-width: 767px) { + bottom: 68px; + right: 51px; + } } - @media (max-width: 375px) { - bottom: 28px; + img, + svg { + width: 34px; + height: 34px; + + @media (min-width: 2500px) { + width: 66px; + height: 66px; + } } } diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 2f98715..23f1cff 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import logom3Academy from "../../assets/imgs/Logo-M3Academy.png"; import styles from "../header/style.module.scss"; diff --git a/src/components/pagamento/style.module.scss b/src/components/pagamento/style.module.scss index e664063..9f749a4 100644 --- a/src/components/pagamento/style.module.scss +++ b/src/components/pagamento/style.module.scss @@ -48,6 +48,7 @@ @media (max-width: 1024px) { font-size: 12px; line-height: 18px; + text-align: justify; } } } diff --git a/src/components/seguranca/style.module.scss b/src/components/seguranca/style.module.scss index ed96463..808f00f 100644 --- a/src/components/seguranca/style.module.scss +++ b/src/components/seguranca/style.module.scss @@ -48,6 +48,7 @@ @media (max-width: 1024px) { font-size: 12px; line-height: 18px; + text-align: justify; } } } diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index 591c226..c5bc441 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -2,27 +2,70 @@ import React from "react"; import { Root } from "../../routes/root"; import styles from "./style.module.scss"; -import { Link } from "react-router-dom"; +import { NavLink } from "react-router-dom"; export default function SideBar() { - return ( - <> -
- -
- -
- - ); - }; - export { SideBar }; + return ( + <> +
+ +
+ +
+ + ); +} + +export { SideBar }; diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss index b8071e5..174d0a9 100644 --- a/src/components/sidebar/style.module.scss +++ b/src/components/sidebar/style.module.scss @@ -6,40 +6,58 @@ } &__list { - ul { list-style: none; padding: 0; - margin: 0 90px 0 80px; + margin-left: 100px; @media (max-width: 1024px) { - margin: 0; + margin: 16px; } - li { - margin: 20px 16px; - - a { + margin: 20px 0; + width: 302px; + + @media (min-width: 2500px) { + // width: 23.6%; + width: 590px; + } + + @media (max-width: 1024px) { + width: 100%; + } + + a { + display: block; + padding-left: 16px; + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-decoration: none; + color: var(--medium-gray-200); + cursor: pointer; + + @media (min-width: 2500px) { font-weight: 400; - font-size: 16px; - line-height: 19px; - text-decoration: none; - color: var(--medium-gray-200); - cursor: pointer; - - @media (min-width: 2500px) { - font-weight: 400; - font-size: 32px; - line-height: 38px; - } + font-size: 32px; + line-height: 38px; + } + } + + .activeLink { + background: var(--black); + color: var(--white); + font-weight: 700; + padding: 10px 10px 12px 16px; + // margin: 20px 16px; } } } @media (max-width: 1024px) { - margin: 0 0 10px 0; - } + margin: 0 0 10px 0; + } } &__divider { @@ -49,11 +67,11 @@ height: 285px; @media (min-width: 2500px) { - height: 465px; + height: 465px; } - + @media (max-width: 1024px) { - display: none; + display: none; } } } diff --git a/src/components/sobre/style.module.scss b/src/components/sobre/style.module.scss index 1f9e044..c0f561b 100644 --- a/src/components/sobre/style.module.scss +++ b/src/components/sobre/style.module.scss @@ -48,6 +48,7 @@ @media (max-width: 1024px) { font-size: 12px; line-height: 18px; + text-align: justify; } } } diff --git a/src/components/troca/style.module.scss b/src/components/troca/style.module.scss index ea0deaa..fb2e922 100644 --- a/src/components/troca/style.module.scss +++ b/src/components/troca/style.module.scss @@ -48,6 +48,7 @@ @media (max-width: 1024px) { font-size: 12px; line-height: 18px; + text-align: justify; } } } diff --git a/src/pages/Institucional.tsx b/src/pages/Institucional.tsx index 5cf8e9e..eb31d2f 100644 --- a/src/pages/Institucional.tsx +++ b/src/pages/Institucional.tsx @@ -5,6 +5,7 @@ import { Breadcrumb } from "../components/breadcrumbs-title"; import { SideBar } from "../components/sidebar"; import { Footer } from "../components/footer"; import { BrowserRouter } from "react-router-dom"; +import { Newsletter } from "../components/footer/newsletter"; const Institucional = () => { const [openModal, setOpenModal] = useState(false); @@ -19,6 +20,7 @@ const Institucional = () => {
+