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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="py-20">
        <div class="text-center">
            <h1 class="text-4xl font-bold text-gray-900 dark:text-white">Pricing Plans</h1>
            <p class="mt-4 px-4 text-lg font-normal mb-8 sm:max-w-xl lg:max-w-full w-full mx-auto text-center text-gray-700 dark:text-gray-200">
                Get started in complete confidence. Our 30-day money-back guarantee means it’s risk-free.
            </p>
            <div class="flex items-center justify-center gap-3 mb-12 text-base font-medium text-gray-700 dark:text-gray-200">
                <p>Monthly</p>
                <ejs-switch style="width: 44px !important;" cssClass="e-bigger" [checked]="true" aria-label="switch between monthly and yearly pricing plans" role="switch"></ejs-switch>
                <p>Yearly</p>
            </div>
        </div>
        <div class="flex justify-center px-4">
            <div
                class="border text-gray-900 dark:text-white mx-4 md:mx-6 rounded-3xl overflow-hidden shadow-none bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-600 hover:border-primary-600 dark:hover:border-primary-400"
            >
                <div class="flex flex-col sm:flex-row">
                    <div class="sm:w-4/5 pt-8 px-6 mb-12 md:mb-0">
                        <h2 class="text-2xl font-medium mb-2">Lifetime Membership</h2>
                        <div class="text-base lg:pr-16">
                            <p class="mb-5 text-gray-700 dark:text-gray-200 text-base font-normal">A great solution for beginners</p>
                            <p class="text-base font-normal">Create one end product for a client, transfer that end product to your client, charge them for your services.</p>
                        </div>
                    </div>
                    <div class="bg-gray-100 dark:bg-gray-800 px-6 py-8 sm:w-96 border-gray-200 dark:border-gray-600 grow">
                        <div class="text-center">
                            <span class="text-5xl font-bold leading-tight text-gray-900 dark:text-white mr-2">$149</span>
                            <span class="text-3xl font-normal text-gray-700 dark:text-gray-200 line-through">$599</span>
                            <div class="text-base mt-2">
                                <p class="mb-6 text-base font-normal text-gray-700 dark:text-gray-200">per month $1,788 billed yearly</p>
                                <p class="mb-8 max-w-48 mx-auto text-base font-normal text-gray-700 dark:text-gray-200">
                                    No monthly subscription, you only pay once.
                                </p>
                                <button ejs-button class="e-primary w-full text-lg" content="Choose a plan" type="button" aria-label="choose a plan" role="button"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

<section class="bg-body">
    <div class="mx-auto py-5">
        <div class="text-center mb-5 px-3">
            <h1 class="fw-bold mb-3 text-body">Pricing Plans</h1>
            <p class="mb-4 mx-3 px-1 px-md-5 px-lg-0 text-light-emphasis">Get started in complete confidence. Our 30-day money-back guarantee means it’s risk-free.</p>
            <div class="d-flex justify-content-center align-items-center gap-2 mb-5 pt-2">
                <p class="m-0 small text-light-emphasis">Monthly</p>
                <ejs-switch [checked]="true" style="width: 37px;" aria-label="switch between monthly and yearly pricing plans" role="switch"></ejs-switch>
                <p class="m-0 small text-light-emphasis">Yearly</p>
            </div>
        </div>
        <div class="px-md-4 px-xl-5 px-3">
            <div class="d-flex flex-column flex-sm-row border border-secondary-subtle rounded-4 overflow-hidden mx-xxl-5">
                <div class="col-sm-7 col-lg-8 pt-4 pb-5 px-3 px-md-4">
                    <h4 class="mb-1 text-body fw-bold">Lifetime Membership</h4>
                    <p class="mb-3 text-light-emphasis">A great solution for beginners</p>
                    <div class="row">
                        <span class="fs-6 col-xl-10 col-lg-11 pe-lg-0 text-body">Create one end product for a client, transfer that end product to your client, charge them for your services.</span>
                    </div>
                </div>
                <div class="bg-body-tertiary col-sm-5 col-lg-4 px-4 py-4 flex-grow-1">
                    <div class="text-center mb-1">
                        <div class="mb-2 d-flex justify-content-center">
                            <h1 class="mb-0 me-2 fw-bold text-body">$149</h1>
                            <h4 class="fw-normal text-body-tertiary text-decoration-line-through align-self-end mb-1">
                                $599
                            </h4>
                        </div>
                        <p class="mb-4 text-light-emphasis">per month $1,788 billed yearly</p>
                        <span class="d-block mb-4">
                            <p class="mb-0 px-5 px-md-4 px-lg-5 text-light-emphasis">No monthly subscription, you only pay once.</p>
                        </span>
                        <div class="e-bigger">
                            <button ejs-button class="e-primary e-block" type="button" aria-label="choose a plan" role="button">Choose a plan</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

}