<!-- Layout Container -->
<div class="flex flex-col items-center justify-center relative w-full min-h-screen">
    <!-- Container -->
    <div class="w-full max-w-sm px-4 py-8 mx-auto">
        <div class="grid gap-y-4">
            <div class="flex flex-col gap-y-1.5 text-start">
                <h2 class="font-bold text-lg">خوش آمدید</h2>
                <p class="font-semibold text-xs text-muted-foreground">
                    برای ورود به حساب کاربری‌تان، اطلاعات ورود را وارد کنید
                </p>
            </div>

            <!-- sign-in with google -->
            <a href="#"
                class="flex items-center justify-center gap-x-2 w-full h-12 bg-background border rounded-lg shadow text-foreground cursor-pointer transition-transform active:scale-95 px-3.5">
                <svg viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"
                    class="size-4">
                    <path
                        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
                        fill="#4285F4" />
                    <path
                        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
                        fill="#34A853" />
                    <path
                        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
                        fill="#FBBC05" />
                    <path
                        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
                        fill="#EB4335" />
                </svg>
                <span class="font-semibold text-xs">ورود با گوگل</span>
            </a>

            <!-- divider -->
            <div class="flex items-center gap-x-2">
                <span class="grow h-px bg-gradient-to-l rtl:bg-gradient-to-r from-border"></span>
                <span class="shrink-0 font-semibold text-xs text-muted-foreground">یا</span>
                <span class="grow h-px bg-gradient-to-r rtl:bg-gradient-to-l from-border"></span>
            </div>

            <form action="#" method="post" class="space-y-6">
                <div class="space-y-4">
                    <!-- Email -->
                    <div class="flex flex-col items-start gap-y-2">
                        <label for="email" class="font-semibold text-xs">ایمیل</label>
                        <input type="email" dir="ltr" name="email"
                            class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                    </div>

                    <!-- Password -->
                    <div class="flex flex-col items-start gap-y-2">
                        <label for="password" class="font-semibold text-xs">رمز
                            عبور</label>
                        <input type="password" dir="ltr" name="password"
                            class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                    </div>
                </div>

                <div class="flex items-center justify-between gap-2">
                    <!-- Remember me -->
                    <div class="flex items-center gap-x-2 group/input">
                        <div class="shrink-0 grid grid-cols-1 size-4">
                            <input type="checkbox" name="remember" id="remember"
                                class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                                value="email" />
                            <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                                viewBox="0 0 14 14" fill="none">
                                <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <label for="remember"
                            class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground group-has-disabled/input:cursor-default">
                            مرا بخاطر بسپار
                        </label>
                    </div>

                    <a href="#" class="font-semibold text-xs cursor-pointer hover:underline">بازیابی
                        رمز
                        عبور؟</a>
                </div>

                <button type="submit"
                    class="flex items-center justify-center gap-x-2 w-full h-12 bg-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-3.5">
                    <span class="font-semibold text-xs">ورود به حساب کاربری</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                        class="size-4 rtl:-rotate-90 group-hover/button:animate-pulse">
                        <path fill-rule="evenodd"
                            d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
            </form>
        </div>
    </div>
    <!-- end Container -->
</div><!-- end Layout Container -->

<!-- Layout Container -->
<div class="flex flex-col items-center justify-center relative w-full min-h-screen">
    <!-- Container -->
    <div class="w-full max-w-sm px-4 py-8 mx-auto">
        <div class="grid gap-y-6">
            <h3 class="font-bold text-xl">
                ورود یا ثبت نام
            </h3>
            <div class="font-semibold text-xs text-muted-foreground space-y-1.5">
                <p>درود 👋</p>
                <p>برای ورود یا ثبت‌نام شماره موبایل خود را وارد کنید.</p>
            </div>

            <form action="#" method="post" class="space-y-2">
                <!-- Mobile -->
                <input type="text" dir="ltr" name="mobile" id="mobile"
                    class="block w-full h-12 bg-background border rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1"
                    autocomplete="off" placeholder="09*********" />

                <button type="submit"
                    class="flex items-center justify-center gap-x-2 w-full h-12 bg-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-3.5">
                    <span class="font-semibold text-xs">ارسال کد تایید</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                        <path
                            d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
                        <path
                            d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
                    </svg>
                </button>
            </form>

            <div class="flex flex-wrap items-center justify-center text-center font-medium text-xs">
                ورود شما به معنای پذیرش <a href="#" class="font-semibold text-accent mx-1">شرایط</a> و
                <a href="#" class="font-semibold text-accent mx-1">قوانین
                    حریم‌خصوصی</a> است.
            </div>
        </div>
    </div>
    <!-- end Container -->
</div><!-- end Layout Container -->

<!-- Layout Container -->
<div class="flex flex-col items-center justify-center relative w-full min-h-screen">
    <!-- Container -->
    <div class="w-full max-w-sm px-4 py-8 mx-auto">
        <div class="grid gap-y-5">
            <div class="flex justify-center">
                <!-- logo -->
                <a href="https://spacedev.ir" class="inline-flex">
                    <svg width="99" height="34" viewBox="0 0 99 34" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="w-12">
                        <defs>
                            <clipPath id="clip_path_1">
                                <rect width="99" height="34"></rect>
                            </clipPath>
                            <clipPath id="clip_path_2">
                                <rect width="69" height="46"></rect>
                            </clipPath>
                        </defs>
                        <g clip-path="url(#clip_path_1)">
                            <rect width="99" height="34" fill="currentColor" fill-rule="evenodd" fill-opacity="0">
                            </rect>
                            <g transform="translate(-5 -8.4)">
                                <path
                                    d="M5.52539 41.4L5.52539 9.38194L17.4297 9.38194Q20.9336 9.38194 23.8984 11.1339Q26.8633 12.8746 28.604 15.8507Q30.356 18.8155 30.356 22.3082L30.356 28.4737Q30.356 31.9664 28.604 34.9425Q26.8633 37.9073 23.8984 39.6593Q20.9336 41.4 17.4297 41.4L5.52539 41.4ZM39.5654 9.38194L62.8798 9.38194L62.8798 17.4791L47.9321 17.4791L47.9321 21.5333L60.353 21.5333L60.353 29.2149L47.9321 29.2149L47.9321 33.3028L62.8798 33.3028L62.8798 41.4L39.5654 41.4L39.5654 9.38194Z"
                                    transform="" fill="currentColor" clip-path="url(#clip_path_2)"></path>
                                <path d="M15 32L0 0L30 9.53674e-06L15 32Z" fill="currentColor" fill-rule="evenodd"
                                    transform="translate(73 9.4)"></path>
                            </g>
                        </g>
                    </svg>
                </a>
            </div>

            <!-- sign-in with google -->
            <a href="#"
                class="flex items-center justify-center gap-x-2 w-full h-12 bg-background border rounded-lg shadow text-foreground cursor-pointer transition-transform active:scale-95 px-3.5">
                <svg viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"
                    class="size-4">
                    <path
                        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
                        fill="#4285F4" />
                    <path
                        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
                        fill="#34A853" />
                    <path
                        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
                        fill="#FBBC05" />
                    <path
                        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
                        fill="#EB4335" />
                </svg>
                <span class="font-semibold text-xs">ورود با گوگل</span>
            </a>

            <!-- divider -->
            <div class="flex items-center gap-x-2">
                <span class="grow h-px bg-border"></span>
                <span class="shrink-0 font-semibold text-xs text-muted-foreground">یا</span>
                <span class="grow h-px bg-border"></span>
            </div>

            <!-- tabs container -->
            <div class="space-y-5" x-data="{ activeTab: 'sign-in' }">
                <!-- tabs:list -->
                <ul class="grid grid-cols-2 gap-2 bg-muted border rounded-lg p-1">
                    <!-- tabs:list:item -->
                    <li>
                        <button type="button"
                            class="flex items-center justify-center gap-x-2 w-full relative rounded-md cursor-pointer py-2 px-4"
                            x-bind:class="activeTab === 'sign-in' ? 'text-foreground bg-background shadow' : 'text-muted-foreground'"
                            x-on:click="activeTab = 'sign-in'">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5">
                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2">
                                    <path
                                        d="M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
                                    <path d="M21 12H8l3-3m0 6l-3-3" />
                                </g>
                            </svg>

                            <span class="font-semibold text-sm">ورود</span>
                        </button>
                    </li><!-- end tabs:list:item -->

                    <!-- tabs:list:item -->
                    <li>
                        <button type="button"
                            class="flex items-center justify-center gap-x-2 w-full relative rounded-md cursor-pointer py-2 px-4"
                            x-bind:class="activeTab === 'sign-up' ? 'text-foreground bg-background shadow' : 'text-muted-foreground'"
                            x-on:click="activeTab = 'sign-up'">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5">
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4" />
                            </svg>

                            <span class="font-semibold text-sm">ثبت نام</span>
                        </button>
                    </li><!-- end tabs:list:item -->
                </ul><!-- end tabs:list -->

                <!-- tabs:contents -->
                <div>
                    <!-- tabs:contents:sign-in -->
                    <div x-cloak x-show="activeTab === 'sign-in'">
                        <form action="#" method="post" class="space-y-6">
                            <div class="space-y-4">
                                <!-- Email -->
                                <div class="flex flex-col items-start gap-y-2">
                                    <label for="email" class="font-semibold text-xs">ایمیل</label>
                                    <input type="email" dir="ltr" name="email"
                                        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                </div>

                                <!-- Password -->
                                <div class="flex flex-col items-start gap-y-2">
                                    <label for="password" class="font-semibold text-xs">رمز
                                        عبور</label>
                                    <input type="password" dir="ltr" name="password"
                                        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                </div>
                            </div>

                            <div class="flex items-center justify-between gap-2">
                                <!-- Remember me -->
                                <div class="flex items-center gap-x-2 group/input">
                                    <div class="shrink-0 grid grid-cols-1 size-4">
                                        <input type="checkbox" name="remember" id="remember"
                                            class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                                            value="email" />
                                        <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                                            viewBox="0 0 14 14" fill="none">
                                            <path class="opacity-0 group-has-checked/input:opacity-100"
                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </div>
                                    <label for="remember"
                                        class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground group-has-disabled/input:cursor-default">
                                        مرا بخاطر بسپار
                                    </label>
                                </div>

                                <a href="#" class="font-semibold text-xs cursor-pointer hover:underline">بازیابی
                                    رمز
                                    عبور؟</a>
                            </div>

                            <button type="submit"
                                class="flex items-center justify-center gap-x-2 w-full h-12 bg-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-3.5">
                                <span class="font-semibold text-xs">ورود به حساب کاربری</span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-4 rtl:-rotate-90 group-hover/button:animate-pulse">
                                    <path fill-rule="evenodd"
                                        d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                        </form>
                    </div><!-- end tabs:contents:sign-in -->

                    <!-- tabs:contents:sign-up -->
                    <div x-cloak x-show="activeTab === 'sign-up'">
                        <form action="#" method="post" class="space-y-6">
                            <div class="space-y-4">
                                <div class="grid grid-cols-2 gap-x-3">
                                    <!-- Name -->
                                    <div class="flex flex-col items-start gap-y-2">
                                        <label for="name" class="font-semibold text-xs">نام</label>
                                        <input type="text" name="name"
                                            class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                    </div>

                                    <!-- LastName -->
                                    <div class="flex flex-col items-start gap-y-2">
                                        <label for="name" class="font-semibold text-xs">نام خانوادگی</label>
                                        <input type="text" name="lastname"
                                            class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                    </div>
                                </div>
                                <!-- Email -->
                                <div class="flex flex-col items-start gap-y-2">
                                    <label for="email" class="font-semibold text-xs">ایمیل</label>
                                    <input type="email" dir="ltr" name="email"
                                        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                </div>

                                <!-- Password -->
                                <div class="flex flex-col items-start gap-y-2">
                                    <label for="password" class="font-semibold text-xs">رمز
                                        عبور</label>
                                    <input type="password" dir="ltr" name="password"
                                        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                </div>

                                <!-- Confirmation Password -->
                                <div class="flex flex-col items-start gap-y-2">
                                    <label for="confirmation_password" class="font-semibold text-xs">
                                        تکرار رمز عبور
                                    </label>
                                    <input type="password" dir="ltr" name="confirmation_password"
                                        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
                                </div>
                            </div>

                            <button type="submit"
                                class="flex items-center justify-center gap-x-2 w-full h-12 bg-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-3.5">
                                <span class="font-semibold text-xs">ایجاد حساب کاربری</span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-4 rtl:-rotate-90 group-hover/button:animate-pulse">
                                    <path fill-rule="evenodd"
                                        d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                        </form>
                    </div><!-- end tabs:contents:sign-up -->
                </div><!-- end tabs:contents -->
            </div><!-- end tabs container -->
        </div>
    </div>
    <!-- end Container -->
</div><!-- end Layout Container -->