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

{% block nav %}
{% endblock %}

{% block content %}
    <style>
        @import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

        #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" style="font-family: 'League Gothic'; text-transform: uppercase;">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;">
                <video controls style="box-shadow: var(--shadow-navbar); width: 100%; display: block;">
                    <source src="https://upload.wikimedia.org/wikipedia/commons/c/cd/All4sounds_-_Cloud_Time_lapse.webm">
                </video>
            </x-vbox>
        </x-frame>
    </x-hbox>
    <x-vbox>
        <x-frame style="--width: 768px;">
            <x-rows style="--preferred-width: 40%;" class="homogenous">
                <article class="card">
                    <figure>
                        <img src="//placekitten.com/1280/720">
                    </figure>
                    <section class="card-main" role="main">
                        <h2 style="font-family: 'League Gothic'; font-size: 3em;">Git Repository Hosting</h2>
                        <ul>
                            <li>Public, unlisted (public, but not indexed) and private repositories</li>
                            <li>Access and permission control</li>
                            <li>Use with the Git Smart HTTPS protocol for easy collaboration</li>
                        </ul>
                    </section>
                </article>
                <article class="card">
                    <figure>
                        <img src="//placekitten.com/1024/576">
                    </figure>
                    <section class="card-main">
                        <h2 style="font-family: 'League Gothic'; font-size: 3em;">Discussions and Collaboration</h2>
                        <ul>
                            <li>Flexible pull requests and patch system, even nested</li>
                            <li>A powerful forum for issues, code review, discussions, questions, announcements and more</li>
                        </ul>
                    </section>
                </article>
                <article class="card">
                    <figure>
                        <img src="//placekitten.com/1920/1080">
                    </figure>
                    <section class="card-main">
                        <h2 style="font-family: 'League Gothic'; font-size: 3em;">Social</h2>
                        <ul>
                            <li>Follow your favourite projects and receive updates</li>
                            <li>Discover new, popular and useful projects</li>
                        </ul>
                    </section>
                </article>
                <article class="card">
                    <figure>
                        <img src="//placekitten.com/960/540">
                    </figure>
                    <section class="card-main">
                        <h2 style="font-family: 'League Gothic'; font-size: 3em;">Free</h2>
                        <ul>
                            <li>100% free/libre software, running on GNU/Linux</li>
                            <li>Host your own instance</li>
                            <li>No more vendor lock-in</li>
                        </ul>
                    </section>
                </article>
            </x-rows>
        </x-frame>
    </x-vbox>
{% endblock %}