{% extends "public_layout.html" %}
{% block content %}
<section class="welcome-hero" aria-labelledby="WelcomeHeading">
    <div class="welcome-copy">
        <p class="eyebrow">A tiny daily ritual</p>
        <h1 id="WelcomeHeading">Build a collection that is yours.</h1>
        <p class="hero-copy">
            Pull one card every day, discover new favorites, and watch your
            personal collection take shape.
        </p>
        <a class="clay-action" href="{{ authentication_url }}">
            Start collecting
        </a>
    </div>
    <div class="welcome-preview" aria-label="Example collectible card">
        <div class="welcome-orbit welcome-orbit-pink"></div>
        <div class="welcome-orbit welcome-orbit-blue"></div>
        <div class="welcome-card">
            <img src="{{ example_url }}" alt="Example collectible card">
        </div>
        <p>There is always another card to discover.</p>
    </div>
</section>
{% endblock %}