click to action on landing page

app/landing-page/components/cta-form.tsx

@@ -0,0 +1,46 @@
+import { useMutation } from "blitz";
+import { useForm } from "react-hook-form";
+
+import joinWaitlist from "../mutations/join-waitlist";
+
+type Form = {
+	email: string;
+};
+
+export default function CTAForm() {
+	const [joinWaitlistMutation] = useMutation(joinWaitlist);
+	const {
+		handleSubmit,
+		register,
+		formState: { isSubmitted },
+	} = useForm<Form>();
+	const onSubmit = handleSubmit(async ({ email }) => {
+		if (isSubmitted) {
+			return;
+		}
+
+		return joinWaitlistMutation({ email });
+	});
+
+	return (
+		<form onSubmit={onSubmit} className="mt-8">
+			{isSubmitted ? (
+				<p className="text-center md:text-left mt-2 opacity-75 text-green-900 text-md">
+					You&#39;re on the list! We will be in touch soon
+				</p>
+			) : (
+				<div className="flex flex-col sm:flex-row justify-center max-w-sm mx-auto sm:max-w-md md:mx-0">
+					<input
+						{...register("email")}
+						type="email"
+						className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500"
+						placeholder="Enter your email address"
+					/>
+					<button type="submit" className="btn text-white bg-primary-500 hover:bg-primary-400 flex-shrink-0">
+						Request access
+					</button>
+				</div>
+			)}
+		</form>
+	);
+}

app/landing-page/components/phone-mockup.tsx

@@ -0,0 +1,26 @@
+import mockupImage from "../images/mockup-image-01.png";
+import iphoneMockup from "../images/iphone-mockup.png";
+
+export default function PhoneMockup() {
+	return (
+		<div className="md:col-span-5 lg:col-span-5 text-center md:text-right">
+			<div className="inline-flex relative justify-center items-center">
+				<img
+					className="absolute max-w-[84.33%]"
+					src={mockupImage.src}
+					width={290}
+					height={624}
+					alt="Features illustration"
+				/>
+				<img
+					className="relative max-w-full mx-auto md:mr-0 md:max-w-none h-auto pointer-events-none"
+					src={iphoneMockup.src}
+					width={344}
+					height={674}
+					alt="iPhone mockup"
+					aria-hidden="true"
+				/>
+			</div>
+		</div>
+	);
+}

app/landing-page/components/referral-banner.tsx

@@ -0,0 +1,35 @@
+import { XIcon } from "@heroicons/react/outline";
+
+export default function ReferralBanner() {
+	const isDisabled = true;
+	if (isDisabled) {
+		return null;
+	}
+
+	return (
+		<div className="relative bg-primary-600">
+			<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+				<div className="pr-16 sm:text-center sm:px-16">
+					<p className="font-medium text-white">
+						<span>&#127881; New: Get one month free for every friend that joins and subscribe!</span>
+						<span className="block sm:ml-2 sm:inline-block">
+							<a href="#" className="text-white font-bold underline">
+								{" "}
+								Learn more <span aria-hidden="true">&rarr;</span>
+							</a>
+						</span>
+					</p>
+				</div>
+				<div className="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start">
+					<button
+						type="button"
+						className="flex p-2 rounded-md hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white"
+					>
+						<span className="sr-only">Dismiss</span>
+						<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}