{% extends "juice/templates/index.html" %}
{% block favicon %}
<link rel="icon" type="image/png" href="/cb_small.png">
{% endblock favicon %}
{% block head %}
<meta property="og:title" content="The Clipboard Project - Homepage" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://getclipboard.app" />
<meta property="og:description" content="The fully-featured yet oh-so-easy-to-use clipboard manager for anyone. Introducing your new second brain that remembers anything, anytime, anywhere." />
<meta property="twitter:card" content="summary_large_image" />
<meta
    property="og:image"
    content="https://getclipboard.app/CBBannerGitHub.jpg"
/>
<meta name="keywords" content="clipboard manager, clipboard, cb, linux, macos, mac, maccy, copyq, xclip, xsel, terminal, command line">
<meta name="author" content="The Clipboard Project">
<meta name="description" content="The fully-featured yet oh-so-easy-to-use clipboard manager for anyone. Introducing your new second brain that remembers anything, anytime, anywhere.">
{% endblock head %}
{% block hero %}
<section class="text-center">
    <h1 class="heading-text" style="font-size: 30px">
        Your second brain that remembers anything, anytime, anywhere.
    </h1>
    <h3 class="title-text">
        Turn your productivity up, <i>way</i> up, in style.
    </h3>
    <div>
        <a href="https://github.com/Slackadays/Clipboard">
            <img class="button" src="{{ get_url(path="get_it_on_github.png") }}" width="300px" alt="Get It On GitHub" />
            <div class="heading-text" id="below-button" style="font-size: 20px;"><i>You know you want it!</i></div>
        </a>
    </div>
</section>
<img class="hero-image" style="width: 47%" src="{{ get_url(path="ClipboardDemo.gif") }}" alt="">

<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-Bold.ttf');
        font-weight: normal;
        font-style: normal;
    }

    :root {
        /* Primary theme color */
        --primary-color: #ffe899;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --primary-color: #382929;
        }
    }

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

    .hero section {
        padding: 0 5rem;
    }

    .content h1 {
        margin-top: 5em;
    }

    div.explore-more {
        font-size: 1.6em;
    }

    div.heading-text#features {
        visibility: hidden;
    }

    div.heading-text#features:after {
        visibility: visible;
        content: "The clipboard manager for everyone.";
        display: block;
    }

    @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);
    }

    div#below-button {
        /* make this invisible normally */
        filter: opacity(0);
        transition: filter 0.4s cubic-bezier(0.33, 0.53, 0.12, 1);
    }

    img.button:hover + div#below-button {
        /* make this visible on hover */
        filter: opacity(1);
    }
</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 %}