forked from mrwyndham/fastpocket
201 lines
8.6 KiB
TypeScript
201 lines
8.6 KiB
TypeScript
import pb from "@/lib/pocketbase";
|
|
import { waitinglistValidationSchema } from "@/utils/form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import React, { useEffect } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
import Icon from "@/components/Icon";
|
|
import colors, { hexToRgb } from "@/utils/colors";
|
|
import Footer from "@/components/Footer";
|
|
import { useTheme } from "next-themes";
|
|
|
|
const WaitingListWithImageHero = () => {
|
|
const { theme } = useTheme();
|
|
const backgroundColor = hexToRgb(colors[theme ?? "light"]["base-100"]);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(waitinglistValidationSchema),
|
|
});
|
|
|
|
const onSubmit = (data: {
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
}) => {
|
|
localStorage.setItem("contact", JSON.stringify(data));
|
|
pb.collection("contact").create(data);
|
|
};
|
|
return (
|
|
<div
|
|
className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)`,
|
|
}}
|
|
>
|
|
<div className="h-screen w-full bg-clip flex items-center justify-center">
|
|
<div className="text-center py-8 px-4 sm:px-6 lg:px-8">
|
|
<h1 className="font-semibold text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
|
|
<Icon name="LeafThree24Filled" size="xlarge" />
|
|
Bethel Farms
|
|
</h1>
|
|
{typeof window !== "undefined" && !localStorage.getItem("contact") ? (
|
|
<>
|
|
<h2 className="text-2xl text-base-content">
|
|
Get notified when we launch
|
|
</h2>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="mt-8 space-y-0">
|
|
<div>
|
|
<label
|
|
htmlFor="hs-cover-with-gradient-form-name-1"
|
|
className="sr-only"
|
|
>
|
|
First name
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
{...register("firstName")}
|
|
type="text"
|
|
id="hs-cover-with-gradient-form-name-1"
|
|
className=" py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 placeholder:text-base-content dark:placeholder:bg-base-content placeholder:text-base-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
|
|
placeholder="First name"
|
|
/>
|
|
<div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
|
|
<svg
|
|
className="flex-shrink-0 size-4 text-base-content "
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
|
<circle cx={12} cy={7} r={4} />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.firstName?.message}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="hs-cover-with-gradient-form-name-1"
|
|
className="sr-only"
|
|
>
|
|
Last name
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
{...register("lastName")}
|
|
type="text"
|
|
id="hs-cover-with-gradient-form-name-1"
|
|
className=" py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 placeholder:text-base-content dark:placeholder:bg-base-contentntent placeholder:text-base-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
|
|
placeholder="Last name"
|
|
/>
|
|
<div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
|
|
<svg
|
|
className="flex-shrink-0 size-4 text-base-content"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
|
<circle cx={12} cy={7} r={4} />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.lastName?.message}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="hs-cover-with-gradient-form-email-1"
|
|
className="sr-only"
|
|
>
|
|
Email address
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
{...register("email")}
|
|
type="email"
|
|
id="hs-cover-with-gradient-form-email-1"
|
|
className=" py-3 ps-11 pe-4 block w-full bg-base-100/[.03] border-white/20 text-base-content placeholder:text-base-content dark:placeholder:bg-base-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
|
|
placeholder="Email address"
|
|
/>
|
|
<div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
|
|
<svg
|
|
className="flex-shrink-0 size-4 text-base-content "
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<rect width={20} height={16} x={2} y={4} rx={2} />
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.email?.message}
|
|
</div>
|
|
</div>
|
|
<div className="grid">
|
|
<button
|
|
className="btn btn-primary bg-base-content"
|
|
type="submit"
|
|
>
|
|
Join the waitlist
|
|
<svg
|
|
className="flex-shrink-0 size-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="m9 18 6-6-6-6" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</>
|
|
) : (
|
|
<h2 className="sm:text-3xl font-body text-base-content">
|
|
You are on our waiting list. We will be in touch!
|
|
</h2>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WaitingListWithImageHero;
|