    <div class="mainWrapper landing-page">


        <!-- Hero section -->
        <div class="hero-wrap">
            <div class="container hero-inner">
                <div class="row align-items-center">
                    <div class="col-lg-6 order-2 order-lg-1 text-center text-lg-left">

                        <div class="hero-badge">
                            <i class="fa fa-magic" aria-hidden="true"></i>
                            <span><?= !empty($home) ? html_escape($home['heading']) : 'Create Your space  With '; ?></span>
                        </div>


                        <div class="dz-styleTitle">
                            <div class="w-fit relative">
                                <h2 class="hero-title-gold"><?= html_escape($settings['site_name']); ?></h2>
                                <svg class="style-shape" viewBox="0 0 400 12" fill="none" preserveAspectRatio="none">
                                    <path d="M2 8 C 80 2, 160 12, 240 6 S 380 2, 398 8" stroke="var(--primaryColor)" stroke-width="3" stroke-linecap="round" class="animate-brush"></path>
                                </svg>
                            </div>
                        </div>

                        <p class="hero-cats d-none"><?= !empty($settings['app_slogan']) ? html_escape($settings['app_slogan']) : 'Restaurant • Café • Bakery • Supermarket • Online Store'; ?></p>

                        <p class="hero-desc text-lg-left mx-auto mx-lg-0">
                            <?= !empty($home) ? html_escape($home['sub_heading']) : 'Create The Great First Impression'; ?>
                        </p>

                        <div class="hero-bottom-action">
                            <?php if (isset($settings['restaurant_demo'])  && !empty($settings['restaurant_demo'])) : ?>
                                <a class="btn live-demo-btn" href="<?= base_url($settings['restaurant_demo']); ?>">
                                    <i class="fa fa-play mr-2" aria-hidden="true"></i><?= lang('restaurant_demo'); ?>
                                </a>
                            <?php endif; ?>
                            <?php if (!empty(section_name('pricing')) && $settings['is_registration'] == 1) : ?>
                                <a class="btn" href="<?= base_url('pricing') ?>">
                                    <i class="fa fa-play-circle mr-2" aria-hidden="true"></i> <?= lang('get_start'); ?>
                                </a>
                            <?php endif; ?>
                        </div>

                        <div class="row hero-features justify-content-center justify-content-lg-start text-left">
                            <div class="col-auto mb-2 mb-md-0">
                                <div class="hero-feature-item">
                                    <i class="fa fa-shield" aria-hidden="true"></i><span><?= __('contact_less'); ?></span>
                                </div>
                            </div>
                            <div class="col-auto mb-2 mb-md-0">
                                <div class="hero-feature-item">
                                    <i class="fa fa-clock-o" aria-hidden="true"></i><span><?= __('setup_in_minutes'); ?></span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="hero-feature-item">
                                    <i class="fa fa-bolt" aria-hidden="true"></i><span><?= __('24_support'); ?></span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-6 order-1 order-lg-2">
                        <div class="phone-container">
                            <div class="phone-frame">
                                <div class="phone-inner">
                                    <div class="demoIframe">
                                        <div class="iphone-slider">
                                            <div class="iphone-slider-inner">
                                                <?php for ($i = 1; $i <= 6; $i++): ?>
                                                    <div class="iphone-slide <?= $i === 1 ? 'active' : '' ?>" data-slide="<?= $i ?>">
                                                        <img src="<?= asset_url('assets/frontend/images/slider/slider_' . $i . '.png') ?>" alt="App Screenshot <?= $i ?>">
                                                    </div>
                                                <?php endfor; ?>
                                            </div>
                                            <div class="iphone-slider-dots">
                                                <?php for ($i = 1; $i <= 6; $i++): ?>
                                                    <span class="dot <?= $i === 1 ? 'active' : '' ?>" data-slide="<?= $i ?>"></span>
                                                <?php endfor; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- col-6 -->
                </div><!-- row -->
            </div><!-- container -->
            <div class="bottomShape">
                <svg viewBox="0 0 1440 80" fill="none" class="w-full h-auto block mkt-wave-svg">
                    <path d="M0 40C240 80 480 0 720 40C960 80 1200 0 1440 40V80H0V40Z" fill="var(--body-color)"></path>
                </svg>
            </div>
        </div><!-- hero-wrap -->


        <div class="step_1 p-r">
            <div class="loader"></div>
            <!-- popular shop -->
            <!-- popular item -->
            <!-- how it works -->
        </div>

        <div class="step_2 p-r">
            <div class="loader"></div>
            <!-- left/right features -->
            <!-- FAQ -->
            <!-- services -->
            <!-- team -->
            <!-- pricing -->
        </div>


        <div class="cookie-container">
            <p>
                <?= lang('cookies_msg_1'); ?>
                <?= lang('cookies_msg_2'); ?>
                <a href="<?= base_url('cookies-privacy') ?>"><?= lang('cookies_privacy'); ?></a>
            </p>

            <button class="cookie-btn">
                <?= lang('ok'); ?>
            </button>
        </div>


        <script>
            $(document).ready(function() {

                // Show the loader
                $('.loader').show();

                // Load step_1
                $.ajax({
                    url: '<?php echo base_url('home/step_1'); ?>',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.st === 1) {
                            $('.step_1').html(response.load_data);
                            console.log('step_1 loaded');
                            $.ajax({
                                url: '<?php echo base_url('home/step_2'); ?>',
                                type: 'GET',
                                dataType: 'json',
                                success: function(response) {
                                    if (response.st === 1) {
                                        $('.step_2').html(response.load_data);
                                    }
                                    console.log('step_2 loaded');
                                    $('.loader').hide();
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error loading step_2:', error);
                                    $('.loader').hide();
                                }
                            });
                        } else {
                            $('.loader').hide();
                        }


                        init();


                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading step_1:', error);
                        $('.loader').hide();
                    }


                });
            });

            function init() {

                $(document).on("click", ".page_accordion_header", function() {
                    $(this).toggleClass("active").next().slideToggle(300);
                    $(this).toggleClass('arrow_up').toggleClass('arrow_down');
                });




            }
        </script>

        <script>
            (function() {
                const slides = document.querySelectorAll('.iphone-slide');
                const dots = document.querySelectorAll('.iphone-slider-dots .dot');
                let currentSlide = 0;
                const totalSlides = slides.length;

                function showSlide(index) {
                    slides.forEach(slide => slide.classList.remove('active'));
                    dots.forEach(dot => dot.classList.remove('active'));

                    slides[index].classList.add('active');
                    dots[index].classList.add('active');
                }

                function nextSlide() {
                    currentSlide = (currentSlide + 1) % totalSlides;
                    showSlide(currentSlide);
                }

                // Auto slide every 3 seconds
                setInterval(nextSlide, 3000);

                // Dot click handlers
                dots.forEach((dot, index) => {
                    dot.addEventListener('click', () => {
                        currentSlide = index;
                        showSlide(currentSlide);
                    });
                });
            })();
        </script>