Cleaning up waitlist workflow

app/components/catalyst/fieldset.tsx

@@ -121,6 +121,7 @@ export function ErrorMessage({
 	return (
 		<HeadlessDescription
 			{...props}
+			as="div"
 			data-slot="error"
 			className={clsx(
 				className,

app/components/member-card.tsx

@@ -117,14 +117,8 @@ export default function MemberCard({
 	return (
 		<div
 			style={{ perspective: '1000px' }}
-			onMouseEnter={() => {
-				console.log('here')
-				setShowHolo(true)
-			}}
-			onMouseLeave={() => {
-				console.log('here gone')
-				setShowHolo(false)
-			}}
+			onMouseEnter={() => setShowHolo(true)}
+			onMouseLeave={() => setShowHolo(false)}
 		>
 			<motion.div style={cardStyles}>
 				<motion.div ref={cardRef} className="card">

app/root.tsx

@@ -76,8 +76,11 @@ export const links: LinksFunction = () => {
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [
-		{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },
-		{ name: 'description', content: `Your own captain's log` },
+		{ title: data ? 'Craft Lab' : 'Error | Craft Lab' },
+		{
+			name: 'description',
+			content: `A community built for Design Engineers. Help us build a space where we learn and share everything about our craft and have fun doing it.`,
+		},
 	]
 }
 
@@ -86,7 +89,7 @@ function genSeed() {
 }
 
 export async function loader({ request }: LoaderFunctionArgs) {
-	const allowedPaths = ['/', '/waitlist/success']
+	const allowedPaths = ['/', '/verify', '/waitlist/success']
 	const url = new URL(request.url)
 	if (
 		process.env.SKIP_ALLOWED_PATHS !== 'true' &&

app/routes/$groupId+/members.tsx

@@ -158,7 +158,7 @@ export function InviteEmail({
 		<E.Html lang="en" dir="ltr">
 			<E.Container>
 				<h1>
-					<E.Text>Welcome to Epic Notes!</E.Text>
+					<E.Text>Welcome to Craft Lab!</E.Text>
 				</h1>
 				<p>
 					<E.Text>

app/routes/_marketing+/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '@remix-run/react'
 import clsx from 'clsx'
 import QR from 'qrcode'
-import { type PropsWithChildren } from 'react'
+import { useId, type PropsWithChildren } from 'react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { ErrorMessage } from '#app/components/catalyst/fieldset.js'
@@ -46,6 +46,7 @@ export async function action({ request }: ActionFunctionArgs) {
 
 	checkHoneypot(formData)
 
+	console.log('HERE')
 	const submission = await parseWithZod(formData, {
 		schema: WaitlistFormSchema.superRefine(async (data, ctx) => {
 			const pExistingAccount = prisma.account.findUnique({
@@ -100,7 +101,7 @@ export async function action({ request }: ActionFunctionArgs) {
 
 	const response = await sendEmail({
 		to: email,
-		subject: `Welcome to Epic Notes!`,
+		subject: `Verify email to lock in your waitlist reward!`,
 		react: (
 			<WaitlistEmail waitlistVerificationUrl={verifyUrl.toString()} otp={otp} />
 		),
@@ -135,8 +136,8 @@ export function WaitlistEmail({
 				</h1>
 				<p>
 					<E.Text>
-						This community is going to be a blast, and I cannot wait for you to
-						see it.
+						Please verify your email! This community is going to be a blast, and
+						I cannot wait for you to see it.
 					</E.Text>
 				</p>
 				<p>
@@ -393,12 +394,14 @@ function PlaygroundHoverSVG({ className }: { className?: string }) {
 function WaitlistForm() {
 	const actionData = useActionData<typeof action>()
 	const isPending = useIsPending()
+	const id = useId()
 
 	const [form, fields] = useForm({
-		id: 'waitlist-form',
+		id: `waitlist-form-${id}`,
 		constraint: getZodConstraint(WaitlistFormSchema),
 		lastResult: actionData?.result,
 		onValidate({ formData }) {
+			console.log(Object.fromEntries(formData))
 			return parseWithZod(formData, { schema: WaitlistFormSchema })
 		},
 		shouldRevalidate: 'onBlur',