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.
2025-10-18 20:44:30 +03:30
parent 31d03b57d6
commit aad539e1a6
25 changed files with 775 additions and 263 deletions
@@ -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;