o-k-i.net/src/_includes/partials/djangokam.njk

<section id="djangokam" class="djangokam">
    <div class="section-container">
        <p class="djangokam-surtitre">{{ t.djangokam.surtitre }}</p>
        <h2>{{ t.djangokam.titre }} <span class="accent-text">{{ t.djangokam.titreAccent }}</span></h2>
        <p class="section-subtitle">{{ t.djangokam.accroche }}</p>

        <img src="{{ '/assets/images/djangokam-portrait.webp' | cdn }}" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">

        <blockquote class="djangokam-highlight">
            {{ t.djangokam.message_cle }}
        </blockquote>

        <div class="djangokam-histoire-wrapper">
            <div class="djangokam-histoire">
                {% for paragraphe in t.djangokam.histoire %}
                <p>{{ paragraphe }}</p>
                {% endfor %}
            </div>

            <figure class="djangokam-duo">
                <a href="{{ t.djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
                    <img src="{{ t.djangokam.duo.image | cdn }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
                    <figcaption>{{ t.djangokam.duo.legende }}</figcaption>
                </a>
            </figure>
        </div>

        <div class="djangokam-facts">
            {% for fait in t.djangokam.faits %}
            <div class="djangokam-fact-card">
                <div class="djangokam-fact-icon">{{ fait.icon }}</div>
                <h3>{{ fait.chiffre }}</h3>
                <p>{{ fait.texte | safe }}</p>
            </div>
            {% endfor %}
        </div>

        <div class="djangokam-clips">
            {% for clip in t.djangokam.clips %}
            <figure class="djangokam-clip">
                <a href="{{ clip.url }}" target="_blank" rel="noopener noreferrer">
                    <img src="{{ clip.image | cdn }}" alt="{{ clip.alt }}" loading="lazy">
                    <figcaption>{{ clip.titre }}</figcaption>
                </a>
            </figure>
            {% endfor %}
        </div>

        <p class="djangokam-instrument">{{ t.djangokam.ia_instrument | safe }}</p>

        <div class="cta-buttons djangokam-buttons">
            {% for bouton in t.djangokam.boutons %}
            <a href="{{ bouton.url }}" target="_blank" rel="noopener noreferrer" class="btn {% if bouton.primary %}btn-primary{% else %}btn-secondary{% endif %}">
                {{ bouton.text }} →
            </a>
            {% endfor %}
        </div>

        <p class="djangokam-presse">
            {{ t.djangokam.presse.texte }} <a href="mailto:{{ t.djangokam.presse.email }}">{{ t.djangokam.presse.email }}</a>
        </p>
    </div>
</section>