From dbea914211d2f525f29faa0d252916f8dfb0051e Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Thu, 5 Jan 2023 15:27:29 -0300 Subject: [PATCH] Feat(Header): Cria header da pagina desktop --- desafio/public/index.html | 3 + desafio/src/assets/imgs/Boleto.png | Bin 0 -> 814 bytes desafio/src/assets/imgs/CardAmex.png | Bin 0 -> 1278 bytes desafio/src/assets/imgs/CardElo.png | Bin 0 -> 879 bytes desafio/src/assets/imgs/CardHiper.png | Bin 0 -> 752 bytes desafio/src/assets/imgs/CardMaster.png | Bin 0 -> 739 bytes desafio/src/assets/imgs/CardVisa.png | Bin 0 -> 996 bytes .../src/assets/imgs/Image-LogoM3Academy.png | Bin 0 -> 2988 bytes desafio/src/assets/imgs/LogoM3.png | Bin 0 -> 446 bytes desafio/src/assets/imgs/LogoVtex.png | Bin 0 -> 559 bytes desafio/src/assets/imgs/Paypal.png | Bin 0 -> 892 bytes desafio/src/assets/imgs/vtex-pci-200.png | Bin 0 -> 1649 bytes desafio/src/assets/svgs/Cart-Icon.svg | 12 ++ desafio/src/assets/svgs/Vector-Search.svg | 3 + desafio/src/assets/svgs/facebookIcon.svg | 16 +++ desafio/src/assets/svgs/instagramIcon.svg | 18 +++ desafio/src/assets/svgs/linkedinIcon.svg | 18 +++ desafio/src/assets/svgs/twitterIcon.svg | 11 ++ desafio/src/assets/svgs/youtubeIcon.svg | 11 ++ desafio/src/components/Header.tsx | 60 ++++++--- desafio/src/index.tsx | 3 +- desafio/src/pages/Home.tsx | 8 +- desafio/src/{ => scss}/global.scss | 0 desafio/src/scss/partials/header.module.scss | 119 ++++++++++++++++++ .../src/{pages => scss/partials}/home.scss | 0 desafio/src/scss/utils/variables.scss | 12 ++ 26 files changed, 272 insertions(+), 22 deletions(-) create mode 100644 desafio/src/assets/imgs/Boleto.png create mode 100644 desafio/src/assets/imgs/CardAmex.png create mode 100644 desafio/src/assets/imgs/CardElo.png create mode 100644 desafio/src/assets/imgs/CardHiper.png create mode 100644 desafio/src/assets/imgs/CardMaster.png create mode 100644 desafio/src/assets/imgs/CardVisa.png create mode 100644 desafio/src/assets/imgs/Image-LogoM3Academy.png create mode 100644 desafio/src/assets/imgs/LogoM3.png create mode 100644 desafio/src/assets/imgs/LogoVtex.png create mode 100644 desafio/src/assets/imgs/Paypal.png create mode 100644 desafio/src/assets/imgs/vtex-pci-200.png create mode 100644 desafio/src/assets/svgs/Cart-Icon.svg create mode 100644 desafio/src/assets/svgs/Vector-Search.svg create mode 100644 desafio/src/assets/svgs/facebookIcon.svg create mode 100644 desafio/src/assets/svgs/instagramIcon.svg create mode 100644 desafio/src/assets/svgs/linkedinIcon.svg create mode 100644 desafio/src/assets/svgs/twitterIcon.svg create mode 100644 desafio/src/assets/svgs/youtubeIcon.svg rename desafio/src/{ => scss}/global.scss (100%) create mode 100644 desafio/src/scss/partials/header.module.scss rename desafio/src/{pages => scss/partials}/home.scss (100%) create mode 100644 desafio/src/scss/utils/variables.scss diff --git a/desafio/public/index.html b/desafio/public/index.html index 0eb6c96..26cf292 100644 --- a/desafio/public/index.html +++ b/desafio/public/index.html @@ -8,6 +8,8 @@ name="description" content="Web site created using create-react-app" /> + + + React App diff --git a/desafio/src/assets/imgs/Boleto.png b/desafio/src/assets/imgs/Boleto.png new file mode 100644 index 0000000000000000000000000000000000000000..9fd5966204a9aac00e7a115c8ed6358a38c9eb6d GIT binary patch literal 814 zcmV+}1JV46P)eo}K~#7F?Uq|e z6j2<;f3v2UU3OE0cFPoZ)h-s=7WGi3L=g4RMa(dgt?Wt#5rvNi1!AR`r3i(YCfz_o zD58r}srZmxR8mWKQ(M!LG<9{=)y~dK89vNI5A)y$XNLLDIrIPK{LlHmBOx$8J|2WR z&?8Awk0c0L#6uqHz=&v@G~yD4df+Kqkeif*$}nxR;EmiImWD5<@YYS%MMdH1IUSp| z8KW@-txm`K4bi-ST^qM|EWd{{HiDjkzc^3N-;%BDW)mul(=s{cKc?6jYc#Y4Nm8<5Y=dWe0;c`Uw}?% z+K|&pbW98Z0f87p!Wii9XT}U~w(W?;X0s9(zndzdX>OhRFQf|d^JG>2)YQbe3#nvW zN|Ocj*zuFxyHmvZ)QhwTh0n@J$7nLKEPMsmvNC0oet!P6wzXkxX(m2lkCJrCNFhmd z|LDeGSU~B+Vh$cYim$IP5ANR;ul`u)kaI{@@11eGs1%BQ>P#{xjvOMdut@%~kM(tm z(kWh3sh2b8>G>&2Hk008y)+6>n?GMap-*gFJZb5f6Jp-p(`CPFYG_2O)hbDaM@mY{ zc5#pRJJ{aZDtny6F+k)>GbW>nqT2;TM4Cz1n<$s;o868jDM@%*El(al5;Nx~OuB~h z=g)``W8Cu>ws;9<^J=oMULiCrj7ak;hKGjs)74|(nbo(1*5 sqFSALin{Ph-a4X$fv5w6VmEjF28g`-9!N5VMgRZ+07*qoM6N<$g2uRX-v9sr literal 0 HcmV?d00001 diff --git a/desafio/src/assets/imgs/CardAmex.png b/desafio/src/assets/imgs/CardAmex.png new file mode 100644 index 0000000000000000000000000000000000000000..16d4487d8469e560d9acd88fe0e0a902c6395d03 GIT binary patch literal 1278 zcmV1z=-JN~)1=3QA3zUaMuuZg}Aily&q7p)k(GY?pCPpG(h>4#xL=$78#;6!H zAPFDD7)*&F28;p43J4a&rWAy>wDv&@-R-`2c4j;?m6imwe6l^ecX#f+=ic)_=lstZ zm|&tl}?e)q^XK{=!)kZ z-D$;MI%7Fj-&4w_`ik2F>P(v0`db&c*nZj|;`Oj)L4@r`VhrUB-g>-*W1Tv4$~_cG zTnnbf-m^(wT^yk=S)fF7^Il_&`l&vd>#V5JIMSZwf%)ZRGFjH`YNl~(9S55S*m=B{ zPuA6N^m6Q$2#uud{oi$-ovE^;+2EylDq*k6xj}_Bv;E90^K!Z?O|VE2pbG6Voj{5tc;5OfU2O6WiMW z>PlK%jGI)4RMt#)Gp|HteyK`}tld@WXTyCV@isSd=;AeCC*eu+>~h^UVNy^+27W1i8oh8`A-gg)2_30ipsX*x_GH@u)|_mrRo6P z-)=BVF6~z}S|lnqg;v)DoWmcTjPY%2iq5#siEi1EZ_7ZQhL$96JX%c8P=RfSuAvLr zHrHw#>qyg;f)9V}V(ugj_ zT9wd4&!#ZN!Fwx$JUpw|0pw;3InZuW8_u(!((laU;^Fh(C8!T&ST!dgB$vV$yeGPK zG>PUasV+N3hcBg^R`5tvbI7~n*EpMM!<5L{(Y7pEse%=AOKo@9^-K2+K#U2TWSHu;s0gaWq*H&_XmAJveDL$gbrbO4| z>A68Xs>KiO8D73W-AO=uV~cdYy+; zohkO7NyyBkrmTny0|kfdH;VGcvnI{eC7=>nS(AuQ4tjV+z*k3{D2-iZ|FdkIaBusG o21vI7eI}!W@s~ekG&0fTZ@`P%T6n$zjsO4v07*qoM6N<$f)CbdjQ{`u literal 0 HcmV?d00001 diff --git a/desafio/src/assets/imgs/CardElo.png b/desafio/src/assets/imgs/CardElo.png new file mode 100644 index 0000000000000000000000000000000000000000..08d5b26fb50714cced259c7e2dde80c0edad3b6e GIT binary patch literal 879 zcmV-#1CacQP)N?46nKgB8edFj}?TWhKNS9 zWkw0rCTgY^-E=*FmYS0_b26v4&iBnm5W+djzz06wao+cQ=h^$d=lNbP91h0=kYg8t z<2ZL5u@>^QVHbfU%fJ)MMvU9;fg^5q&@Gg20CTj{sDhl;_XmmOxCMF_Aq{blz z1OfrvYrBJ(atFFP6+f5a( z(Q0w4^)`|TQ3h0rSfam^(p@l_sY&q|cDZn+@iJJ!MC@iu3+CqLzzUbsiLQ=Lrajce zW@l#bthaAle|2pwB#Dx3{dZei5ex>ggynpL~fy2 z#G$&Wp&=nL=okyLq#f1gI>hklEk&%HjB?dS@IFYhnhSIXKXxx&) z3a=~^HT6nVR33m%8-!FE@qOER$Bq))*xVFsT3QeCNO9%MM8c&trk7-lrBcB&JB!zYgAj?uSYBR+NF*XEUx=rjU07QS35x&a z;{euFN1$2w3_WSNlL;L9mIx>E4tXm5Cz(29$8&Q9%Qx|W!-3OAqwuV+ZwTwnO-)Eh zNI=R^2V|}u)XF%B$$Gte1Hbc>lXHyrIC|yxcswu^6(bZ1Ar>fBUJ<+@Km1d?rOvLz!;qjApA$znqk(Y<-EjPdl zCSp7es@1R)sW6$%5R1jz#!1L5*3{gL_RbF0$wC10*z+gm=jSmpJdB|?Z?UqnB7CZp zMCY_Rt)TG#Fep~>#IBMb*RZ=#E=UX^$KKKZ5hU|dzW{cd^F-$k0crpM002ovPDHLk FV1mk}jbs1- literal 0 HcmV?d00001 diff --git a/desafio/src/assets/imgs/CardHiper.png b/desafio/src/assets/imgs/CardHiper.png new file mode 100644 index 0000000000000000000000000000000000000000..02349eecc62c655cec5eed4654fabbe2290dcf51 GIT binary patch literal 752 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 literal 0 HcmV?d00001 diff --git a/desafio/src/assets/imgs/LogoVtex.png b/desafio/src/assets/imgs/LogoVtex.png new file mode 100644 index 0000000000000000000000000000000000000000..4bd93226c1d0d720cccebc26ec8cab936827b76c GIT binary patch literal 559 zcmV+~0?_@5P)&bG;RyGJV)!%1C z|0W~XtRuXG%TQqJdJ^ax8NXT<*v|UGTU%lr3KBqDR_yZ~gL1;Zl}aUR>}TJKiS38O zn=(v4s0uoO=a0U)K-|3pBSb5So4W(y=`9|UFm%qib&;~BX(=i$l{KV)O;^y37qC~~ zz^QZ`xHHsX+aAY0Q0ym~7M=}*%Z$r$B?p|-kjJu~;rag+gYo|_Yv>!~T7Iq=PrcMX xjDo&Fvd-j;r!yY$1@sj{-fxF9A+Mn)_y#l8wEUh4-wOZ$002ovPDHLkV1knY>#6_% literal 0 HcmV?d00001 diff --git a/desafio/src/assets/imgs/Paypal.png b/desafio/src/assets/imgs/Paypal.png new file mode 100644 index 0000000000000000000000000000000000000000..7163555b54c5e13e72c5019b432ca6b8badc4a35 GIT binary patch literal 892 zcmV-?1B3jDP)D&h0zWb>%a$v34z{%WzHz5GlVV_69wYq14M=c2a=E=_T=jmS~JWR z4hGhWj=pgu#DpOGS`9ePi7~ASXX)N*>KcJGFA@HJ-gr{kf-`sXA@UTUmAcCjKxYMx zeOANYi-E#mLrIDlA}=9A7mFDlH-NQJM|Mj<^0Rnj{OH?XiW8wAdK*8nPdPQGnl4&+ zF%7azEtFmC`}yh9TcN9O^hsw4lYuZWl>2hLsIQe>u#!9BG4)=UlUN>SPJvtj7ay>`XX8U|u%8QvFwNMc;_#m3^GQTGoV2J!;j S4$gi600002Q~$!`UWWE%~^sug>%p-v8|ASMz5iE@2ql)#!HiICt+WSiSq*wLi;s zzVC%GD)h0mDdW``1t==HG>iTz1X+x7@bDAv&3hqQ{v;#5`8VvM6sR^n45<8`ZpiR^ zM!`}AsjTMKABB?dV(yHx_%*BK5x_q+AK+LpB%Qto|L|1&nk@SB-&4uskvqrj#IPkO zb#%eCVjIwEhw7bYz%7~9|E}kiPazhTD`nPf1h<&pxjk?_u^sA9HbBfTgILo9A@>yE z>;b}b;BzwI`RFLv`zC@ho509C!%6a;PVnopF=*;2YaI}doB=5cU*$Uy>d28y*~F zkL(;Xgzt)J(cZ-m1QQknMwT?SdwwL1(2zaHghDuEfj{uui}ITuf&2H%5c1DMT)h)g zi(P5wmZgEqN*VMmqg6rk{TsCKFmIiRs^43qXoKqQ97yN>0t`WbRt;|FT2cpcI=$l! z7k>M0Zh9=(>{MmZ{PS5}dt*s@FD?F;H&rG~G?EGi^mZoiOLZACS$3`&Y%*y@Tojlf zQcpu5nAj-zgWGcQsy3~F)Yt}gMm$8>#)ud@GXWz3w}l`xK0)T-m*x&L@J9as&f(qxt$&r zoymc=k+o+&5p;$~a70VqnDz!a8%kK=xr{kTi#B1~)&uZ31v&~DrTtFBCxV(b2978Z zI=Uz7wOYztxnOrX75z4ag%D>Jt(^`uI67bt@?dV_1jNqMqOMrL$&xBWMHmnnrbkVE z3zFhv&_(^-Jpuv()Tpd(z|;hjGEYNu8(c0ACKw~++*<+R5U?nJR32VHt9dTCnQTdAL&7f*{&FN_;8g^+5sn z<#YwsJ-HAqZ4Q)IT8Wq&+4HC3B=voKc?`Zee9D)l`|e~kc18)dC6ZTTdj}%*dSoRf zVEvwbSpVhMaJb!w4hcqT28*y}BYw*Do<#|h#-hklfnP0^XrhaA@?;atanVFvi?|6< zur}IIUE8EcR}j7KeF{lAd9ty8Zn + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/Vector-Search.svg b/desafio/src/assets/svgs/Vector-Search.svg new file mode 100644 index 0000000..a4932a7 --- /dev/null +++ b/desafio/src/assets/svgs/Vector-Search.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio/src/assets/svgs/facebookIcon.svg b/desafio/src/assets/svgs/facebookIcon.svg new file mode 100644 index 0000000..ec0028a --- /dev/null +++ b/desafio/src/assets/svgs/facebookIcon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/instagramIcon.svg b/desafio/src/assets/svgs/instagramIcon.svg new file mode 100644 index 0000000..01f73aa --- /dev/null +++ b/desafio/src/assets/svgs/instagramIcon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/linkedinIcon.svg b/desafio/src/assets/svgs/linkedinIcon.svg new file mode 100644 index 0000000..204af1f --- /dev/null +++ b/desafio/src/assets/svgs/linkedinIcon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/twitterIcon.svg b/desafio/src/assets/svgs/twitterIcon.svg new file mode 100644 index 0000000..4beb89a --- /dev/null +++ b/desafio/src/assets/svgs/twitterIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/youtubeIcon.svg b/desafio/src/assets/svgs/youtubeIcon.svg new file mode 100644 index 0000000..0dd81d5 --- /dev/null +++ b/desafio/src/assets/svgs/youtubeIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio/src/components/Header.tsx b/desafio/src/components/Header.tsx index 8fee3cd..24aba58 100644 --- a/desafio/src/components/Header.tsx +++ b/desafio/src/components/Header.tsx @@ -1,26 +1,52 @@ import React from "react"; +import styles from "../scss/partials/header.module.scss" + +import logo from "../assets/imgs/Image-LogoM3Academy.png" +import iconLupa from "../assets/svgs/Vector-Search.svg" +import iconCart from "../assets/svgs/Cart-Icon.svg" + +const Header = () => { + return

+ + +
+} + const HeaderTop = () => { return ( -
- - -
- Entrar - +
+ LogoM3 +
+ + + +
+
+ Entrar + Icone Carrinho
) }; -// const HeaderBottom = () => { -// return ( -// <> -// -// -// Entrar -// -// -// ) -// }; +const HeaderBottom = () => { + return ( + + ) +}; -export { HeaderTop }; \ No newline at end of file +export { Header }; \ No newline at end of file diff --git a/desafio/src/index.tsx b/desafio/src/index.tsx index 3dc253c..8eb4c8a 100644 --- a/desafio/src/index.tsx +++ b/desafio/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './global.scss'; +import './scss/global.scss'; +import './scss/utils/variables.scss'; import {Home} from "./pages/Home" diff --git a/desafio/src/pages/Home.tsx b/desafio/src/pages/Home.tsx index ebdb9c5..51dae3d 100644 --- a/desafio/src/pages/Home.tsx +++ b/desafio/src/pages/Home.tsx @@ -1,11 +1,11 @@ import React from "react"; -import { HeaderTop } from "../components/Header" +import { Header } from "../components/Header" const Home = () => { - return
- -
; + return <> +
+ ; }; export { Home }; \ No newline at end of file diff --git a/desafio/src/global.scss b/desafio/src/scss/global.scss similarity index 100% rename from desafio/src/global.scss rename to desafio/src/scss/global.scss diff --git a/desafio/src/scss/partials/header.module.scss b/desafio/src/scss/partials/header.module.scss new file mode 100644 index 0000000..6f21d39 --- /dev/null +++ b/desafio/src/scss/partials/header.module.scss @@ -0,0 +1,119 @@ +.page-header{ + background-color: var(--black1); + margin-bottom: 200px; + + &__top-wrapper{ + display: grid; + grid-template-columns: repeat(3, 1fr); + padding: 22px 0; + width: 84.38%; + margin: 0 auto; + + &__logo-wrapper { + display: flex; + align-items: center; + width: 38.7%; + + &__logo{ + width: 100%; + } + } + + &__search-bar{ + display: flex; + align-items: center; + justify-content: center; + width: max-content; + border: 2px solid var(--white2); + border-radius: 5px; + background-color: var(--white1); + box-sizing: border-box; + padding: 5.5px 16px; + width: 75%; + margin: 0 auto; + + &__input{ + border: none; + width: 100%; + color: var(--grey1); + font-size: 14px; + line-height: 16px; + outline: 0; + + &::placeholder{ + font-family: var(--font-roboto); + font-size: 14px; + line-height: 16px; + color: var(--grey1); + } + } + + &__input-button{ + border: none; + background: transparent; + padding: 0; + display: flex; + outline: 0; + + &__img{ + width: 100%; + min-width: 16px; + } + } + } + + &__login-cart-wrapper{ + display: flex; + align-items: center; + justify-content: end; + width: 100%; + + &__login{ + text-decoration: none; + color: var(--white1); + text-transform: uppercase; + font-family: var(--font-roboto); + font-weight: 400; + font-size: 14px; + line-height: 16px; + width: 14.72%; + } + + &__cart{ + width: 7.78%; + margin-left: 55px; + } + } + } + + &__bottom-wrapper{ + border-top: 1px solid var(--grey2); + + &-content{ + width: 84.38%; + margin: 0 auto; + padding: 14px 0; + + &__links-wrapper{ + display: flex; + list-style-type: none; + padding: 0; + margin: 0; + + &__link{ + text-decoration: none; + margin-right: 55px; + + &-content{ + font-family: var(--font-roboto); + color: var(--white1); + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + line-height: 16px; + } + } + } + } + } +} \ No newline at end of file diff --git a/desafio/src/pages/home.scss b/desafio/src/scss/partials/home.scss similarity index 100% rename from desafio/src/pages/home.scss rename to desafio/src/scss/partials/home.scss diff --git a/desafio/src/scss/utils/variables.scss b/desafio/src/scss/utils/variables.scss new file mode 100644 index 0000000..ae9d76b --- /dev/null +++ b/desafio/src/scss/utils/variables.scss @@ -0,0 +1,12 @@ +:root{ + --font-roboto: 'Roboto', sans-serif; + + --white1: #ffffff; + --white2: #f2f2f2; + + --black1: #000000; + --black2: #303030; + + --grey1: #c6c6c6; + --grey2: #c4c4c4; +} \ No newline at end of file