Files
app/otp/page.tsx
1import React from 'react'
2
3import { OTPForm } from '@/components/otp-form'
4
5export default function page() {
6    return (
7        <>
8            <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
9                <div className="w-full max-w-sm">
10                    <OTPForm />
11                </div>
12            </div>
13        </>
14    )
15}
16
A simple OTP verification form.
otp-01
Files
app/otp/page.tsx
1import { OTPForm } from '@/components/otp-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                <OTPForm />
8            </div>
9        </div>
10    )
11}
12
A OTP form with background
otp-02
Files
app/otp/page.tsx
1import Image from 'next/image'
2
3import { OTPForm } from '@/components/otp-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                    <OTPForm />
11                </div>
12            </div>
13            <div className="relative hidden md:block">
14                <Image
15                    src="/images/auth-background.jpg"
16                    alt="Login Illustration"
17                    width={1000}
18                    height={1000}
19                    className="h-full w-full object-cover"
20                />
21            </div>
22        </div>
23    )
24}
25
A OTP form with cover image
otp-03