feat(form): enhance and refactor contact form to inquiries form

This commit refactors the contact form into a more robust inquiries form, relocating it from `/contact-us` to a new `/inquires` route.

Key changes include:
- Renamed and moved the component from `ContactUs` to `Inquires`.
- Updated form fields: removed "Company Name", added "Message", and renamed "Work Email" and "Phone Number" for clarity.
- Implemented comprehensive client-side validation for all fields using `react-hook-form`.
- Added a loading state to the submit button to provide user feedback during submission.
- The form now automatically resets upon successful submission.
- Introduced new reusable `TextareaGroup` and `Loading` components to support the enhanced form functionality.

app/_inquires/form.tsx

@@ -0,0 +1,106 @@
+"use client";
+import api from "@/service/api";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "react-toastify";
+import InputGroup from "../_components/InputGroup";
+import Loading from "../_components/Loading";
+
+type TInquiresForm = {
+  full_name: string;
+  company_name: string;
+  work_email: string;
+  phone_number: string;
+};
+
+type InquiresFormProps = {
+  columnsPerRow?: 1 | 2 | 3 | 4;
+  buttonText?: string;
+};
+
+const InquiresForm = ({
+  columnsPerRow = 2,
+  buttonText = "Submit",
+}: InquiresFormProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<TInquiresForm>();
+
+  const onSubmit = async (data: TInquiresForm) => {
+    setIsLoading(true);
+    try {
+      const response = (await api.post("inquiries", { ...data })).data;
+      toast.success(response.message);
+      reset();
+    } catch (error) {
+      console.log(error);
+      toast.error("Something went wrong");
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const gridColsClass = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+  }[columnsPerRow];
+
+  const colSpanClass = {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+  }[columnsPerRow];
+
+  return (
+    <form
+      className={`w-full px-4 lg:px-16 py-10 grid ${gridColsClass} gap-4`}
+      onSubmit={handleSubmit(onSubmit)}>
+      <InputGroup
+        id="full_name"
+        label="Full Name"
+        register={register}
+        type="text"
+      />
+      <InputGroup
+        id="company_name"
+        label="Company Name"
+        register={register}
+        type="text"
+      />
+      <InputGroup
+        id="work_email"
+        label="Work Email"
+        register={register}
+        type="email"
+      />
+      <InputGroup
+        id="phone_number"
+        label="Phone Number"
+        register={register}
+        type="text"
+        error={errors.phone_number?.message}
+        validation={{
+          pattern: {
+            value: /^[+\d]+$/,
+            message: "Please enter a valid phone number",
+          },
+        }}
+      />
+      <div className={`${colSpanClass} flex justify-end`}>
+        <button className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6">
+          {isLoading ? <Loading /> : buttonText}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default InquiresForm;