From da7edd32b79b212f870c45174ef13751e0d94404 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:31:19 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Implemented=20SectionSu?=
 =?UTF-8?q?bscribe2=20component=20=E2=9C=A8=20Added=20newsletter=20subscri?=
 =?UTF-8?q?ption=20section=20=F0=9F=94=8D=20Enhanced=20user=20experience?=
 =?UTF-8?q?=20=F0=9F=93=A7=20Added=20email=20input=20and=20submit=20button?=
 =?UTF-8?q?=20=F0=9F=96=BC=EF=B8=8F=20Included=20right=20image=20for=20vis?=
 =?UTF-8?q?ual=20appeal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SectionSubscribe2.tsx | 63 ++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/SectionSubscribe2.tsx

diff --git a/src/components/SectionSubscribe2.tsx b/src/components/SectionSubscribe2.tsx
new file mode 100644
index 0000000..5898dda
--- /dev/null
+++ b/src/components/SectionSubscribe2.tsx
@@ -0,0 +1,63 @@
+import React, { FC } from "react";
+import ButtonCircle from "@/shared/ButtonCircle";
+import rightImg from "@/images/SVG-subcribe2.png";
+import Badge from "@/shared/Badge";
+import Input from "@/shared/Input";
+import Image from "next/image";
+
+export interface SectionSubscribe2Props {
+  className?: string;
+}
+
+const SectionSubscribe2: FC<SectionSubscribe2Props> = ({ className = "" }) => {
+  return (
+    <div
+      className={`nc-SectionSubscribe2 relative flex flex-col lg:flex-row lg:items-center ${className}`}
+      data-nc-id="SectionSubscribe2"
+    >
+      <div className="flex-shrink-0 mb-10 lg:mb-0 lg:mr-10 lg:w-2/5">
+        <h2 className="font-semibold text-4xl">Join our newsletter 🎉</h2>
+        <span className="block mt-5 text-neutral-500 dark:text-neutral-400">
+          Read and share new perspectives on just about any topic. Everyone’s
+          welcome.
+        </span>
+        <ul className="space-y-4 mt-10">
+          <li className="flex items-center space-x-4">
+            <Badge name="01" />
+            <span className="font-medium text-neutral-700 dark:text-neutral-300">
+              Get more discount
+            </span>
+          </li>
+          <li className="flex items-center space-x-4">
+            <Badge color="red" name="02" />
+            <span className="font-medium text-neutral-700 dark:text-neutral-300">
+              Get premium magazines
+            </span>
+          </li>
+        </ul>
+        <form className="mt-10 relative max-w-sm">
+          <Input
+            required
+            aria-required
+            placeholder="Enter your email"
+            type="email"
+            rounded="rounded-full"
+            sizeClass="h-12 px-5 py-3"
+          />
+          <ButtonCircle
+            type="submit"
+            className="absolute transform top-1/2 -translate-y-1/2 right-1.5"
+            size="w-10 h-10"
+          >
+            <i className="las la-arrow-right text-xl"></i>
+          </ButtonCircle>
+        </form>
+      </div>
+      <div className="flex-grow">
+        <Image alt="" src={rightImg} />
+      </div>
+    </div>
+  );
+};
+
+export default SectionSubscribe2;