{% extends "main.html" %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ 'assets/hero.css' | url }}">
{% endblock %}
{% block hero %}
<section class="hero-container">
    <div class="md-grid md-typeset">
        <div class="mdx-hero">
            <div class="hero-image">
                <img src="assets/owl.svg" alt="Hero Image" draggable="false">
            </div>
            <div class="hero-content">
                <h1>{{ page.meta.hero.title }}</h1>
                <p>{{ page.meta.hero.subtitle }}</p>
                <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | e }}"
                    class="md-button md-button--primary">
                    {{ page.meta.hero.install_button }}
                </a>
                <a href="{{ config.repo_url }}" title="Source code" class="md-button" target="_blank">{{
                    page.meta.hero.source_button
                    }}
                </a>
            </div>
        </div>
    </div>
</section>
{{ super() }}
{% endblock %}