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

🐛 bug: home feature

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-27 16:25:44 +07:00
parent 7fcbb820d0
commit a0ed04329d
3 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/index.tsx
View File

@ -1,14 +1,14 @@
import { Layout } from 'src/components/common' import { Layout } from 'src/components/common'
import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories } from 'src/components/modules/home'; import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home';
import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe';
export default function Home() { export default function Home() {
return ( return (
<> <>
<HomeBanner /> <HomeBanner />
<HomeCollection/> <HomeFeature />
<HomeCategories/> <HomeCategories />
<HomeCollection />
<HomeVideo /> <HomeVideo />
<HomeCTA /> <HomeCTA />
<HomeRecipe /> <HomeRecipe />

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

@ -1,14 +1,16 @@
@import '../../../../../../styles/utilities'; @import "../../../../styles/utilities";
.homeFeature { .homeFeature {
@apply spacing-horizontal-left grid grid-cols-1; @apply spacing-horizontal;
background-color: #FFFFFF; background-color: #ffffff;
height: fit-content; height: fit-content;
padding-top: 3.2rem; margin: 3.2rem auto;
padding-bottom: 3.2rem;
@screen md { @screen md {
@apply spacing-horizontal grid-cols-3; @apply grid grid-cols-3;
margin-bottom: 6.4rem; grid-gap: 2.4rem;
margin: 6.4rem auto;
}
@screen md {
grid-gap: 4rem;
} }
} }

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

@ -1,18 +1,16 @@
@import '../../../../../../styles/utilities'; @import "../../../../../../styles/utilities";
.homeFeatureItem { .homeFeatureItem {
@apply flex; @apply flex items-center;
align-items: center;
vertical-align: middle;
height: fit-content;
width: fit-content; width: fit-content;
margin: auto;
@screen md { @screen md {
@apply block; @apply flex flex-col items-center justify-between;
} }
@screen lg { @screen lg {
@apply flex; @apply flex flex-row;
} }
.itemImg { .itemImg {
@ -21,39 +19,38 @@
align-items: center; align-items: center;
&.firstImg { &.firstImg {
margin-top: 1rem; margin-top: 1rem;
content:url("../../assets/10h30-11h-desktop.png"); content: url("../../assets/10h30-11h-desktop.png");
} }
&.secondImg { &.secondImg {
margin-top: 1rem; margin-top: 1rem;
content:url("../../assets/8h-desktop.png"); content: url("../../assets/8h-desktop.png");
} }
&.thirdImg { &.thirdImg {
margin-top: 1rem; margin-top: 1rem;
content:url("../../assets/green-desktop.png"); content: url("../../assets/green-desktop.png");
} }
@screen md { @screen md {
@apply flex justify-center items-center; @apply flex flex-col justify-center items-center;
margin: auto; margin: auto;
margin-top: 0.8rem;
} }
@screen lg { @screen lg {
@apply flex float-left clear-both; @apply flex float-left clear-both;
margin-right: 2.4rem; margin-right: 2.4rem;
margin-top: 0;
} }
} }
.itemText { .itemText {
@apply inline-block;
max-width: 28rem; max-width: 28rem;
min-width: 12rem; min-width: 12rem;
color: #000;
margin-right: 2.4rem;
align-items: center;
@screen md { @screen md {
@apply flex; @apply text-center;
}
@screen lg {
@apply text-left;
} }
} }
} }