mirror of
https://github.com/vercel/commerce.git
synced 2025-07-10 06:41:20 +00:00
✨ feat: Home Feature
This commit is contained in:
parent
9df2484d60
commit
558a3de4a6
@ -6,14 +6,17 @@ import HomeFeatureItem from '../HomeFeatureItem/HomeFeatureItem'
|
|||||||
const HomeFeature = () => {
|
const HomeFeature = () => {
|
||||||
return (
|
return (
|
||||||
<section className={s.homeFeature}>
|
<section className={s.homeFeature}>
|
||||||
<HomeFeatureItem image="firstImg"
|
<HomeFeatureItem image="firstImg">
|
||||||
children={<span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>} />
|
<span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>
|
||||||
|
</HomeFeatureItem>
|
||||||
|
|
||||||
<HomeFeatureItem image="secondImg"
|
<HomeFeatureItem image="secondImg">
|
||||||
children={<span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>} />
|
<span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>
|
||||||
|
</HomeFeatureItem>
|
||||||
|
|
||||||
<HomeFeatureItem image="thirdImg"
|
<HomeFeatureItem image="thirdImg">
|
||||||
children={<span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>} />
|
<span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>
|
||||||
|
</HomeFeatureItem>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -36,17 +36,15 @@
|
|||||||
|
|
||||||
.itemText {
|
.itemText {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 1.6rem;
|
max-width: 28rem;
|
||||||
line-height: 2.4rem;
|
min-width: 28rem;
|
||||||
width: 28rem;
|
|
||||||
height: 9.6rem;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-right: 2.4rem;
|
margin-right: 2.4rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@screen md {
|
@screen md {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 28rem;
|
max-width: 28rem;
|
||||||
height: 9.6rem;
|
min-width: 28rem;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-right: 2.4rem;
|
margin-right: 2.4rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -14,7 +14,9 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
|
|||||||
<div className={s.homeFeatureItem}>
|
<div className={s.homeFeatureItem}>
|
||||||
<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>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user