{% extends "default.html" %}
{% block title %}
    Welcome
{% 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: 320px;
        }

        #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">The roundabout to all your code</h1>
                    <p>Git repository hosting, made simple. Powered by free software.</p>
                </div>

                <x-buttonbox class="box-center">
                    <a class="button" href="/accounts">Log in or sign up</a>
                    <a class="button" href="/download">Download</a>
                    <p style="opacity: 0.75;">for setting up your own instance</p>
                </x-buttonbox>

                <x-hbox>
                    <a href="/about">System Info</a>
                    <a href="/help">Help & FAQ</a>
                    <a href="mailto:{{ config.CONTACT_EMAIL }}">Contact Us</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 %}