🎨 styles: home subscribe

:%s

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/index.ts

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