Cover the split-screen auth layout in Storybook

web/frontend/app/components/ui/forms/FormField.tsx

@@ -21,19 +21,26 @@ const FormField = ({
 }: FormFieldProps) => {
     return (
         <Field className={className ?? 'space-y-1'}>
-            <Label htmlFor={inputProps.id} className={labelClassName ?? 'label font-medium'}>
+            <Label
+                htmlFor={inputProps.id}
+                className={labelClassName ?? 'label text-sm font-semibold text-base-content'}
+            >
                 {label}
             </Label>
 
             <input
                 {...inputProps}
-                className={inputClassName ?? `input w-full ${error ? 'input-error' : ''}`}
+                className={
+                    inputClassName ?? `input h-11 w-full text-base ${error ? 'input-error' : ''}`
+                }
             />
 
             {error ? (
-                <Description className={hintClassName ?? 'label text-error'}>{error}</Description>
+                <Description className={hintClassName ?? 'text-xs text-error'}>{error}</Description>
             ) : hint ? (
-                <Description className={hintClassName ?? 'label'}>{hint}</Description>
+                <Description className={hintClassName ?? 'text-xs text-[var(--color-muted)]'}>
+                    {hint}
+                </Description>
             ) : null}
         </Field>
     );

web/frontend/app/components/ui/navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
-import { Link } from 'react-router';
+import { Link, useLocation } from 'react-router';
 import NavLinks from './NavLinks';
 import UserMenu from './UserMenu';
 
@@ -12,85 +12,93 @@ interface NavbarProps {
     } | null;
 }
 
-const Navbar = ({ auth }: NavbarProps) => (
+const Navbar = ({ auth }: NavbarProps) => {
-    <Disclosure
+    const { pathname } = useLocation();
-        as="nav"
+    const onAuthRoute = pathname === '/login' || pathname === '/register';
-        className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
+    const showAuthActions = !auth && !onAuthRoute;
-    >
+
-        {({ open }) => (
+    return (
-            <>
+        <Disclosure
-                <div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
+            as="nav"
-                    <div className="navbar-start gap-2">
+            className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
-                        <DisclosureButton
+        >
-                            className="btn btn-ghost btn-square lg:hidden"
+            {({ open }) => (
-                            aria-label="Toggle navigation"
+                <>
-                        >
+                    <div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
-                            <svg
+                        <div className="navbar-start gap-2">
-                                xmlns="http://www.w3.org/2000/svg"
+                            <DisclosureButton
-                                fill="none"
+                                className="btn btn-ghost btn-square lg:hidden"
-                                viewBox="0 0 24 24"
+                                aria-label="Toggle navigation"
-                                className="h-5 w-5 stroke-current"
                             >
-                                {open ? (
+                                <svg
-                                    <path
+                                    xmlns="http://www.w3.org/2000/svg"
-                                        strokeLinecap="round"
+                                    fill="none"
-                                        strokeLinejoin="round"
+                                    viewBox="0 0 24 24"
-                                        strokeWidth="2"
+                                    className="h-5 w-5 stroke-current"
-                                        d="M6 18L18 6M6 6l12 12"
+                                >
-                                    />
+                                    {open ? (
-                                ) : (
+                                        <path
-                                    <path
+                                            strokeLinecap="round"
-                                        strokeLinecap="round"
+                                            strokeLinejoin="round"
-                                        strokeLinejoin="round"
+                                            strokeWidth="2"
-                                        strokeWidth="2"
+                                            d="M6 18L18 6M6 6l12 12"
-                                        d="M4 6h16M4 12h16M4 18h16"
+                                        />
-                                    />
+                                    ) : (
-                                )}
+                                        <path
-                            </svg>
+                                            strokeLinecap="round"
-                        </DisclosureButton>
+                                            strokeLinejoin="round"
+                                            strokeWidth="2"
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                        />
+                                    )}
+                                </svg>
+                            </DisclosureButton>
 
-                        <Link to="/" className="lg:text-xl text-lg font-bold">
+                            <Link to="/" className="lg:text-xl text-lg font-bold">
-                            The Biergarten App
+                                The Biergarten App
-                        </Link>
-                    </div>
-
-                    <NavLinks variant="desktop" showRegister={!auth} />
-
-                    <div className="navbar-end gap-2">
-                        {!auth && (
-                            <Link
-                                to="/register"
-                                className="btn btn-ghost btn-sm hidden sm:inline-flex"
-                            >
-                                Register User
                             </Link>
-                        )}
+                        </div>
 
-                        {auth ? (
+                        <NavLinks variant="desktop" showRegister={showAuthActions} />
-                            <>
+
-                                <Link to="/dashboard" className="btn btn-primary btn-sm">
+                        <div className="navbar-end gap-2">
-                                    Dashboard
+                            {showAuthActions && (
+                                <Link
+                                    to="/register"
+                                    className="btn btn-ghost btn-sm hidden sm:inline-flex"
+                                >
+                                    Register User
                                 </Link>
+                            )}
 
-                                <UserMenu
+                            {auth ? (
-                                    username={auth.username}
+                                <>
-                                    userAccountId={auth.userAccountId}
+                                    <Link to="/dashboard" className="btn btn-primary btn-sm">
-                                />
+                                        Dashboard
-                            </>
+                                    </Link>
-                        ) : (
+
-                            <Link to="/login" className="btn btn-primary btn-sm">
+                                    <UserMenu
-                                Login
+                                        username={auth.username}
-                            </Link>
+                                        userAccountId={auth.userAccountId}
-                        )}
+                                    />
+                                </>
+                            ) : (
+                                !onAuthRoute && (
+                                    <Link to="/login" className="btn btn-primary btn-sm">
+                                        Login
+                                    </Link>
+                                )
+                            )}
+                        </div>
                     </div>
-                </div>
 
-                <DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
+                    <DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
-                    <NavLinks variant="mobile" showRegister={!auth} />
+                        <NavLinks variant="mobile" showRegister={showAuthActions} />
-                </DisclosurePanel>
+                    </DisclosurePanel>
-            </>
+                </>
-        )}
+            )}
-    </Disclosure>
+        </Disclosure>
-);
+    );
+};
 
 export default Navbar;

web/frontend/app/features/auth/components/AuthSplitLayout.stories.tsx

@@ -0,0 +1,107 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { expect, within } from 'storybook/test';
+import AuthSplitLayout from './AuthSplitLayout';
+import AuthSwitchPrompt from './AuthSwitchPrompt';
+import LoginForm from './LoginForm';
+import RegisterForm from './RegisterForm';
+import { loginSchema, registerSchema, type LoginSchema, type RegisterSchema } from '../schemas';
+
+const authSplitLayoutDescription = `The shared split-screen shell behind /login and /register: a brand panel carrying the headline and a form panel that centers the page's own heading, form, and switch prompt. Both stories compose the real forms, so they show the production layout at any viewport.`;
+
+const LoginPanel = () => {
+    const form = useForm<LoginSchema>({ resolver: zodResolver(loginSchema) });
+
+    return (
+        <div className="flex w-full max-w-[25rem] flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+                <h1 className="text-[2.125rem]">Sign in</h1>
+                <p className="text-[var(--color-muted)]">Sign in to your Biergarten account</p>
+            </div>
+
+            <LoginForm
+                onSubmit={form.handleSubmit(() => {})}
+                formState={form.formState}
+                register={form.register}
+                submitting={false}
+            />
+
+            <AuthSwitchPrompt lead="New to Biergarten?" to="/register" label="Create an account" />
+        </div>
+    );
+};
+
+const RegisterPanel = () => {
+    const form = useForm<RegisterSchema>({ resolver: zodResolver(registerSchema) });
+
+    return (
+        <div className="flex w-full max-w-[32.5rem] flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+                <h1 className="text-[2.125rem]">Create your account</h1>
+                <p className="text-[var(--color-muted)]">Create your Biergarten account</p>
+            </div>
+
+            <RegisterForm
+                onSubmit={form.handleSubmit(() => {})}
+                formState={form.formState}
+                register={form.register}
+                submitting={false}
+            />
+
+            <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
+        </div>
+    );
+};
+
+const meta = {
+    title: 'Layout/AuthSplitLayout',
+    component: AuthSplitLayout,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: authSplitLayoutDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof AuthSplitLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Login: Story = {
+    args: {
+        headline: 'Good to see you again.',
+        blurb: 'Sign in to pick up where you left off with our partner breweries.',
+        children: <LoginPanel />,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('heading', { name: 'Sign in' })).toBeInTheDocument();
+        await expect(canvas.getByRole('button', { name: /show password/i })).toBeInTheDocument();
+    },
+};
+
+export const Register: Story = {
+    args: {
+        headline: 'Pull up a chair.',
+        blurb: 'Create an account to explore partner breweries and their beers.',
+        children: <RegisterPanel />,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByLabelText(/date of birth/i)).toBeInTheDocument();
+        await expect(canvas.getByRole('button', { name: /create account/i })).toBeInTheDocument();
+    },
+};
+
+export const RegisterMobile: Story = {
+    args: Register.args,
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile1',
+        },
+    },
+};

web/frontend/app/features/auth/components/AuthSplitLayout.tsx

@@ -0,0 +1,20 @@
+interface AuthSplitLayoutProps {
+    headline: string;
+    blurb: string;
+    children: React.ReactNode;
+}
+
+const AuthSplitLayout = ({ headline, blurb, children }: AuthSplitLayoutProps) => (
+    <div className="grid flex-1 grid-cols-1 bg-base-200 lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)]">
+        <aside className="flex flex-col justify-end gap-5 bg-secondary px-5 py-7 text-secondary-content lg:px-14 lg:py-12">
+            <h2 className="text-3xl leading-[1.15] text-balance lg:text-[2.75rem]">{headline}</h2>
+            <p className="max-w-[23.75rem] text-base leading-relaxed lg:text-lg">{blurb}</p>
+        </aside>
+
+        <main className="flex items-start justify-center px-5 pt-7 pb-10 lg:items-center lg:px-6 lg:py-10">
+            {children}
+        </main>
+    </div>
+);
+
+export default AuthSplitLayout;

web/frontend/app/features/auth/components/AuthSwitchPrompt.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+interface AuthSwitchPromptProps {
+    lead: string;
+    to: string;
+    label: string;
+}
+
+const AuthSwitchPrompt = ({ lead, to, label }: AuthSwitchPromptProps) => (
+    <p className="text-center text-[0.9375rem] text-[var(--color-muted)]">
+        {lead}{' '}
+        <Link to={to} className="font-semibold text-secondary hover:text-primary">
+            {label}
+        </Link>
+    </p>
+);
+
+export default AuthSwitchPrompt;

web/frontend/app/features/auth/components/LoginCallout.tsx

@@ -1,18 +0,0 @@
-import { Link } from 'react-router';
-
-const LoginCallout = () => (
-    <>
-        <div className="divider text-xs">Already have an account?</div>
-
-        <div className="text-center space-y-2">
-            <Link to="/login" className="btn btn-outline btn-sm w-full">
-                Sign in
-            </Link>
-            <Link to="/" className="link link-hover text-sm text-base-content/70">
-                Back to home
-            </Link>
-        </div>
-    </>
-);
-
-export default LoginCallout;

web/frontend/app/features/auth/components/LoginForm.tsx

@@ -1,8 +1,9 @@
-import { BaseSyntheticEvent } from 'react';
+import { BaseSyntheticEvent, useState } from 'react';
 import { FormState, UseFormRegister } from 'react-hook-form';
 import FormField from '../../../components/ui/forms/FormField';
 import SubmitButton from '../../../components/ui/forms/SubmitButton';
 import type { LoginSchema } from '../schemas';
+import ShowPasswordToggle from './ShowPasswordToggle';
 
 interface LoginFormProps {
     onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
@@ -11,34 +12,42 @@ interface LoginFormProps {
     submitting: boolean;
 }
 
-const LoginForm = (props: LoginFormProps) => (
+const LoginForm = (props: LoginFormProps) => {
-    <form onSubmit={props.onSubmit} className="space-y-3">
+    const [showPassword, setShowPassword] = useState(false);
-        <FormField
-            id="username"
-            type="text"
-            autoComplete="username"
-            placeholder="your_username"
-            label="Username"
-            error={props.formState.errors.username?.message}
-            {...props.register('username')}
-        />
 
-        <FormField
+    return (
-            id="password"
+        <form onSubmit={props.onSubmit} className="flex flex-col gap-4">
-            type="password"
+            <FormField
-            autoComplete="current-password"
+                id="username"
-            placeholder="••••••••"
+                type="text"
-            label="Password"
+                autoComplete="username"
-            error={props.formState.errors.password?.message}
+                label="Username"
-            {...props.register('password')}
+                error={props.formState.errors.username?.message}
-        />
+                {...props.register('username')}
+            />
 
-        <SubmitButton
+            <FormField
-            isSubmitting={props.submitting}
+                id="password"
-            idleText="Sign In"
+                type={showPassword ? 'text' : 'password'}
-            submittingText="Signing in..."
+                autoComplete="current-password"
-        />
+                label="Password"
-    </form>
+                error={props.formState.errors.password?.message}
-);
+                {...props.register('password')}
+            />
+
+            <ShowPasswordToggle
+                shown={showPassword}
+                onToggle={() => setShowPassword((shown) => !shown)}
+            />
+
+            <SubmitButton
+                isSubmitting={props.submitting}
+                idleText="Sign in"
+                submittingText="Signing in…"
+                className="btn btn-primary min-h-12 w-full"
+            />
+        </form>
+    );
+};
 
 export default LoginForm;

web/frontend/app/features/auth/components/RegisterCallout.tsx

@@ -1,23 +0,0 @@
-import { HomeSimpleDoor, UserPlus } from 'iconoir-react';
-import { Link } from 'react-router';
-
-const RegisterCallout = () => (
-    <>
-        <div className="divider text-xs">New here?</div>
-        <div className="text-center space-y-2">
-            <Link to="/register" className="btn btn-outline btn-sm w-full gap-2">
-                <UserPlus className="size-4" aria-hidden="true" />
-                Create an account
-            </Link>
-            <Link
-                to="/"
-                className="link link-hover text-sm text-base-content/70 inline-flex items-center gap-1"
-            >
-                <HomeSimpleDoor className="size-4" aria-hidden="true" />
-                Back to home
-            </Link>
-        </div>
-    </>
-);
-
-export default RegisterCallout;

web/frontend/app/features/auth/components/RegisterForm.tsx

@@ -1,8 +1,9 @@
-import { BaseSyntheticEvent } from 'react';
+import { BaseSyntheticEvent, useState } from 'react';
 import { FormState, UseFormRegister } from 'react-hook-form';
 import FormField from '../../../components/ui/forms/FormField';
 import SubmitButton from '../../../components/ui/forms/SubmitButton';
 import type { RegisterSchema } from '../schemas';
+import ShowPasswordToggle from './ShowPasswordToggle';
 
 interface RegisterFormProps {
     onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
@@ -11,87 +12,91 @@ interface RegisterFormProps {
     submitting: boolean;
 }
 
-const RegisterForm = (props: RegisterFormProps) => (
+const RegisterForm = (props: RegisterFormProps) => {
-    <form onSubmit={props.onSubmit} className="space-y-3">
+    const [showPassword, setShowPassword] = useState(false);
-        <FormField
+
-            id="username"
+    return (
-            type="text"
+        <form onSubmit={props.onSubmit} className="flex flex-col gap-4">
-            autoComplete="username"
+            <div className="grid grid-cols-1 gap-3.5 min-[420px]:grid-cols-2">
-            placeholder="your_username"
+                <FormField
-            label="Username"
+                    id="firstName"
-            hint="3-64 characters, alphanumeric and . _ -"
+                    type="text"
-            error={props.formState.errors.username?.message}
+                    autoComplete="given-name"
-            {...props.register('username')}
+                    label="First name"
-        />
+                    error={props.formState.errors.firstName?.message}
+                    {...props.register('firstName')}
+                />
+
+                <FormField
+                    id="lastName"
+                    type="text"
+                    autoComplete="family-name"
+                    label="Last name"
+                    error={props.formState.errors.lastName?.message}
+                    {...props.register('lastName')}
+                />
+            </div>
 
-        <div className="grid grid-cols-2 gap-3">
             <FormField
-                id="firstName"
+                id="username"
                 type="text"
-                autoComplete="given-name"
+                autoComplete="username"
-                placeholder="Jane"
+                label="Username"
-                label="First Name"
+                hint="3-64 characters, alphanumeric and . _ -"
-                error={props.formState.errors.firstName?.message}
+                error={props.formState.errors.username?.message}
-                {...props.register('firstName')}
+                {...props.register('username')}
             />
 
             <FormField
-                id="lastName"
+                id="email"
-                type="text"
+                type="email"
-                autoComplete="family-name"
+                autoComplete="email"
-                placeholder="Doe"
+                label="Email"
-                label="Last Name"
+                error={props.formState.errors.email?.message}
-                error={props.formState.errors.lastName?.message}
+                {...props.register('email')}
-                {...props.register('lastName')}
             />
-        </div>
 
-        <FormField
+            <FormField
-            id="email"
+                id="dateOfBirth"
-            type="email"
+                type="date"
-            autoComplete="email"
+                label="Date of birth"
-            placeholder="jane@example.com"
+                hint="Must be 19 years or older."
-            label="Email"
+                error={props.formState.errors.dateOfBirth?.message}
-            error={props.formState.errors.email?.message}
+                {...props.register('dateOfBirth')}
-            {...props.register('email')}
+            />
-        />
 
-        <FormField
+            <FormField
-            id="dateOfBirth"
+                id="password"
-            type="date"
+                type={showPassword ? 'text' : 'password'}
-            label="Date of Birth"
+                autoComplete="new-password"
-            hint="Must be 19 years or older"
+                label="Password"
-            error={props.formState.errors.dateOfBirth?.message}
+                hint="8+ chars: uppercase, lowercase, digit, special character"
-            {...props.register('dateOfBirth')}
+                error={props.formState.errors.password?.message}
-        />
+                {...props.register('password')}
+            />
 
-        <FormField
+            <FormField
-            id="password"
+                id="confirmPassword"
-            type="password"
+                type={showPassword ? 'text' : 'password'}
-            autoComplete="new-password"
+                autoComplete="new-password"
-            placeholder="••••••••"
+                label="Confirm password"
-            label="Password"
+                error={props.formState.errors.confirmPassword?.message}
-            hint="8+ chars: uppercase, lowercase, digit, special character"
+                {...props.register('confirmPassword')}
-            error={props.formState.errors.password?.message}
+            />
-            {...props.register('password')}
-        />
 
-        <FormField
+            <ShowPasswordToggle
-            id="confirmPassword"
+                shown={showPassword}
-            type="password"
+                onToggle={() => setShowPassword((shown) => !shown)}
-            autoComplete="new-password"
+            />
-            placeholder="••••••••"
-            label="Confirm Password"
-            error={props.formState.errors.confirmPassword?.message}
-            {...props.register('confirmPassword')}
-        />
 
-        <SubmitButton
+            <SubmitButton
-            isSubmitting={props.submitting}
+                isSubmitting={props.submitting}
-            idleText="Create Account"
+                idleText="Create account"
-            submittingText="Creating account..."
+                submittingText="Creating account…"
-        />
+                className="btn btn-primary min-h-12 w-full"
-    </form>
+            />
-);
+        </form>
+    );
+};
 
 export default RegisterForm;

web/frontend/app/features/auth/components/ShowPasswordToggle.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@headlessui/react';
+
+interface ShowPasswordToggleProps {
+    shown: boolean;
+    onToggle: () => void;
+}
+
+const ShowPasswordToggle = ({ shown, onToggle }: ShowPasswordToggleProps) => (
+    <Button
+        type="button"
+        onClick={onToggle}
+        className="inline-flex min-h-11 items-center self-start text-[0.9375rem] font-semibold text-secondary hover:underline"
+    >
+        {shown ? 'Hide password' : 'Show password'}
+    </Button>
+);
+
+export default ShowPasswordToggle;

web/frontend/app/features/auth/routes/login.tsx

@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { LogIn } from 'iconoir-react';
 import { useForm } from 'react-hook-form';
 import { redirect, useNavigation, useSubmit } from 'react-router';
 import { createAuthSession, getOptionalAuth, login } from '../auth.server';
+import AuthSplitLayout from '../components/AuthSplitLayout';
+import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
 import LoginForm from '../components/LoginForm';
-import RegisterCallout from '../components/RegisterCallout';
 import { useActionErrorToast } from '../hooks/useActionErrorToast';
 import { loginSchema, type LoginSchema } from '../schemas';
 import type { Route } from './+types/login';
@@ -54,34 +54,36 @@ const Login = ({ actionData }: Route.ComponentProps) => {
     useActionErrorToast(actionData?.error);
 
     return (
-        <div className="hero min-h-screen bg-base-200">
+        <AuthSplitLayout
-            <div className="card w-full max-w-md bg-base-100 shadow-xl">
+            headline="Good to see you again."
-                <div className="card-body gap-4">
+            blurb="Sign in to pick up where you left off with our partner breweries."
-                    <div className="text-center">
+        >
-                        <h1 className="card-title text-3xl justify-center gap-2">
+            <div className="flex w-full max-w-[25rem] flex-col gap-4">
-                            <LogIn className="size-7" aria-hidden="true" />
+                <div className="flex flex-col gap-1.5">
-                            Login
+                    <h1 className="text-[2.125rem]">Sign in</h1>
-                        </h1>
+                    <p className="text-[var(--color-muted)]">Sign in to your Biergarten account</p>
-                        <p className="text-base-content/70">Sign in to your Biergarten account</p>
-                    </div>
-
-                    {actionData?.error && (
-                        <div role="alert" className="alert alert-error alert-soft">
-                            <span>{actionData.error}</span>
-                        </div>
-                    )}
-
-                    <LoginForm
-                        onSubmit={onSubmit}
-                        formState={formState}
-                        register={register}
-                        submitting={isSubmitting}
-                    />
-
-                    <RegisterCallout />
                 </div>
+
+                {actionData?.error && (
+                    <div role="alert" className="alert alert-error alert-soft">
+                        <span>{actionData.error}</span>
+                    </div>
+                )}
+
+                <LoginForm
+                    onSubmit={onSubmit}
+                    formState={formState}
+                    register={register}
+                    submitting={isSubmitting}
+                />
+
+                <AuthSwitchPrompt
+                    lead="New to Biergarten?"
+                    to="/register"
+                    label="Create an account"
+                />
             </div>
-        </div>
+        </AuthSplitLayout>
     );
 };
 

web/frontend/app/features/auth/routes/register.tsx

@@ -2,7 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { redirect, useNavigation, useSubmit } from 'react-router';
 import { createAuthSession, getOptionalAuth, register } from '../auth.server';
-import LoginCallout from '../components/LoginCallout';
+import AuthSplitLayout from '../components/AuthSplitLayout';
+import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
 import RegisterForm from '../components/RegisterForm';
 import { useActionErrorToast } from '../hooks/useActionErrorToast';
 import { registerSchema, type RegisterSchema } from '../schemas';
@@ -75,31 +76,32 @@ const Register = ({ actionData }: Route.ComponentProps) => {
     useActionErrorToast(actionData?.error);
 
     return (
-        <div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
+        <AuthSplitLayout
-            <div className="card w-full max-w-lg bg-base-100 shadow-xl">
+            headline="Pull up a chair."
-                <div className="card-body gap-4">
+            blurb="Create an account to explore partner breweries and their beers."
-                    <div className="text-center">
+        >
-                        <h1 className="card-title text-3xl justify-center">Register</h1>
+            <div className="flex w-full max-w-[32.5rem] flex-col gap-4">
-                        <p className="text-base-content/70">Create your Biergarten account</p>
+                <div className="flex flex-col gap-1.5">
-                    </div>
+                    <h1 className="text-[2.125rem]">Create your account</h1>
-
+                    <p className="text-[var(--color-muted)]">Create your Biergarten account</p>
-                    {actionData?.error && (
-                        <div role="alert" className="alert alert-error alert-soft">
-                            <span>{actionData.error}</span>
-                        </div>
-                    )}
-
-                    <RegisterForm
-                        onSubmit={onSubmit}
-                        formState={formState}
-                        register={field}
-                        submitting={isSubmitting}
-                    />
-
-                    <LoginCallout />
                 </div>
+
+                {actionData?.error && (
+                    <div role="alert" className="alert alert-error alert-soft">
+                        <span>{actionData.error}</span>
+                    </div>
+                )}
+
+                <RegisterForm
+                    onSubmit={onSubmit}
+                    formState={formState}
+                    register={field}
+                    submitting={isSubmitting}
+                />
+
+                <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
             </div>
-        </div>
+        </AuthSplitLayout>
     );
 };
 

web/frontend/app/root.tsx

@@ -63,12 +63,14 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 const App = ({ loaderData }: Route.ComponentProps) => {
     const { auth } = loaderData;
     return (
-        <>
+        <div className="flex min-h-screen flex-col">
             <Navbar auth={auth} />
             <ToastProvider />
             <AiDisclosureDialog />
-            <Outlet />
+            <div className="flex flex-1 flex-col">
-        </>
+                <Outlet />
+            </div>
+        </div>
     );
 };