refactor(responsive): Adjust breakpoint from md to lg for better layout

The previous `md` breakpoint (768px) caused the desktop layout to activate too early, resulting in a cramped appearance on tablet-sized screens.

This commit updates the responsive design by changing the primary breakpoint from `md` to `lg` (1024px) across the home page, contact page, and main layouts. This change ensures a more appropriate and visually balanced layout is maintained on medium-sized devices, improving the overall user experience.

app/_contact-us/form.tsx

@@ -38,22 +38,22 @@ const ContactUsForm = ({
   };
 
   const gridColsClass = {
-    1: "md:grid-cols-1",
-    2: "md:grid-cols-2",
-    3: "md:grid-cols-3",
-    4: "md:grid-cols-4",
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg: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",
+    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 md:px-16 py-10 grid ${gridColsClass} gap-4`}
+      className={`w-full px-4 lg:px-16 py-10 grid ${gridColsClass} gap-4`}
       onSubmit={handleSubmit(onSubmit)}>
       <InputGroup
         id="full_name"

app/_contact-us/page.tsx

@@ -3,14 +3,14 @@ import ContactUsForm from "./form";
 const ContactUs = () => {
   return (
     <div className="flex flex-col items-center mt-16 px-8 ">
-      <div className="md:w-2/3 m-auto flex flex-col gap-4 mb-12">
+      <div className="lg:w-2/3 m-auto flex flex-col gap-4 mb-12">
         <h2 className="font-bold text-4xl">Unlock Your Growth Potential</h2>
         <p className="font-normal text-[16px] text-gray-600">
           Register for early access and a free consultation. Let's start winning
           together.
         </p>
       </div>
-      <section className="border border-gray-300 rounded-4xl w-full md:max-w-2/3 flex flex-col items-center bg-white">
+      <section className="border border-gray-300 rounded-4xl w-full lg:max-w-2/3 flex flex-col items-center bg-white">
         <ContactUsForm />
       </section>
     </div>