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/_components/ApexChart.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import { ApexOptions } from "apexcharts";
+const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+interface ChartState {
+  series: {
+    name: string;
+    data: number[];
+  }[];
+  options: ApexOptions;
+}
+
+const ApexChart = () => {
+  const [state, setState] = useState<ChartState | null>(null);
+
+  useEffect(() => {
+    const initialState: ChartState = {
+      series: [
+        {
+          name: "Sales",
+          data: [
+            182, 192, 230, 198, 243, 234, 244, 210, 274, 220, 225, 289, 265,
+            304,
+          ],
+        },
+      ],
+      options: {
+        chart: {
+          toolbar: { show: false },
+          height: 350,
+          type: "line",
+        },
+        forecastDataPoints: {
+          count: 0,
+        },
+        stroke: {
+          width: 6,
+          curve: "smooth",
+        },
+        fill: {
+          type: "gradient",
+          gradient: {
+            shade: "dark",
+            type: "horizontal",
+            shadeIntensity: 0.5,
+            gradientToColors: ["#99DDE5"],
+            inverseColors: false,
+            opacityFrom: 1,
+            opacityTo: 1,
+            stops: [0, 100],
+          },
+        },
+        colors: ["#0164FF"],
+        xaxis: {
+          type: "datetime",
+          categories: [
+            "1/11/2024",
+            "2/11/2024",
+            "3/11/2024",
+            "5/11/2024",
+            "6/11/2024",
+            "7/11/2024",
+            "8/11/2024",
+            "9/11/2024",
+            "10/11/2024",
+            "11/11/2024",
+            "12/11/2024",
+            "1/11/2025",
+            "2/11/2025",
+            "3/11/2025",
+          ],
+          tickAmount: 0,
+          labels: {
+            formatter: function (value: any, timestamp: any, opts: any) {
+              return opts.dateFormatter(new Date(timestamp), "dd MMM");
+            },
+          },
+        },
+      },
+    };
+    setState(initialState);
+  }, []);
+
+  if (!state) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <div id="chart">
+        <ReactApexChart
+          options={state.options}
+          series={state.series}
+          type="line"
+          height={350}
+        />
+      </div>
+      <div id="html-dist"></div>
+    </div>
+  );
+};
+
+export default ApexChart;

app/_components/InputGroup.tsx

@@ -0,0 +1,64 @@
+"use client";
+import { HTMLInputTypeAttribute, useState } from "react";
+import { RegisterOptions, UseFormRegister } from "react-hook-form";
+
+function InputGroup({
+  id,
+  label,
+  register,
+  type,
+  validation,
+  error,
+}: {
+  label: string;
+  id: string;
+  register: UseFormRegister<any>;
+  type: HTMLInputTypeAttribute;
+  validation?: RegisterOptions;
+  error?: string;
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasValue, setHasValue] = useState(false);
+
+  const { onChange, ...rest } = register(id, validation);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setHasValue(e.target.value !== "");
+    onChange(e);
+  };
+
+  return (
+    <div>
+      <div className="relative w-full my-3">
+        <input
+          type={type}
+          className={`border ${
+            error
+              ? "border-red-500"
+              : isFocused
+              ? "border-(--primary)"
+              : "border-gray-200"
+          } p-2 rounded-lg w-full outline-none`}
+          id={id}
+          {...rest}
+          onChange={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
+        <label
+          htmlFor={id}
+          className={`absolute left-3 transition-all duration-200 pointer-events-none bg-white px-1 ${
+            isFocused || hasValue
+              ? "-top-2 text-xs text-gray-600"
+              : "top-1/2 -translate-y-1/2 text-base text-gray-400"
+          }`}>
+          {label}
+          <span className="text-red-400">*</span>
+        </label>
+      </div>
+      {error && <p className="text-red-500 text-sm my-3">{error}</p>}
+    </div>
+  );
+}
+
+export default InputGroup;