Files
app/signup/page.tsx
1import { SignupForm } from '@/components/signup-form'
2
3export default function Page() {
4    return (
5        <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
6            <div className="w-full max-w-sm">
7                <SignupForm />
8            </div>
9        </div>
10    )
11}
12
A simple signup form.
signup-01
Files
app/signup/page.tsx
1import { SignupForm } from '@/components/signup-form'
2
3export default function Page() {
4    return (
5        <div className="flex min-h-svh w-full items-center justify-center bg-gray-400 p-6 md:p-10">
6            <div className="w-full max-w-sm shadow-lg">
7                <SignupForm />
8            </div>
9        </div>
10    )
11}
12
A signup form with background.
signup-02
Files
app/signup/page.tsx
1import Image from 'next/image'
2
3import { SignupForm } from '@/components/signup-form'
4
5export default function Page() {
6    return (
7        <div className="grid min-h-svh p-0 md:grid-cols-2">
8            <div className="flex w-full items-center justify-center p-6 md:p-10">
9                <div className="w-full max-w-sm">
10                    <SignupForm />
11                </div>
12            </div>
13            <div className="relative hidden md:block">
14                <Image
15                    src="/images/auth-background.jpg"
16                    alt="Signup Illustration"
17                    width={1000}
18                    height={1000}
19                    className="h-full w-full object-cover"
20                />
21            </div>
22        </div>
23    )
24}
25
A signup form with image.
signup-03