pricing page

app/public-area/components/cta-form.tsx

@@ -1,4 +1,5 @@
-import { useMutation } from "blitz";
+import { useEffect, useRef } from "react";
+import { useMutation, useRouter } from "blitz";
 import { useForm } from "react-hook-form";
 import * as Panelbear from "@panelbear/panelbear-js";
 
@@ -9,12 +10,22 @@ type Form = {
 };
 
 export default function CTAForm() {
+	const router = useRouter();
 	const [joinWaitlistMutation] = useMutation(joinWaitlist);
 	const {
 		handleSubmit,
 		register,
+		setFocus,
 		formState: { isSubmitted },
 	} = useForm<Form>();
+
+	useEffect(() => {
+		if (typeof router.query.join_waitlist !== "undefined") {
+			setFocus("email");
+			router.replace("/");
+		}
+	}, []);
+
 	const onSubmit = handleSubmit(async ({ email }) => {
 		if (isSubmitted) {
 			return;

app/public-area/components/layout.tsx

@@ -3,16 +3,18 @@ import type { FunctionComponent } from "react";
 import BaseLayout from "./base-layout";
 
 type Props = {
-	title: string;
+	title?: string;
 };
 
 const Layout: FunctionComponent<Props> = ({ children, title }) => (
 	<BaseLayout>
 		<section className="max-w-6xl mx-auto px-4 sm:px-6">
 			<div className="pt-32 pb-10 md:pt-34 md:pb-16">
-				<div className="max-w-5xl mx-auto">
-					<h1 className="h1 mb-16 font-extrabold font-mackinac">{title}</h1>
-				</div>
+				{title ? (
+					<div className="max-w-5xl mx-auto">
+						<h1 className="h1 mb-16 font-extrabold font-mackinac">{title}</h1>
+					</div>
+				) : null}
 
 				<div className="max-w-3xl mx-auto text-lg xl:text-xl flow-root">{children}</div>
 			</div>