feat: Refactor contact form and improve 404 page

This commit refactors the contact form for better reusability and moves it from the global footer to a dedicated section on the homepage. Additionally, it enhances the user experience on the 404 page.

Key changes:
- The `ContactUsForm` component is now configurable with props for grid layout (`columnsPerRow`) and button text, making it more versatile.
- The contact form has been removed from the shared footer in the main layout and is now explicitly included only on the homepage.
- The 404 "Not Found" page has been updated to include a direct link to the homepage for easier navigation.
- Minor style adjustments were made to the 404 page layout and input field padding for improved visual consistency.

app/_contact-us/form.tsx

@@ -3,18 +3,29 @@ import api from "@/service/api";
 import { useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 import InputGroup from "../_components/InputGroup";
+
 type TContactUsForm = {
   full_name: string;
   company_name: string;
   work_email: string;
   phone_number: string;
 };
-const ContactUsForm = () => {
+
+type ContactUsFormProps = {
+  columnsPerRow?: 1 | 2 | 3 | 4;
+  buttonText?: string;
+};
+
+const ContactUsForm = ({
+  columnsPerRow = 2,
+  buttonText = "Submit",
+}: ContactUsFormProps) => {
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<TContactUsForm>();
+
   const onSubmit = async (data: TContactUsForm) => {
     try {
       const response = (await api.post("inquiries", { ...data })).data;
@@ -25,9 +36,24 @@ const ContactUsForm = () => {
       throw error;
     }
   };
+
+  const gridColsClass = {
+    1: "md:grid-cols-1",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+  }[columnsPerRow];
+
+  const colSpanClass = {
+    1: "md:col-span-1",
+    2: "md:col-span-2",
+    3: "md:col-span-3",
+    4: "md:col-span-4",
+  }[columnsPerRow];
+
   return (
     <form
-      className="w-full px-4 md:px-16 py-10 grid md:grid-cols-2 gap-4 "
+      className={`w-full px-4 md:px-16 py-10 grid ${gridColsClass} gap-4`}
       onSubmit={handleSubmit(onSubmit)}>
       <InputGroup
         id="full_name"
@@ -60,9 +86,9 @@ const ContactUsForm = () => {
           },
         }}
       />
-      <div className="md:col-span-2 flex justify-end">
+      <div className={`${colSpanClass} flex justify-end`}>
         <button className="bg-(--primary) w-fit text-white rounded-full py-4 px-6">
-          Register Now
+          {buttonText}
         </button>
       </div>
     </form>