title = "Home"
url = "/"
layout = "default"
is_hidden = 0

[listPosts featuredPosts]
postIds = "1,2"
postsLimit = 2
postsPerPage = 2
sortOrder = "published_at desc"

[listPosts latestPosts]
notPostIds = "1,2"
postsLimit = 5
postsPerPage = 5
sortOrder = "published_at desc"

==
{#  ---
You could easily apply some layout logic here if you wanted to build a very dynamic theme.
Eg, if you wanted a sidebar on all pages you could put the featured/latest posts components in the layout files.
We're not doing that here, we just want alt styles so main pages are designed around the default layout only and components live on pages.
--- #}


{% put jumbotron %}
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <picture class="{{this.theme.images.banner.class}}">
                    {% for entry in this.theme.images.banner.responsive %}
                        {% if entry.image and entry.screen_width %}
                            <source srcset="{{entry.image|media}}" media="({{entry.media_query}}: {{entry.screen_width}}px)">
                        {% endif %}
                    {% endfor %}
                    {% if this.theme.images.banner.default %}
                        <img src="{{this.theme.images.banner.default | media}}" alt="{{this.theme.images.banner.alt}}"/>
                    {% else %}
                        <img src="{{ "assets/images/home-banner.jpg" | theme }}" alt="A placeholder">
                    {% endif %}
                </picture>
            </div>
                {% content 'home-hero' %}
        </div>
    </div>
</div>

{% endput %}

<div class="row">
    <div class="col-12">
        {% content 'home-intro' %}
    </div>
</div>

<div class="content">
    <div class="row">
        <div class="col-12">
            <h2 class="mt-4 mb-4">{{ 'headings.featured-posts' | _ }}</h2>
            {% component 'featuredPosts' %}

            <h2 class="mt-4 mb-4">{{ 'headings.latest-posts' | _ }}</h2>
            {% component 'latestPosts' %}

            <p class="text-right"><a href="{{ 'latest' | page }}">{{ 'links.all-posts' | _ }}</a></p>
        </div>
    </div>
</div>
