🎨 styles: home CTA section

:%s
This commit is contained in:
lytrankieio123
2021-08-26 15:05:52 +07:00
parent 90d2e686f8
commit 4155ff69d7
7 changed files with 66 additions and 25 deletions

View File

@@ -68,7 +68,7 @@
}
&.large {
padding: 3.2rem 4.8rem;
padding: 1.6rem 4.8rem;
&.onlyIcon {
padding: 1.6rem;
}

View File

@@ -0,0 +1,27 @@
@import "../../../../styles/utilities";
.homeCTA {
@apply spacing-horizontal;
.inner {
@apply flex justify-between items-center bg-primary-light;
background-image: url('./assets/bg_home_cta.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
border-radius: 2.4rem;
padding: 2rem;
@screen md {
padding-left: 9rem;
padding-right: 4.8rem;
min-height: 18rem;
}
.text {
.heading {
@apply heading-1 font-heading text-primary;
}
.sub {
@apply font-bold sm-headline;
}
}
}
}

View File

@@ -0,0 +1,31 @@
import Link from 'next/link'
import React from 'react'
import { ButtonCommon } from 'src/components/common'
import { ROUTE } from 'src/utils/constanst.utils'
import { LANGUAGE } from 'src/utils/language.utils'
import s from './HomeCTA.module.scss'
interface Props {
className?: string
children?: any
}
const HomeCTA = ({ }: Props) => {
return (
<section className={s.homeCTA}>
<div className={s.inner}>
<div className={s.text}>
<h1 className={s.heading}>SALE 70%</h1>
<div className={s.sub}>for Vegetarian Day</div>
</div>
<Link href={ROUTE.PRODUCTS}>
<a>
<ButtonCommon type='ghost' size='large'>{LANGUAGE.BUTTON_LABEL.SHOP_NOW}</ButtonCommon>
</a>
</Link>
</div>
</section >
)
}
export default HomeCTA

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View File

@@ -1 +1,2 @@
export { default as HomeBanner } from './HomeBanner/HomeBanner'
export { default as HomeCTA } from './HomeCTA/HomeCTA'