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

🎨 styles: banner home

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-26 13:59:05 +07:00
parent d345020e6e
commit e1088bfb88
9 changed files with 93 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
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';
import { HomeBanner } from 'src/components/modules/home';
@ -20,6 +20,12 @@ export default function Home() {
</div>
<ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
<ButtonIconBuy />
<Banner
title="Save 15% on your first order"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
imgLink="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png"
/>
</>
)
}

33
src/components/common/Banner/Banner.module.scss
View File

@ -2,31 +2,44 @@
.banner {
@apply bg-primary-light custom-border-radius-lg overflow-hidden;
border: 1px solid var(--primary);
@screen md {
border: 1px solid var(--primary);
}
&.large {
.inner {
@screen xl {
@apply bg-right-bottom;
background-size: unset;
}
}
}
.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));
background-image: linear-gradient(
to right,
rgb(227, 242, 233, 0.9),
rgb(227, 242, 233, 0.5) 80%,
rgb(227, 242, 233, 0)
);
padding: 1.6rem;
max-width: 70%;
max-width: 37rem;
@screen md {
max-width: 50%;
max-width: 49.6rem;
padding: 4.8rem;
}
.top {
.heading {
@apply heading-1;
@apply heading-1 font-heading;
margin-bottom: 1.6rem;
}
.subHeading {
@apply sub-headline;
@screen md {
@apply caption;
}
}
}

10
src/components/common/Banner/Banner.tsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames'
import Link from 'next/link'
import React, { memo } from 'react'
import { IconArrowRight } from 'src/components/icons'
@ -12,12 +13,15 @@ interface Props {
subtitle: string,
buttonLabel?: string,
linkButton?: string,
onClick?: () => void,
size?: 'small' | 'large',
}
const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME }: Props) => {
const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: Props) => {
return (
<div className={s.banner}>
<div className={classNames({
[s.banner]: true,
[s.size]: true,
})}>
<div className={s.inner} style={{ backgroundImage: `url(${imgLink})` }}>
<div className={s.content}>
<div className={s.top}>

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

@ -1,23 +1,23 @@
@import "../../../../styles/utilities";
.homeBanner {
@apply spacing-horizontal;
.left {
@apply hidden;
}
@screen md {
@screen xl {
@apply grid;
grid-template-columns: 2fr 4fr;
grid-template-columns: 1fr 1.8fr;
.left {
@apply flex items-end justify-center custom-border-radius-lg;
background: pink;
margin-right: 1.6rem;
// background-image: url('./assets/home_banner.png');
// background-image: url('https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png');
// background-repeat: no-repeat;
background-image: url('./assets/home_banner.png');
background-repeat: no-repeat;
background-size: cover;
.text {
@apply relative font-heading text-center;
padding-bottom: 4.8rem;
padding: 2.4rem 2.4rem 4.8rem;
width: min-content;
color: var(--white);
@ -29,8 +29,8 @@
&::after {
@apply absolute;
content: "";
top: -4rem;
right: -1.6rem;
top: -2.4rem;
right: 0.8rem;
width: 5.7rem;
height: 4.7rem;
background-image: url("./assets/text-decorative.svg");

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

@ -1,6 +1,7 @@
import React from 'react'
import { Banner } from 'src/components/common'
import s from './HomeBanner.module.scss'
import BannerImgRight from './assets/banner_full.png'
interface Props {
className?: string
@ -18,7 +19,8 @@ const HomeBanner = ({ }: Props) => {
<Banner
title="Save 15% on your first order"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
imgLink="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png"
imgLink={BannerImgRight.src}
type="small"
/>
</div >
)

BIN
src/components/modules/home/HomeBanner/assets/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/components/modules/home/HomeBanner/assets/banner_full.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

3
src/styles/_base.scss
View File

@ -39,8 +39,7 @@
--font-size: 16px;
--line-height: 24px;
--font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
sans-serif;
--font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
}

85
src/styles/_utilities.scss
View File

@ -1,78 +1,78 @@
@layer utilities {
.heading-1 {
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;
letter-spacing: -0.03em;
}
}
.heading-2 {
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;
letter-spacing: -0.02em;
}
}
.heading-3 {
font-size: 2.4rem;
line-height: 3.2rem;
font-size: 24px;
line-height: 28px;
letter-spacing: -0.01em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 3.2rem;
line-height: 4rem;
font-size: 64px;
line-height: 80px;
letter-spacing: -0.03em;
}
}
.heading-2 {
font-size: 32px;
line-height: 40px;
letter-spacing: -0.02em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 48px;
line-height: 56px;
letter-spacing: -0.02em;
}
}
.heading-3 {
font-size: 24px;
line-height: 32px;
letter-spacing: -0.01em;
font-weight: bold;
text-transform: uppercase;
@screen md {
font-size: 32px;
line-height: 40px;
letter-spacing: -0.01em;
}
}
.sm-headline {
font-size: 1.8rem;
line-height: 2.8rem;
font-size: 18px;
line-height: 28px;
letter-spacing: -0.01em;
font-weight: bold;
@screen md {
font-size: 2rem;
line-height: 2.8rem;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.01em;
}
}
.sub-headline {
font-size: 2rem;
line-height: 2.8rem;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.01em;
@screen md {
font-size: 2.4rem;
line-height: 3.2rem;
font-size: 24px;
line-height: 32px;
letter-spacing: -0.01em;
}
}
.topline {
font-size: 1.8rem;
line-height: 2.8rem;
font-size: 18px;
line-height: 28px;
letter-spacing: 0.01em;
@screen md {
font-size: 2rem;
line-height: 2.8rem;
font-size: 20px;
line-height: 28px;
letter-spacing: 0.01em;
}
}
.caption {
font-size: 1.2rem;
line-height: 2rem;
font-size: 12px;
line-height: 20px;
letter-spacing: 0.01em;
}
@ -80,6 +80,7 @@
font-size: 10px;
line-height: 16px;
}
.spacing-horizontal {
padding-left: 2rem;
padding-right: 2rem;