🎨 styles: banner home

:%s

src/components/common/Banner/Banner.module.scss

@@ -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;
+          }
         }
       }
 

src/components/common/Banner/Banner.tsx

@@ -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}>

src/components/modules/home/HomeBanner/HomeBanner.module.scss

@@ -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");

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -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 >
     )