{% extends "juice/templates/index.html" %}

{% block head %}
<link rel="icon" type="image/svg+xml" href="{{ get_url(path="rustacean-flat-happy.svg") }}">
<link rel="stylesheet" type="text/css" href="{{ get_url(path="custom.css") }}">
{% endblock head %}

{% block hero %}
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <section class="text-center">
        <h1 class="heading-text">
            Build, bundle & ship your Rust WASM application to the web
        </h1>
        <h3 class="title-text">
            ”Pack your things, we’re going on an adventure!”<br/>~ Ferris
        </h3>
        <div>
            <a class="github-button" href="https://github.com/trunk-rs/trunk" data-size="small" data-show-count="true" aria-label="Star trunk-rs/trunk on GitHub">Star</a>
            <a href="https://crates.io/crates/trunk">
                <img src="https://img.shields.io/crates/v/trunk.svg?color=brightgreen&style=flat-square"/>
            </a>
            <a href="https://formulae.brew.sh/formula/trunk">
                <img src="https://img.shields.io/homebrew/v/trunk?color=brightgreen&style=flat-square"/>
            </a>
            <img src="https://img.shields.io/badge/license-MIT%2FApache--2.0-blue?style=flat-square"/>
            <br/>
            <a href="https://discord.gg/JEPdBujTDr">
                <img src="https://img.shields.io/discord/793890238267260958?logo=discord&style=flat-square" alt="Discord Chat"/>
            </a>
            <img src="https://img.shields.io/crates/d/trunk?label=downloads%20%28crates.io%29&style=flat-square"/>
            <img src="https://img.shields.io/github/downloads/trunk-rs/trunk/total?label=downloads%20%28GH%29&style=flat-square" alt="Number of downloads"/>
        </div>
    </section>
    <img class="hero-image" style="width: 50%" src="{{ get_url(path="rustacean-flat-happy.svg") }}">

    <div class="explore-more text" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
        Explore More ⇩
    </div>
    <style>
        .hero section {
            padding: 0 5rem;
        }

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

            .hero-image {
                display: none
            }
        }
    </style>
{% endblock hero %}

{% block footer %}
<footer>
    <p>
        <small class="subtext text-center">
            <a href="https://github.com/trunk-rs/trunk">Trunk Maintainers</a> © 2024
        </small>
    </p>
    <p class="subtext text-center">
        Ferris the crab is public domain. This Ferris can be found at
        <a href="https://rustacean.net/">rustacean.net</a>
        and in the hearts of Rust users throughout the galaxy!
    </p>
    <p class="subtext text-center">
        Join us, resistance is futile
        <a href="https://discord.gg/JEPdBujTDr"><img
            src="https://img.shields.io/discord/793890238267260958?logo=discord&style=flat-square"
            style="vertical-align:text-bottom;"
            alt="Discord Chat" /></a>
    </p>
</footer>
{% endblock footer %}