{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block nav %}{% endblock %}
{% block main %}{% endblock %}
{% block content %}

<main class="home-main">

    <hgroup class="home-title">
        <h1>The Eorzea Songbook</h1>
        <h3>An unofficial library of motifs in the Final Fantasy XIV soundtrack.</h3>
        <!-- <p>Last updated: 26/06/2023</p> -->
    </hgroup>

    <div class="home-nav">
        <a href="{{ url_for('songindex') }}" class="home-button">
            <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" />
            <h2 class="nav-text">Songs</h2>
        </a>

        <a href="{{ url_for('motifindex') }}" class="home-button">
            <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" />
            <h2 class="nav-text">Motifs</h2>
        </a>
    </div>

    <div class="home-body">
        <h2>What's a motif?</h2>
        <p>Have you ever been playing Final Fantasy XIV and thought you heard a song that sounds familiar?</p>
        <p>When a specific part of a song is used repeatedly to point out a character, location, or idea, it's called a motif (or leitmotif). Sometimes, a motif that was created in one song can be used in another, to draw a connection between two ideas in the story.</p>
        <p>For example, here's what you hear when you enter the city of Ishgard.</p>
        <div class="entrypage-clip">
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0288-024.mp3" type="audio/flac">
            </audio>
            <span class="clip-pointer">
                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
                <a href = "{{ url_for('songpage', id=288) }}"> Solid </a>
            </span>
        </div>
        <p>And here's what you hear in Ishgard at night. The same notes are played, but this time it's slowed down, and played on just a piano. Sounds much easier to fall asleep to, doesn't it?</p>
        <div class="entrypage-clip">
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0317-024.mp3" type="audio/flac">
            </audio>
            <span class="clip-pointer">
                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
                <a href = "{{ url_for('songpage', id=317) }}"> Night in the Brume </a>
            </span>
        </div>
        <p>Here's another song that plays in Ishgard at night - when you're in the Pillars, where the wealthy residents live. Notice how there are more instruments; a grand pipe organ and booming drums. A fancier tune for fancier people, but still using the same melody.</p>
        <div class="entrypage-clip">
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0294-024.mp3" type="audio/flac">
            </audio>
            <span class="clip-pointer">
                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
                <a href = "{{ url_for('songpage', id=294) }}"> Nobility Sleeps </a>
            </span>
        </div>
        <p>Or this song, which plays during an important battle. Now our motif sounds like we're getting ready for a fight!</p>
        <div class="entrypage-clip">
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}0337-024.mp3" type="audio/flac">
            </audio>
            <span class="clip-pointer">
                <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
                <a href = "{{ url_for('songpage', id=337) }}"> Heroes Never Die </a>
            </span>
        </div>
        <p>Once we know that this is melody represents Ishgard, the same tune can be used in all kinds of different songs to connect them back to that city. The composers of Final Fantasy XIV can tell us all kinds of things about Ishgard, just by changing up how they play the motif.</p>
        <p>Final Fantasy XIV's soundtrack is full of these! Not just for cities, but for dungeons, characters, expansions, and more. Discover the repeated melodies in your favorite songs, or check the motif pages to see where they show up.</p>
    </div>



</main>

{% block main2 %}{% endblock %}
{% endblock %}