<div class="wpgmza-demo-showcase-grid wpgmza-pad-10">
    <div class="wpgmza-demo-showcase-title"><?php _e("Map Demos", "wp-google-maps"); ?></div>
    <div class="wpgmza-grid wpgmza-grid-cols-6">
        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/atlas-novus/custom-markers.webp'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Advanced Markers", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version wpgmza-demo-showcase-version-pro"><?php _e("Pro Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Create custom markers with detailed info windows.", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/demo-default-classic-info-window/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-advanced-markers-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/atlas-novus/marker-icons.webp'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Marker Icons", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version wpgmza-demo-showcase-version-pro"><?php _e("Pro Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Create new marker icons in minutes!", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/basic-map-and-markers/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-marker-icons-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/atlas-novus/directions.webp'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Get Directions", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version wpgmza-demo-showcase-version-pro"><?php _e("Pro Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Allow your visitors to get directions to your markers.", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/directions/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-directions-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image wpgmza-demo-showcase-fill-scale">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/unlimited-markers.png'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Unlimited Markers", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version"><?php _e("Basic Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Create as many markers as you like!", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/basic-google-map-with-markers/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-unlimited-markers-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image wpgmza-demo-showcase-fill-scale">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/store-locator.png'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Store Locator", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version"><?php _e("Basic Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Get users to your store, quickly and easily!", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/wp-google-maps-store-locator-free-version/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-store-locator-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image wpgmza-demo-showcase-fill-scale">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/store-locator.png'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Store Locator", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version wpgmza-demo-showcase-version-pro"><?php _e("Pro Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Get users to your store, quickly and easily!", "wp-google-maps"); ?></div>

            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/store-locator/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-store-locator-pro-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image wpgmza-demo-showcase-fill-scale">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/themes.png'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Themes", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version"><?php _e("Basic Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Select from various map themes!", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/map-themes/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-mapthemes-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/atlas-novus/heatmaps.jpg'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("Add Heatmaps", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version wpgmza-demo-showcase-version-pro"><?php _e("Pro Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Create dynamic heatmaps quickly!", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/heatmaps-demo/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-heatmaps-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>

        <div class="wpgmza-card wpgmza-shadow-high wpgmza-demo-showcase-card" data-demo-showcase>
            <div class="wpgmza-demo-showcase-image">
                <img src='<?php echo WPGMZA_PLUGIN_DIR_URL . 'images/atlas-novus/marker-listing.webp'; ?>' />
            </div>

            <div class="wpgmza-demo-showcase-title"><?php _e("List Your Markers", "wp-google-maps"); ?><span class="wpgmza-demo-showcase-version wpgmza-demo-showcase-version-pro"><?php _e("Pro Demo", "wp-google-maps"); ?></span></div>
            <div class="wpgmza-demo-showcase-description"><?php _e("Add marker listings to your maps!", "wp-google-maps"); ?></div>
            
            <div class="wpgmza-demo-showcase-link-wrapper">
                <a class='wpgmza-button wpgmza-button-call-to-action' href="https://www.wpgmaps.com/demo/map-with-marker-listing-modern/?utm_source=plugin&amp;utm_medium=link&amp;utm_campaign=maplist-demo-marker-listing-atlas-novus-v10" target="_BLANK">
                    <?php _e("View Demo", "wp-google-maps"); ?>
                </a>
            </div>
        </div>
    </div>
</div>