feat(marketing): add contacts section and improve checkbox UI

This commit introduces a new "Contacts" section to the marketing page, which is now the fifth step in the page's flow.

Additionally, the Checkbox component has been enhanced with a smooth transition effect on state change. This provides better visual feedback and a more polished user experience.

src/app/marketing/_components/useContactsStepPresenter.ts

@@ -0,0 +1,62 @@
+"use client";
+import { useFieldArray, useForm } from "react-hook-form";
+
+export interface IContactsStepFields {
+  title: string;
+  description: string;
+  submit_button_title: string;
+  fields: {
+    field_name: string;
+    label: string;
+    placeholder: string;
+    required: boolean;
+  }[];
+}
+
+const useContactsStepPresenter = () => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<IContactsStepFields>({
+    defaultValues: {
+      fields: [
+        {
+          field_name: "first_name",
+          label: "",
+          placeholder: "",
+          required: false,
+        },
+        {
+          field_name: "last_name",
+          label: "",
+          placeholder: "",
+          required: false,
+        },
+        { field_name: "email", label: "", placeholder: "", required: false },
+        { field_name: "phone", label: "", placeholder: "", required: false },
+      ],
+    },
+  });
+
+  const { fields } = useFieldArray({
+    control,
+    name: "fields",
+  });
+
+  const onSubmit = (data: IContactsStepFields) => {
+    console.log(data);
+  };
+
+  return {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    fields,
+    control,
+  };
+};
+
+export default useContactsStepPresenter;