{% assign hero_terminal = "" %}
{% capture hero_terminal %}{% picture open_graph pages/{{ page.hero_section.i_banner_img }} %}{% endcapture %}

<div class="hero is-container has-bg-grey">
    <div class="left">
        <div class="hero_container">
            <h1 data-sal="fade" data-sal-duration="500" data-sal-ease="ease-in-out">{{ page.hero_section.t_title }}</h1>
            <p data-sal="fade" data-sal-duration="500" data-sal-ease="ease-in-out">{{ page.hero_section.t_subtitle }}
            </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.hero_section.i_product_id}}"
                    onclick="addToCartBundle(event)" class="is-button primary-button">Buy Now!</a>
                <a data-modal=".modal_credit_hero" class="modal-trigger is-button is-purple ghost-button">{{
                    page.hero_section.t_button_1 }}</a>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="pos-hero-image">
            <h1 data-sal="fade" data-sal-delay="1000" data-sal-duration="500">Plum POS</h1>
            <div data-sal="fade" data-sal-delay="1000" data-sal-duration="500" data-sal-ease="ease-in-out"
                class="pos-hero-animate">
                <lottie-player style="width: 100%; height: 100%" background="transparent"
                    id="plum" src="{{ site.url }}/assets/pos-terminal/terminal-frames.json"
                    background="transparent"></lottie-player>
            </div>
            <h2 data-sal="fade" data-sal-delay="1000" data-sal-duration="500">$999.99</h2>
        </div>
    </div>
    <div class="modal modal_credit_hero">
        <div class="modal_transparent_layer modal-close"></div>
        <div class="modal_content">
            <span class="close modal-close">×</span>
            <div class="modal_content_data">
                {{page.hero_section.t_learn_more}}
            </div>
        </div>
    </div>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script>
    LottieInteractivity.create({
        player: '#plum',
        mode: 'chain',
        actions: [
            {
                state: 'loop',
                position: { x: [0, 1], y: [-1, 2] },
                transition: 'seek',
                frames: [0, 390],
                speed: 1.75
            },
        ]
    });
</script>