121 lines
4.9 KiB
TypeScript
121 lines
4.9 KiB
TypeScript
import Logo from "@/components/Logo";
|
|
import React from "react";
|
|
|
|
const WaitingListWithImageHero = () => {
|
|
return (
|
|
<div
|
|
className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(rgba(0, 0, 0, 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="text-3xl text-primary-content sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6">
|
|
<Logo className="w-10 flex" />
|
|
Bethel Farms
|
|
</h1>
|
|
<h2 className="text-2xl text-primary-content sm:text-4xl">
|
|
Get notified when we launch
|
|
</h2>
|
|
<form>
|
|
<div className="mt-8 space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="hs-cover-with-gradient-form-name-1"
|
|
className="sr-only"
|
|
>
|
|
Full name
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
id="hs-cover-with-gradient-form-name-1"
|
|
className="py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-primary-content placeholder:text-primary-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
|
|
placeholder="Full 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-gray-400"
|
|
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>
|
|
<div>
|
|
<label
|
|
htmlFor="hs-cover-with-gradient-form-email-1"
|
|
className="sr-only"
|
|
>
|
|
Email address
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="email"
|
|
id="hs-cover-with-gradient-form-email-1"
|
|
className="py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-primary-content placeholder:text-primary-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-gray-400"
|
|
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>
|
|
<div className="grid">
|
|
<button
|
|
type="submit"
|
|
className="sm:p-4 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-white/10 text-primary-content hover:bg-white/20 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
|
>
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WaitingListWithImageHero;
|