{% extends "public_layout.html" %}
{% block content %}
<section class="welcome-hero" aria-labelledby="WelcomeHeading">
    <div class="welcome-copy">
        <p class="eyebrow">A little surprise. Every day.</p>
        <h1 id="WelcomeHeading">Meet your next<br>
            <span>card crush.</span>
        </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">
        <span class="discovery-sticker" aria-hidden="true">
            HELLO,<br>NEW FAVORITE!<br>✦
        </span>
        <div class="welcome-card">
            <img src="{{ example_url }}" alt="Example collectible card">
        </div>
        <p>Your next favorite is in here.</p>
    </div>
</section>
{% endblock %}