{% extends "base.html" %}
{% block content %}
{%- if config.extra.hero_title or config.extra.hero_subtitle %}
<section class="hero">
    <div class="hero__inner">
        <h1 class="hero__title">{{ config.extra.hero_title | default(value=config.title) }}</h1>
        {%- if config.extra.hero_subtitle or config.description %}
        <p class="hero__sub">{{ config.extra.hero_subtitle | default(value=config.description) }}</p>
        {%- endif %}
        {%- if config.extra.hero_actions %}
        <div class="hero__actions">
            {%- for action in config.extra.hero_actions %}
            <a href="{{ action.url }}" class="button{% if action.style | default(value="") == "outline" %} button--outline{% endif %}"{% if action.external | default(value=false) %} target="_blank" rel="noopener"{% endif %}>{{ action.name }}</a>
            {%- endfor %}
        </div>
        {%- endif %}
    </div>
</section>
{%- endif %}
{%- if config.extra.features %}
<section class="features" id="features">
    <h2 class="features__heading">Features</h2>
    <div class="features__grid">
        {%- for feature in config.extra.features %}
        <div class="feature-card">
            <h3 class="feature-card__name">{{ feature.name }}</h3>
            <p class="feature-card__desc">{{ feature.description }}</p>
        </div>
        {%- endfor %}
    </div>
</section>
{%- endif %}
{%- if section.content %}
<section class="section-content">
    <div class="section-content__body">{{ section.content | safe }}</div>
</section>
{%- endif %}
{% endblock content %}