From 90ca4054d81a7ae38365db3c5a78d40b1529802c Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Tue, 4 Nov 2025 17:04:08 +0330
Subject: [PATCH] feat(marketing): add features step to wizard

This commit replaces the placeholder "Preferences" step in the marketing page's multi-step process with a new, functional "Features" step.

The `FeaturesStep` component is now imported and rendered as the third step, allowing users to add features. The step's title and description have been updated to reflect this change.
---
 .../marketing/_components/FeaturesStep.tsx    | 105 ++++++++++++++++++
 .../_components/useFeaturesStepPresenter.ts   |  49 ++++++++
 src/app/marketing/page.tsx                    |   7 +-
 3 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 src/app/marketing/_components/FeaturesStep.tsx
 create mode 100644 src/app/marketing/_components/useFeaturesStepPresenter.ts

diff --git a/src/app/marketing/_components/FeaturesStep.tsx b/src/app/marketing/_components/FeaturesStep.tsx
new file mode 100644
index 0000000..5fce836
--- /dev/null
+++ b/src/app/marketing/_components/FeaturesStep.tsx
@@ -0,0 +1,105 @@
+"use client";
+import { TrashIcon } from "@/assets/icons";
+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 useFeaturesStepPresenter from "./useFeaturesStepPresenter";
+
+const FeaturesStep = () => {
+  const { errors, handleSubmit, onSubmit, register, fields, append, remove } =
+    useFeaturesStepPresenter();
+  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)}
+    >
+      <div className="flex flex-col gap-9">
+        <ShowcaseSection
+          title="Features Section"
+          className="flex flex-col gap-5"
+        >
+          <InputGroup
+            {...register("section_title", {
+              required: { message: FormErrorMessages.required, value: true },
+            })}
+            label="Section Title"
+            name="section_title"
+            required
+            type="text"
+            placeholder="Enter Section Title"
+          />
+          {errors.section_title && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.section_title.message}
+            </p>
+          )}
+          <TextAreaGroup
+            label="Section Description"
+            {...register("section_description")}
+            name="section_description"
+            placeholder="Enter Section Description"
+          />
+        </ShowcaseSection>
+        <ShowcaseSection title="Features cards" className="flex flex-col gap-5">
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="grid grid-cols-1 gap-4 sm:grid-cols-2"
+            >
+              <InputGroup
+                {...register(`features.${index}.icon`, {
+                  required: {
+                    message: FormErrorMessages.required,
+                    value: true,
+                  },
+                })}
+                label="Icon"
+                name={`features.${index}.icon`}
+                required
+                type="text"
+                placeholder="Enter Icon URL or name"
+              />
+              <InputGroup
+                {...register(`features.${index}.title`, {
+                  required: {
+                    message: FormErrorMessages.required,
+                    value: true,
+                  },
+                })}
+                label="Title"
+                name={`features.${index}.title`}
+                required
+                type="text"
+                placeholder="Enter Title"
+              />
+              <TextAreaGroup
+                {...register(`features.${index}.description`)}
+                label="Description"
+                name={`features.${index}.description`}
+                placeholder="Enter Description"
+                className="sm:col-span-2"
+              />
+              <button
+                type="button"
+                onClick={() => remove(index)}
+                className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
+              >
+                <TrashIcon />
+              </button>
+            </div>
+          ))}
+          <button
+            type="button"
+            className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
+            onClick={() => append({ icon: "", title: "", description: "" })}
+          >
+            Add point
+          </button>
+        </ShowcaseSection>
+      </div>
+    </form>
+  );
+};
+
+export default FeaturesStep;
diff --git a/src/app/marketing/_components/useFeaturesStepPresenter.ts b/src/app/marketing/_components/useFeaturesStepPresenter.ts
new file mode 100644
index 0000000..c6aa47f
--- /dev/null
+++ b/src/app/marketing/_components/useFeaturesStepPresenter.ts
@@ -0,0 +1,49 @@
+"use client";
+import { useFieldArray, useForm } from "react-hook-form";
+
+export interface IFeaturesStepFields {
+  section_title: string;
+  section_description: string;
+  features: {
+    icon: string;
+    title: string;
+    description: string;
+  }[];
+}
+
+const useFeaturesStepPresenter = () => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    watch,
+    formState: { errors },
+  } = useForm<IFeaturesStepFields>({
+    defaultValues: {
+      features: [{ icon: "", title: "", description: "" }],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "features",
+  });
+
+  const onSubmit = (data: IFeaturesStepFields) => {
+    console.log(data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    fields,
+    append,
+    remove,
+    control,
+    watch,
+  };
+};
+
+export default useFeaturesStepPresenter;
diff --git a/src/app/marketing/page.tsx b/src/app/marketing/page.tsx
index 035eb02..283ba49 100644
--- a/src/app/marketing/page.tsx
+++ b/src/app/marketing/page.tsx
@@ -5,6 +5,7 @@ import { BreadcrumbItem } from "@/types/shared";
 import { useState } from "react";
 import { ShowcaseSection } from "../../components/Layouts/showcase-section";
 import ChartStep from "./_components/ChartStep";
+import FeaturesStep from "./_components/FeaturesStep";
 import HeroStep from "./_components/HeroStep";
 
 const Marketing = () => {
@@ -31,9 +32,9 @@ const Marketing = () => {
       content: <ChartStep />,
     },
     {
-      title: "Preferences",
-      description: "Choose preferences",
-      content: <div>step 3</div>,
+      title: "Features",
+      description: "Add features",
+      content: <FeaturesStep />,
     },
     {
       title: "Review",