oki-foundation/src/_includes/partials/hosting.njk

<section id="hebergement" class="hosting">
    <div class="section-container">
        <h2>{{ t.hosting.section_title }} <span class="accent-text">{{ t.hosting.section_title_accent }}</span></h2>

        <p class="section-subtitle">
            {{ t.hosting.section_subtitle }}
        </p>

        <div class="hosting-banner">
            <h3>{{ t.hosting.banner_title }}</h3>
            <p>{{ t.hosting.banner_text }}</p>

            <div class="hosting-features">
                {% for feature in t.hosting.features %}
                <div class="hosting-feature">
                    <span>✓</span> {{ feature }}
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="services-offerings">
            <h3>{{ t.hosting.offerings_title }}</h3>

            <div class="offer-cards">
                {% for card in t.hosting.offer_cards %}
                <div class="offer-card{% if card.modifier %} offer-card--{{ card.modifier }}{% endif %}">
                    <h4>{{ card.title }}</h4>
                    {% if card.intro %}
                    <p class="offer-intro">{{ card.intro }}</p>
                    {% endif %}
                    <ul class="offer-list">
                        {% for item in card.items %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                    <p class="offer-tagline">{{ card.tagline }}</p>
                </div>
                {% endfor %}
            </div>

            <div class="hosting-note">
                <h4>{{ t.hosting.note_title }}</h4>
                <p>{{ t.hosting.note_intro }}</p>
                <ul>
                    {% for item in t.hosting.note_items %}
                    <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            </div>

            <div class="hosting-why">
                <h4>{{ t.hosting.why_title }}</h4>
                <p>
                    {{ t.hosting.why_text }}
                </p>
                <a href="#contact" class="btn btn-primary">
                    {{ t.hosting.why_cta }} →
                </a>
            </div>
        </div>
    </div>
</section>