From bbf9db4e00daf273a8fe83aeb6e26a328cebd6a0 Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Thu, 26 Aug 2021 17:49:07 +0700 Subject: [PATCH 1/6] :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' From dc7ee62f830cd25d410e49e061890f9f6bc9125d Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Fri, 27 Aug 2021 10:36:04 +0700 Subject: [PATCH 2/6] :spakles: feat: Home Feature --- .../home/HomeFeature/HomeFeature.module.scss | 43 -------------- .../modules/home/HomeFeature/HomeFeature.tsx | 23 ------- .../{desktop.png => 10h30-11h-desktop.png} | Bin .../{mobile.png => 10h30-11h-mobile.png} | Bin .../home/HomeFeature/assets/8h-desktop.png | Bin 0 -> 4726 bytes .../home/HomeFeature/assets/8h-mobile.png | Bin 0 -> 2456 bytes .../home/HomeFeature/assets/green-desktop.png | Bin 0 -> 4919 bytes .../HomeFeature/HomeFeature.module.scss | 14 +++++ .../components/HomeFeature/HomeFeature.tsx | 22 +++++++ .../HomeFeatureItem.module.scss | 56 ++++++++++++++++++ .../HomeFeatureItem}/HomeFeatureItem.tsx | 14 +++-- .../home/HomeFeature/components/index.ts | 1 + 12 files changed, 101 insertions(+), 72 deletions(-) delete mode 100644 src/components/modules/home/HomeFeature/HomeFeature.module.scss delete mode 100644 src/components/modules/home/HomeFeature/HomeFeature.tsx rename src/components/modules/home/HomeFeature/assets/{desktop.png => 10h30-11h-desktop.png} (100%) rename src/components/modules/home/HomeFeature/assets/{mobile.png => 10h30-11h-mobile.png} (100%) create mode 100644 src/components/modules/home/HomeFeature/assets/8h-desktop.png create mode 100644 src/components/modules/home/HomeFeature/assets/8h-mobile.png create mode 100644 src/components/modules/home/HomeFeature/assets/green-desktop.png create mode 100644 src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.module.scss create mode 100644 src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx create mode 100644 src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss rename src/components/modules/home/HomeFeature/{ => components/HomeFeatureItem}/HomeFeatureItem.tsx (52%) create mode 100644 src/components/modules/home/HomeFeature/components/index.ts diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss deleted file mode 100644 index f9f799ae6..000000000 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@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 deleted file mode 100644 index 04611ac75..000000000 --- a/src/components/modules/home/HomeFeature/HomeFeature.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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/assets/desktop.png b/src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/desktop.png rename to src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png diff --git a/src/components/modules/home/HomeFeature/assets/mobile.png b/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/mobile.png rename to src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png diff --git a/src/components/modules/home/HomeFeature/assets/8h-desktop.png b/src/components/modules/home/HomeFeature/assets/8h-desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..403996dc9b278a072cade69ad4275972a5dc6e7b GIT binary patch literal 4726 zcmbuDTfm>5@ho1VI^ybPbU1lu^

c|HA#?b>8oDu5+$)UFYG6H#5 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 { + return ( +

+ Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm.} /> + + Most fresh fish and seafood will be listed at 8am from inventory.} /> + + Show that food will be shipped in a greengrocery plastic bag.} /> +
+ ) + +} + +export default HomeFeature diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss new file mode 100644 index 000000000..217ed0f98 --- /dev/null +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -0,0 +1,56 @@ +@import '../../../../../../styles/utilities'; + +.homeFeatureItem { + @apply flex; + align-items: center; + vertical-align: middle; + height: fit-content; + + .itemImg { + @apply float-left clear-both; + min-width: 9.6rem; + max-width: 11.2rem; + margin-right: 2.4rem; + &.firstImg { + content:url("../../assets/10h30-11h-mobile.png"); + } + &.secondImg { + content:url("../../assets/8h-mobile.png"); + } + @screen md { + @apply float-left clear-both; + min-width: 9.6rem; + max-width: 11.2rem; + margin-right: 2.4rem; + &.firstImg { + content:url("../../assets/10h30-11h-desktop.png"); + } + &.secondImg { + content:url("../../assets/8h-desktop.png"); + } + &.thirdImg { + content:url("../../assets/green-desktop.png"); + } + } + } + + .itemText { + display: flex; + font-size: 1.6rem; + line-height: 2.4rem; + width: 28rem; + height: 9.6rem; + color: #000; + margin-right: 2.4rem; + align-items: center; + @screen md { + display: flex; + width: 28rem; + height: 9.6rem; + color: #000; + margin-right: 2.4rem; + align-items: center; + } + } + +} \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx similarity index 52% rename from src/components/modules/home/HomeFeature/HomeFeatureItem.tsx rename to src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index 50b01abd0..d09624f93 100644 --- a/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -1,18 +1,20 @@ import React from 'react' -import s from './HomeFeature.module.scss' -import Image from 'next/image' +import classNames from 'classnames' +import s from './HomeFeatureItem.module.scss' + interface HomeFeatureItemProps { - image?: any; - children: string; + image: string; + children: any; } const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { return (
- home feature item img - {/* home feature item img */} + home feature item img
{children}
) diff --git a/src/components/modules/home/HomeFeature/components/index.ts b/src/components/modules/home/HomeFeature/components/index.ts new file mode 100644 index 000000000..c4f31a879 --- /dev/null +++ b/src/components/modules/home/HomeFeature/components/index.ts @@ -0,0 +1 @@ +export { default as HomeFuture } from './HomeFeature/HomeFeature'; \ No newline at end of file From 112f51db38f512ad7850f5efc308d8bb76e12aae Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Fri, 27 Aug 2021 11:33:40 +0700 Subject: [PATCH 3/6] :sparkles: feat: Home Feature --- .../HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index d09624f93..35610dfff 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -16,7 +16,7 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { [s[image]]: image, })} alt="home feature item img" />
{children}
- + ) } From 558a3de4a6eb5635b94bb2337b2f315b27b82c98 Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Fri, 27 Aug 2021 12:32:20 +0700 Subject: [PATCH 4/6] :sparkles: feat: Home Feature --- .../components/HomeFeature/HomeFeature.tsx | 15 +++++++++------ .../HomeFeatureItem/HomeFeatureItem.module.scss | 10 ++++------ .../HomeFeatureItem/HomeFeatureItem.tsx | 6 ++++-- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx index 29cc86603..881c38aa6 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx @@ -6,14 +6,17 @@ import HomeFeatureItem from '../HomeFeatureItem/HomeFeatureItem' const HomeFeature = () => { return (
- Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm.} /> + + Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm. + - Most fresh fish and seafood will be listed at 8am from inventory.} /> + + Most fresh fish and seafood will be listed at 8am from inventory. + - Show that food will be shipped in a greengrocery plastic bag.} /> + + Show that food will be shipped in a greengrocery plastic bag. +
) diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss index 217ed0f98..93d876333 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -36,17 +36,15 @@ .itemText { display: flex; - font-size: 1.6rem; - line-height: 2.4rem; - width: 28rem; - height: 9.6rem; + max-width: 28rem; + min-width: 28rem; color: #000; margin-right: 2.4rem; align-items: center; @screen md { display: flex; - width: 28rem; - height: 9.6rem; + max-width: 28rem; + min-width: 28rem; color: #000; margin-right: 2.4rem; align-items: center; diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index 35610dfff..8dd34cfa9 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -13,8 +13,10 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { return (
home feature item img + [s[image]]: image, + })} + alt="home feature item img" + />
{children}
) From 9c98a4fd7589c6c26ef00aee64a868465398eb9b Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Fri, 27 Aug 2021 12:37:21 +0700 Subject: [PATCH 5/6] :sparkles: feat: Home Feature --- .../{components/HomeFeature => }/HomeFeature.module.scss | 0 .../HomeFeature/{components/HomeFeature => }/HomeFeature.tsx | 2 +- src/components/modules/home/HomeFeature/components/index.ts | 1 - 3 files changed, 1 insertion(+), 2 deletions(-) rename src/components/modules/home/HomeFeature/{components/HomeFeature => }/HomeFeature.module.scss (100%) rename src/components/modules/home/HomeFeature/{components/HomeFeature => }/HomeFeature.tsx (91%) delete mode 100644 src/components/modules/home/HomeFeature/components/index.ts diff --git a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss similarity index 100% rename from src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.module.scss rename to src/components/modules/home/HomeFeature/HomeFeature.module.scss diff --git a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/HomeFeature.tsx similarity index 91% rename from src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx rename to src/components/modules/home/HomeFeature/HomeFeature.tsx index 881c38aa6..af6ec7287 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx +++ b/src/components/modules/home/HomeFeature/HomeFeature.tsx @@ -1,7 +1,7 @@ import React from 'react' import s from './HomeFeature.module.scss' -import HomeFeatureItem from '../HomeFeatureItem/HomeFeatureItem' +import HomeFeatureItem from './components/HomeFeatureItem/HomeFeatureItem' const HomeFeature = () => { return ( diff --git a/src/components/modules/home/HomeFeature/components/index.ts b/src/components/modules/home/HomeFeature/components/index.ts deleted file mode 100644 index c4f31a879..000000000 --- a/src/components/modules/home/HomeFeature/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as HomeFuture } from './HomeFeature/HomeFeature'; \ No newline at end of file From 1d743f2a703f078b69ed006f4a3df51f1f296577 Mon Sep 17 00:00:00 2001 From: quocsonnguyen Date: Fri, 27 Aug 2021 15:43:43 +0700 Subject: [PATCH 6/6] :sparkles: feat: Home Feature --- .../home/HomeFeature/HomeFeature.module.scss | 8 +-- .../HomeFeatureItem.module.scss | 55 ++++++++++--------- .../HomeFeatureItem/HomeFeatureItem.tsx | 3 +- 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss index 6a4c68be8..451dc39c5 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -4,11 +4,11 @@ @apply spacing-horizontal-left grid grid-cols-1; background-color: #FFFFFF; height: fit-content; - display: flex; - margin-bottom: 3.2rem; + padding-top: 3.2rem; + padding-bottom: 3.2rem; - @screen xl { - @apply spacing-horizontal grid grid-cols-3; + @screen md { + @apply spacing-horizontal grid-cols-3; margin-bottom: 6.4rem; } } \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss index 93d876333..a31e5e4fe 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -5,49 +5,54 @@ align-items: center; vertical-align: middle; height: fit-content; + width: fit-content; + + @screen md { + @apply block; + } + + @screen lg { + @apply flex; + } .itemImg { - @apply float-left clear-both; - min-width: 9.6rem; - max-width: 11.2rem; + @apply flex float-left clear-both; margin-right: 2.4rem; + align-items: center; &.firstImg { - content:url("../../assets/10h30-11h-mobile.png"); + margin-top: 1rem; + content:url("../../assets/10h30-11h-desktop.png"); } &.secondImg { - content:url("../../assets/8h-mobile.png"); + margin-top: 1rem; + content:url("../../assets/8h-desktop.png"); } + &.thirdImg { + margin-top: 1rem; + content:url("../../assets/green-desktop.png"); + } + @screen md { - @apply float-left clear-both; - min-width: 9.6rem; - max-width: 11.2rem; + @apply flex justify-center items-center; + margin: auto; + } + + @screen lg { + @apply flex float-left clear-both; margin-right: 2.4rem; - &.firstImg { - content:url("../../assets/10h30-11h-desktop.png"); - } - &.secondImg { - content:url("../../assets/8h-desktop.png"); - } - &.thirdImg { - content:url("../../assets/green-desktop.png"); - } } } .itemText { - display: flex; + @apply inline-block; max-width: 28rem; - min-width: 28rem; + min-width: 12rem; color: #000; margin-right: 2.4rem; align-items: center; + @screen md { - display: flex; - max-width: 28rem; - min-width: 28rem; - color: #000; - margin-right: 2.4rem; - align-items: center; + @apply flex; } } diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index 8dd34cfa9..eb566bdc9 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -15,8 +15,7 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { home feature item img + alt="home feature item img" />
{children}
)