@if (currentTheme === 'tailwind') {

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="flex flex-col lg:flex-row mx-auto p-0">
        <div class="w-full lg:w-7/12 px-6 py-14 bg-green-600 text-white flex items-center" style="background-image: url('assets/images/authentication/feature-list/feature-list.png'); background-size: cover; background-repeat: no-repeat;">
            <div class="flex flex-wrap mx-0 w-full sm:p-6 xl:p-0 md:p-8 lg:px-6">
                <div class="hidden xl:block xl:w-1/6"></div>
                <div class="w-full xl:w-2/3">
                    <h1 class="font-bold xl:text-5xl md:text-4xl text-3xl">Welcome to our design system</h1>
                    <p class="my-6 md:text-lg text-base">The Tailwind Design System helps developers build organized and well-coded dashboards full of beautiful and rich modules. Join us and start building your application today.</p>
                    <ul class="list-none md:text-lg text-base">
                        <li class="flex items-center gap-3 mb-3">
                            <span class="e-icons e-circle-check text-xl" aria-hidden="true"></span>
                            <span>70+ components</span>
                        </li>
                        <li class="flex items-center gap-3 mb-3">
                            <span class="e-icons e-circle-check text-xl" aria-hidden="true"></span>
                            <span>Light and dark themes supported</span>
                        </li>
                        <li class="flex items-center gap-3 mb-3">
                            <span class="e-icons e-circle-check text-xl" aria-hidden="true"></span>
                            <span>100% automatic layouts</span>
                        </li>
                        <li class="flex lg:items-start gap-3 mb-3">
                            <span class="e-icons e-circle-check text-xl" aria-hidden="true"></span>
                            <span>200+ reusable blocks to build templates easily</span>
                        </li>
                    </ul>
                </div>
                <div class="hidden xl:block xl:w-1/6"></div>
            </div>
        </div>
        <div class="w-full lg:w-5/12">
            <div class="bg-gray-50 dark:bg-gray-950">
                <div class="flex items-center justify-center">
                    <div class="w-full max-w-md rounded-lg px-4 py-14 md:px-6 md:py-14">
                        <div class="flex justify-center mb-6">
                            <img class="mr-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                            <h2 class="text-center text-gray-900 dark:text-white text-xl font-semibold">Company Name</h2>
                        </div>
                        <h2 class="text-2xl font-semibold text-gray-900 dark:text-white text-center mb-2">Sign in</h2>
                        <p class="text-md text-center text-gray-700 dark:text-gray-300">Enter your credentials to sign in</p>
                        <form action="#" class="mt-6 mb-6" onsubmit="event.preventDefault();">
                            <div class="mb-4">
                                <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                                <ejs-textbox class="py-2 e-bigger" type="email" placeholder="Email" floatLabelType="Never" aria-label="enter your email address" role="textbox"></ejs-textbox>
                            </div>
                            <div class="mb-5 relative">
                                <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                                <ejs-textbox class="py-2 e-bigger bg-none" type="password" placeholder="Password" floatLabelType="Never" aria-label="enter your email password" role="textbox"></ejs-textbox>
                            </div>
                            <div class="flex items-center justify-between mb-6">
                                <ejs-checkbox cssClass="e-bigger" label="Remember me" aria-label="remember me" role="checkbox"></ejs-checkbox>
                                <a href="javascript:void(0);" class="text-primary-600 dark:text-primary-400 font-medium text-base" style="padding-right: 0 !important;" aria-label="forgot password" role="link">Forgot password?</a>
                            </div>
                            <div class="e-bigger mt-6">
                                <button ejs-button class="w-full e-primary e-btn" type="submit" aria-label="sign in" role="button">Sign in</button>
                            </div>
                        </form>
                        <div>
                            <span class="flex items-center justify-center gap-2">
                                <p class="text-center text-base text-gray-900 dark:text-white">Don't have an account yet?</p>
                                <a href="javascript:void(0);" class="text-primary-600 dark:text-primary-400 font-medium text-base p-0" aria-label="sign up" role="link">Sign up</a>
                            </span>
                            <div class="relative flex justify-center items-center mt-10">
                                <span class="bg-gray-50 dark:bg-gray-950 px-2 z-10 absolute text-sm text-gray-700 dark:text-gray-300">Or continue with</span>
                                <hr class="w-full absolute border-gray-200 dark:border-gray-600" />
                            </div>
                            <div class="flex items-center justify-center mt-10 gap-3 flex-col">
                                <button ejs-button class="w-full flex items-center justify-center px-4 py-2 e-outline" type="submit" aria-label="sign in with google account" role="button">
                                    <img class="w-4" src="assets/images/common/brand-logos/png/google.png" alt="google logo" />
                                    <span class="text-base pl-2.5">Sign in with Google</span>
                                </button>
                                <button ejs-button class="w-full flex items-center justify-center px-4 py-2 e-outline" type="submit" aria-label="sign in with microsoft account" role="button">
                                    <img class="w-4" src="assets/images/common/brand-logos/png/microsoft.png" alt="microsoft logo" />
                                    <span class="text-base pl-2.5">Sign in with Microsoft</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section class="container-fluid d-md-flex d-block flex-wrap mx-auto p-0">
    <div class="col-12 col-lg-7 d-flex align-items-center bg-success p-4 p-lg-4" style="background-image: url('assets/images/authentication/feature-list/feature-list.png'); background-size: cover; background-repeat: no-repeat;">
        <div class="row mx-0 w-100 py-5">
            <div class="col-xl-2 d-lg-block"></div>
            <div class="col-xl-8">
                <h1 class="fw-bold display-6 text-light">Welcome to our design system</h1>
                <p class="my-4 fw-normal text-light m-0">The Bootstrap Design System helps developers build organized and well-coded dashboards full of beautiful and rich modules. Join us and start building your application today.</p>
                <ul class="list-unstyled text-light">
                    <li class="d-flex align-items-center gap-3 mb-3 fw-normal"><span class="e-icons e-circle-check fs-5"></span>70+ components</li>
                    <li class="d-flex align-items-center gap-3 mb-3 fw-normal"><span class="e-icons e-circle-check fs-5"></span>Light and dark themes supported</li>
                    <li class="d-flex align-items-center gap-3 mb-3 fw-normal"><span class="e-icons e-circle-check fs-5"></span>100% automatic layouts</li>
                    <li class="d-flex align-items-start gap-3 mb-3 fw-normal"><span class="e-icons e-circle-check fs-5 mt-1"></span>200+ reusable blocks to build templates easily</li>
                </ul>
            </div>
            <div class="col-xl-2 d-lg-block"></div>
        </div>
    </div>
    <div class="col-12 col-lg-5 p-0">
        <div class="d-flex justify-content-center align-items-center bg-body">
            <div class="max-w-lg bg-body rounded-lg p-4 p-md-5 w-100" style="max-width: 508px;">
                <div class="d-flex justify-content-center align-items-center mb-4">
                    <img class="me-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    <h5 class="text-center fw-bold mb-0 fs-5 text-body">Company Name</h5>
                </div>
                <div class="mb-4 text-center">
                    <h4 class="fw-bold text-body fs-4 mb-2">Sign in</h4>
                    <p class="text-center text-light-emphasis">Enter your credentials to sign in</p>
                </div>
                <form action="#" onsubmit="event.preventDefault();">
                    <div class="mb-3">
                        <label class="form-label fw-medium text-dark-emphasis small">Email</label>
                        <ejs-textbox class="e-bigger py-2" type="email" placeholder="Email" floatLabelType="Never" aria-label="enter your email address" role="textbox"></ejs-textbox>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium text-dark-emphasis small">Password</label>
                        <ejs-textbox class="e-bigger py-2" type="password" placeholder="Password" floatLabelType="Never" aria-label="enter your email password" role="textbox"></ejs-textbox>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <ejs-checkbox cssClass="e-bigger" label="Remember me" aria-label="remember me" role="checkbox"></ejs-checkbox>
                        <a href="javascript:void(0);" class="text-primary fs-6 fw-medium text-decoration-none" style="padding-right: 0 !important; padding-top: 4px !important;" aria-label="forgot password" role="link">Forgot password?</a>
                    </div>
                    <div class="mt-4 e-bigger">
                        <button ejs-button class="e-btn e-block e-primary" type="submit" aria-label="sign in" role="button">Sign in</button>
                    </div>
                </form>
                <div class="d-flex flex-wrap align-items-center justify-content-center mt-3 gap-1">
                    <p class="text-body w-sm-auto m-0">Don't have an account yet?</p>
                    <a href="javascript:void(0);" class="text-primary fs-6 fw-medium px-0 fs-6 text-decoration-none" aria-label="sign up" role="link">Sign up</a>
                </div>
                <div>
                    <div class="d-flex justify-content-center align-items-center position-relative mt-3">
                        <span class="bg-body px-2 z-1 position-absolute text-light-emphasis small">Or continue with</span>
                        <hr class="w-100 border-light-subtle opacity-100" />
                    </div>
                    <div class="d-flex flex-column mt-3 align-items-center justify-content-center gap-3">
                        <button ejs-button class="e-btn e-outline e-block d-flex align-items-center justify-content-center px-3 py-2" type="submit" aria-label="sign in with google account" role="button">
                            <img src="assets/images/common/brand-logos/png/google.png" width="24px" alt="google logo" />
                            <span class="fs-6 fw-medium" style="padding-left: 8px;">Sign in with Google</span>
                        </button>
                        <button ejs-button class="e-btn e-outline e-block d-flex align-items-center justify-content-center px-3 py-2" type="submit" aria-label="sign in with microsoft account" role="button">
                            <img src="assets/images/common/brand-logos/png/microsoft.png" width="24px" alt="microsoft logo" />
                            <span class="fs-6 fw-medium" style="padding-left: 8px;">Sign in with Microsoft</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

}