🎨 styles: home subscribe

:%s

pages/index.tsx

@@ -1,13 +1,14 @@
 
 import { Layout } from 'src/components/common';
-import { HomeBanner, HomeCTA } from 'src/components/modules/home';
+import { HomeBanner, HomeCTA, HomeSubscribe } from 'src/components/modules/home';
 
 
 export default function Home() {
   return (
     <>
       <HomeBanner />
-      <HomeCTA/>
+      <HomeCTA />
+      <HomeSubscribe />
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1.6rem 3.2rem;
+  padding: 1.2rem 3.2rem;
   &:disabled {
     filter: brightness(0.9);
     cursor: not-allowed;
@@ -49,9 +49,17 @@
     }
   }
 
+  &.lightBorderNone {
+    @apply bg-white text-primary;
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
   &.ghost {
-    @apply bg-white;
-    color: var(--primary);
+    @apply bg-white text-primary;
     border: 1px solid var(--primary);
     &.loading {
       &::before {

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -4,7 +4,7 @@ import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
-    type?: 'primary' | 'light' | 'ghost',
+    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
     size?: 'default' | 'large',
     icon?: React.ReactNode,
     isIconSuffix?: boolean,

src/components/common/InputCommon/InputCommon.module.scss

@@ -40,5 +40,12 @@
         border: 1px solid var(--primary);
       }
     }
+    &.bgTransparent {
+      background: rgb(227, 242, 233, 0.3);
+      color: var(--white);
+      &::placeholder {
+        color: var(--white);
+      }
+    }
   }
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
@@ -9,14 +10,15 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: 'text' | 'number',
+    type?: 'text' | 'number' | 'email',
     styleType?: 'default' | 'custom',
+    backgroundTransparent?: boolean,
     icon?: React.ReactNode,
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
 
-const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false,
     onChange, onEnter }: Props, ref) => {
     const inputElementRef = useRef<HTMLInputElement>(null);
 
@@ -24,6 +26,10 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
         focus: () => {
             inputElementRef.current?.focus();
         },
+        getValue: () => {
+            const value = inputElementRef.current?.value || ''
+            return value
+        }
     }));
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -32,6 +38,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
 
     const handleKeyDown = (e: any) => {
         if (e.key === KEY.ENTER && onEnter) {
+            console.log("on enter***")
             const value = inputElementRef.current?.value || ''
             onEnter(value)
         }
@@ -49,7 +56,11 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                 placeholder={placeholder}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
-                className={`${s.inputCommon} ${s[styleType]}`}
+                className={classNames({
+                    [s.inputCommon]: true,
+                    [s[styleType]]: true,
+                    [s.bgTransparent]: backgroundTransparent
+                })}
             />
         </div>
     )

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'

src/styles/_utilities.scss

@@ -84,6 +84,10 @@
     .spacing-horizontal {
         padding-left: 2rem;
         padding-right: 2rem;
+        @screen md {
+            padding-left: 6.4rem;
+            padding-right: 6.4rem;
+        }
         @screen md {
             padding-left: 11.2rem;
             padding-right: 11.2rem;
@@ -92,6 +96,10 @@
     .spacing-horizontal-left {
         padding-left: 2rem;
         @screen md {
+            padding-left: 6.4rem;
+            padding-right: 6.4rem;
+        }
+        @screen lg {
             padding-left: 11.2rem;
             padding-right: 11.2rem;
         }

src/utils/type.utils.ts

@@ -0,0 +1,3 @@
+export interface CustomInputCommon extends HTMLInputElement  {
+    getValue: () => string | number
+}