🎨 styles: banner home

:%s

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