mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
🎨 styles: home CTA section
:%s
This commit is contained in:
@@ -68,7 +68,7 @@
|
||||
}
|
||||
|
||||
&.large {
|
||||
padding: 3.2rem 4.8rem;
|
||||
padding: 1.6rem 4.8rem;
|
||||
&.onlyIcon {
|
||||
padding: 1.6rem;
|
||||
}
|
||||
|
27
src/components/modules/home/HomeCTA/HomeCTA.module.scss
Normal file
27
src/components/modules/home/HomeCTA/HomeCTA.module.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
31
src/components/modules/home/HomeCTA/HomeCTA.tsx
Normal file
31
src/components/modules/home/HomeCTA/HomeCTA.tsx
Normal 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
|
BIN
src/components/modules/home/HomeCTA/assets/bg_home_cta.png
Normal file
BIN
src/components/modules/home/HomeCTA/assets/bg_home_cta.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 41 KiB |
@@ -1 +1,2 @@
|
||||
export { default as HomeBanner } from './HomeBanner/HomeBanner'
|
||||
export { default as HomeCTA } from './HomeCTA/HomeCTA'
|
||||
|
Reference in New Issue
Block a user