diff --git a/CHANGELOG.md b/CHANGELOG.md index ecd1096..633305b 100644 --- a/CHANGELOG.md +++ b/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 ?" diff --git a/README.md b/README.md index f3a049a..794b311 100644 --- a/README.md +++ b/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 -2. **Fédiverse** - Services alternatifs (PeerTube, Pleroma, Funkwhale, Castopod) -3. **Projets Web** - Projets de l'organisation -4. **Mission** - Valeurs et objectifs -5. **Hébergement** - Services d'hébergement proposés -6. **Support** - Options de dons -7. **Partenaires** - Nos partenaires médias et créateurs -8. **Contact** - Liens vers réseaux sociaux et plateformes +1. **Hero** - Présentation de l'organisation avec accroche percutante +2. **Solutions** - Segmentation par public (associations, entreprises, citoyens) +3. **Fédiverse** - Services alternatifs (GADE, BOKANTAJ, MIZIK, KUTE) +4. **Projets Web** - Nos projets (FEDIVERSE OKI, OKI.RE, NUVEL.NU, JWE.OVH, GONG.GP) +5. **Mission** - Valeurs et objectifs avec message anti-GAFAM +6. **Hébergement** - Services d'hébergement et infrastructure +7. **Support** - Options de dons (Stripe, Liberapay, Ko-fi) +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 diff --git a/src/_data/faq.json b/src/_data/faq.json new file mode 100644 index 0000000..d9bbf4e --- /dev/null +++ b/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." + } +] diff --git a/src/_data/navigation.json b/src/_data/navigation.json index 9db97cd..6cce34c 100644 --- a/src/_data/navigation.json +++ b/src/_data/navigation.json @@ -1,23 +1,19 @@ [ + { + "text": "Solutions", + "url": "#solutions" + }, { "text": "Fédiverse", "url": "#fediverse" }, { - "text": "Projets Web", - "url": "#projets" + "text": "FAQ", + "url": "#faq" }, { - "text": "Mission", - "url": "#mission" - }, - { - "text": "Hébergement", - "url": "#hebergement" - }, - { - "text": "Partenaires", - "url": "#partenaires" + "text": "Contact", + "url": "#contact" }, { "text": "Codeberg", diff --git a/src/_data/publics.json b/src/_data/publics.json new file mode 100644 index 0000000..6585cbc --- /dev/null +++ b/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é" + ] + } +] diff --git a/src/_includes/partials/engagement.njk b/src/_includes/partials/engagement.njk new file mode 100644 index 0000000..5dbea1a --- /dev/null +++ b/src/_includes/partials/engagement.njk @@ -0,0 +1,31 @@ +
+
+

La révolution numérique commence par un clic

+

+ Commencez votre transition vers un internet libre et respectueux +

+ + +
+
diff --git a/src/_includes/partials/faq.njk b/src/_includes/partials/faq.njk new file mode 100644 index 0000000..941c99c --- /dev/null +++ b/src/_includes/partials/faq.njk @@ -0,0 +1,31 @@ +
+
+

Questions fréquentes

+

+ Tout ce que vous devez savoir pour commencer votre transition numérique +

+ +
+ {% for item in faq %} +
+ +
+

{{ item.answer }}

+
+
+ {% endfor %} +
+ +
+

+ Vous avez d'autres questions ? +

+ + Contactez-nous → + +
+
+
diff --git a/src/_includes/partials/publics.njk b/src/_includes/partials/publics.njk new file mode 100644 index 0000000..2931a02 --- /dev/null +++ b/src/_includes/partials/publics.njk @@ -0,0 +1,40 @@ +
+
+

Des solutions pour chaque besoin

+

+ Que vous soyez association, entreprise ou citoyen engagé, nous avons les outils pour votre transition numérique +

+ +
+ {% for public in publics %} +
+
{{ public.icon }}
+

{{ public.title }}

+

{{ public.description }}

+ +
+

Ce que vous obtenez :

+
    + {% for benefit in public.benefits %} +
  • ✓ {{ benefit }}
    • + {% endfor %} +
+
+ + + {{ public.cta }} → + +
+ {% endfor %} +
+ +
+

+ 💡 Prêt à franchir le pas ? +

+

+ Parce que tout grand changement commence par une conversation +

+
+
+
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index a3a02b3..8581394 100644 --- a/src/assets/css/styles.css +++ b/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; + } +} diff --git a/src/assets/js/main.js b/src/assets/js/main.js index 5270359..2e46162 100644 --- a/src/assets/js/main.js +++ b/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); }); diff --git a/src/index.njk b/src/index.njk index efb4975..d6b418e 100644 --- a/src/index.njk +++ b/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" %}