From f9bd7fce4b32bad7919ceaf5c88691ae9530a298 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Wed, 5 Nov 2025 16:16:53 +0330
Subject: [PATCH] feat(marketing): add footer step with form inputs for email,
 phone, address, tagline, and copyright

---
 src/app/marketing/_components/FooterStep.tsx  | 72 +++++++++++++++++++
 .../_components/useFooterStepPresenter.ts     | 30 ++++++++
 src/app/marketing/page.tsx                    |  6 ++
 3 files changed, 108 insertions(+)
 create mode 100644 src/app/marketing/_components/FooterStep.tsx
 create mode 100644 src/app/marketing/_components/useFooterStepPresenter.ts

diff --git a/src/app/marketing/_components/FooterStep.tsx b/src/app/marketing/_components/FooterStep.tsx
new file mode 100644
index 0000000..ffdd5b3
--- /dev/null
+++ b/src/app/marketing/_components/FooterStep.tsx
@@ -0,0 +1,72 @@
+"use client";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import { FormErrorMessages } from "@/constants/Texts";
+import useFooterStepPresenter from "./useFooterStepPresenter";
+
+
+const FooterStep = () => {
+  const { errors, handleSubmit, onSubmit, register } =
+    useFooterStepPresenter();
+
+  return (
+    <form
+      className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <ShowcaseSection title="Footer Section" className="flex flex-col gap-5">
+        <div className="flex flex-col gap-9">
+          <InputGroup
+            {...register("email", {
+              required: { message: FormErrorMessages.required, value: true },
+              pattern: {
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: "Invalid email format",
+              },
+            })}
+            label="Email"
+            name="email"
+            required
+            type="email"
+            placeholder="Enter Email"
+          />
+          {errors.email && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.email.message as string}
+            </p>
+          )}
+          <InputGroup
+            {...register("phoneNumber")}
+            label="Phone Number"
+            name="phoneNumber"
+            type="text"
+            placeholder="Enter Phone Number"
+          />
+          <InputGroup
+            {...register("address")}
+            label="Address"
+            name="address"
+            type="text"
+            placeholder="Enter Address"
+          />
+          <TextAreaGroup
+            label="Tagline"
+            {...register("tagline")}
+            name="tagline"
+            placeholder="Enter Tagline"
+          />
+          <InputGroup
+            {...register("copyright")}
+            label="Copyright"
+            name="copyright"
+            type="text"
+            placeholder="Enter Copyright Text"
+          />
+        </div>
+      </ShowcaseSection>
+    </form>
+  );
+};
+
+export default FooterStep;
\ No newline at end of file
diff --git a/src/app/marketing/_components/useFooterStepPresenter.ts b/src/app/marketing/_components/useFooterStepPresenter.ts
new file mode 100644
index 0000000..0e42083
--- /dev/null
+++ b/src/app/marketing/_components/useFooterStepPresenter.ts
@@ -0,0 +1,30 @@
+import { useForm } from "react-hook-form";
+
+interface FooterFormValues {
+  email: string;
+  phoneNumber?: string;
+  address?: string;
+  tagline?: string;
+  copyright?: string;
+}
+
+const useFooterStepPresenter = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FooterFormValues>();
+
+  const onSubmit = (data: FooterFormValues) => {
+    console.log(data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    onSubmit,
+    errors,
+  };
+};
+
+export default useFooterStepPresenter;
\ No newline at end of file
diff --git a/src/app/marketing/page.tsx b/src/app/marketing/page.tsx
index 90bb94d..183e9e4 100644
--- a/src/app/marketing/page.tsx
+++ b/src/app/marketing/page.tsx
@@ -8,6 +8,7 @@ import ChallengesStep from "./_components/ChallengesStep";
 import ChartStep from "./_components/ChartStep";
 import ContactsStep from "./_components/ContactsStep";
 import FeaturesStep from "./_components/FeaturesStep";
+import FooterStep from "./_components/FooterStep";
 import HeroStep from "./_components/HeroStep";
 
 const Marketing = () => {
@@ -53,6 +54,11 @@ const Marketing = () => {
       description: "Create contacts section",
       content: <ContactsStep />,
     },
+    {
+      title: "Footer",
+      description: "Add footer information",
+      content: <FooterStep />,
+    },
   ];
   return (
     <>