{% assign title = page.title %}
{% assign description = page.description %}
{% assign buttons = page.buttons || [] %}
{% assign logo = page.logo %}

<style>
    #index-banner {
        box-shadow: 0 0 0.2rem rgba(0, 0, 0, .1), 0 0.2rem 0.4rem rgba(0, 0, 0, .2);
    }
</style>

<div class="section" id="index-banner">
    <div class="container">

        <a href="#" data-target="slide-out" class="btn top-nav sidenav-trigger full hide-on-large-only"><i
                class="material-icons">menu</i></a>

        <div class="row" style="margin-bottom: 0;">
            <div class="col s12 m11 offset-m1 xl10 offset-xl1 center-on-small-only">
                <h1 class="header" style="margin-top: 0;">
                    {{page.title}}

                    {% if page.logo %}
                    <img src="{{page.logo}}">
                    {% endif %}
                </h1>
                {% if page.description %}
                <h4 class="light">{{page.description}}</h4>
                {% endif %}

                {% if buttons %}
                <hr style="margin: 1em 0">

                {% for button in buttons %}
                <a href="{{button.link}}" class="waves-effect waves-light btn-large">
                    <i class="{{button.icon}} right"></i>
                    {{button.title}}
                </a>
                {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
</div>