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

<section id="dons" class="support">
    <div class="section-container">
        <h2>Nous <span class="accent-text">Soutenir</span></h2>
        <p class="support-lede">
            Chaque like, chaque partage, chaque don compte pour construire cet internet-là
        </p>
        <p class="support-lede-secondary">
            Celui où nos ancêtres ne seraient pas effacés par des algorithmes aveugles. Celui où une jeune fille de Lapwent (Pointe-à-Pitre) peut lancer un média en langue dite "créole", sans demander la permission à une multinationale.
        </p>

        <div class="donation-panels">

            <div class="support-panel support-panel--primary">
                <h3>Don ponctuel</h3>

                <div class="donation-grid">
                    <a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
                        1€
                    </a>
                    <a href="https://don.o-k-i.net/b/4gw6r480L1Kz5dScMO" class="donation-amount" target="_blank" rel="noopener noreferrer">
                        5€
                    </a>
                    <a href="https://don.o-k-i.net/b/5kA02G1Cn4WLbCgeUV" class="donation-amount" target="_blank" rel="noopener noreferrer">
                        10€
                    </a>
                    <a href="https://don.o-k-i.net/b/fZebLo94PfBpayc5kn" class="donation-amount" target="_blank" rel="noopener noreferrer">
                        20€
                    </a>
                    <a href="https://don.o-k-i.net/b/6oE5n05SDdth49O004" class="donation-amount" target="_blank" rel="noopener noreferrer">
                        50€
                    </a>
                </div>

                <div style="text-align: center;">
                    <label class="donation-form-label">Montant personnalisé :</label>
                    <div class="custom-donation-form">
                        <input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
                        <span class="currency-symbol">€</span>
                        <button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
                            Donner
                        </button>
                    </div>
                </div>
            </div>

            <div class="support-panel support-panel--secondary">
                <h3>Don mensuel</h3>

                <div class="donation-grid">
                    <a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                        1€/mois
                    </a>
                    <a href="https://don.o-k-i.net/b/8wM4iW4Ozbl95dS6ow" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                        5€/mois
                    </a>
                    <a href="https://don.o-k-i.net/b/8wM2aO80L74TcGk3ci" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                        10€/mois
                    </a>
                    <a href="https://don.o-k-i.net/b/00g7v894P88XgWAfZ7" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                        20€/mois
                    </a>
                    <a href="https://don.o-k-i.net/b/4gw8zc6WHgFtcGkbIP" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                        50€/mois
                    </a>
                </div>

                <div style="text-align: center;">
                    <label class="donation-form-label">Montant mensuel personnalisé :</label>
                    <div class="custom-donation-form">
                        <input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
                        <span class="currency-symbol">€/mois</span>
                        <button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
                            S'abonner
                        </button>
                    </div>
                </div>
            </div>

        </div>

        <div class="alt-donation-section">
            <h3 class="alt-donation-title">
                Autres moyens de nous soutenir
            </h3>

            <div class="alt-donation-grid">
                <a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--liberapay">
                    <div class="alt-donation-icon">💛</div>
                    <h4>Liberapay</h4>
                    <p>
                        Soutenez-nous via Liberapay, une plateforme libre et éthique
                    </p>
                </a>

                <a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
                    <div class="alt-donation-icon">☕</div>
                    <h4>Ko-fi</h4>
                    <p>
                        Offrez-nous un café sur Ko-fi pour nous encourager
                    </p>
                </a>
            </div>
        </div>

        <div class="security-note">
            <p>
                Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank">Stripe</a>.
            </p>
            <p>
                Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
            </p>
        </div>
    </div>
</section>