From 267ca172419fafb2d8bf828c8416a4a9f2b4a344 Mon Sep 17 00:00:00 2001
From: Batyr <awbatyr@gmail.com>
Date: Thu, 6 Feb 2025 18:02:01 +0500
Subject: [PATCH] added subscribe form

---
 src/components/layout/footer.tsx              | 63 ++++++++++++++-----
 .../shared/forms/subscribe-form.tsx           | 58 +++++++++++++++++
 2 files changed, 105 insertions(+), 16 deletions(-)
 create mode 100644 src/components/shared/forms/subscribe-form.tsx

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 62d1bde..c1b20bd 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -2,30 +2,61 @@ import { FC } from "react";
 import { Container } from "./";
 import { Logo } from "../shared";
 import { Language, useLangStore } from "@/store/lang";
+import { SubscribeForm } from "../shared/forms/subscribe-form";
+import { Facebook } from "lucide-react";
+import { Link } from "react-router-dom";
 
 export const Footer: FC = () => {
   const lang = useLangStore((state) => state.lang);
   return (
-    <footer className="py-5 bg-primary">
-      <Container className="flex flex-col gap-6">
-        <div className="flex flex-col md:flex-row gap-6 md:items-end md:justify-between items-center">
-          <Logo />
+    <footer>
+      <SubscribeForm />
 
-          <div className="flex items-center gap-6">
-            <img src="/inst.svg" />
-            <img src="/in.svg" />
-            <img src="/x.svg" />
+      <div className="py-5 bg-primary">
+        <Container className="flex flex-col gap-6">
+          <div className="flex flex-col md:flex-row gap-6 md:items-end md:justify-between items-center">
+            <Logo />
+
+            <div className="flex items-center gap-6">
+              <Link
+                target="_blank"
+                to="https://www.facebook.com/profile.php?id=61567254728028"
+              >
+                <Facebook className="text-white" />
+              </Link>
+
+              <Link
+                target="_blank"
+                to="https://www.instagram.com/turkmenexpo_tm?igsh=bnhkOWpmNWcwcHBq"
+              >
+                <img src="/inst.svg" />
+              </Link>
+
+              <Link
+                target="_blank"
+                to="https://www.linkedin.com/company/turkmen-expo"
+              >
+                <img src="/in.svg" />
+              </Link>
+
+              <Link
+                target="_blank"
+                to="https://x.com/turkmenexpo?t=D-XSa8d0AC8GAv5peAzteA&s=09"
+              >
+                <img src="/x.svg" />
+              </Link>
+            </div>
           </div>
-        </div>
 
-        <hr className="border-white/50" />
+          <hr className="border-white/50" />
 
-        <h5 className="text-base text-center normal text-white">
-          {lang === Language.RU
-            ? "©2025 Все права защищены"
-            : "All rights reserved"}
-        </h5>
-      </Container>
+          <h5 className="text-base text-center normal text-white">
+            {lang === Language.RU
+              ? "©2025 Все права защищены"
+              : "All rights reserved"}
+          </h5>
+        </Container>
+      </div>
     </footer>
   );
 };
diff --git a/src/components/shared/forms/subscribe-form.tsx b/src/components/shared/forms/subscribe-form.tsx
new file mode 100644
index 0000000..2ae0325
--- /dev/null
+++ b/src/components/shared/forms/subscribe-form.tsx
@@ -0,0 +1,58 @@
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Container } from "@/components/layout";
+import { useLang } from "@/hooks/use-lang";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  className?: string;
+}
+
+const schema = z.object({
+  email: z.string().email(),
+});
+
+export type SubscribeType = z.infer<typeof schema>;
+
+export const SubscribeForm: FC<Props> = () => {
+  const form = useForm<SubscribeType>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  async function onSubmit(data: SubscribeType) {
+    console.log(data);
+  }
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="py-8 bg-bg_surface_container"
+    >
+      <Container className="flex items-center justify-between">
+        <h2 className="h2">
+          {useLang("Подпишитесь на новости:", "Subscribe to the news:")}
+        </h2>
+
+        <div className="relative">
+          <input
+            {...form.register("email")}
+            placeholder="E-mail"
+            className="input xl:w-[392px] w-[320px]"
+          />
+          <span className="text-error absolute text-red-600 -bottom-6 text-sm left-0">
+            {form.formState.errors?.email?.message}
+          </span>
+        </div>
+
+        <Button className="xl:w-[288px] w-[220px]">
+          {useLang("Подписаться", "Subscribe")}
+        </Button>
+      </Container>
+    </form>
+  );
+};