🎨 styles: banner home

:%s

pages/index.tsx

@@ -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"
+      />
     </>
   )
 }

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('./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-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;
+          top: -2.4rem;
-          right: -1.6rem;
+          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 >
     )

src/styles/_base.scss

@@ -39,8 +39,7 @@
   --font-size: 16px;
   --line-height: 24px;
 
-  --font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
+  --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
-    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;
 }

src/styles/_utilities.scss

@@ -1,78 +1,78 @@
 @layer utilities {
     .heading-1 {
-        font-size: 4.8rem;
+        font-size: 24px;
-        line-height: 5.6rem;
+        line-height: 28px;
-        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;
         letter-spacing: -0.01em;
         font-weight: bold;
         text-transform: uppercase;
         @screen md {
-            font-size: 3.2rem;
+            font-size: 64px;
-            line-height: 4rem;
+            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;
+        font-size: 18px;
-        line-height: 2.8rem;
+        line-height: 28px;
         letter-spacing: -0.01em;
         font-weight: bold;
         @screen md {
-            font-size: 2rem;
+            font-size: 20px;
-            line-height: 2.8rem;
+            line-height: 28px;
             letter-spacing: -0.01em;
         }
     }
 
     .sub-headline {
-        font-size: 2rem;
+        font-size: 20px;
-        line-height: 2.8rem;
+        line-height: 28px;
         letter-spacing: -0.01em;
         @screen md {
-            font-size: 2.4rem;
+            font-size: 24px;
-            line-height: 3.2rem;
+            line-height: 32px;
             letter-spacing: -0.01em;
         }
     }
 
     .topline {
-        font-size: 1.8rem;
+        font-size: 18px;
-        line-height: 2.8rem;
+        line-height: 28px;
         letter-spacing: 0.01em;
         @screen md {
-            font-size: 2rem;
+            font-size: 20px;
-            line-height: 2.8rem;
+            line-height: 28px;
             letter-spacing: 0.01em;
         }
     }
 
     .caption {
-        font-size: 1.2rem;
+        font-size: 12px;
-        line-height: 2rem;
+        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;