{% extends "juice/templates/index.html" %}
{% block favicon %}
<link rel="icon" type="image/png" href="/cb_small.png">
{% endblock favicon %}
{% block hero %}
<section class="text-center">
    <h1 class="heading-text" style="font-size: 30px">
        Your external brain that remembers anything, anytime, anywhere!
    </h1>
    <h3 class="title-text">
        One of those little luxuries you'd never believe<br> you went without after giving a try.
    </h3>
    <div>
        <a href="https://github.com/Slackadays/Clipboard">
            <img class="button" src="{{ get_url(path="get_it_on_github.png") }}" width="275px" alt="Get It On GitHub" />
        </a>
    </div>
</section>
<img class="hero-image" style="width: 50%" src="{{ get_url(path="demo.png") }}">

<div class="explore-more text" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
    Explore More ⇩
</div>
<style>
    @font-face {
        font-family: 'Lobster Two';
        src: url('LobsterTwo-BoldItalic.ttf');
        font-weight: normal;
        font-style: normal;
    }

    .logo {
        font-family: "Lobster Two";
    }

    .hero section {
        padding: 0 5rem;
    }

    @media screen and (max-width: 768px) {
        .hero section {
            padding: 0 2rem;
        }

        .hero-image {
            display: none
        }
    }

    img.button {
        transform: scale(1);
        transition: all 0.4s cubic-bezier(0.33, 0.53, 0.12, 1);
    }

    img.button:hover {
        transform: scale(1.1);
    }

    img.button:active {
        transform: scale(.95);
    }
</style>
{% endblock hero %}
{% block footer %}
<footer>
    <small class="subtext">
        Powered by the Juice theme from <a href="https://huhu.io">Huhu.io</a>
    </small>
</footer>
{% endblock footer %}