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

🎨 styles: banner

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-24 16:01:10 +07:00
parent 5517928556
commit eec5a15ff2
8 changed files with 117 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/index.tsx
View File

@ -1,5 +1,5 @@
import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
import { Banner, ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
import { IconBuy } from 'src/components/icons';
export default function Home() {
return (
@ -16,6 +16,11 @@ export default function Home() {
<InputSearch />
</div>
<Banner
imgLink="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png"
title="Save 15% on your first order"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
/>
<ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
<ButtonIconBuy />
</>

38
src/components/common/Banner/Banner.module.scss Normal file
View File

@ -0,0 +1,38 @@
@import "../../../styles/utilities";
.banner {
@apply bg-primary-light custom-border-radius-lg overflow-hidden;
border: 1px solid var(--primary);
.inner {
@apply bg-no-repeat;
background-size: 90%;
background-position: right -500% bottom 0%;
@screen md {
@apply bg-right-bottom;
background-size: unset;
}
.content {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0));
padding: 1.6rem;
max-width: 70%;
@screen md {
max-width: 50%;
padding: 4.8rem;
}
.top {
.heading {
@apply heading-1;
margin-bottom: 1.6rem;
}
.subHeading {
@apply sub-headline;
}
}
.bottom {
margin-top: 4rem;
}
}
}
}

44
src/components/common/Banner/Banner.tsx Normal file
View File

@ -0,0 +1,44 @@
import Link from 'next/link'
import React, { memo } from 'react'
import { IconArrowRight } from 'src/components/icons'
import { ROUTE } from 'src/utils/constanst.utils'
import { LANGUAGE } from 'src/utils/language.utils'
import ButtonCommon from '../ButtonCommon/ButtonCommon'
import s from './Banner.module.scss'
interface Props {
imgLink: string,
title: string,
subtitle: string,
buttonLabel?: string,
linkButton?: string,
onClick?: () => void,
}
const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME }: Props) => {
return (
<div className={s.banner}>
<div className={s.inner} style={{ backgroundImage: `url(${imgLink})` }}>
<div className={s.content}>
<div className={s.top}>
<h1 className={s.heading}>
{title}
</h1>
<div className={s.subHeading}>
{subtitle}
</div>
</div>
<div className={s.bottom}>
<Link href={linkButton}>
<a>
<ButtonCommon icon={<IconArrowRight />} isIconSuffix={true}>{buttonLabel}</ButtonCommon>
</a>
</Link>
</div>
</div>
</div>
</div>
)
})
export default Banner

1
src/components/common/index.ts
View File

@ -7,3 +7,4 @@ export { default as Logo} from './Logo/Logo'
export { default as Inputcommon} from './InputCommon/InputCommon'
export { default as InputSearch} from './InputSearch/InputSearch'
export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
export { default as Banner} from './Banner/Banner'

11
src/components/icons/IconArrowRight.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const IconArrowRight = () => {
return (
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.92 6.62019C11.8724 6.49743 11.801 6.38529 11.71 6.29019L6.71 1.29019C6.61676 1.19695 6.50607 1.12299 6.38425 1.07253C6.26243 1.02207 6.13186 0.996094 6 0.996094C5.7337 0.996094 5.4783 1.10188 5.29 1.29019C5.19676 1.38342 5.1228 1.49411 5.07234 1.61594C5.02188 1.73776 4.99591 1.86833 4.99591 2.00019C4.99591 2.26649 5.1017 2.52188 5.29 2.71019L8.59 6.00019H1C0.734784 6.00019 0.48043 6.10554 0.292893 6.29308C0.105357 6.48062 0 6.73497 0 7.00019C0 7.2654 0.105357 7.51976 0.292893 7.70729C0.48043 7.89483 0.734784 8.00019 1 8.00019H8.59L5.29 11.2902C5.19627 11.3831 5.12188 11.4937 5.07111 11.6156C5.02034 11.7375 4.9942 11.8682 4.9942 12.0002C4.9942 12.1322 5.02034 12.2629 5.07111 12.3848C5.12188 12.5066 5.19627 12.6172 5.29 12.7102C5.38296 12.8039 5.49356 12.8783 5.61542 12.9291C5.73728 12.9798 5.86799 13.006 6 13.006C6.13201 13.006 6.26272 12.9798 6.38458 12.9291C6.50644 12.8783 6.61704 12.8039 6.71 12.7102L11.71 7.71019C11.801 7.61508 11.8724 7.50294 11.92 7.38019C12.02 7.13672 12.02 6.86365 11.92 6.62019Z" fill="white" />
</svg>
)
}
export default IconArrowRight

1
src/components/icons/index.ts
View File

@ -1,3 +1,4 @@
export { default as IconBuy } from './IconBuy'
export { default as IconSearch } from './IconSearch'
export { default as IconArrowRight } from './IconArrowRight'

10
src/styles/_utilities.scss
View File

@ -3,6 +3,8 @@
font-size: 4.8rem;
line-height: 5.6rem;
letter-spacing: -0.03em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 6.4rem;
line-height: 8rem;
@ -13,6 +15,8 @@
font-size: 4rem;
line-height: 4.8rem;
letter-spacing: -0.02em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 4.8rem;
line-height: 5.6rem;
@ -23,6 +27,8 @@
font-size: 2.4rem;
line-height: 3.2rem;
letter-spacing: -0.01em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 3.2rem;
line-height: 4rem;
@ -92,6 +98,10 @@
border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
}
.custom-border-radius-lg {
border-radius: 60% 2% 2% 2%/ 6% 50% 50% 50%;
}
.font-heading {
font-family: var(--font-heading);
}

4
src/utils/constanst.utils.ts
View File

@ -1,3 +1,7 @@
export const KEY = {
ENTER: 'Enter',
}
export const ROUTE = {
HOME: '/',
}