🎨 styles: home CTA section

:%s

pages/index.tsx

@@ -1,31 +1,13 @@
 
-import { Banner, ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
+import { Layout } from 'src/components/common';
-import { IconBuy } from 'src/components/icons';
+import { HomeBanner, HomeCTA } from 'src/components/modules/home';
-import { HomeBanner } from 'src/components/modules/home';
 
 
 export default function Home() {
   return (
     <>
       <HomeBanner />
-      <div>This is home page</div>
+      <HomeCTA/>
-      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
-      <p>Go to <code>src/components</code> to make your awesome component!</p>
-      <p>Go to <code>src/styles</code> to find global styles!</p>
-
-      {/* demo  */}
-      <div style={{ display: 'flex' }}>
-        <Inputcommon placeholder="Enter here" />
-        <InputSearch />
-      </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/ButtonCommon/ButtonCommon.module.scss

@@ -68,7 +68,7 @@
   }
 
   &.large {
-    padding: 3.2rem 4.8rem;
+    padding: 1.6rem 4.8rem;
     &.onlyIcon {
       padding: 1.6rem;
     }

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

@@ -0,0 +1,27 @@
+@import "../../../../styles/utilities";
+
+.homeCTA {
+  @apply spacing-horizontal;
+  .inner {
+    @apply flex justify-between items-center bg-primary-light;
+    background-image: url('./assets/bg_home_cta.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center top;
+    border-radius: 2.4rem;
+    padding: 2rem;
+    @screen md {
+      padding-left: 9rem;
+      padding-right: 4.8rem;
+      min-height: 18rem;
+    }
+    .text {
+      .heading {
+        @apply heading-1 font-heading text-primary;
+      }
+      .sub {
+        @apply font-bold sm-headline;
+      }
+    }
+  }
+}

src/components/modules/home/HomeCTA/HomeCTA.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React from 'react'
+import { ButtonCommon } from 'src/components/common'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
+import s from './HomeCTA.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HomeCTA = ({ }: Props) => {
+    return (
+        <section className={s.homeCTA}>
+            <div className={s.inner}>
+                <div className={s.text}>
+                    <h1 className={s.heading}>SALE 70%</h1>
+                    <div className={s.sub}>for Vegetarian Day</div>
+                </div>
+                <Link href={ROUTE.PRODUCTS}>
+                    <a>
+                        <ButtonCommon type='ghost' size='large'>{LANGUAGE.BUTTON_LABEL.SHOP_NOW}</ButtonCommon>
+                    </a>
+                </Link>
+            </div>
+        </section >
+    )
+}
+
+export default HomeCTA

src/components/modules/home/index.ts

@@ -1 +1,2 @@
 export { default as HomeBanner } from './HomeBanner/HomeBanner'
+export { default as HomeCTA } from './HomeCTA/HomeCTA'

tailwind.config.js

@@ -45,13 +45,13 @@ module.exports = {
         'negative-border-line': 'var(--negative-border-line)',
         'negative-light': 'var(--negative-light)',
 
-        'disabled': 'var(--text-disabled)',
         line: 'var(--border-line)',
         background: 'var(--background)',
         white: 'var(--white)',
-        'background-arrow':'var(--background-arrow)',
         gray: 'var(--gray)',
         disabled: 'var(--text-disabled)',
+        'background-arrow':'var(--background-arrow)',
+
         
         // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',