{% assign hero_terminal = "" %}
{% capture hero_terminal %}{% picture open_graph pages/{{ page.banner.i_home_bg }} %}{% endcapture %}

<div class="hero is-container">
    <div class="left">
        <div class="hero_container">
            <h1 data-sal="fade" data-sal-duration="500" data-sal-ease="ease-in-out">Everything You Need To Run Your
                <div class="restaurant-container-wrapper">
                    <a class="restaurant-item">Fast Food</a>
                    <a class="restaurant-item">Coffee Shop</a>
                    <a class="restaurant-item">Bakery</a>
                    <a class="restaurant-item">Full Service</a>
                    <a class="restaurant-item">Bar</a>
                    <a class="restaurant-item">Pizzeria</a>
                </div>
            </h1>
            <p data-sal="fade" data-sal-duration="500" data-sal-ease="ease-in-out">Priced to help you make profits while avoiding high processing fees and unnecessary costs, so you can
                focus on what really matters- delivering an exceptional dining experience.</p>
            <div data-sal="fade" data-sal-duration="500" data-sal-ease="ease-in-out" class="hero_container-buttons">
                <a data-productquantity="1" data-quantity="1" data-productid="{{page.banner.i_product_id}}" onclick="addToCartBundle(event)" class="is-button primary-button">Buy Now!</a>
                <a href="{{ site.url }}/schedule-demo.html" class="is-button is-purple ghost-button">Book Demo</a>
            </div>
        </div>
    </div>
    <div class="right">
        <div data-sal="fade" data-sal-duration="500" data-sal-ease="ease-in-out" class="hero__image-container">
            <div class="restaurant-container-wrapper hero__food-container">
                {% for item in page.hero_image %}
                {% assign hero_image = "" %}
                {% capture hero_image %}{% picture open_graph pages/{{ item.i_image }} %}{% endcapture %}
                <img src="{{ hero_image }}" class="restaurant-item restaurant-item-image" alt="{{ item.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
                {% endfor %}
            </div>
            <img class="hero__image" src="{{ hero_terminal }}" alt="{{ page.banner.i_home_bg | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
        </div>
    </div>

</div>