♻️ enhan: using heading common in home video

:%s

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/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 */}