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/forms/form-elements/page.tsx

@@ -113,9 +113,9 @@ export default function FormElementsPage() {
             title="Checkbox and radio"
             className="space-y-5.5 !p-6.5"
           >
-            <Checkbox label="Checkbox Text" />
+            {/* <Checkbox label="Checkbox Text" />
             <Checkbox label="Checkbox Text" withIcon="check" />
-            <Checkbox label="Checkbox Text" withIcon="x" />
+            <Checkbox label="Checkbox Text" withIcon="x" /> */}
             <RadioInput label="Checkbox Text" />
             <RadioInput label="Checkbox Text" variant="circle" />
           </ShowcaseSection>

src/app/forms/form-layout/_components/sign-in-form.tsx

@@ -21,7 +21,7 @@ export function SignInForm() {
         /> */}
 
         <div className="mb-5.5 mt-5 flex items-center justify-between">
-          <Checkbox label="Remember me" minimal withBg withIcon="check" />
+          {/* <Checkbox label="Remember me" minimal withBg withIcon="check" /> */}
 
           <Link href="#" className="text-body-sm text-primary hover:underline">
             Forgot password?

src/app/marketing/_components/ContactsStep.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { Checkbox } from "@/components/FormElements/checkbox";
+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 useContactsStepPresenter from "./useContactsStepPresenter";
+
+const ContactsStep = () => {
+  const { errors, handleSubmit, onSubmit, register, fields } =
+    useContactsStepPresenter();
+  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="Contacts Section" className="flex flex-col gap-5">
+        <div className="flex flex-col gap-9">
+          <InputGroup
+            {...register("title", {
+              required: { message: FormErrorMessages.required, value: true },
+            })}
+            label="Title"
+            name="title"
+            required
+            type="text"
+            placeholder="Enter Title"
+          />
+          {errors.title && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.title.message as string}
+            </p>
+          )}
+          <TextAreaGroup
+            label="Description"
+            {...register("description")}
+            name="description"
+            placeholder="Enter Description"
+          />
+          <InputGroup
+            {...register("submit_button_title")}
+            label="Submit Button Title"
+            name="submit_button_title"
+            type="text"
+            placeholder="Enter Submit Button Title"
+          />
+        </div>
+      </ShowcaseSection>
+      <ShowcaseSection title="Form Fields" className="flex flex-col gap-5">
+        {fields.map((field, index) => (
+          <div
+            key={field.id}
+            className="grid grid-cols-1 items-center gap-4 sm:grid-cols-2"
+          >
+            <InputGroup
+              {...register(`fields.${index}.field_name`)}
+              label="Field Name"
+              name={`fields.${index}.field_name`}
+              type="text"
+              placeholder="Field Name"
+              disabled
+            />
+            <InputGroup
+              {...register(`fields.${index}.label`)}
+              label="Label"
+              name={`fields.${index}.label`}
+              type="text"
+              placeholder="Enter Label"
+            />
+            <InputGroup
+              {...register(`fields.${index}.placeholder`)}
+              label="Placeholder"
+              name={`fields.${index}.placeholder`}
+              type="text"
+              placeholder="Enter Placeholder"
+            />
+            <Checkbox
+              {...register(`fields.${index}.required`)}
+              label="Required"
+              minimal
+              withIcon="check"
+              withBg
+              name={`fields.${index}.required`}
+            />
+          </div>
+        ))}
+      </ShowcaseSection>
+    </form>
+  );
+};
+
+export default ContactsStep;

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;

src/app/marketing/page.tsx

@@ -6,11 +6,12 @@ import { useState } from "react";
 import { ShowcaseSection } from "../../components/Layouts/showcase-section";
 import ChallengesStep from "./_components/ChallengesStep";
 import ChartStep from "./_components/ChartStep";
+import ContactsStep from "./_components/ContactsStep";
 import FeaturesStep from "./_components/FeaturesStep";
 import HeroStep from "./_components/HeroStep";
 
 const Marketing = () => {
-  const [step, setStep] = useState(0);
+  const [step, setStep] = useState(5);
   const breadcrumbItems: BreadcrumbItem[] = [
     {
       href: "/",
@@ -47,6 +48,11 @@ const Marketing = () => {
       description: "create benefits section",
       content: <ChallengesStep />,
     },
+    {
+      title: "Contacts",
+      description: "Create contacts section",
+      content: <ContactsStep />,
+    },
   ];
   return (
     <>

src/components/FormElements/checkbox.tsx

@@ -43,7 +43,7 @@ export function Checkbox({
 
           <div
             className={cn(
-              "mr-2 flex size-5 items-center justify-center rounded border border-dark-5 peer-checked:border-primary dark:border-dark-6 peer-checked:[&>*]:block",
+              "mr-2 flex size-5 items-center justify-center rounded border border-dark-5 peer-checked:border-primary dark:border-dark-6 peer-checked:[&>*]:block transition-all duration-300",
               withBg
                 ? "peer-checked:bg-primary [&>*]:text-white"
                 : "peer-checked:bg-gray-2 dark:peer-checked:bg-transparent",