feat: redesign homepage and early access page

This commit introduces a comprehensive redesign of the homepage and refactors the "Contact Us" page into a dedicated "Get Early Access" page.

Key changes include:
- **Homepage:** A complete overhaul with new sections, including a hero, feature highlights, and a problem/solution section to better communicate the product's value proposition.
- **Early Access Page:** The former "Contact Us" page is now repurposed for early access sign-ups, with updated copy and a more focused call-to-action.
- **Component Refactoring:**
    - The `InputGroup` component has been extracted from the form into a reusable component (`app/_components/InputGroup.tsx`) for better modularity.
    - The `CenterFrame` component has been updated to support images and new props (`src`, `title`, `alt`) to fit the new homepage design.
- **Layout Improvements:** The early access form now uses a two-column grid layout on larger screens for improved user experience.

app/contact-us/form.tsx

@@ -1,8 +1,8 @@
 "use client";
 import api from "@/service/api";
-import { HTMLInputTypeAttribute } from "react";
-import { RegisterOptions, useForm, UseFormRegister } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { toast } from "react-toastify";
+import InputGroup from "../_components/InputGroup";
 type TContactUsForm = {
   full_name: string;
   company_name: string;
@@ -27,37 +27,29 @@ const ContactUsForm = () => {
   };
   return (
     <form
-      className="w-full px-4 md:px-60 py-10"
+      className="w-full px-4 md:px-16 py-10 grid md:grid-cols-2 gap-4 "
       onSubmit={handleSubmit(onSubmit)}>
       <InputGroup
-        icon={UserIcon}
         id="full_name"
         label="Full name"
-        placeholder="Enter Full name"
         register={register}
         type="text"
       />
       <InputGroup
-        icon={UserIcon}
         id="company_name"
         label="Company name"
-        placeholder="Enter Company Name"
         register={register}
         type="text"
       />
       <InputGroup
-        icon={UserIcon}
         id="work_email"
         label="Work email"
-        placeholder="Enter Work Email"
         register={register}
         type="email"
       />
       <InputGroup
-        icon={UserIcon}
         id="phone_number"
         label="Phone number"
-        placeholder="Enter Phone Number"
         register={register}
         type="text"
         error={errors.phone_number?.message}
@@ -68,66 +60,13 @@ const ContactUsForm = () => {
           },
         }}
       />
-      <button className="bg-(--primary) w-full text-white rounded-full py-4">
-        Submit
-      </button>
+      <div className="md:col-span-2 flex justify-end">
+        <button className="bg-(--primary) w-fit text-white rounded-full py-4 px-6">
+          Register Now
+        </button>
+      </div>
     </form>
   );
 };
 
 export default ContactUsForm;
-function InputGroup({
-  icon,
-  id,
-  label,
-  placeholder,
-  register,
-  type,
-  validation,
-  error,
-}: {
-  label: string;
-  id: string;
-  icon: () => React.JSX.Element;
-  placeholder: string;
-  register: UseFormRegister<any>;
-  type: HTMLInputTypeAttribute;
-  validation?: RegisterOptions;
-  error?: string;
-}) {
-  return (
-    <>
-      <label htmlFor={id}>{label}</label>
-      <div className="relative w-full my-3">
-        <input
-          type={type}
-          className={`border ${
-            error ? "border-red-500" : "border-gray-200"
-          } p-2 px-10 rounded-lg w-full`}
-          id={id}
-          {...register(id, validation)}
-          placeholder={placeholder}
-        />
-        <span className="absolute left-0 bottom-0 top-0 flex items-center pl-2">
-          {icon()}
-        </span>
-      </div>
-      {error && <p className="text-red-500 text-sm my-3">{error}</p>}
-    </>
-  );
-}
-function UserIcon() {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M16 6H15.25C15.25 7.79493 13.7949 9.25 12 9.25V10V10.75C14.6234 10.75 16.75 8.62335 16.75 6H16ZM12 10V9.25C10.2051 9.25 8.75 7.79493 8.75 6H8H7.25C7.25 8.62335 9.37665 10.75 12 10.75V10ZM8 6H8.75C8.75 4.20507 10.2051 2.75 12 2.75V2V1.25C9.37665 1.25 7.25 3.37665 7.25 6H8ZM12 2V2.75C13.7949 2.75 15.25 4.20507 15.25 6H16H16.75C16.75 3.37665 14.6234 1.25 12 1.25V2ZM9 13V13.75H15V13V12.25H9V13ZM15 21V20.25H9V21V21.75H15V21ZM9 21V20.25C7.20507 20.25 5.75 18.7949 5.75 17H5H4.25C4.25 19.6234 6.37665 21.75 9 21.75V21ZM19 17H18.25C18.25 18.7949 16.7949 20.25 15 20.25V21V21.75C17.6234 21.75 19.75 19.6234 19.75 17H19ZM15 13V13.75C16.7949 13.75 18.25 15.2051 18.25 17H19H19.75C19.75 14.3766 17.6234 12.25 15 12.25V13ZM9 13V12.25C6.37665 12.25 4.25 14.3766 4.25 17H5H5.75C5.75 15.2051 7.20507 13.75 9 13.75V13Z"
-        fill="#9E9E9E"
-      />
-    </svg>
-  );
-}