AmirReza Jamali
aad539e1a6
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.
107 lines
2.3 KiB
TypeScript
107 lines
2.3 KiB
TypeScript
"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;
|