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

:%s

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,43 @@
+@import "../../../../styles/utilities";
+
+.homeBanner {
+  @apply spacing-horizontal;
+  margin-bottom: 2.8rem;
+  .left {
+    @apply hidden;
+  }
+  @screen xl {
+    @apply grid;
+    grid-template-columns: 1fr 1.8fr;
+    .left {
+      @apply flex items-end justify-center custom-border-radius-lg;
+      margin-right: 1.6rem;
+      background-image: url('./assets/home_banner.png');
+      background-repeat: no-repeat;
+      background-size: cover;
+
+      .text {
+        @apply relative font-heading text-center;
+        padding: 2.4rem 2.4rem 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: -2.4rem;
+          right: 0.8rem;
+          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,28 @@
-import { FC } from 'react'
-import s from './HomeBanner.module.css'
+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
     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={BannerImgRight.src}
+                size="small"
+            />
+        </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>

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

@@ -0,0 +1,29 @@
+@import "../../../../styles/utilities";
+
+.homeCTA {
+  @apply spacing-horizontal;
+  margin-top: 1.6rem;
+  margin-bottom: 1.6rem;
+  .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,27 @@
+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'
+
+
+const HomeCTA = () => {
+    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/HomeSubscribe/FormSubscribe/FormSubscribe.module.scss

@@ -0,0 +1,14 @@
+.formSubscribe {
+  @apply flex flex-col justify-center items-center;
+  margin-top: 3.2rem;
+  button {
+    margin-top: 2rem;
+  }
+  @screen md {
+    @apply flex-row;
+    button {
+      margin-left: 2.4rem;
+      margin-top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react'
+import { ButtonCommon, Inputcommon } from 'src/components/common'
+import { CustomInputCommon } from 'src/utils/type.utils';
+import s from './FormSubscribe.module.scss'
+
+
+const FormSubscribe = () => {
+    const inputElementRef = useRef<CustomInputCommon>(null);
+
+    const handleSubmit = (e?: any) => {
+        // todo
+        let value: string
+        if (typeof (e) === 'string') {
+            value = e
+        } else {
+            e.preventDefault && e.preventDefault()
+            value = inputElementRef.current?.getValue()?.toString() || ''
+        }
+        console.log("email here: ", value)
+    }
+
+    return (
+        <section className={s.formSubscribe}>
+            <Inputcommon
+                type='email'
+                styleType='custom'
+                placeholder="Enter your email"
+                ref={inputElementRef}
+                onEnter={handleSubmit}
+                backgroundTransparent={true}
+            />
+            <ButtonCommon onClick={handleSubmit} type='lightBorderNone'>Subsribe</ButtonCommon>
+        </section>
+    )
+}
+
+export default FormSubscribe

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

@@ -0,0 +1,18 @@
+@import "../../../../styles/utilities";
+
+.homeSubscribe {
+  @apply flex flex-col justify-center items-center bg-primary text-center;
+  padding: 4rem 2rem;
+  @screen md {
+    padding-top: 5.6rem;
+    padding-bottom: 5.6rem;
+  }
+  .heading {
+    @apply heading-2 font-heading;
+    color: var(--white);
+    margin-bottom: 2.4rem;
+  }
+  .sub {
+    color: var(--white);
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+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>
+            <div className={s.sub}>Subscribe to our newsletter for fresh news, seasonal arrivals and delicious recipes.</div>
+            <FormSubscribe />
+        </section >
+    )
+}
+
+export default HomeSubscribe

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

@@ -0,0 +1,68 @@
+@import "../../../../styles/utilities";
+
+.homeVideo {
+  margin: 2rem auto 3rem;
+  .top,
+  .videoWrap > div {
+    @apply spacing-horizontal;
+  }
+  @screen md {
+    margin: 6.4rem auto 5.6rem;
+    .top,
+    .videoWrap > div {
+      max-width: 60rem;
+      margin: auto;
+      padding: 0;
+    }
+  }
+
+  @screen lg {
+    .top,
+    .videoWrap > div {
+      max-width: 80rem;
+    }
+  }
+  .top {
+    margin-bottom: 2rem;
+    @screen md {
+      @apply flex items-center;
+      margin-bottom: 4rem;
+      .logo {
+        margin-right: 2.4rem;
+        margin-bottom: 0;
+      }
+    }
+    .logo {
+      max-width: 10rem;
+      margin-bottom: 1rem;
+      img {
+        object-fit: cover;
+      }
+    }
+    .heading {
+      @apply heading-2 font-heading;
+    }
+  }
+  .videoWrap {
+    @apply relative flex justify-center;
+    > div {
+      @apply relative;
+      width: 100% !important;
+      z-index: 10;
+    }
+    &::before {
+      @apply absolute bg-primary;
+      content: "";
+      width: 100%;
+      height: 18rem;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 0;
+      @screen md {
+        background-image: url("./assets/bg_left.svg"), url("./assets/bg_right.svg");
+        background-repeat: no-repeat;
+        background-position: 5% 0, 95% 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+import React from 'react'
+import s from './HomeVideo.module.scss'
+import LogoBrand from './assets/logo_maggi.png'
+import { VideoPlayer } from 'src/components/common'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HomeVideo = ({ }: Props) => {
+    return (
+        <section className={s.homeVideo}>
+            <div className={s.top}>
+                <div className={s.logo}>
+                    <Image src={LogoBrand} />
+                </div>
+                <h2 className={s.heading}>
+                    Maggi Sauce Is The Secret Weapon For Making All Your Food
+                </h2>
+            </div>
+            <div className={s.videoWrap}>
+                {/* todo: change url video */}
+                <VideoPlayer url='https://www.youtube.com/watch?v=nXH23nYYM3s' controls={true} />
+            </div>
+        </section >
+    )
+}
+
+export default HomeVideo

src/components/modules/home/HomeVideo/assets/bg_left.svg

@@ -0,0 +1,19 @@
+<svg width="240" height="268" viewBox="0 0 240 268" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<rect x="170.045" y="167.357" width="32.2656" height="16.5938" rx="4" transform="rotate(-16 170.045 167.357)" stroke="#CDF4DD" stroke-width="4"/>
+<path d="M170.168 201.23C167.732 192.736 172.644 183.875 181.138 181.439L199.117 176.284C207.611 173.848 216.471 178.76 218.907 187.254L234.907 243.052C236.125 247.299 233.669 251.73 229.422 252.948L196.063 262.513C191.816 263.731 187.386 261.275 186.168 257.028L170.168 201.23Z" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="177.519" y="170.009" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 177.519 170.009)" fill="#CDF4DD"/>
+<rect x="185.494" y="167.723" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 185.494 167.723)" fill="#CDF4DD"/>
+<rect x="193.47" y="165.436" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 193.47 165.436)" fill="#CDF4DD"/>
+</g>
+<g opacity="0.6">
+<path d="M36.5973 106.436L39.9701 94.6735L64.4373 101.689L60.9881 113.718C59.4878 118.951 60.973 124.584 64.8578 128.397C69.0553 132.516 70.4233 138.726 68.3451 144.228L55.6959 177.716C54.5922 180.638 51.4315 182.224 48.4292 181.363L11.314 170.721C8.31623 169.861 6.47675 166.848 7.08188 163.789L13.7174 130.242C14.9118 124.203 19.3948 119.345 25.3188 117.671C30.7696 116.131 35.036 111.881 36.5973 106.436Z" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="42.3359" y="74.5464" width="32" height="19" rx="6" transform="rotate(16 42.3359 74.5464)" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="70.6162" y="92.0181" width="4" height="32" rx="2" transform="rotate(106 70.6162 92.0181)" fill="#CDF4DD"/>
+</g>
+<g opacity="0.6">
+<path d="M186.052 83.4148L179.934 94.0117L157.891 81.2851L164.148 70.448C166.869 65.7341 166.791 59.9085 163.944 55.2694C160.868 50.2567 161.043 43.9002 164.39 39.0645L184.765 9.63163C186.543 7.06354 189.994 6.28885 192.699 7.85054L226.137 27.156C228.837 28.7153 229.893 32.0836 228.566 34.9057L214.012 65.8511C211.392 71.4217 205.867 75.0504 199.714 75.2416C194.052 75.4176 188.885 78.5093 186.052 83.4148Z" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="172.769" y="112.969" width="32" height="19" rx="6" transform="rotate(-150 172.769 112.969)" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="149.557" y="89.1743" width="4" height="32" rx="2" transform="rotate(-60 149.557 89.1743)" fill="#CDF4DD"/>
+</g>
+</svg>

src/components/modules/home/HomeVideo/assets/bg_right.svg

@@ -0,0 +1,21 @@
+<svg width="237" height="252" viewBox="0 0 237 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<rect x="196.607" y="142.667" width="32.2656" height="16.5938" rx="4" transform="rotate(16.8391 196.607 142.667)" stroke="#CDF4DD" stroke-width="4"/>
+<path d="M178.342 171.193C180.901 162.736 189.833 157.955 198.291 160.514L216.192 165.932C224.649 168.492 229.431 177.424 226.871 185.881L210.055 241.439C208.776 245.668 204.31 248.059 200.081 246.779L166.866 236.726C162.637 235.446 160.246 230.98 161.526 226.751L178.342 171.193Z" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="201.447" y="148.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 201.447 148.949)" fill="#CDF4DD"/>
+<rect x="209.389" y="151.352" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 209.389 151.352)" fill="#CDF4DD"/>
+<rect x="217.33" y="153.756" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 217.33 153.756)" fill="#CDF4DD"/>
+</g>
+<g opacity="0.6">
+<rect x="150.723" y="109.167" width="32.2656" height="16.5938" rx="4" transform="rotate(-150 150.723 109.167)" stroke="#CDF4DD" stroke-width="4"/>
+<path d="M175.004 85.5494C170.586 93.202 160.8 95.824 153.147 91.4058L136.95 82.0542C129.297 77.6359 126.675 67.8505 131.094 60.1978L160.117 9.92772C162.326 6.10138 167.219 4.79038 171.045 6.99952L201.099 24.3511C204.925 26.5602 206.236 31.4529 204.027 35.2793L175.004 85.5494Z" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="147.439" y="101.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 147.439 101.949)" fill="#CDF4DD"/>
+<rect x="140.254" y="97.8003" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 140.254 97.8003)" fill="#CDF4DD"/>
+<rect x="133.068" y="93.6519" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 133.068 93.6519)" fill="#CDF4DD"/>
+</g>
+<g opacity="0.6">
+<path d="M32.8015 122.764L35.7266 112.563L56.9458 118.648L53.9545 129.08C52.6533 133.618 53.9413 138.504 57.3104 141.81C60.9508 145.383 62.1371 150.768 60.3348 155.54L49.6241 183.896C48.5204 186.818 45.3597 188.404 42.3573 187.543L11.5784 178.717C8.5806 177.858 6.74113 174.845 7.34625 171.786L12.9588 143.41C13.9947 138.173 17.8826 133.96 23.0201 132.508C27.7474 131.172 31.4475 127.486 32.8015 122.764Z" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="37.7793" y="95.1074" width="27.7521" height="16.4778" rx="6" transform="rotate(16 37.7793 95.1074)" stroke="#CDF4DD" stroke-width="4"/>
+<rect x="62.3047" y="110.26" width="3.46901" height="27.7521" rx="1.7345" transform="rotate(106 62.3047 110.26)" fill="#CDF4DD"/>
+</g>
+</svg>

src/components/modules/home/index.ts

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