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