Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m2-quangnhan

src/components/common/HeadingCommon/HeadingCommon.module.scss

@@ -1,7 +1,7 @@
 @import '../../../styles/utilities';
 
 .headingCommon {
-  @apply heading-1 font-heading text-left;
+  @apply heading-2 font-heading text-left;
 
   &.highlight {
     color: var(--negative);

src/components/common/HeadingCommon/HeadingCommon.tsx

@@ -11,11 +11,11 @@ interface HeadingCommonProps {
 const HeadingCommon = ({ type='default', align='left', children }: HeadingCommonProps) => {
 
     return (
-        <h1 className={classNames(s.headingCommon, {
+        <h2 className={classNames(s.headingCommon, {
             [s[type]]: type,
             [s[align]]: align
           })}
-        >{children}</h1>
+        >{children}</h2>
     )
 
 }

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

@@ -7,12 +7,8 @@
     padding-top: 5.6rem;
     padding-bottom: 5.6rem;
   }
-  .heading {
-    @apply heading-2 font-heading;
-    color: var(--white);
-    margin-bottom: 2.4rem;
-  }
   .sub {
+    margin-top: 2.4rem;
     color: var(--white);
   }
 }

src/components/modules/home/HomeSubscribe/HomeSubscribe.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import { HeadingCommon } from 'src/components/common'
 import FormSubscribe from './FormSubscribe/FormSubscribe'
 import s from './HomeSubscribe.module.scss'
 
 const HomeSubscribe = () => {
     return (
         <section className={s.homeSubscribe}>
-            <h2 className={s.heading}>Let's stay in touch</h2>
+            <HeadingCommon type='light'>Let's stay in touch</HeadingCommon>
             <div className={s.sub}>Subscribe to our newsletter for fresh news, seasonal arrivals and delicious recipes.</div>
             <FormSubscribe />
         </section >

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

@@ -39,9 +39,6 @@
         object-fit: cover;
       }
     }
-    .heading {
-      @apply heading-2 font-heading;
-    }
   }
   .videoWrap {
     @apply relative flex justify-center;

src/components/modules/home/HomeVideo/HomeVideo.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import s from './HomeVideo.module.scss'
 import LogoBrand from './assets/logo_maggi.png'
 import { VideoPlayer } from 'src/components/common'
+import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
 
 interface Props {
     className?: string
@@ -16,9 +17,9 @@ const HomeVideo = ({ }: Props) => {
                 <div className={s.logo}>
                     <Image src={LogoBrand} />
                 </div>
-                <h2 className={s.heading}>
+                <HeadingCommon>
                     Maggi Sauce Is The Secret Weapon For Making All Your Food
-                </h2>
+                </HeadingCommon>
             </div>
             <div className={s.videoWrap}>
                 {/* todo: change url video */}