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; @apply grid;
grid-template-columns: 1fr 1.8fr; grid-template-columns: 1fr 1.8fr;
.left { .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; margin-right: 1.6rem;
.imgWrap { .imgWrap {
@apply absolute w-full h-full; @apply absolute w-full h-full;
top: 0; top: 0;
left: 0; left: 0;
> div { > div {
@apply w-full h-full custom-border-radius-lg; @apply w-full h-full shape-common-lg;
} }
img { img {
object-fit: cover; object-fit: cover;

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

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