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

styles: banner home

Browse Source
This commit is contained in:
lytrankieio123
2021-09-13 10:30:19 +07:00
parent 50725d982f
commit 0eddfe7c91
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/modules/home/HomeBanner/HomeBanner.module.scss
View File

@@ -11,14 +11,14 @@
@apply grid;
grid-template-columns: 1fr 1.8fr;
.left {
@apply relative flex items-end justify-center custom-border-radius-lg;
@apply relative flex items-end justify-center shape-common-lg;
margin-right: 1.6rem;
.imgWrap {
@apply absolute w-full h-full;
top: 0;
left: 0;
> div {
@apply w-full h-full custom-border-radius-lg;
@apply w-full h-full shape-common-lg;
}
img {
object-fit: cover;

7
src/components/modules/home/HomeBanner/HomeBanner.tsx
View File

@@ -1,9 +1,10 @@
import React from 'react'
import { Banner } from 'src/components/common'
import { Banner, StaticImage } from 'src/components/common'
import BannerImgRight from './assets/banner_full.png'
import HomeBannerImg from './assets/home_banner.png'
import s from './HomeBanner.module.scss'
import Image from 'next/image'
import { ROUTE } from 'src/utils/constanst.utils'
interface Props {
className?: string
@@ -15,7 +16,7 @@ const HomeBanner = ({ }: Props) => {
<div className={s.homeBanner}>
<section className={s.left}>
<div className={s.imgWrap}>
<Image src={HomeBannerImg} placeholder='blur' />
<StaticImage src={HomeBannerImg} />
</div>
<div className={s.text}>
Freshness<br />guaranteed
@@ -28,12 +29,14 @@ const HomeBanner = ({ }: Props) => {
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
imgLink: BannerImgRight.src,
size: "small",
linkButton: ROUTE.PRODUCTS,
},
{
title: "Save 15% on your first order 2",
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
imgLink: BannerImgRight.src,
size: "small",
linkButton: ROUTE.PRODUCTS,
}
]
}