feat: improve missions & add faq

CHANGELOG.md

@@ -2,7 +2,15 @@
 
 ## Version 2.0.0 - Migration vers 11ty (2025-11-05)
 
-### Dernières améliorations de contenu
+### Dernières améliorations de contenu (Phase 2)
+- ✅ **Nouvelle section Solutions** : Segmentation par public (associations/entreprises/citoyens)
+- ✅ **Section FAQ interactive** : Réponses aux questions fréquentes avec storytelling sur le nom "Ka"
+- ✅ **Section Engagement** : Appels à l'action clairs pour chaque public (associations, entreprises, citoyens)
+- ✅ Navigation réorganisée pour meilleure UX
+- ✅ Animations de scroll pour toutes les nouvelles sections
+- ✅ Design responsive pour mobiles et tablettes
+
+### Améliorations de contenu (Phase 1)
 - ✅ Textes enrichis avec des messages engageants et culturels
 - ✅ Mise en avant de l'importance de la langue dite créole
 - ✅ Accroche percutante dans le hero : "Et si on prenait le contrôle ensemble ?"

README.md

@@ -125,14 +125,17 @@ Les styles sont dans `src/assets/css/styles.css`. La charte graphique est basée
 
 ## Sections du site
 
-1. **Hero** - Présentation de l'organisation
+1. **Hero** - Présentation de l'organisation avec accroche percutante
-2. **Fédiverse** - Services alternatifs (PeerTube, Pleroma, Funkwhale, Castopod)
+2. **Solutions** - Segmentation par public (associations, entreprises, citoyens)
-3. **Projets Web** - Projets de l'organisation
+3. **Fédiverse** - Services alternatifs (GADE, BOKANTAJ, MIZIK, KUTE)
-4. **Mission** - Valeurs et objectifs
+4. **Projets Web** - Nos projets (FEDIVERSE OKI, OKI.RE, NUVEL.NU, JWE.OVH, GONG.GP)
-5. **Hébergement** - Services d'hébergement proposés
+5. **Mission** - Valeurs et objectifs avec message anti-GAFAM
-6. **Support** - Options de dons
+6. **Hébergement** - Services d'hébergement et infrastructure
-7. **Partenaires** - Nos partenaires médias et créateurs
+7. **Support** - Options de dons (Stripe, Liberapay, Ko-fi)
-8. **Contact** - Liens vers réseaux sociaux et plateformes
+8. **Partenaires** - Joukawouvè, cyber-mawonaj, Aktivist Vybz #AKV
+9. **FAQ** - Questions fréquentes avec storytelling sur le nom "Ka"
+10. **Engagement** - Formulaire de contact et appels à l'action
+11. **Contact** - Liens vers réseaux sociaux et plateformes
 
 ## Contribution
 

src/_data/faq.json

@@ -0,0 +1,22 @@
+[
+  {
+    "question": "Est-ce que je peux vraiment quitter Facebook pour mon association ?",
+    "answer": "Absolument ! Nous accompagnons des dizaines d'associations dans leur transition vers des plateformes libres. Vous gardez le contrôle de vos données, de votre contenu, et de votre communauté. On vous forme et on vous suit pas à pas."
+  },
+  {
+    "question": "Combien coûte une migration vers le Fédiverse ?",
+    "answer": "Nous proposons des solutions adaptées à tous les budgets. L'audit initial est gratuit. Pour les associations à but non lucratif, nous avons des tarifs solidaires. Contactez-nous pour un devis personnalisé : kontak@o-k-i.net"
+  },
+  {
+    "question": "Faut-il être expert en informatique pour utiliser vos solutions ?",
+    "answer": "Pas du tout ! Nos plateformes sont conçues pour être accessibles. Nous proposons des formations gratuites et un accompagnement continu. Si vous savez utiliser Facebook, vous saurez utiliser nos outils."
+  },
+  {
+    "question": "Mes données sont-elles vraiment en sécurité ?",
+    "answer": "Oui. Contrairement aux GAFAM, vos données vous appartiennent et restent sous votre contrôle. Elles sont hébergées sur des serveurs sécurisés. Nous ne vendons jamais vos informations à des tiers."
+  },
+  {
+    "question": "Pourquoi le nom 'KA' ?",
+    "answer": "Le Ka représente avant tout l'énergie vitale, la force divine présente en chaque être vivant. Dans la spiritualité caribéenne héritée des traditions africaines et égyptiennes, le Ka est cette puissance intérieure qui nous anime et nous relie les uns aux autres. Le Ka, c'est aussi notre tambour sacré, nos langues, nos traditions – tout ce qui porte notre identité. ORGANISATION KA INTERNATIONALE incarne cette force vitale collective : un internet qui nous ressemble, qui vibre de nos énergies, de nos voix, de notre puissance créatrice. C'est notre mawonaj numérique."
+  }
+]

src/_data/navigation.json

@@ -1,23 +1,19 @@
 [
+  {
+    "text": "Solutions",
+    "url": "#solutions"
+  },
   {
     "text": "Fédiverse",
     "url": "#fediverse"
   },
   {
-    "text": "Projets Web",
+    "text": "FAQ",
-    "url": "#projets"
+    "url": "#faq"
   },
   {
-    "text": "Mission",
+    "text": "Contact",
-    "url": "#mission"
+    "url": "#contact"
-  },
-  {
-    "text": "Hébergement",
-    "url": "#hebergement"
-  },
-  {
-    "text": "Partenaires",
-    "url": "#partenaires"
   },
   {
     "text": "Codeberg",

src/_data/publics.json

@@ -0,0 +1,38 @@
+[
+  {
+    "icon": "🏛️",
+    "title": "Associations & Collectifs",
+    "description": "Sortez de Facebook, créez votre présence numérique sans dépendre des GAFAM. Hébergement sécurisé, solutions Fédiverse (Mastodon, PeerTube), sites WordPress.",
+    "cta": "Contactez-nous",
+    "benefits": [
+      "Hébergement web sécurisé et éthique",
+      "Installation de solutions Fédiverse (Mastodon, PeerTube, Castopod)",
+      "Sites WordPress ou développement sur mesure",
+      "Support technique personnalisé"
+    ]
+  },
+  {
+    "icon": "💼",
+    "title": "Entreprises Responsables",
+    "description": "Construisez votre présence numérique éthique. Solutions web sur mesure, hébergement sécurisé, présence sur le Fédiverse sans algorithmes opaques.",
+    "cta": "Contactez-nous",
+    "benefits": [
+      "Sites WordPress ou développement sur mesure",
+      "Hébergement web éthique et sécurisé",
+      "Présence sur le Fédiverse (Mastodon, PeerTube)",
+      "Conseil en stratégie numérique libre"
+    ]
+  },
+  {
+    "icon": "👥",
+    "title": "Citoyens Engagés",
+    "description": "Rejoignez notre communauté et participez à un internet libre et décentralisé. Créez du contenu, partagez vos idées, connectez-vous autrement.",
+    "cta": "Contactez-nous",
+    "benefits": [
+      "Accès gratuit à nos plateformes Fédiverse",
+      "Communauté d'entraide active",
+      "Création de contenu sur nos services",
+      "Participation à un internet décentralisé"
+    ]
+  }
+]

src/_includes/partials/engagement.njk

@@ -0,0 +1,31 @@
+<section id="engagement" class="engagement">
+    <div class="section-container">
+        <h2>La révolution numérique <span class="accent-text">commence par un clic</span></h2>
+        <p class="section-subtitle">
+            Commencez votre transition vers un internet libre et respectueux
+        </p>
+
+        <div class="engagement-options">
+            <div class="engagement-card">
+                <div class="engagement-icon">🏛️</div>
+                <h3>Associations</h3>
+                <p>Sortez de Facebook et créez votre présence numérique indépendante</p>
+                <a href="#contact" class="btn btn-primary">Contactez-nous</a>
+            </div>
+
+            <div class="engagement-card">
+                <div class="engagement-icon">💼</div>
+                <h3>Entreprises</h3>
+                <p>Hébergement web, solutions Fédiverse ou développement sur mesure</p>
+                <a href="#contact" class="btn btn-primary">Contactez-nous</a>
+            </div>
+
+            <div class="engagement-card">
+                <div class="engagement-icon">👥</div>
+                <h3>Citoyens</h3>
+                <p>Rejoignez nos plateformes libres et participez à un internet décentralisé</p>
+                <a href="#contact" class="btn btn-primary">Contactez-nous</a>
+            </div>
+        </div>
+    </div>
+</section>

src/_includes/partials/faq.njk

@@ -0,0 +1,31 @@
+<section id="faq" class="faq">
+    <div class="section-container">
+        <h2>Questions <span class="accent-text">fréquentes</span></h2>
+        <p class="section-subtitle">
+            Tout ce que vous devez savoir pour commencer votre transition numérique
+        </p>
+
+        <div class="faq-container">
+            {% for item in faq %}
+            <div class="faq-item">
+                <button class="faq-question" onclick="this.parentElement.classList.toggle('active')">
+                    <span>{{ item.question }}</span>
+                    <span class="faq-icon">+</span>
+                </button>
+                <div class="faq-answer">
+                    <p>{{ item.answer }}</p>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+
+        <div class="faq-footer">
+            <p style="font-size: 1.1rem; margin-bottom: 1rem;">
+                Vous avez d'autres questions ?
+            </p>
+            <a href="#contact" class="btn btn-secondary">
+                Contactez-nous →
+            </a>
+        </div>
+    </div>
+</section>

src/_includes/partials/publics.njk

@@ -0,0 +1,40 @@
+<section id="solutions" class="publics">
+    <div class="section-container">
+        <h2>Des solutions pour <span class="accent-text">chaque besoin</span></h2>
+        <p class="section-subtitle">
+            Que vous soyez association, entreprise ou citoyen engagé, nous avons les outils pour votre transition numérique
+        </p>
+
+        <div class="publics-grid">
+            {% for public in publics %}
+            <div class="public-card">
+                <div class="public-icon">{{ public.icon }}</div>
+                <h3>{{ public.title }}</h3>
+                <p class="public-description">{{ public.description }}</p>
+
+                <div class="public-benefits">
+                    <h4>Ce que vous obtenez :</h4>
+                    <ul>
+                        {% for benefit in public.benefits %}
+                        <li>✓ {{ benefit }}</li>
+                        {% endfor %}
+                    </ul>
+                </div>
+
+                <a href="#contact" class="btn btn-primary public-cta">
+                    {{ public.cta }} →
+                </a>
+            </div>
+            {% endfor %}
+        </div>
+
+        <div class="publics-footer">
+            <p style="font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
+                💡 Prêt à franchir le pas ?
+            </p>
+            <p style="opacity: 0.9;">
+                Parce que tout grand changement commence par une conversation
+            </p>
+        </div>
+    </div>
+</section>

src/assets/css/styles.css

@@ -837,3 +837,240 @@ input[type="number"]:focus {
         font-size: 0.85rem;
     }
 }
+
+/* Publics Section */
+.publics {
+    padding: 4rem 2rem;
+    background: linear-gradient(135deg, var(--gris-sombre) 0%, var(--noir-profond) 100%);
+}
+
+.publics h2 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.publics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.public-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 2px solid transparent;
+    border-radius: 20px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.public-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--or-oki);
+    box-shadow: 0 20px 40px rgba(232, 166, 37, 0.2);
+}
+
+.public-icon {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+}
+
+.public-card h3 {
+    color: var(--or-oki);
+    margin-bottom: 1rem;
+    font-size: 1.8rem;
+}
+
+.public-description {
+    margin-bottom: 2rem;
+    line-height: 1.6;
+    flex-grow: 1;
+}
+
+.public-benefits {
+    background: rgba(232, 166, 37, 0.1);
+    border-radius: 10px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    text-align: left;
+}
+
+.public-benefits h4 {
+    color: var(--or-oki);
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+}
+
+.public-benefits ul {
+    list-style: none;
+    padding: 0;
+}
+
+.public-benefits li {
+    margin-bottom: 0.5rem;
+    padding-left: 0.5rem;
+}
+
+.public-cta {
+    margin-top: auto;
+}
+
+.publics-footer {
+    text-align: center;
+    margin-top: 4rem;
+    padding: 2rem;
+    background: rgba(232, 166, 37, 0.1);
+    border-radius: 15px;
+}
+
+/* FAQ Section */
+.faq {
+    padding: 4rem 2rem;
+    background: linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%);
+}
+
+.faq h2 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.faq-container {
+    max-width: 800px;
+    margin: 3rem auto;
+}
+
+.faq-item {
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px solid rgba(232, 166, 37, 0.2);
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.faq-item:hover {
+    border-color: var(--or-oki);
+}
+
+.faq-item.active {
+    border-color: var(--or-oki);
+}
+
+.faq-question {
+    width: 100%;
+    background: none;
+    border: none;
+    color: var(--blanc-creme);
+    padding: 1.5rem;
+    text-align: left;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.faq-question:hover {
+    color: var(--or-oki);
+}
+
+.faq-icon {
+    font-size: 1.5rem;
+    color: var(--or-oki);
+    transition: transform 0.3s ease;
+}
+
+.faq-item.active .faq-icon {
+    transform: rotate(45deg);
+}
+
+.faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.faq-item.active .faq-answer {
+    max-height: 500px;
+}
+
+.faq-answer p {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    line-height: 1.8;
+    opacity: 0.9;
+}
+
+.faq-footer {
+    text-align: center;
+    margin-top: 3rem;
+}
+
+/* Engagement Section */
+.engagement {
+    padding: 4rem 2rem;
+    background: var(--noir-profond);
+}
+
+.engagement h2 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.engagement-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin: 3rem 0;
+}
+
+.engagement-card {
+    background: rgba(232, 166, 37, 0.1);
+    border: 2px solid var(--or-oki);
+    border-radius: 20px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.engagement-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(232, 166, 37, 0.3);
+}
+
+.engagement-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.engagement-card h3 {
+    color: var(--or-oki);
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+
+.engagement-card p {
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+}
+
+/* Responsive adjustments for new sections */
+@media (max-width: 768px) {
+    .publics-grid,
+    .engagement-options {
+        grid-template-columns: 1fr;
+    }
+
+    .publics h2,
+    .faq h2,
+    .engagement h2 {
+        font-size: 2rem;
+    }
+}

src/assets/js/main.js

@@ -71,7 +71,7 @@ const observer = new IntersectionObserver((entries) => {
 }, observerOptions);
 
 // Observe all cards
-document.querySelectorAll('.service-card, .project-card, .value-card, .partner-card').forEach(el => {
+document.querySelectorAll('.service-card, .project-card, .value-card, .partner-card, .public-card, .engagement-card').forEach(el => {
     el.classList.add('fade-in-element');
     observer.observe(el);
 });

src/index.njk

@@ -3,10 +3,13 @@ layout: layouts/base.njk
 ---
 
 {% include "partials/hero.njk" %}
+{% include "partials/publics.njk" %}
 {% include "partials/fediverse.njk" %}
 {% include "partials/projects.njk" %}
 {% include "partials/mission.njk" %}
 {% include "partials/hosting.njk" %}
 {% include "partials/support.njk" %}
 {% include "partials/partners.njk" %}
+{% include "partials/faq.njk" %}
+{% include "partials/engagement.njk" %}
 {% include "partials/contact.njk" %}