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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="w-full lg:max-w-4xl px-4 sm:px-6 lg:px-0 lg:w-11/12 mx-auto py-20" style="min-height: 36rem;">
        <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 lg:gap-6">
            <div class="e-card e-bigger rounded-lg w-full sm:w-3/6 justify-start">
                <div class="e-card-header items-center !w-full">
                    <span class="e-avatar e-avatar-large e-icons e-group-icon e-avatar-circle text-primary-600 bg-primary-100" aria-label="smart home icon"></span>
                    <div class="e-card-header-caption !pl-3">
                        <div class="e-card-header-title">
                            <p class="text-lg font-semibold text-gray-950 dark:text-gray-50">Amazing Destinations</p>
                        </div>
                        <div class="e-card-sub-title !text-wrap">
                            <p class="text-sm text-gray-700 dark:text-gray-300">Stunning locations for your next adventure.</p>
                        </div>
                    </div>
                </div>
                <div class="e-card-content">
                    <div class="mt-2 mb-2">
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Benefits</h2>
                        <ul class="flex flex-col gap-3 mt-4">
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Enjoy breathtaking landscapes and views.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Immerse yourself in unique local traditions.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Engage in exciting outdoor activities.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Find serene locations perfect for unwinding.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Authentic dishes from various regions.</li>
                        </ul>
                    </div>
                </div>
                <div class="e-card-actions leading-9">
                    <button ejs-button class="e-primary e-outline w-full" content="Get Started Now" iconCss="e-icons e-chevron-right-double" iconPosition="right" type="button" aria-label="get started now" role="button"></button>
                </div>
            </div>
            <div class="e-card e-bigger rounded-lg w-full sm:w-3/6 justify-start">
                <div class="e-card-header items-center !w-full">
                    <span class="e-avatar e-avatar-large e-icons e-group-icon e-avatar-circle text-primary-600 bg-primary-100" aria-label="smart home icon"></span>
                    <div class="e-card-header-caption !pl-3">
                        <div class="e-card-header-title">
                            <p class="text-lg font-semibold text-gray-950 dark:text-gray-50">Smart Home</p>
                        </div>
                        <div class="e-card-sub-title !text-wrap">
                            <p class="text-sm text-gray-700 dark:text-gray-300">Deliver personalised experiences at scale.</p>
                        </div>
                    </div>
                </div>
                <div class="e-card-content">
                    <div class="mt-2 mb-2">
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Benefits</h2>
                        <ul class="flex flex-col gap-3 mt-4">
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Protect your home with advanced security.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Control devices remotely with ease.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Optimize energy use and reduce utility bills.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Lighting and settings to your preferences.</li>
                            <li class="flex items-center gap-3 text-base text-gray-700 dark:text-gray-300"><span class="e-icons e-circle-check text-green-700 dark:text-green-500 mt-1"></span>Connect and manage various smart devices.</li>
                        </ul>
                    </div>
                </div>
                <div class="e-card-actions leading-9">
                    <button ejs-button class="e-primary e-outline w-full" content="Get Started Now" iconCss="e-icons e-chevron-right-double" iconPosition="right" type="button" aria-label="get started now" role="button"></button>
                </div>
            </div>
        </div>
    </div>
</section>

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

<section class="bg-dark-subtle">
    <div class="container-xxl px-3 px-sm-4 mx-auto py-5" style="min-height: 36rem;">
        <div class="row justify-content-center g-xl-5 g-4 e-bigger w-full">
            <div class="col-sm-6 col-lg-5 col-xl-4">
                <div class="e-card e-bigger shadow p-2 h-100 justify-content-start">
                    <div class="e-card-header align-items-center mb-2">
                        <span class="e-avatar e-avatar-large e-icons e-group-icon e-avatar-circle text-primary-emphasis bg-body-tertiary" aria-label="amazing destinations icon"></span>
                        <div class="e-card-header-caption">
                            <div class="e-card-header-title text-body">
                                <p class="h6 fw-bold mb-0 text-truncate">Amazing Destinations</p>
                            </div>
                            <div class="e-card-sub-title text-secondary text-wrap">
                                <p class="small mb-0">Stunning locations for your next adventure</p>
                            </div>
                        </div>
                    </div>
                    <div class="e-card-content">
                        <div class="my-2">
                            <h2 class="fs-6 fw-bolder mb-3">Benefits</h2>
                            <ul class="d-flex flex-column gap-2 m-0 p-0 text-body">
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Enjoy breathtaking landscapes and views.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Immerse yourself in unique local traditions.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Engage in exciting outdoor activities.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Find serene locations perfect for unwinding.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Authentic dishes from various regions.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="e-card-actions lh-lg">
                        <button ejs-button class="e-primary e-outline e-block" content="Get Started Now" iconCss="e-icons e-chevron-right-double fs-6" iconPosition="right" type="button" aria-label="get started now" role="button"></button>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-5 col-xl-4">
                <div class="e-card shadow p-0 p-2 h-100 justify-content-start">
                    <div class="e-card-header align-items-center mb-2">
                        <span class="e-avatar e-avatar-large e-icons e-group-icon e-avatar-circle text-primary-emphasis bg-body-tertiary" aria-label="amazing destinations icon"></span>
                        <div class="e-card-header-caption">
                            <div class="e-card-header-title text-body">
                                <p class="h6 fw-bold mb-0 text-truncate">Smart Home</p>
                            </div>
                            <div class="e-card-sub-title text-secondary text-wrap">
                                <p class="small mb-0">Deliver personalised experiences at scale.</p>
                            </div>
                        </div>
                    </div>
                    <div class="e-card-content">
                        <div class="my-2">
                            <h2 class="fs-6 fw-bolder mb-3">Benefits</h2>
                            <ul class="d-flex flex-column gap-2 m-0 p-0 text-body">
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Protect your home with advanced security.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Control devices remotely with ease.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Optimize energy use and reduce utility bills.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Lighting and settings to your preferences.</li>
                                <li class="d-flex align-items-start gap-2 fs-6 m-0"><span class="e-icons e-circle-check text-success my-1"></span>Connect and manage various smart devices.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="e-card-actions lh-lg">
                        <button ejs-button class="e-primary e-outline e-block" content="Get Started Now" iconCss="e-icons e-chevron-right-double fs-6" iconPosition="right" type="button" aria-label="get started now" role="button"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

}