crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-13 16:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Home Feature

Browse Source
This commit is contained in:
quocsonnguyen 2021-08-27 15:43:43 +07:00
parent 9c98a4fd75
commit 1d743f2a70
3 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modules/home/HomeFeature/HomeFeature.module.scss
View File

@ -4,11 +4,11 @@
@apply spacing-horizontal-left grid grid-cols-1; @apply spacing-horizontal-left grid grid-cols-1;
background-color: #FFFFFF; background-color: #FFFFFF;
height: fit-content; height: fit-content;
display: flex; padding-top: 3.2rem;
margin-bottom: 3.2rem; padding-bottom: 3.2rem;
@screen xl { @screen md {
@apply spacing-horizontal grid grid-cols-3; @apply spacing-horizontal grid-cols-3;
margin-bottom: 6.4rem; margin-bottom: 6.4rem;
} }
} }

55
src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
View File

@ -5,49 +5,54 @@
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
height: fit-content; height: fit-content;
width: fit-content;
@screen md {
@apply block;
}
@screen lg {
@apply flex;
}
.itemImg { .itemImg {
@apply float-left clear-both; @apply flex float-left clear-both;
min-width: 9.6rem;
max-width: 11.2rem;
margin-right: 2.4rem; margin-right: 2.4rem;
align-items: center;
&.firstImg { &.firstImg {
content:url("../../assets/10h30-11h-mobile.png"); margin-top: 1rem;
content:url("../../assets/10h30-11h-desktop.png");
} }
&.secondImg { &.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 { @screen md {
@apply float-left clear-both; @apply flex justify-center items-center;
min-width: 9.6rem; margin: auto;
max-width: 11.2rem; }
@screen lg {
@apply flex float-left clear-both;
margin-right: 2.4rem; 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 { .itemText {
display: flex; @apply inline-block;
max-width: 28rem; max-width: 28rem;
min-width: 28rem; min-width: 12rem;
color: #000; color: #000;
margin-right: 2.4rem; margin-right: 2.4rem;
align-items: center; align-items: center;
@screen md { @screen md {
display: flex; @apply flex;
max-width: 28rem;
min-width: 28rem;
color: #000;
margin-right: 2.4rem;
align-items: center;
} }
} }

3
src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
View File

@ -15,8 +15,7 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
<img className={classNames(s.itemImg, { <img className={classNames(s.itemImg, {
[s[image]]: image, [s[image]]: image,
})} })}
alt="home feature item img" alt="home feature item img" />
/>
<div className={s.itemText}>{children}</div> <div className={s.itemText}>{children}</div>
</div> </div>
) )