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

<section id="dons" class="support">
    <div class="section-container">
        <h2>{{ t.support.section_title }} <span class="accent-text">{{ t.support.section_title_accent }}</span></h2>
        <p class="support-lede">
            {{ t.support.lede }}
        </p>
        <p class="support-lede-secondary">
            {{ t.support.lede_secondary }}
        </p>

        <div class="donation-panels">

            <div class="support-panel support-panel--primary">
                <h3>{{ t.support.one_time_title }}</h3>

                <div class="donation-grid">
                    {% for d in donations.oneTime %}
                    <a href="{{ d.url }}" class="donation-amount" target="_blank" rel="noopener noreferrer">
                        {{ d.amount }}{{ t.support.one_time_suffix }}
                    </a>
                    {% endfor %}
                </div>

                <div style="text-align: center;">
                    <label class="donation-form-label">{{ t.support.custom_amount_label }}</label>
                    <div class="custom-donation-form">
                        <input type="number" id="customAmountOneTime" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input">
                        <span class="currency-symbol">{{ t.support.one_time_suffix }}</span>
                        <button data-donation-type="oneTime" class="custom-donation-btn custom-donation-btn-primary">
                            {{ t.support.custom_amount_btn }}
                        </button>
                    </div>
                </div>
            </div>

            <div class="support-panel support-panel--secondary">
                <h3>{{ t.support.monthly_title }}</h3>

                <div class="donation-grid">
                    {% for d in donations.monthly %}
                    <a href="{{ d.url }}" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
                        {{ d.amount }}{{ t.support.monthly_suffix }}
                    </a>
                    {% endfor %}
                </div>

                <div style="text-align: center;">
                    <label class="donation-form-label">{{ t.support.custom_monthly_label }}</label>
                    <div class="custom-donation-form">
                        <input type="number" id="customAmountMonthly" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input custom-amount-input-monthly">
                        <span class="currency-symbol">{{ t.support.monthly_suffix }}</span>
                        <button data-donation-type="monthly" class="custom-donation-btn custom-donation-btn-secondary">
                            {{ t.support.custom_monthly_btn }}
                        </button>
                    </div>
                </div>
            </div>

        </div>

        <div class="alt-donation-section">
            <h3 class="alt-donation-title">
                {{ t.support.alt_title }}
            </h3>

            <div class="alt-donation-grid">
                <a href="{{ donations.liberapay }}" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--liberapay">
                    <div class="alt-donation-icon">💛</div>
                    <h4>{{ t.support.liberapay_title }}</h4>
                    <p>
                        {{ t.support.liberapay_text }}
                    </p>
                </a>

                <a href="{{ donations.kofi }}" target="_blank" rel="noopener noreferrer" class="alt-donation-card alt-donation-card--kofi">
                    <div class="alt-donation-icon">☕</div>
                    <h4>{{ t.support.kofi_title }}</h4>
                    <p>
                        {{ t.support.kofi_text }}
                    </p>
                </a>
            </div>
        </div>

        <div class="security-note">
            <p>
                {{ t.support.security_stripe | safe }}
            </p>
            <p>
                {{ t.support.security_alt }}
            </p>
        </div>
    </div>
</section>