From bbf9db4e00daf273a8fe83aeb6e26a328cebd6a0 Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Thu, 26 Aug 2021 17:49:07 +0700 Subject: [PATCH] :sparkles: feat: Home Feature --- .../home/HomeFeature/HomeFeature.module.scss | 43 ++++++++++++++++++ .../modules/home/HomeFeature/HomeFeature.tsx | 23 ++++++++++ .../home/HomeFeature/HomeFeatureItem.tsx | 22 +++++++++ .../home/HomeFeature/assets/desktop.png | Bin 0 -> 4111 bytes .../home/HomeFeature/assets/mobile.png | Bin 0 -> 2341 bytes src/components/modules/home/index.ts | 2 + 6 files changed, 90 insertions(+) create mode 100644 src/components/modules/home/HomeFeature/HomeFeature.module.scss create mode 100644 src/components/modules/home/HomeFeature/HomeFeature.tsx create mode 100644 src/components/modules/home/HomeFeature/HomeFeatureItem.tsx create mode 100644 src/components/modules/home/HomeFeature/assets/desktop.png create mode 100644 src/components/modules/home/HomeFeature/assets/mobile.png diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss new file mode 100644 index 000000000..f9f799ae6 --- /dev/null +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -0,0 +1,43 @@ +@import '../../../../styles/utilities'; + +.homeFeature { + @apply spacing-horizontal-left; + overflow-x: hidden; + + @screen md { + @apply spacing-horizontal grid grid-cols-3; + + } +} + +.homeFeatureItem { + @apply inline-block align-middle; + + .itemImg { + @apply float-left clear-both; + width: 5.6rem; + height: 5.6rem; + + @screen md { + @apply float-left clear-both; + width: 11.2rem; + height: 11.2rem; + } + } + + .itemText { + @apply collection-subtitle; + width: 28rem; + height: 9.6rem; + margin-left: 2.4rem; + + @screen md { + @apply collection-subtitle text-justify; + width: 36rem; + height: 9.6rem; + margin-left: 2.4rem; + color: red; + } + } + +} \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/HomeFeature.tsx new file mode 100644 index 000000000..04611ac75 --- /dev/null +++ b/src/components/modules/home/HomeFeature/HomeFeature.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import s from './HomeFeature.module.scss' + +import HomeFeatureItem from './HomeFeatureItem' + +import img from './assets/desktop.png' + +interface HomeFeatureProps { + +} + +const HomeFeature = ({ }: HomeFeatureProps) => { + return ( +
+ + + +
+ ) + +} + +export default HomeFeature diff --git a/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx new file mode 100644 index 000000000..50b01abd0 --- /dev/null +++ b/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import s from './HomeFeature.module.scss' +import Image from 'next/image' + +interface HomeFeatureItemProps { + image?: any; + children: string; +} + +const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { + + return ( +
+ home feature item img + {/* home feature item img */} +
{children}
+
+ ) + +} + +export default HomeFeatureItem diff --git a/src/components/modules/home/HomeFeature/assets/desktop.png b/src/components/modules/home/HomeFeature/assets/desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..f304867b91f599fccfd93d19047e3111f20eb4cd GIT binary patch literal 4111 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 N002ovPDHLkV1i9i&&2=$ literal 0 HcmV?d00001 diff --git a/src/components/modules/home/HomeFeature/assets/mobile.png b/src/components/modules/home/HomeFeature/assets/mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..871e0e15b17c918a00970be758bf94e1c682243a GIT binary patch literal 2341 zcmV+=3EK9FP)-w@p)@BvoOcCSq!|s5q!#Qj>z6@GvnoGN?_|R0q{MlcuARb|iKtohghokQAGU z)!GzsQ01E1L~tVDs~RBzn((lxymUg>x9?epa}VbrkA0zka&s@-dmd}Awf^<5wa=n) zfthDCKW;It&)dz&>rs=Joofo;&oj&3S!&XOMd>tfn#ybEtYM4fPSn`S zvT`@x98UxKUJi~QtoeHUi}T-(_x(GV^4;**sD1Ao=pH|Jvp)H`Klz#CYVZ7PkFEZ_ ze%uA#GHF2T^EUgA2Q=>#%N8%O@0Gutv)&|xpAYod&$WMCHKp4M?e`sjKQ%7!ws8nZ zrBd>)Q*JowJ4mFlEn$rr76t_vtP9dVG-x_{lZIujSY=$mse!e3u2|!;R;)B7+Y8Lr zH5={!AslkDB)7m^7gi#_ID9o z`oyVmz?lcBXUH$0;dMv~cG(9d)@!gS;aYp=YUJ_!=0Wc>G4MU(63z^SEEMDxp1@mu zl2@ubI|sY1H^W#iA^?KH^A&r)G%n%Hz>!zU+@kj3%~QXgwSPxRwJ>tTYY)YH97hRp z#h}1h4rY1z2XjIg7&aZ_K<8kO*`HTrKNG@Hb#%6HW}vP*9)K-#0=b02yrMuTQ&M=9 ziIIeIMMKr3j$^iPDz+Q$HKo)wfMMmuN33Vb&C8N!DyZoNkBjhD`4&D0HFK_{6tpYk(ltdLRMnGs+-m>c@8x@nl6ur?O1FPxKl=u@cugnnR^3R! zWhKZDpa~7)lDgS;=@WvQyb9)owofRZWs8?e_mJyGrR!_X6lSDJ>XC znV$;^Bo4k3cSNyH7NPOAxRbVY#2@q)Hw@a zsus+_*`l$%*}jwKL8%7{z3Bkn)bi5RAI-dJnTxuB5>aD&B6h*><{r;$adT8B9;~`? z-iA|o(a{udg1LAU+9yvrN1U?J`D)x8)rkk~7TBhIdqXaP;83GS$refSgm^GDAgWx8)K}rn0V8YvF0(dq41l31*2LV8R1u$rw zwDb*B&meUG22p&Mdn?Cw7UA&FlS_;xqNdMzQux&)ORW@}804~0KYaF$`At@SRFo6n zv+}{4Q^k^%@veyjHTaBIBTKw-M;v?ubuW&U-6Nd@`Y=3%ReGKZQ(X+$4bBLU0rg0@ zi_wi6V^TL(De7_OQuqc=NTFx;1ca4N%F+#VF!`t*L5|JOi7;<$YqsgZ_=6nBI2Hg| z$nTO15>0TShIiBoY?ouZ`9f4T4EA zb|u6xii^y5!>r>*u6tStQFGXtRBQ3J$=Dm5Z{q-*f#=B2jzIo8k!pmeCcbw6`b0%R zh_ixk#%$;TODs*D;C^? z2zXs=H)x;WR`8~;&*}5W?-f_%E%1m z)>Jn`FUeyk`V=CtJ)g`)5fRL15|3K!Zve_g2f}f1Cbo}X_|AqGgQB>iJ6+hPqrAO^ z@Jtk_@nOxY6TFkfN8Cy^P~z?8)W`;E|IqXvABh7-ar05e0lo_xhs3kfbqU$6>1dbi z;~$r*{KVgqrotVC;1g6T^At{>vLJLW$x6C<#$_hJbH}8!2ruk^*D%_;X8}Lr00000 LNkvXXu0mjfxE5{5 literal 0 HcmV?d00001 diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts index a83854f9f..2db06b7bb 100644 --- a/src/components/modules/home/index.ts +++ b/src/components/modules/home/index.ts @@ -1 +1,3 @@ export { default as HomeBanner } from './HomeBanner/HomeBanner' +export { default as HomeFeature } from './HomeFeature/HomeFeature' +export { default as HomeFeatureItem } from './HomeFeature/HomeFeatureItem'