<section>
    <div class="flex-template-dasboard-tab">
        <!-- TOP GRID -->
        <div class="flex-template-dasboard-tab__top-grid">

            <!-- Left Large Card -->
            <div class="flex-template-dasboard-tab__card flex-template-dasboard-tab__card--large">
                <div class="flex-template-dasboard-tab__card-content">
                    <h3 class="flex-wp-xyz-theme py-2">Elementor WordPress Themes</h3>
                    <p class="flex-content-1">
                        Choose from a collection of 14+ professionally crafted themes built for every business niche —
                        from
                        corporate and coaching to eCommerce, creative portfolios, agencies, startups, and more. Each
                        theme
                        is fully customizable with Elementor, responsive across all devices, SEO-friendly, and optimized
                        for
                        performance.
                    </p>
                    <p class="flex-content-1">Launch faster, design smarter, and build stunning websites without
                        touching a single line of
                        code. 🚀
                    </p>
                    <a href="<?php echo esc_url(FLEXIMP_THEMES_URL); ?>" class="btn flex-demo-btn btn-secondary"
                        target="_blank" rel="noopener">
                        EXPLORE ALL PREMIUM THEMES
                    </a>
                </div>

                <div class="flex-template-dasboard-tab__card-image">
                    <img src="<?php echo esc_url(FLEXIMP_PLUGIN_DIR_FILE . 'assets/images/flex-dash-elementor-wordpress-theme.png'); ?>"
                        alt="">
                </div>
            </div>

            <!-- Right Bundle Card -->
            <div class="flex-template-dasboard-tab__card flex-template-dasboard-tab__card--bundle">
                <div class="fleximp-dash-box fleximp-dash-box-8 flex-dashboard-box">
                    <img src="<?php echo esc_url(FLEXIMP_PLUGIN_DIR_FILE . 'assets/images/bundle-banner.png'); ?>"
                        alt="<?php esc_attr_e('Plugin Logo', 'flex-import'); ?>" style="width:100%; height:100%">

                    <h3 class="flex-wp-xyz-theme py-2 text-center">Flex WordPress Theme Bundle </h3>

                    <div class="flex-template-tab-bundle__price">
                        <span>Price:</span>
                        <span class="flex-template-tab-bundle__old-price">$590</span>
                        <span class="flex-template-tab-bundle__new-price">$69</span>
                    </div>
                    <p class="flex-content-1 text-center">
                        Get access to a growing collection of 14+ premium, Elementor-powered WordPress themes designed
                        for all business niches — from startups and agencies to eCommerce, services, and creatives.
                        Fully responsive, highly customizable, and performance-optimized, the Flex Bundle lets you
                        create professional websites faster, without coding.
                    </p>

                    <div>
                        <div class="text-center d-flex flex-wrap justify-content-center gap-2 my-lg-3">

                            <div class="fles-dash-buttons">
                                <?php if (defined('FLEXIMP_UPGRADE_PRO_URL') && FLEXIMP_UPGRADE_PRO_URL): ?>
                                    <a href="<?php echo esc_url(FLEXIMP_UPGRADE_PRO_URL); ?>"
                                        class="btn flex-demo-btn btn-secondary" target="_blank" rel="noopener">
                                        BUY BUNDLE
                                    </a>
                                <?php endif; ?>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- SMALL INFO CARDS -->
            <div class="flex-template-dasboard-tab__info-grid">

                <div class="fleximp-dash-box fleximp-dash-box-4 flex-dashboard-box">
                    <div class="flex-support-div d-flex">

                        <h3 class="flex-support-title">Professional Support</h3>
                    </div>
                    <p class="flex-supoort-description m-0">Access 24/7 direct support from our expert team
                        to resolve any theme-related issues quickly.</p>
                    <a href="https://www.flextheme.net/pages/contact"
                        class="fleximp-dash-btn fleximp-dash-btn-contact flex-demo-btn flex-contact-btn" target="_blank"
                        rel="noopener">Contact
                        Us</a>
                </div>


                <div class="fleximp-dash-box fleximp-dash-box-4 flex-dashboard-box">
                    <div class="flex-support-div d-flex">

                        <h3 class="flex-support-title">Review Us</h3>
                    </div>
                    <p class="flex-supoort-description m-0 flex-space">Share your feedback and help others by
                        leaving a review to improve our products and services.</p>
                    <a href="https://wordpress.org/support/plugin/flex-import/reviews/?filter=5"
                        class="fleximp-dash-btn fleximp-dash-btn-review flex-demo-btn flex-contact-btn" target="_blank"
                        rel="noopener">Review
                        Now</a>
                </div>

            </div>

        </div>



        <!-- BLOG SECTION -->
        <div class="flex-template-dasboard-tab__blog-section">

            <div class="flex-dashboard-blog-box">
                <div class="row">
                    <div class="col-12">
                        <div class="fleximp-dash-box fleximp-dash-box-8">
                            <div class="flex-support-div d-flex">
                                <h3 class="flex-support-title align-self-center">Recent Blogs</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="flex-swipper-nav-btn">
                            <div class="swiper-button-prev"><i class="fa-solid fa-angle-left"></i></div>
                            <div class="swiper-button-next"><i class="fa-solid fa-angle-right"></i></div>
                        </div>
                        <div class="swiper swiper-container-2">
                            <div class="swiper-wrapper">
                                <!-- Dynamic posts will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</section>