<main class="flex min-h-screen justify-center items-center px-5 sm:px-10 lg:px-0">
    <div class="flex flex-col gap-6 w-full max-w-sm">
        <div class="flex flex-col items-center gap-2 text-center">
            <div class="size-12 bg-primary text-white rounded-ui d-flex-place-center mx-auto mb-4">
                 <svg aria-hidden="true" width="488" height="488" class="size-7" viewBox="0 0 488 488" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_13_164)">
                        <path
                            d="M71.5342 71L416.602 416.068V416.068C321.314 511.356 166.822 511.356 71.5342 416.068V416.068C-23.7537 320.78 -23.7537 166.288 71.5342 71V71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M483.659 249.5C483.659 274.629 436.788 344.5 411.659 344.5C386.53 344.5 392.659 274.629 392.659 249.5C392.659 224.371 413.03 204 438.159 204C463.288 204 483.659 224.371 483.659 249.5Z"
                            fill="currentColor" class=""></path>
                        <circle cx="243.429" cy="243.759" r="110" transform="rotate(48.3973 243.429 243.759)"
                            fill="currentColor" stroke="white" stroke-width="80" class="stroke-primary"></circle>
                        <path
                            d="M309 71C309 96.129 212.629 101 187.5 101C162.371 101 142 80.629 142 55.5C142 30.371 162.371 10 187.5 10C212.629 10 309 45.871 309 71Z"
                            fill="currentColor" class=""></path>
                        <path
                            d="M417 101.5C417 126.629 415.129 215.5 390 215.5C364.871 215.5 326 126.629 326 101.5C326 76.371 346.371 56 371.5 56C396.629 56 417 76.371 417 101.5Z"
                            fill="currentColor" class=""></path>
                    </g>
                    <defs>
                        <clipPath id="clip0_13_164">
                            <rect width="488" height="488" fill="currentColor" class="text-bg"></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <h1 class="text-xl font-semibold text-fg-title text-balance">
                We sent a 6-digit code to your email address
            </h1>
        </div>
        <form class="flex flex-col gap-4">
            <x-ui.otp class="w-full">
                <div class="flex items-center gap-2 flex-1">
                    <x-ui.otp.input size="none" class="size-10 flex-1" />
                    <x-ui.otp.input size="none" class="size-10 flex-1" />
                    <x-ui.otp.input size="none" class="size-10 flex-1" />
                </div>
                <span class="flex min-w-max px-3 text-2xl font-semibold text-fg-muted">
                    -
                </span>
                <div class="flex items-center gap-2 flex-1">
                    <x-ui.otp.input size="none" class="size-10 flex-1" />
                    <x-ui.otp.input size="none" class="size-10 flex-1" />
                    <x-ui.otp.input size="none" class="size-10 flex-1" />
                </div>
            </x-ui.otp>

            <p class="text-sm text-fg-muted text-center">
                Didn't receive the code?
                <x-ui.link href="#" underlined class="text-primary">
                    Resend
                </x-ui.link>
            </p>
            <x-ui.button class="w-full justify-center">
                Verify
            </x-ui.button>
        </form>
        <p class="px-6 text-center text-fg-muted mx-auto max-w-md text-sm mt-3">
            By clicking continue, you agree to our
            <x-ui.link href="#" underlined class="text-primary">Terms of Service</x-ui.link>
            and <x-ui.link href="#" underlined class="text-primary">Privacy Policy</x-ui.link>.
        </p>
    </div>
</main>