From 9ffa2ee347e574ad314d5f3d07003373cd32f45a Mon Sep 17 00:00:00 2001 From: ThiagoDuutra Date: Mon, 2 Jan 2023 10:46:35 -0300 Subject: [PATCH] feat: Cria footer desktop --- .../Components/Footer/FooterDesktop/index.tsx | 306 ++++++++++++++++++ .../Footer/ImagesFooter/Master-icon.png | Bin 0 -> 1090 bytes .../Footer/ImagesFooter/american-icon.png | Bin 0 -> 2296 bytes .../Footer/ImagesFooter/boleto-icon.png | Bin 0 -> 1259 bytes .../Footer/ImagesFooter/elo-icon.png | Bin 0 -> 1346 bytes .../Footer/ImagesFooter/facebook-icon.png | Bin 0 -> 1328 bytes .../Footer/ImagesFooter/hiper-icon.png | Bin 0 -> 1192 bytes .../Footer/ImagesFooter/instagram-icon.png | Bin 0 -> 1676 bytes .../Footer/ImagesFooter/linkedin-icon.png | Bin 0 -> 1389 bytes .../Footer/ImagesFooter/m3-icon.png | Bin 0 -> 582 bytes .../Footer/ImagesFooter/paypal-icon.png | Bin 0 -> 1360 bytes .../Footer/ImagesFooter/twitter-icon.png | Bin 0 -> 1578 bytes .../Footer/ImagesFooter/visa-icon.png | Bin 0 -> 1506 bytes .../Footer/ImagesFooter/vtex-icon.png | Bin 0 -> 723 bytes .../Footer/ImagesFooter/vtexCert-icon.png | Bin 0 -> 2600 bytes .../Footer/ImagesFooter/youtube-icon.png | Bin 0 -> 1484 bytes react-academy/src/Components/Footer/index.tsx | 22 ++ react-academy/src/Components/Footer/style.css | 133 ++++++++ react-academy/src/global.css | 9 + react-academy/src/router.tsx | 22 +- 20 files changed, 482 insertions(+), 10 deletions(-) create mode 100644 react-academy/src/Components/Footer/FooterDesktop/index.tsx create mode 100644 react-academy/src/Components/Footer/ImagesFooter/Master-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/american-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/boleto-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/elo-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/facebook-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/hiper-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/instagram-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/linkedin-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/m3-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/paypal-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/twitter-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/visa-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/vtex-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/vtexCert-icon.png create mode 100644 react-academy/src/Components/Footer/ImagesFooter/youtube-icon.png create mode 100644 react-academy/src/Components/Footer/index.tsx create mode 100644 react-academy/src/Components/Footer/style.css diff --git a/react-academy/src/Components/Footer/FooterDesktop/index.tsx b/react-academy/src/Components/Footer/FooterDesktop/index.tsx new file mode 100644 index 0000000..f1730c8 --- /dev/null +++ b/react-academy/src/Components/Footer/FooterDesktop/index.tsx @@ -0,0 +1,306 @@ +// import React, { useState, useEffect, useCallback } from "react"; +import { NavLink } from "react-router-dom"; +import Facebook from "../ImagesFooter/facebook-icon.png"; +import Instagram from "../ImagesFooter/instagram-icon.png"; +import Twitter from "../ImagesFooter/twitter-icon.png"; +import Youtube from "../ImagesFooter/youtube-icon.png"; +import Linkedin from "../ImagesFooter/linkedin-icon.png"; +import Master from "../ImagesFooter/Master-icon.png"; +import Visa from "../ImagesFooter/visa-icon.png"; +import American from "../ImagesFooter/american-icon.png"; +import Elo from "../ImagesFooter/elo-icon.png"; +import Hiper from "../ImagesFooter/hiper-icon.png"; +import Paypal from "../ImagesFooter/paypal-icon.png"; +import Boleto from "../ImagesFooter/boleto-icon.png"; +import VtexCert from "../ImagesFooter/vtexCert-icon.png"; +import VtexIcon from "../ImagesFooter/vtex-icon.png"; +import M3 from "../ImagesFooter/m3-icon.png"; + +// type toggleStateType = { +// state: boolean; +// modifier: React.Dispatch>; +// }; +const FooterDesktop = () => { + return ( +
+
+
+
+

INSTITUCIONAL

+ +
    +
  • + + Quem Somos + +
    • + +
  • + + Política de Privacidade + +
    • + +
  • + + Segurança + +
    • + +
  • + + Seja um Revendedor + +
    • +
+
+ +
+

DÚVIDAS

+ +
    +
  • + + Entrega + +
    • +
  • + + Pagamento + +
    • +
  • + + Troca e devoluções + +
    • +
  • + + Dúvidas Frequentes + +
    • +
+
+ +
+

INSTITUCIONAL

+ +
    +
  • + + Atendimento ao Consumidor + +
    • + +
  • + + Política de Privacidade + +
    • + +
  • + + Segurança + +
    • + +
  • + + Seja um Revendedor + +
    • +
+
+ +
+ + + www.loremipsum.com + +
+
+
+ +
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + +
+ +
    +
  • + Ícone MasterCard +
    • + +
  • + Ícone Visa +
    • + +
  • + Ícone American +
    • + +
  • + Ícone Elo +
    • + +
  • + Ícone HiperCard +
    • + +
  • + Ícone Paypal +
    • + +
  • + Ícone Boleto +
    • + +
    + +
      +
    • + +
      • +
    +
+ + +
+
+
+
+ ); +}; +export default FooterDesktop; diff --git a/react-academy/src/Components/Footer/ImagesFooter/Master-icon.png b/react-academy/src/Components/Footer/ImagesFooter/Master-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..705e039c0bb987ef590e4926177f3d3b660aff57 GIT binary patch literal 1090 zcmV-I1ikx-P)41Q8Xz z#3&-(6x1jPzRAIN)R@c|qZ5rY8BI^W%BohB(Xm@nBgp(l}*@@aCC$YmE)Fw%8PDYI)p@vcL6`(^;VP%H+N(H%PCP*aw zsmLyYzIqI3IlxyB68#0$rfTNsxCU*<9_WXT!oL5gypuoM;ak@U|Ei^+qc>sR+66j% z9@H$p*O1^8NR59(p0fcYG!4~&u+?%kOZP(n`%wnPMV+wv`dxLQjcL$XSKViM;5#Vk zEs&=zgdhim=bZI$5M%!>_cRummxpiUIMf@@*f6^YwP!FdtcCTY2cig@D|W1aJ&<+P z$Z;LPbm47>c^z`L0CyTcpBpb=f5mFS2Ap_S+;v6{RQm1dm)05 zIlb$Ir-t|~s546C7fl;vRP(HB4SKilhLAby<~>i1++bF`E)@-ULB}4j2QiL`A~xrq zk9tao&#HXg>$Q9b)n8(wh?#4Mc}l2OdEKYVmvv17lQB_*%qgi~JvG(~6|}-2(XijM zE{V0UJ5(`Igv|NZtnk!OU4l7OZiM<}*fDQ&a`Q@vAY@Km@;{XJxt==ha+GajKAcsZgkwGQ8cNz)fY1hF|s2tr-EA^qUK7c_Hzj9-a5c`FfwH8t$suH=LA$8Po+sfP%{ zI}~m#e5M=H%w|`e)*FGISPC=Q=&B=ZZ>j#%1*w7k>p{dq&8oz6++g%}4?_F4Lz!3p znvzfm%D;aheEKkan~%Y_NV`_6ZVZ$ zL7KjI(u%tAVZeCJ;<<>>lK&YFRAuBi>><6+lh7o{vwnv3(+tPh^=sEE)*-=07RWZ2 z8RPBn->H))A&PLYx?}4$Ok%Gd-^s_KF=!L0!l1cRS-N(@5EEX&ji|K?%E)Wc$V?hVnQYlEX z3|-fuswxtR1Y7MT^gry!?Ab{a3I)EnA|8*UX=)Sd!eK<}>M;Ct7?DU6B^JrY>+3PM ztqq2u!ygF1G))M>=NuKlGz=#-SjwJ0wJeK{6$(y%B$so_ip8Q+&J0p^!;XfN&*vRo zfu+3Mc-I!!mr5n4Oo07gWkLBysNRC|EmF(oY;NujYLiQE0BBeGT6KAk3IG5A07*qo IM6N<$f*ZL1NB{r; literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/american-icon.png b/react-academy/src/Components/Footer/ImagesFooter/american-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..25c427b20609fe109985a8eea3ae4d2e5244b2d7 GIT binary patch literal 2296 zcmV@Ao>t z@0{;<&bI(FP&oFXs_GK@vz^q9+gln*4{!u1i@sbV^l|5=7983ZS3pscwp+HQin2MMU95F2*%BgWKi!g4kR2xs+ ztc+TMc|aL8pVh=utnrhBI^QMXnHrfU)D7@iRdftW5d8rpXa%bPR6UlB@1E?(rJJHQ zhAqr;1IMN2(T!2Sjb4nbOt&JT?B93m$gojW*_qHEPvrX7qY)?*gsY}G48zOjNl_zOLR8sJ(3qj-&*M9#~Zmd1r zjUulJd)9kkB}-oYAcz9D3+1_a_-kDso_(topD)e8vk&B>iNHKkS&x$0b{zU*AvV8O zhnT2fA{pbmwy=ydH&uMDKtOGujFMSA%Dg=7nu@t;M(_fUCrX?+-Vj4so*DTb6O5b+ zyNQE?LZO{J`usoqn*R23NTVUMfyb`XgLvVz9|3agXBOCDqXwVThFg3|0|-eRHkW2oNb_1K?|G*KKiXJ8 z;cLKTk^~i(6&%08VcR@jI|+NrjL38FsPOS9aOiz54ggpB6L@)D8kXf+akw@Dj5;+P z0SQ%&QB52AByBI)0!9MH)I?r28<|o1E-}Jj?=?fHZELXuxh?}Hfct;1!VL_WDF3K{`j09nKmB%p(vdf7yfo#_ijx`Tnoh`TQbla zRgmovu$#h^dB#N{{hbOo7H63uEBYc&{qZ`gzgaRVC}H>R-6e{uZrXKGL6${DAI1H_ zt1?!2IaIYsXbP%GBij9tLb0Yx!L@)&hNw8&4A7|omypoVBVtHqp~k~vU@8!^shZKu zpc*0-2DT%lAVPSq_KHLrGTv#9YlG+x#kKSNA)XT}23)6Y*C^q5E#xVZgJvN35 z-72mII5-Iy@dR22Wk`{jw)n)tX{>s8wvj?o9@D~zq5d&P-q7T zh?LrW((-H>C+hte3EwAI@!;Y0XSb2wMdY~HVOtl3mj}(nB?s>ct zaA5V3Uf8(=o-T7jAVw30%M6J^@M8NAswtQKd}F3oT`*y1?|ge4)$Jl)TLOHW$oSR@H|$2e|L?DaaAQEmqxWXQVbuHmp|%^%{X+z5#FA-7ubG!Oo8O*)YU zhx_N*z{Lv}a}gj4+io!f*k4t}TXxm%^yJ9)&+9 zQ+Vld$BJ7&h4P372t-6=DI$Too;cN;aRMeIPW{>lWMcrRZV8b`Q{g$~@JnK%(DGUJ z?>0e2kn&MSSipQYhs)g(8L7A3mt)4^Em?YUr*Jw!iTS7NXW>y|xQ7pSH%3&_>;EtOzH_{yJp@KB*0KFWdHOB}c}-H4qh2e7%wL1h$=$ChMZ&0GtPU+%?M z%l}tUq^CQTWM%%nQUewcpl_TLvFlzNQN5`5X^rEVlYNv>Ramr&OCRvc*#OQoN9fR- zaO&|K?5z%H?|Ud=*LCaFe@tSPIh9USSTkLjufR>ASe(V)$)qY4W|-i%Ss)o)7-8RO zfr`+YonZn}k{Zqq{EqVp^hH&=x=8r;5*M8bN}K~K=6fyp11t zK4nnsqL`TY8bdU#Uj!%W!#u&HZxmCpo9nIaL=%a}Za|zEar77~0kN4mZTpgTV2Z+w zHt^H$li@UudA6HxeJ`4DZt6eTnE(Hpbh`)xC1PfY!id5P{kQbn{htFPa_ZkVfUPyA SK2|sY0000OO15NKvc;i8 z#$f6)DeBDP6w!%-3J62xCPj2OF2j}rq21eq*%qh#@%dMq{*w0la=!DPoaZ}l-=60H zHVn`5Wj33)(j^+U!z23SJCLwgx+#P0F~p~@FxVz4i#P#n6h3Sihq)fMw%o*o-hg1G z5+{DBhEODeR4RiiEDWc$S{Nn_*!a#SoT<}drAC9hckUn}A`;!*-544E6NyPnpgs8$ z+}+*b?CgyBzP>o6tz~0p=e&-F`g$x+NyXjUorsK%K~Gl~hDU~xs7{)V^YEZJCrnRG z!_D0d%}q^6&&a}Wml`lk<7Z{BW%J=AuIXwch8{kI)LV|S(qb$OdWd}(=Aww@08RAr18xpj3sTt+fT69qmlqvFh*P?c)Ovn&`6RWbEI&hmE~BF^S?1 zBSEdkMT!dzkHD>4ZL@JC?pSpd6y84Y6bfOSn1G+ZKR!E9LN6~0-&IzigZf&=pG%xg zr=?w-wPF`%t=Pp`D|T_#id~$w;sB1s$HlXav#YBMqN1bWL>uFPfQ8K3`!5K<)Z`@V z7aAT8g~A*2<~cwl6yfEiud;RzFHee#g|idI1qRN>(f)CA()c7U0y4P*PEL;KXm1A> zIE&j|w2#gwK$}`4b`=z|w#+rzxIdtSSR_P3?pv(w{mon8>FM=PT=9W_P5-u!w?l8x zL# zlzomj*R6$ICdUZbpD(^T1g>xvXEK>k^J6V}ttn(@til+*`O1nT`1xEt#9}eB)6;PM zdJ}m3r+?NaRMwn;<+&zP zO6jZ9^|Sj2gZCj8ioq4m;w-CEn4bsJj2TmO3}C5lQ86+2;Jr=Eb@z02Q)OJn`V|!x zz{S-SDVj72enT#{eYAzr^fpdWT5jL5lhV5xT;S2U<-2tK z=2;J0Z{EQ8_&6))$7`zL=_Q0*F2^FJ3TXHMgOHeSN(!&?;LHi6wMYkc4}EeXMG#C=D(2^mOCOx7fVbiE|IF$ zN~4vf1)-&26G;qE7Y3MN83XhS!pvBO(gKArEwen&o0MfLCg^?h1%Jt%_uifRZr=Z$ zbKW`k0{;U<9LGuMSVv8cwa3pQk?15ZQbQL_SerPgDWvqX0d8bwW(J)dS{MuljE{{0 z90!?)2O=UP5FM>X{EqFA$z*U7Vrp_J+(dg@8>%a-@YD6{n4h2j$8nFy<=B;+jGWxV z2vsWK4tRIXq~m!AgxPGyn#U8RyLDBo*NWD(ya-Eozgt8AmfZSh>Z|myN+tZ7E z`&04JnUC?XF&usY_`RqC!;>3OeMy0~AAJz}xCM39CMXn3LV0iCKSC@pm33zG(i`So zs^IlP7)M9(^8N$PI(2JY9LhiY6gzhAL_$J>%e@nO3Ng1iiYn(|oGQ6PJ$_KD?Idy( z+1b-5E%jd>qI#iTMcbn)D3v!bc- zD&8+W4b5}UTnHURd_g9V6tSCTJ3UulJa0sP!MYBYT-j-yeN(EYsI}Uj$&|N0Nq_(IFff1pL~86 zIhon?hBw8BCjXkGaqYWi43I!R>dHz>o$fm~H%GqdfcFoT@Ry0uHS2(#1ncKGd_QG($&0FR z6~Y-U$-LA$bl@O#WFdF)YJNVB7vzHh_N7)%P7d6KL?S^-YARS^7MYmzEV*Vp+(9;N ziEP}o5v(wat<8 literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/facebook-icon.png b/react-academy/src/Components/Footer/ImagesFooter/facebook-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ae0cfcbb0df27869e623436a3e80570736c76362 GIT binary patch literal 1328 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 literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/m3-icon.png b/react-academy/src/Components/Footer/ImagesFooter/m3-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..5ee1a9c4852b9f9affd2044805e2e2bc04a31b2f GIT binary patch literal 582 zcmV-M0=fN(P)X1^@s6sPETi00009a7bBm000o2 z000o20Vd5lGynhq0drDELIAGL9O(c600d`2O+f$vv5yP3pX= zOR^$GP6Ryw5f`+?B;y9^JIOwZq672+3Ur3ySV12k$2;tX_zwOLl0Je>NhEYYWK(j= zY2hZAC{?K(aIwE?JZ_LFNkSr&nt9w98{$fbeWCGnY#n;WqiJM9a%`xbf}N2pNX`x1 zwK|X&%pu7=c2ZlQP0qXE=nELDgBKVOXw!!8B69@lOAzaqwoP3>Cn1OppVJ2Z2CLe> z3AS)-$Vs;7ucsQBlEP)n$Y>jIc2|0!v4glZ4wQO~CK`{M#nq%^#o1sOR<-fOL6}(H zfUUlA3orKBq;-kmxC{krr_wj_WKowEoouNC&DV}(4`Eo3pa)PQ_|VTP(`K^x8SDAg z3r#OZ;GP)24#(SLoai8u)~ga5@izSb~^ARs53V#q+JKx!l$DpF>#(4A*}bCe9>pKHG!GCmL1X U?L**lH~;_u07*qoM6N<$g68=D(O^u)(n6~VwZYXuc?c9rp)BCC%d!j1?s#T~EW3sNXu^-}hA)}9bI#m* z=X~efbM9OQ1fJ(JsENT-4u)YG86uNT&%e{9$J38DWOU0#Xpj-GQy`>7=zx(S#IQ^# z*s)9~*r9k-@mlF6jM}DrGQ$9oVJhr+aSh(v{T!5v;PycPq5dH|>YKY4?RfQ%KK$Kf z#rf0Q5zGi6)Ol~*PvRfx%HZdlJqUIL5E^*s@I5nAL~eG{?=1tDJ^{B!r;!(}_Gu@l zX7ORwb)Os=u13jAsmMut22YAUrw3;&HlG~D%CR>k4C%VZ@BI~)39<}0nWbAusHJUq zUhqtdB>XY4autr=97D^_c%RPFHG;FXx1o<<5vEaMaKwS?@Bf0O?k$)MT099Fhg>+@ zW`|KNhf2<1Xo|zPU6bhCl?Vm1us_H1IM?n#W|WEuVIiSA?L*Q7@1@HVI65L6d_f+D zU4i-`s}#i#4sSsDfqZ1`Igj?9F^aYwEE)FifDIZ}38RjM-8mz+qZ4kijUp!q=oz#@ zt5%}N!HM$4Eiu>>$6`foKYAUraB)01FOS|y4@@kB8Sk8{>2}}Ap(JVEaRG!n`sQ-T zOB2iG(kP7vh>HdPN)gCHa z;hyI3+n4)Lc%TO52MbYIwiR{1-o@Vcf57Q?UO?O0RLS%7;pX9KIA(dIL@Lqnz>ULA zBd|?-p;yZ=OFm7GkmIv_BfPxSX91xxn;SNVTM||$0ozKXV6o&ynN+HU`$ySJ@sF?axP1!tqLIYPxmMk3OTAj-VQ?~i}YjzI1i5#Wa#ld zx!8~u52tHZj8a^5xH#tJ^(px3ax32cq+VQxSI(3`$*ORVib4z(f~x1Ep`oP7r*B!t zXE4QiaU?wwIR>S08kI;G)#$Wykdb{^#zhF-_p5LSlgJ32n_f@AdYV|aNK(2f_7A8C zq!Ecj#b%#=Xw)edh|7(gSQ)RwPdB>3aUNu)nZ)-;DKcMNx`S&i{rJ3eGjgAeMaKjO zD;0s_q;Tv`p3e!ZRx+`=!%n{CQQPAb^F-3_w z19?mE%3@>$jMFmBNQp-Amec@!Tyz*JPi!M+GWhz61=*=4WUet`V@{&@UQ1-vN;x*J zOT0qb8KLaW=1Jdk#7+5=VG^$BBMf%kwuzL0X;2A!2$jdj^Kx=y&&Y! znB65R3vW1R0uS=20JIdxV<{ml$NV>IF!G-hO&9hfC1FVq%Qe0wXVkOeC7{eKhlkdx zIcn(-v*Qyk6mMONLUa65lM&&I5JCer%jcnB$18; literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/twitter-icon.png b/react-academy/src/Components/Footer/ImagesFooter/twitter-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3f2381f09687a3dbf927a21648ada1e4db433e5b GIT binary patch literal 1578 zcmV+_2G#kAP)Z7-5STkH?Apr92dQqyPIV9!_N;l8Zdf=kpv}#0VQg zh;YCcA`_7Waqt9ZLhu$FBAS$tN#*ZPl$zNloXAw1lCraKMe?Hx(k4YrOZ+R3&GWh>R z{uUyy<@B9iUQ4WzlvKDw84VC#Lvy?!gup*Cu0t%xMPd(f-POyktSQkF7w6PmIu$-M z3oH&uM+E>z0Bo)b|%ttMs>I87I57j50oAQ?$vOQyDI^&IdbMMeP zRk?p6e_U%pzM_Q?XZtJS0$)z@p=rySVJ`QM{XMIxi8;<1qJ&icr#f>ns7DH+a3aU5 zwM)HbwUt_J6{K`6otZ*Sny~R6iQQ|xAZXc3#KED|FhjLs)6z+|>+ZxKcum>PJ_p8f zsR)UkAq->0Bh~-Y+SoF4e5U68OzOzo{DfvS`KbiuqP`2z+9sqN%B{OH28}&)Jtd(+ zTYEZ~u_^eurQvnXmyLZ>lYE}BE#iEQ_1LJQP|hntHmiJS%BlY*SEITY7 z6h(eu801(+^C^E`p*qNijt02n)T8D$q}cwW{t9%mIcc;G`oMjzsozbRysfen<^vkl zOJWYYMc31`Gsg)vwI5iS&OK zHiIG1wa$qZQbAC{AFzA$e(VV*Md+h^R4^L}7n9r}Dd$f@VmW;r+0_mhn#fGdu_LL9 zJ$6*~j}NSK-lNl4WP#=0nB#)fqq)!-pXu6Srj|}PG?bLe&D zM6N>$)^Z#R`m{Q!_aP1G;vI4)JnxZ{Pt9?`#gp<4B%u#}n%6$X_BV{a>Fm@T7f%>_ zIwMwF69j^(GtC?LO(Vqnuft8B?3KwddF1@@e#)+q3-pBgFFMHt@wkI4Z3OSg}XKkHv;A53D#1kP3 ze;1Ph*7sOG^-xKl*)ZuEX2U==8N-278%!wrtj+~CBXol@w-`exK~+nYAfTRhCXtVN zN`h}|3C$EGnG?i;ZIaCOJmNK~8ApbtL^Qs1lNVWEa>y~8i*Z;kk~@*Jz_v`jY>a%p>(Rh>Sc$34@K6JA{vMlIcu7u z$m0-NQ|-)94OSfjzkC@X5bC4obd%bx4COAgQ825!Cw zNO^Qh9{r3tMIo9ggk6tl4Td`lm2ZG}`FN|MC*Pjh>1ZaXNM cAwntQC#yJcr^vQeFaQ7m07*qoM6N<$g15Ed@c;k- literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/visa-icon.png b/react-academy/src/Components/Footer/ImagesFooter/visa-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b860b59b9117d5d5569e2dcff9021b66759f3218 GIT binary patch literal 1506 zcmV<81s(c{P)X`g0k$gN6lkHPd=v`h%K~NR-om>y%LZ)xq2a*o%RT43=bq=D zbI&~m2vQQ*$Jp3d96gTEh{fzCBaJhHAPfrxDw-x`G_(i~x^VZ9JcF!{gHj=bA!#ABngtjc8O38MfgPRE+$z~*qi?_qtFs?d zAvvZ&+1Un|?ltj6YHA%4zoxDgbq!7eEW@Jc2<&_&6N5v;xJ#)hSID@2W~v5POB&$n z?xUTNAv!7ym-6=@DsmpTVRiH(B1|FKWb=Y+jZlOrAd?B8J%LDpDzEH>Hg5i;zD}!n zY*?R4Y3SpQmX=#2{wJr3{l|~^2lwUhR4Fsrz>g+HCS!#fa=D214iBHRF*M}GEmMnR zBS9TWU_+((M_-trP>2{MMEkZIFcCF#UH6oHoffc^74ZlQ4dIU29bFU^FPv>|6kWZ~ zc?yb7?%HKs*HqCgIg@Jer`YD)We8O&IB#Iki?`mrj6+8Y(Bkw2tkdgxfSYDJ`__T9 z?5?YAmQlTp6t21?bq#Zg>dX0}PkV^u~x z=Pgu);k~yvNlvnH?Peo3zj7AFJAXy5@J18d1dhp{+o*&3p>RY+_&2oC-ZwR0F-^+K zTq>oL`MwpW&lGb9*zO)axIxmZCD4q|K1rIKigab=%g!R#(_PNlOpZ-`R|Nqakx0h)a4o^>-;I#XzfIY z%fp>s6f+;%CD8#kmc%W<2gkPH*pXbmAxyEc#f{Fcew38k;q2(+??#4);N+=Nym8_> z8d`ezI;?<{Rdr74=d^((CB;ImR&i&lYwZ4vBHFcmwWL#7Z67!6LyF!Hwt+72t0nd0 zK>Vas%IMnl0}Bt8Bbrh*|68*p@27M4v(btoqYcfi9!#X~ood%)ZceY$j+yhR7)^Mv=2Bfp;ye%2KRQVs7KmDlJ`;`uLxKrKf4BXjEWg2eVh{p^6HZGUe#Nxp2ES&tTgsugF>pitbi;s`y1+2Sq z|3%o_2T@^hQ`^SUQkYp_d3hOd_w@UFM`}Y}-klR5Uzwi32dfP$)BO=Uw0A8M6Jk(V z(?-4G14KrILLC={oYhHK$09?dr!It5PG&c6P2%6yeSLR2f$F9`6Uc^_Dy8xtePsXh z*h|kd2rf#T`#v_?Xb#wHqo4*hjNl^=16Dwz3Bf~WsZ(+N3B?;K=Tva5q5uE@07*qo IM6N<$f|`@l+W-In literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/vtex-icon.png b/react-academy/src/Components/Footer/ImagesFooter/vtex-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..9f6d2ab035427e95620cbb061945dc26ec9619ff GIT binary patch literal 723 zcmV;^0xbQBP)X1^@s6hy#e500009a7bBm000o2 z000o20Vd5lGynhq0drDELIAGL9O(c600d`2O+f$vv5yPY(u-kLaahHIi%n80i!tm|rCO(hk4>+p!xNGVz8a^GVRg)73Y*9Tb0%{X zb})OTcbONs6e9F1AYc4Wc7Z!N0xWTRh;)d%PIfq8 zSe6RbUwtWdIH0d6CMl)YA7aUMvm*ucH$`O=Q_(lB6R#@%Nf!P3pql^y002ovPDHLk FV1leCMX>+? literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/ImagesFooter/vtexCert-icon.png b/react-academy/src/Components/Footer/ImagesFooter/vtexCert-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f3eea780c2fecd934d79a7b77e93112ad0201a07 GIT binary patch literal 2600 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 mf*AgxZckOUB_T7Ev-}0pW+pU_E6>va0000 literal 0 HcmV?d00001 diff --git a/react-academy/src/Components/Footer/index.tsx b/react-academy/src/Components/Footer/index.tsx new file mode 100644 index 0000000..c50903f --- /dev/null +++ b/react-academy/src/Components/Footer/index.tsx @@ -0,0 +1,22 @@ +import React, { useState, useEffect } from "react"; +import FooterDesktop from "./FooterDesktop"; +import "./style.css"; + +const Footer = () => { + const [width, setWidth] = useState(window.innerWidth); + + const handleWindow = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + window.addEventListener("resize", handleWindow); + return () => { + window.removeEventListener("resize", handleWindow); + }; + }, []); + + return
{}
; +}; + +export default Footer; diff --git a/react-academy/src/Components/Footer/style.css b/react-academy/src/Components/Footer/style.css new file mode 100644 index 0000000..f74241d --- /dev/null +++ b/react-academy/src/Components/Footer/style.css @@ -0,0 +1,133 @@ +.footer-desktop__columns { + display: grid; + grid-template-columns: repeat(4, max-content); + gap: 14px; + justify-content: space-around; +} + +.footer-desktop__links { + margin: 50px 0; +} + +.footer-link__title { + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: var(--color-gray-100); +} + +.footer-link__item { + font-family: "Roboto", sans-serif; + font-size: 12px; + line-height: 14px; + font-weight: 400; + color: var(--color-gray-100); + list-style: none; + margin-top: 12px; +} + +.footer-link__itemList { + margin: 0; +} + +.footer-link__itemList img { + width: 35px; + height: 35px; +} + +.social-medias { + display: grid; + grid-auto-flow: column; + gap: 10px; + align-items: center; +} + +.footer-links__link { + text-decoration: none; + color: var(--color-gray-100); +} + +.footer-link__site { + text-decoration: none; + color: var(--color-gray-100); +} + +.linkAtendimento { + font-family: "Roboto", sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 14px; +} + +.lastChild { + text-decoration: underline; +} + +.footer-desktop__infos { + background-color: var(--color-black); +} + +.footer-infos__structure { + display: flex; + align-items: center; + justify-content: space-around; +} + +.footer-infos__text { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 10px; + line-height: 11px; + color: var(--color-white); + width: 234px; + height: 24px; +} + +.footer-infos__payment { + display: flex; + align-items: center; + gap: 12px; +} + +.footer-infos__payment img { + width: 36px; + height: 20px; +} + +.footer-infos__divider { + height: 24px; + border: 1px solid var(--color-gray-200); +} + +.footer-infos__vtexCert img { + width: 54px; + height: 34px; + margin: 15px 0; +} + +.footer-infos__developed { + display: flex; +} + +.footer-infos__developed a { + display: flex; + align-items: center; + font-family: "Roboto", sans-serif; + font-size: 10px; + line-height: 11px; + text-decoration: none; + color: var(--color-white); +} + +.footer-infos__developed .vtexIcon { + width: 44px; + height: 16px; + margin: 0 13px; +} + +.footer-infos__developed .m3Icon { + width: 28px; + height: 15px; + margin: 0 13px; +} diff --git a/react-academy/src/global.css b/react-academy/src/global.css index 295cb10..0535202 100644 --- a/react-academy/src/global.css +++ b/react-academy/src/global.css @@ -12,6 +12,14 @@ code { monospace; } +* { + margin: 0; + padding: 0; +} +li { + list-style: none; +} + /*COLORS*/ :root { --color-black: #000; @@ -20,4 +28,5 @@ code { --color-white-100: #f0f0f0; --color-gray-200: #c4c4c4; + --color-gray-100: #303030; } diff --git a/react-academy/src/router.tsx b/react-academy/src/router.tsx index f45edc5..a050ded 100644 --- a/react-academy/src/router.tsx +++ b/react-academy/src/router.tsx @@ -1,14 +1,16 @@ import ReactDOM from "react-dom/client"; import { Routes, Route, Navigate } from "react-router-dom"; import Header from "./Components/Header"; +import Footer from "./Components/Footer"; -export default function Router(){ - return ( - <> -
- - - - - ) -} \ No newline at end of file +export default function Router() { + return ( + <> +
+ + + +