{% extends "default.html" %}
{% block title %}
    {% trans %}Welcome{% endtrans %}
{% endblock %}
{% block breadcrumbs %}
{% endblock %}

{% block nav %}
{% endblock %}

{% block content %}
<style>
    #home-banner {
        background-image: radial-gradient(circle, #2196F3 0%, #1976D2 50%, #0D47A1 100%);
        color: #ffffff;
        height: 100%;
    }

    #home-banner .button {
        background-color: var(--color-accent);
        color: var(--color-accent-text);
        border: none;
    }

    #home-banner a {
        color: inherit;
    }
</style>
<x-hbox id="home-banner" style="justify-content: center; align-items: stretch;">
    <x-frame class="inner" style="--width: 768px; padding: 24px; margin: 0; justify-content: center; display: flex; flex-direction: column;">
        <x-vbox style="justify-content: center; align-items: stretch;">
            <div>
                <h1 class="headline">roundabout-host.com</h1>
                <p>{% trans %}Easy git repository hosting, with free software{% endtrans %}</p>
            </div>

            <x-buttonbox class="box-center">
                <a class="button" href="/accounts">{% trans %}Log in or sign up{% endtrans %}</a>
                <a class="button" href="https://roundabout-host.com/roundabout/roundabout">{% trans %}Download{% endtrans %}</a>
                <p style="opacity: 0.75;">{% trans %}for setting up your own instance{% endtrans %}</p>
            </x-buttonbox>

            <x-hbox>
                <a href="/about">{% trans %}System Info{% endtrans %}</a>
                <a href="/help">{% trans %}Help & FAQ{% endtrans %}</a>
                <a href="mailto:{{ config.CONTACT_EMAIL }}">{% trans %}Contact Us{% endtrans %}</a>
            </x-hbox>
        </x-vbox>
    </x-frame>
    <x-frame style="--width: 384px; margin: 0;">
        <x-vbox style="justify-content: center; align-items: center; height: 100%; align-self: stretch;">
        </x-vbox>
    </x-frame>
</x-hbox>
{% endblock %}