{% extends "layouts/default-rtl.html" %}

<!-- Content Block -->
{% block content %}

<div class="p-4 p-md-8 bg-body-tertiary">
	<div class="container-fluid authentication-page--container">
		<div class="row g-4 authentication-page">
			<div class="col-xl-6 authentication-page__left">
				<div class="authentication-page__left-content">
					<span class="badge text-bg-primary align-items-center mb-3">
						<iconify-icon
							icon="solar:check-circle-bold-duotone"
							class="fs-14"
						></iconify-icon>
						<span class="d-inline-block flex-grow-1"> انضم إلينا الآن </span>
					</span>
					<h3>ابدأ رحلتك</h3>
					<p class="mb-8 fs-18 fw-medium">
						الإنفاق السنوي العالمي على الإعلانات الرقمية يتجاوز
					</p>
					<div class="row g-3 g-xxl-4 justify-content-center">
						<div class="col-sm-4">
							<div
								class="d-flex flex-column justify-content-start gap-6 bg-body rounded-3 p-4 p-md-6 p-xl-8 h-100"
							>
								<div
									class="d-grid place-content-center w-9 h-9 rounded-circle bg-primary-subtle text-primary-emphasis fs-14 fw-semibold"
								>
									01
								</div>
								<p class="mb-0 fw-semibold text-heading">سجل حسابك</p>
							</div>
						</div>
						<div class="col-sm-4">
							<div
								class="d-flex flex-column justify-content-start gap-6 bg-body rounded-3 p-4 p-md-6 p-xl-8 h-100"
							>
								<div
									class="d-grid place-content-center w-9 h-9 rounded-circle bg-primary-subtle text-primary-emphasis fs-14 fw-semibold"
								>
									02
								</div>
								<p class="mb-0 fw-semibold text-heading">
									إعداد معلومات الملف الشخصي
								</p>
							</div>
						</div>
						<div class="col-sm-4">
							<div
								class="d-flex flex-column justify-content-start gap-6 bg-body rounded-3 p-4 p-md-6 p-xl-8 h-100"
							>
								<div
									class="d-grid place-content-center w-9 h-9 rounded-circle bg-primary-subtle text-primary-emphasis fs-14 fw-semibold"
								>
									03
								</div>
								<p class="mb-0 fw-semibold text-heading">
									التحقق من هويتك
								</p>
							</div>
						</div>
					</div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="411"
						height="456"
						viewBox="0 0 411 456"
						fill="none"
						class="position-absolute z-n1 top-4 start-4"
					>
						<path
							fill-rule="evenodd"
							clip-rule="evenodd"
							d="M262.402 128.435C381.305 -9.71359 497.341 194.632 319.704 227.73C497.341 262.268 379.873 465.174 262.402 327.024C322.569 499.71 89.0618 498.272 149.23 327.024C30.3268 465.174 -85.7107 262.268 91.927 227.73C-87.1433 194.632 30.3268 -8.27457 149.23 128.435C87.6293 -42.8118 322.569 -42.8118 262.402 128.435ZM205.099 201.828C219.426 201.828 232.318 213.34 232.318 227.73C232.318 242.121 219.426 255.073 205.099 255.073C190.774 255.073 179.312 242.121 179.312 227.73C179.312 213.34 190.774 201.828 205.099 201.828Z"
							fill="#F3EAFC"
						/>
					</svg>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="912"
						height="962"
						viewBox="0 0 912 962"
						fill="none"
						class="position-absolute z-n1 end-0 bottom-0"
					>
						<g filter="url(#filter0_f_8073_1884)">
							<path
								d="M834.091 503.3C878.986 441.838 942.876 300 1030.21 300C1103.3 300 1090.96 513.811 963.36 691.108C667.875 1036.14 450.745 1052 254.626 1052C58.5073 1052 -26 952.451 -26 890.989C-26 829.526 33.0707 742.059 352.062 742.059C671.05 742.059 789.196 564.763 834.091 503.3Z"
								fill="#6328FF"
								fill-opacity="0.4"
							/>
						</g>
						<defs>
							<filter
								id="filter0_f_8073_1884"
								x="-326"
								y="0"
								width="1701"
								height="1352"
								filterUnits="userSpaceOnUse"
								color-interpolation-filters="sRGB"
							>
								<feFlood flood-opacity="0" result="BackgroundImageFix" />
								<feBlend
									mode="normal"
									in="SourceGraphic"
									in2="BackgroundImageFix"
									result="shape"
								/>
								<feGaussianBlur
									stdDeviation="150"
									result="effect1_foregroundBlur_8073_1884"
								/>
							</filter>
						</defs>
					</svg>
					<div
						class="authentication-page__glass-container d-flex position-absolute inset-0 z-n1"
					>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
						<div class="authentication-page__glass"></div>
					</div>
				</div>
			</div>
			<div class="col-xl-6 authentication-page__right">
				<div class="authentication-page__right-content">
					<p class="mb-2 text-heading fw-semibold fs-18">مرحباً !</p>
					<h4>قم بتسجيل الدخول إلى</h4>
					<p class="mb-0">ابدأ مع 10000 كلمة مجانية</p>
					<div class="section-space-xsm-y">
						<form action="#" class="row g-4 align-items-center">
							<div class="col-12">
								<input
									type="email"
									class="form-control"
									placeholder="بريد إلكتروني"
								/>
							</div>
							<div class="col-12">
								<input
									type="password"
									class="form-control"
									placeholder="كلمة المرور"
								/>
							</div>
							<div class="col-sm-6">
								<div
									class="form-check form-check--primary form-check-modifier"
								>
									<input
										class="form-check-input"
										type="checkbox"
										value=""
										id="remember-me"
									/>
									<label class="form-check-label" for="remember-me">
										تذكرنى
									</label>
								</div>
							</div>
							<div class="col-sm-6 text-sm-end">
								<a
									href="#"
									class="link d-inline-block text-body hover:text-primary"
									>هل نسيت كلمة السر ؟</a
								>
							</div>
							<div class="col-12">
								<button
									type="button"
									class="btn btn-primary w-100 justify-content-center"
								>
									تسجيل الدخول الآن
								</button>
							</div>
						</form>
					</div>
					<div class="overflow-hidden text-center">
						<span
							class="d-inline-block position-relative fs-14 z-1 text-splash text-splash--dark-subtle"
						>
							أو تسجيل الدخول باستخدام
						</span>
					</div>
					<ul class="list list-row justify-content-center flex-wrap gap-4 my-4">
						<li>
							<button
								type="button"
								class="btn btn-light shadow align-items-center"
							>
								<iconify-icon
									icon="logos:facebook"
									class="align-middle fs-20 flex-shrink-0"
								></iconify-icon>
								<span class="d-inline-block fs-14 fw-medium flex-grow-1">
									فيسبوك
								</span>
							</button>
						</li>
						<li>
							<button
								type="button"
								class="btn btn-light shadow align-items-center"
							>
								<iconify-icon
									icon="logos:google-icon"
									class="align-middle fs-20 flex-shrink-0"
								></iconify-icon>
								<span class="d-inline-block fs-14 fw-medium flex-grow-1">
									جوجل
								</span>
							</button>
						</li>
						<li>
							<button
								type="button"
								class="btn btn-light shadow align-items-center"
							>
								<iconify-icon
									icon="logos:apple"
									class="align-middle fs-20 flex-shrink-0"
								></iconify-icon>
								<span class="d-inline-block fs-14 fw-medium flex-grow-1">
									تفاحة
								</span>
							</button>
						</li>
					</ul>
					<p class="mb-0 text-center">
						ليس لديك حساب؟
						<a
							href="{{root}}sign-up-1-rtl.html"
							class="link d-inline-block fw-medium text-primary hover:text-primary-emphasis"
							>يسجل</a
						>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock %}