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.
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
"use client";
|
|
import api from "@/service/api";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "react-toastify";
|
|
import InputGroup from "../_components/InputGroup";
|
|
type TContactUsForm = {
|
|
full_name: string;
|
|
company_name: string;
|
|
work_email: string;
|
|
phone_number: string;
|
|
};
|
|
const ContactUsForm = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<TContactUsForm>();
|
|
const onSubmit = async (data: TContactUsForm) => {
|
|
try {
|
|
const response = (await api.post("inquiries", { ...data })).data;
|
|
toast.success(response.message);
|
|
} catch (error) {
|
|
console.log(error);
|
|
toast.error("Something went wrong");
|
|
throw error;
|
|
}
|
|
};
|
|
return (
|
|
<form
|
|
className="w-full px-4 md:px-16 py-10 grid md:grid-cols-2 gap-4 "
|
|
onSubmit={handleSubmit(onSubmit)}>
|
|
<InputGroup
|
|
id="full_name"
|
|
label="Full name"
|
|
register={register}
|
|
type="text"
|
|
/>
|
|
<InputGroup
|
|
id="company_name"
|
|
label="Company name"
|
|
register={register}
|
|
type="text"
|
|
/>
|
|
<InputGroup
|
|
id="work_email"
|
|
label="Work email"
|
|
register={register}
|
|
type="email"
|
|
/>
|
|
<InputGroup
|
|
id="phone_number"
|
|
label="Phone number"
|
|
register={register}
|
|
type="text"
|
|
error={errors.phone_number?.message}
|
|
validation={{
|
|
pattern: {
|
|
value: /^[+\d]+$/,
|
|
message: "Please enter a valid phone number",
|
|
},
|
|
}}
|
|
/>
|
|
<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;
|