From 8ec02ff0c9d79184fb9564c3dd59875f41d2a4fe Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 18 Jan 2023 22:23:19 -0300 Subject: [PATCH 1/4] fix: Consertado tamanho das imagens do footer --- src/components/Address/Address.tsx | 3 +- src/components/Address/address.module.scss | 13 +++++++++ .../DevelopedBy/developedBy.module.scss | 23 +++++++++++++++- src/components/Payments/Payments.tsx | 2 +- src/components/Payments/payments.module.scss | 11 ++++++++ .../PoweredBy/assets/image/vtexLogo.png | Bin 928 -> 1028 bytes .../PoweredBy/poweredBy.module.scss | 23 +++++++++++++++- src/components/Socials/Socials.tsx | 20 ++++++++++---- src/components/Socials/socials.module.scss | 8 +++--- src/components/Whatsapp/Whatsapp.tsx | 7 +++-- src/components/Whatsapp/whatsapp.module.scss | 10 +++++++ .../Footer/BottomFooter/BottomFooter.tsx | 26 ++++++++++++++++++ src/sectors/Footer/Footer.tsx | 3 +- src/styles/main.scss | 2 ++ src/styles/partials/bottom_footer.scss | 18 ++++++++++++ 15 files changed, 153 insertions(+), 16 deletions(-) create mode 100644 src/components/Address/address.module.scss create mode 100644 src/components/Whatsapp/whatsapp.module.scss create mode 100644 src/sectors/Footer/BottomFooter/BottomFooter.tsx create mode 100644 src/styles/partials/bottom_footer.scss diff --git a/src/components/Address/Address.tsx b/src/components/Address/Address.tsx index bf006c2..1e88714 100644 --- a/src/components/Address/Address.tsx +++ b/src/components/Address/Address.tsx @@ -1,7 +1,8 @@ import React from "react"; +import styles from "./address.module.scss"; const Address = () => { return ( -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

diff --git a/src/components/Address/address.module.scss b/src/components/Address/address.module.scss new file mode 100644 index 0000000..a7c12d9 --- /dev/null +++ b/src/components/Address/address.module.scss @@ -0,0 +1,13 @@ +.endereco { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: white; + margin: 0 0 0 0; + @media screen and (min-width: 2500px) { + font-size: 20px; + } +} diff --git a/src/components/DevelopedBy/developedBy.module.scss b/src/components/DevelopedBy/developedBy.module.scss index 470f3ca..401028d 100644 --- a/src/components/DevelopedBy/developedBy.module.scss +++ b/src/components/DevelopedBy/developedBy.module.scss @@ -3,6 +3,27 @@ flex-direction: row; align-items: center; p { - margin-right: 30px; + display: flex; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + + text-transform: capitalize; + margin-right: 13px; + color: white; + margin: 0 13px 0 0; + @media screen and (min-width: 2500px) { + font-size: 20px; + } + } + img { + width: 44.92px; + height: 16px; + @media screen and (min-width: 2500px) { + width: 84.22px; + height: 30px; + } } } diff --git a/src/components/Payments/Payments.tsx b/src/components/Payments/Payments.tsx index 668687f..a6720ae 100644 --- a/src/components/Payments/Payments.tsx +++ b/src/components/Payments/Payments.tsx @@ -38,7 +38,7 @@ const Payments = () => { }; const VtexPci = () => { - return vtx Pci; + return vtx Pci; }; export { Payments, VtexPci }; diff --git a/src/components/Payments/payments.module.scss b/src/components/Payments/payments.module.scss index 2d88400..a60349e 100644 --- a/src/components/Payments/payments.module.scss +++ b/src/components/Payments/payments.module.scss @@ -1,4 +1,15 @@ .paymentsList { display: flex; flex-direction: row; + gap: 12px; +} +.paymentsItem { +} +img { + width: 35px; + height: 20.2px; +} +.paymentsPci { + width: 54.61px; + height: 34px; } diff --git a/src/components/PoweredBy/assets/image/vtexLogo.png b/src/components/PoweredBy/assets/image/vtexLogo.png index 867c3bb77b59ad8b2cf21341d08c53fa5aa673db..8f08de3904f2cb058dcb63b8f90a629674167bab 100644 GIT binary patch delta 991 zcmV<510ejM2ZRVAiBL{Q4GJ0x0000DNk~Le000160000W2nGNE0DaR0n~@vFLEQ;V4G*NaMxmJvd#~?k95%q3p+jT(36%H!@>$|5a-5v1e6P6oEB#e+>;WZQrrR zS{=}nG1-A2Gv>NjSq$ac%p!8yW7C4!v!wPMZN@S+4^cn^oZbS{8AbH%iR@UYU-FKd z-)Brmp*$7^yC&qBb0(XSzRP{Xc;qpK`hz{gbfPa5g~4R?1*w1X=*WqT7V5dTs)$Vk z_S`}!Tf`p1v0gQRL@+*Ee>ho!PP!!QS>2H78+df&L`FxRku;-)v7<|8f#ii9LqB)m zvkB<5#@F#~T|;)Ac;H0$4(mNb@_$C|H*}-A1UxM*9~YN#w!e}hYL^znSiF*VV|}ky zkO-c8<}_9wX|IL)ae}>Lp&eg3EIF6^NNTR=-5S!Vo0h+kd%7-Xf8>4x{}?xu_-uOP zau4kP@8$}vRTJ~Z=Dum_ytK~IXx%Jz1E<*4uG7{5=(M#-(H5@5F{TFDhBKVE4_Wcd zl&^#K;Q6jEu?V!yF&(d-5O^K}+NE!vsuTat1{n%*&z2JDY{V`Vp$*0wq=bi#Aw9LX z`kS7;tjN91^k^2>e>efV01c;)EjuVP*9z+l;icEUbqtdWZ3;|BLqjl}s0<=)^N
N;12f2)*42FpaK>d!XR22UTp?X`2oR{oeYFcI2Ncn1;VrWhtR z3jtBgFNL8@U8`wr%P@wS3H*9XhZvief-F3o^j<_}=OVi2yNX-NP8 N002ovPDHLkV1md)+B^UN delta 890 zcmV-=1BLvA2%rZciBL{Q4GJ0x0000DNk~Le0000;0000z2nGNE01g5#HIX4Te>F)& zK~#7F?VIs++At8tkG}rjbb>k)ly2ZoP&S|&gie6F0i7Vu1jz<&7T^5VQQNLK&wqnB+T-|diY5p9! z{9+^RtPI4)x#8--rJ%g{@y_yte|MChaWq?71u4qYK*MWL`*@uwQ*0lxY#B5VujDV( ztm;`}tDpzUllpC&@8{M^LG5Gqlk%e0r)lexw1$or3gN9WNw98)rlDsVICj zp*9bNy|5)WkP}r!@LMDMe<)nW@fw_moQfjB*RBzsdvXN{u0=>iJ;s3ckmG(=hQ|{_ zJrzlTpNcdE1tP#$E}^`~2tO6=DG-RWt^2zx@V|2rQuSz0zVa5xgbc*rEoM*bQNK$>M2vb(i*+dlNR6W<7wt9?-1b1YS zszWLTfx{t)v#nS3zkvT8-x$~0B0S+;3RmE#BFzbYyJ8>^1 z%I@GnJX4yPuN4Kxe+~7@ld2VkBe;6Jfh-)N&>Rdy9}Y`O4ai)Owb9-u z-emGfsRB1gR-Lu=_3=6iN)^XRt}nFri4lOZrA|9ZH87ENPkX6~ z(pOIh`okgnfwmGA>CYE5C3wJxE0Y<_V1s-5O+`}!{|4RlP+hi8u7bU1uO_D+6Ew+| zx;Ul7z&=tir~GU;FdSVxQ10ORuC~Jn38N-rXEiqM8nbN6k;~Kh? {
diff --git a/src/components/Socials/socials.module.scss b/src/components/Socials/socials.module.scss index 40a5ae8..c82984e 100644 --- a/src/components/Socials/socials.module.scss +++ b/src/components/Socials/socials.module.scss @@ -20,8 +20,8 @@ line-height: 32.81px; } } -} -img { - width: 35px; - height: 35px; + img { + width: 35px; + height: 35px; + } } diff --git a/src/components/Whatsapp/Whatsapp.tsx b/src/components/Whatsapp/Whatsapp.tsx index 4fa35e9..0b8daf1 100644 --- a/src/components/Whatsapp/Whatsapp.tsx +++ b/src/components/Whatsapp/Whatsapp.tsx @@ -1,10 +1,13 @@ import React from "react"; import whatsappImg from "./assets/image/whatsapp.png"; +import styles from "./whatsapp.module.scss"; const Whatsapp = () => { return ( -
- Whatsapp + ); }; diff --git a/src/components/Whatsapp/whatsapp.module.scss b/src/components/Whatsapp/whatsapp.module.scss new file mode 100644 index 0000000..17e3feb --- /dev/null +++ b/src/components/Whatsapp/whatsapp.module.scss @@ -0,0 +1,10 @@ +.whatsapp-wrapper { + img { + width: 34px; + height: 34px; + @media screen and (min-width: 2500px) { + width: 66px; + height: 66px; + } + } +} diff --git a/src/sectors/Footer/BottomFooter/BottomFooter.tsx b/src/sectors/Footer/BottomFooter/BottomFooter.tsx new file mode 100644 index 0000000..4742a5c --- /dev/null +++ b/src/sectors/Footer/BottomFooter/BottomFooter.tsx @@ -0,0 +1,26 @@ +import { Address } from "../../../components/Address/Address"; +import { Payments } from "../../../components/Payments/Payments"; +import { VtexPci } from "../../../components/Payments/Payments"; +import { PoweredBy } from "../../../components/PoweredBy/PoweredBy"; + +const BottomFooter = () => { + return ( +
+
    +
  • +
    +
    • +
  • + +

    |

    + +
    • +
  • + +
    • +
+
+ ); +}; + +export { BottomFooter }; diff --git a/src/sectors/Footer/Footer.tsx b/src/sectors/Footer/Footer.tsx index db822e2..d3c618e 100644 --- a/src/sectors/Footer/Footer.tsx +++ b/src/sectors/Footer/Footer.tsx @@ -1,9 +1,10 @@ import { TopFooter } from "./TopFooter/TopFooter"; - +import { BottomFooter } from "./BottomFooter/BottomFooter"; const Footer = () => { return (
+
); }; diff --git a/src/styles/main.scss b/src/styles/main.scss index cb06bce..c0f7eff 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -8,3 +8,5 @@ @import "partials/top_header.scss"; @import "partials/bottom_header.scss"; @import "partials/top_footer.scss"; +@import "partials/footer.scss"; +@import "partials/bottom_footer.scss"; diff --git a/src/styles/partials/bottom_footer.scss b/src/styles/partials/bottom_footer.scss new file mode 100644 index 0000000..fc01374 --- /dev/null +++ b/src/styles/partials/bottom_footer.scss @@ -0,0 +1,18 @@ +.bottom_footer { + display: flex; + flex-direction: row; + background: black; +} +.bottom_footer_itens { + display: flex; + flex-direction: row; +} +.pagamentos { + display: flex; + flex-direction: row; + + p { + color: white; + } + gap: 5px; +} From 65fa8478df88cfe75876e6c9f99b182a4a62c9fb Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 18 Jan 2023 23:19:03 -0300 Subject: [PATCH 2/4] feat(footer): Adicionado o footer inferior --- src/components/Address/address.module.scss | 6 +++++ .../DevelopedBy/developedBy.module.scss | 8 +++--- src/components/Payments/payments.module.scss | 18 ++++++++++--- .../Footer/BottomFooter/BottomFooter.tsx | 25 ++++++++----------- src/styles/partials/bottom_footer.scss | 12 +++++++++ 5 files changed, 47 insertions(+), 22 deletions(-) diff --git a/src/components/Address/address.module.scss b/src/components/Address/address.module.scss index a7c12d9..9b4ad43 100644 --- a/src/components/Address/address.module.scss +++ b/src/components/Address/address.module.scss @@ -1,4 +1,6 @@ .endereco { + width: 234px; + height: 24px; font-family: "Roboto"; font-style: normal; font-weight: 400; @@ -7,7 +9,11 @@ text-transform: capitalize; color: white; margin: 0 0 0 0; + @media screen and (min-width: 2500px) { + width: 467px; + height: 47px; font-size: 20px; + line-height: 23px; } } diff --git a/src/components/DevelopedBy/developedBy.module.scss b/src/components/DevelopedBy/developedBy.module.scss index 401028d..929b98c 100644 --- a/src/components/DevelopedBy/developedBy.module.scss +++ b/src/components/DevelopedBy/developedBy.module.scss @@ -19,11 +19,11 @@ } } img { - width: 44.92px; - height: 16px; + width: 28.66px; + height: 15.65px; @media screen and (min-width: 2500px) { - width: 84.22px; - height: 30px; + width: 34.15px; + height: 23.87px; } } } diff --git a/src/components/Payments/payments.module.scss b/src/components/Payments/payments.module.scss index a60349e..bffead2 100644 --- a/src/components/Payments/payments.module.scss +++ b/src/components/Payments/payments.module.scss @@ -2,14 +2,24 @@ display: flex; flex-direction: row; gap: 12px; + padding: 0 0 0 0; } .paymentsItem { + img { + width: 35px; + height: 20.2px; + @media screen and (min-width: 2500px) { + width: 70px; + height: 40.25px; + } + } } -img { - width: 35px; - height: 20.2px; -} + .paymentsPci { width: 54.61px; height: 34px; + @media screen and (min-width: 2500px) { + width: 106px; + height: 66px; + } } diff --git a/src/sectors/Footer/BottomFooter/BottomFooter.tsx b/src/sectors/Footer/BottomFooter/BottomFooter.tsx index 4742a5c..05b3e93 100644 --- a/src/sectors/Footer/BottomFooter/BottomFooter.tsx +++ b/src/sectors/Footer/BottomFooter/BottomFooter.tsx @@ -2,23 +2,20 @@ import { Address } from "../../../components/Address/Address"; import { Payments } from "../../../components/Payments/Payments"; import { VtexPci } from "../../../components/Payments/Payments"; import { PoweredBy } from "../../../components/PoweredBy/PoweredBy"; - +import { DevelopedBy } from "../../../components/DevelopedBy/DevelopedBy"; const BottomFooter = () => { return (
-
    -
  • -
    -
    • -
  • - -

    |

    - -
    • -
  • - -
    • -
+
+
+ +

|

+ +
+
+ + +
); }; diff --git a/src/styles/partials/bottom_footer.scss b/src/styles/partials/bottom_footer.scss index fc01374..f8a8858 100644 --- a/src/styles/partials/bottom_footer.scss +++ b/src/styles/partials/bottom_footer.scss @@ -1,12 +1,19 @@ .bottom_footer { + width: 100%; display: flex; flex-direction: row; background: black; + margin: 0 auto; + padding: 20px 100px; + justify-content: space-between; } .bottom_footer_itens { display: flex; flex-direction: row; + + align-items: center; } + .pagamentos { display: flex; flex-direction: row; @@ -16,3 +23,8 @@ } gap: 5px; } +.creation { + display: flex; + flex-direction: row; + gap: 13px; +} From 2e9681bd12dea9bb0a268fa23d490c12c3f278df Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 19 Jan 2023 11:28:47 -0300 Subject: [PATCH 3/4] feat(newsletter): Adicionando estilos na newsletter --- .../Newsletter/newsletter.module.scss | 12 ++++++++ src/index.tsx | 2 ++ src/sectors/Footer/Footer.tsx | 2 ++ src/sectors/Footer/TopFooter/TopFooter.tsx | 28 ++++++++----------- src/styles/partials/footer.scss | 5 ++++ src/styles/partials/top_footer.scss | 12 ++++---- 6 files changed, 40 insertions(+), 21 deletions(-) diff --git a/src/components/Newsletter/newsletter.module.scss b/src/components/Newsletter/newsletter.module.scss index 2134542..f9c9d7f 100644 --- a/src/components/Newsletter/newsletter.module.scss +++ b/src/components/Newsletter/newsletter.module.scss @@ -1,9 +1,17 @@ .newsForm { + width: 474px; + height: 72px; display: flex; flex-direction: column; font-weight: 500; font-size: 18px; + font-family: "Roboto"; font-variant: small-caps; + line-height: 21px; + letter-spacing: 0.05em; + font-style: normal; + color: #303030; + margin: 16px 0 16px 0; @media screen and (min-width: 2500px) { font-size: 36px; } @@ -26,6 +34,7 @@ font-weight: 400; font-size: 14px; color: #c4c4c4; + font-family: "Roboto"; @media screen and (min-width: 2500px) { font-size: 28px; } @@ -36,6 +45,7 @@ } } .newsForm-btn { + display: flex; width: 126px; height: 42px; background: #000000; @@ -45,6 +55,8 @@ color: white; font-weight: 700; font-size: 12px; + align-items: center; + justify-content: center; @media screen and (min-width: 2500px) { width: 246px; height: 59px; diff --git a/src/index.tsx b/src/index.tsx index fa8b457..239a017 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,6 +8,7 @@ import { Cursos } from "./pages/Cursos"; import { RoutesUrl } from "./components/Router/Router"; import { Header } from "./sectors/Header/Header"; import { Footer } from "./sectors/Footer/Footer"; +import { Newsletter } from "./components/Newsletter/Newsletter"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); @@ -16,6 +17,7 @@ root.render(
+
diff --git a/src/sectors/Footer/Footer.tsx b/src/sectors/Footer/Footer.tsx index d3c618e..cb53813 100644 --- a/src/sectors/Footer/Footer.tsx +++ b/src/sectors/Footer/Footer.tsx @@ -1,8 +1,10 @@ import { TopFooter } from "./TopFooter/TopFooter"; import { BottomFooter } from "./BottomFooter/BottomFooter"; +import { Newsletter } from "../../components/Newsletter/Newsletter"; const Footer = () => { return (
+
diff --git a/src/sectors/Footer/TopFooter/TopFooter.tsx b/src/sectors/Footer/TopFooter/TopFooter.tsx index 9a2f65d..6433fe9 100644 --- a/src/sectors/Footer/TopFooter/TopFooter.tsx +++ b/src/sectors/Footer/TopFooter/TopFooter.tsx @@ -3,24 +3,20 @@ import { Doubts } from "../../../components/Doubts/Doubts"; import { Contact } from "../../../components/Contact/Contact"; import { Socials } from "../../../components/Socials/Socials"; import { Whatsapp } from "../../../components/Whatsapp/Whatsapp"; + const TopFooter = () => { return ( -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - - -
    • -
+
+ + + + + + +
+ + +
); }; diff --git a/src/styles/partials/footer.scss b/src/styles/partials/footer.scss index 285dd35..a7072cd 100644 --- a/src/styles/partials/footer.scss +++ b/src/styles/partials/footer.scss @@ -1,3 +1,8 @@ .footer-wrapper { width: 100%; + display: flex; + flex-direction: column; + align-items: center; + border-top: 1px solid black; + margin-top: 81px; } diff --git a/src/styles/partials/top_footer.scss b/src/styles/partials/top_footer.scss index 9050a4d..effae37 100644 --- a/src/styles/partials/top_footer.scss +++ b/src/styles/partials/top_footer.scss @@ -1,11 +1,13 @@ -.top_footer_itens { +.top_footer_wrapper { + width: 100%; display: flex; flex-direction: row; - justify-content: space-around; - flex-flow: row wrap; - padding: 0 0 0 0 !important; + justify-content: space-between; + padding: 50px 16px 64px 100px; + border-top: 1px solid black; } -.top_footer_item { +.top_footer_socials { display: flex; flex-direction: row; + gap: 50px; } From d5106cfc372f4841e3623084b0dccddfa1b1611e Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 19 Jan 2023 12:01:50 -0300 Subject: [PATCH 4/4] fix: Ajuste de margin do componente caminho --- src/components/Caminhos/caminhos.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Caminhos/caminhos.module.scss b/src/components/Caminhos/caminhos.module.scss index 6c1db67..3c5b5dc 100644 --- a/src/components/Caminhos/caminhos.module.scss +++ b/src/components/Caminhos/caminhos.module.scss @@ -2,6 +2,8 @@ display: flex; flex-direction: row; gap: 5px; + align-items: baseline; + margin: 30px 0 0 100px; p { font-family: "Roboto"; font-style: normal;