<div class="flex flex-col items-center justify-center w-full min-h-screen bg-background">
<div class="w-full max-w-xs px-4 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>
<button type="button"
class="flex items-center justify-center gap-x-2 w-full h-12 bg-muted border rounded-lg text-foreground cursor-pointer transition-transform active:scale-95 px-3.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path
d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z">
</path>
</svg>
<span class="font-semibold text-xs">ورود با گوگل</span>
</button>
<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" id="email"
class="block w-full h-12 bg-transparent 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" id="password"
class="block w-full h-12 bg-transparent 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>
</div>