🎨 styles: home banner (in progress)

:%s

src/components/common/Header/Header.module.scss

@@ -4,6 +4,7 @@
   @apply sticky bg-white shadow-md;
   top: 0;
   z-index: 9999;
+  margin-bottom: 3.2rem;  
   &.full {
     @apply shadow-none;
     border: 1px solid var(--border-line);

src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss

@@ -5,7 +5,7 @@
     padding-bottom: 0.8rem;
     @screen md {
         @apply flex justify-between items-center;
-        adding-top: 0.8rem;
+        padding-top: 0.8rem;
         padding-bottom: 0.8rem;
         &.full {
             padding-top: 2.4rem;

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

@@ -1,5 +0,0 @@
-/* style demo here */
-
-.homeBanner {
-  color: green;
-}

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

@@ -0,0 +1,42 @@
+@import "../../../../styles/utilities";
+
+.homeBanner {
+  .left {
+    @apply hidden;
+  }
+  @screen md {
+    @apply grid;
+    grid-template-columns: 2fr 4fr;
+    .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;
+
+      .text {
+        @apply relative font-heading text-center;
+        padding-bottom: 4.8rem;
+        width: min-content;
+
+        color: var(--white);
+        font-size: 8.8rem;
+        line-height: 8rem;
+        letter-spacing: -0.03em;
+        font-weight: bold;
+        text-transform: uppercase;
+        &::after {
+          @apply absolute;
+          content: "";
+          top: -4rem;
+          right: -1.6rem;
+          width: 5.7rem;
+          height: 4.7rem;
+          background-image: url("./assets/text-decorative.svg");
+          background-repeat: no-repeat;
+        }
+      }
+    }
+  }
+}

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

@@ -1,14 +1,26 @@
-import { FC } from 'react'
+import React from 'react'
-import s from './HomeBanner.module.css'
+import { Banner } from 'src/components/common'
+import s from './HomeBanner.module.scss'
 
 interface Props {
     className?: string
     children?: any
 }
 
-const HomeBanner: FC<Props> = ({ }) => {
+const HomeBanner = ({ }: Props) => {
     return (
-        <div className={s.homeBanner}>This is HomeBanner</div>
+        <div className={s.homeBanner}>
+            <section className={s.left}>
+                <div className={s.text}>
+                    Freshness<br/>guaranteed
+                </div>
+            </section >
+            <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"
+            />
+        </div >
     )
 }
 

src/components/modules/home/HomeBanner/assets/text-decorative.svg

@@ -0,0 +1,3 @@
+<svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.991538 29.9054C0.0557444 29.3451 0.620583 20.0215 0.90645 15.3028L0.93056 14.9044C1.10464 12.0221 1.28864 8.97576 1.58821 5.60623C1.85672 2.58606 4.06709 -0.174201 7.09366 0.00859758C9.21393 0.136658 10.9477 0.241374 12.378 1.21201C13.2727 1.81922 12.8541 6.60392 12.4398 11.3389L12.4398 11.339C12.2963 12.9785 12.1534 14.6121 12.0657 16.0642C11.9035 18.7492 11.712 22.151 11.5556 24.9805C11.3803 28.1532 8.87611 30.8509 5.70437 30.6593C5.5283 30.6487 5.35605 30.6386 5.18762 30.6288C3.28784 30.5176 1.87604 30.435 0.991538 29.9054ZM16.2741 30.4881C15.761 29.4441 21.6699 21.4235 24.6604 17.3643L24.9129 17.0215L24.913 17.0213C26.7392 14.5416 28.6693 11.9208 30.8902 9.07754C32.8808 6.52904 36.4595 5.33858 39.0634 7.2562C40.8876 8.59959 42.3792 9.69809 43.0973 11.396C43.5466 12.4582 40.3989 16.4996 37.2839 20.499C36.2054 21.8838 35.1307 23.2636 34.2106 24.513C32.5094 26.823 30.3665 29.7578 28.5868 32.2006C26.5912 34.9397 22.7857 35.9039 20.0569 33.8943C19.9054 33.7827 19.757 33.6739 19.6119 33.5674C17.9753 32.367 16.7592 31.4748 16.2741 30.4881ZM40.166 32.5648C36.3483 34.8144 28.8052 39.2593 28.8599 40.2802C28.9115 41.2451 29.5869 42.3858 30.4956 43.9207C30.5762 44.0568 30.6586 44.196 30.7425 44.3384C32.2551 46.9041 35.6638 47.4375 38.2217 45.9119C40.503 44.5512 43.2476 42.9182 45.4196 41.6378C46.5943 40.9453 47.939 40.2007 49.2885 39.4533C53.1861 37.2951 57.1245 35.1141 57.1278 34.1006C57.1331 32.4804 56.3063 31.0778 55.2952 29.3627C53.8519 26.9144 50.5485 26.6421 48.0602 28.0155C45.2842 29.5476 42.8199 31.0004 40.4883 32.3748L40.4883 32.3749C40.3841 32.4362 40.2766 32.4996 40.166 32.5648Z" fill="white"/>
+</svg>