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

<section id="hebergement" class="hosting">
    <div class="section-container">
        <h2 style="text-align: center; margin-bottom: 1rem;">Développement <span class="accent-text">Web sur Mesure</span></h2>

        <p class="section-subtitle" style="text-align: center; margin-bottom: 3rem;">
            Chaque organisation a des besoins uniques. Nous concevons et développons l'outil numérique qui correspond exactement à votre fonctionnement, pas un template, une vraie application.
        </p>

        <div class="hosting-banner">
            <h3>🚀 Des solutions complètes, de A à Z</h3>
            <p>OKI accompagne les associations et collectifs à chaque étape : conception, développement, hébergement, formation et maintenance.</p>

            <div class="hosting-features">
                <div class="hosting-feature">
                    <span>✓</span> Développement d'applications web sur mesure
                </div>
                <div class="hosting-feature">
                    <span>✓</span> Sites vitrine professionnels
                </div>
                <div class="hosting-feature">
                    <span>✓</span> Instances Fédiverse clé en main
                </div>
                <div class="hosting-feature">
                    <span>✓</span> Hébergement sécurisé et indépendant
                </div>
                <div class="hosting-feature">
                    <span>✓</span> Gestion de noms de domaine
                </div>
                <div class="hosting-feature">
                    <span>✓</span> Sauvegardes automatiques quotidiennes
                </div>
                <div class="hosting-feature">
                    <span>✓</span> Formation et support technique inclus
                </div>
            </div>
        </div>

        <div class="services-offerings">
            <h3 style="text-align: center; color: var(--or-oki); margin: 3rem 0 2rem;">Nos offres de services</h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem;">

                <div class="service-offering-card" style="background: rgba(0, 168, 84, 0.1); border: 2px solid var(--vert-oki); border-radius: 20px; padding: 2rem;">
                    <h4 style="color: var(--vert-oki); margin-bottom: 1rem;">💻 Application Web Sur Mesure</h4>
                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
                        <li style="margin-bottom: 0.5rem;">• Gestion de membres et adhésions</li>
                        <li style="margin-bottom: 0.5rem;">• Agenda et gestion d'événements</li>
                        <li style="margin-bottom: 0.5rem;">• Pétitions et mobilisation en ligne</li>
                        <li style="margin-bottom: 0.5rem;">• Caisse de solidarité, dons</li>
                        <li style="margin-bottom: 0.5rem;">• Newsletter et communication interne</li>
                    </ul>
                    <p style="color: var(--or-oki); font-weight: bold;">Développement sur mesure</p>
                </div>

                <div class="service-offering-card" style="background: rgba(237, 28, 76, 0.1); border: 2px solid var(--rouge-oki); border-radius: 20px; padding: 2rem;">
                    <h4 style="color: var(--rouge-oki); margin-bottom: 1rem;">🌐 Site Vitrine & Hébergement</h4>
                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
                        <li style="margin-bottom: 0.5rem;">• WordPress ou site statique</li>
                        <li style="margin-bottom: 0.5rem;">• Hébergement mutualisé sécurisé</li>
                        <li style="margin-bottom: 0.5rem;">• Base de données MySQL/PostgreSQL</li>
                        <li style="margin-bottom: 0.5rem;">• Certificat SSL gratuit</li>
                        <li style="margin-bottom: 0.5rem;">• Serveur mail inclus</li>
                    </ul>
                    <p style="color: var(--or-oki); font-weight: bold;">Hébergement éthique</p>
                </div>

                <div class="service-offering-card" style="background: rgba(232, 166, 37, 0.1); border: 2px solid var(--or-oki); border-radius: 20px; padding: 2rem;">
                    <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🕸️ Instance Fédiverse</h4>
                    <p style="margin-bottom: 1rem; font-size: 0.95rem; opacity: 0.9;">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
                    <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
                        <li style="margin-bottom: 0.5rem;">• Mastodon / Pleroma (réseau social)</li>
                        <li style="margin-bottom: 0.5rem;">• PeerTube (vidéo)</li>
                        <li style="margin-bottom: 0.5rem;">• Castopod (podcast)</li>
                        <li style="margin-bottom: 0.5rem;">• Pixelfed (photos)</li>
                        <li style="margin-bottom: 0.5rem;">• Funkwhale (musique)</li>
                    </ul>
                    <p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
                </div>
            </div>

            <div style="background: rgba(232, 166, 37, 0.1); border-radius: 15px; padding: 2rem; margin-bottom: 2rem;">
                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">🔐 Gestion numérique sécurisée</h4>
                <p style="margin-bottom: 1rem;">OKI peut assurer la gestion complète de vos propriétés numériques :</p>
                <ul style="list-style: none; padding-left: 1rem;">
                    <li style="margin-bottom: 0.5rem;">✅ Propriété et gestion de noms de domaine</li>
                    <li style="margin-bottom: 0.5rem;">✅ Administration de comptes web (réseaux sociaux, emails)</li>
                    <li style="margin-bottom: 0.5rem;">✅ Gestion sécurisée des accès et mots de passe</li>
                    <li style="margin-bottom: 0.5rem;">✅ Protection contre les prises de contrôle internes</li>
                    <li style="margin-bottom: 0.5rem;">✅ Médiation en cas de conflits sur les outils numériques</li>
                </ul>
            </div>

            <div style="text-align: center; margin-top: 3rem;">
                <h4 style="color: var(--or-oki); margin-bottom: 1rem;">💡 Pourquoi choisir OKI ?</h4>
                <p style="max-width: 800px; margin: 0 auto 2rem; line-height: 1.6;">
                    Notre équipe technique, composée d'experts engagés, garantit l'impartialité,
                    la sécurité et la pérennité de vos outils numériques. Nous mutualisons les coûts entre
                    projets solidaires pour des tarifs justes et accessibles et nous appliquons des tarifs
                    préférentiels aux organisations militantes.
                </p>
                <a href="#contact" class="btn btn-primary">
                    Contactez-nous →
                </a>
            </div>
        </div>
    </div>
</section>