ORGANISATION-KA-INTERNATIONALE/o-k-i.net
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'refactor: nouvelle identité visuelle, design plat et affirmé' (#2) from feat/identite-visuelle into master

Browse Source 
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
cedric
2026-07-05 21:40:44 +00:00
parent 4eaad7a49e f7e9acb2d3
commit d5f4e7b92e
14 changed files with 845 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_includes/layouts/base.njk
+5
View File
@@ -38,6 +38,11 @@
<link rel="icon" type="image/png" sizes="512x512" href="/assets/images/logo-512x512.png">
<link rel="apple-touch-icon" href="/assets/images/logo-512x512.png">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="/assets/css/styles.css">
src/_includes/partials/clients.njk
+1 -1
View File
@@ -1,6 +1,6 @@
<section id="clients" class="partners">
<div class="section-container">
<h2 style="text-align: center; margin-bottom: 1rem;">Ils nous ont <span class="accent-text">fait confiance</span></h2>
<h2>Ils nous ont <span class="accent-text">fait confiance</span></h2>
<p class="section-subtitle">
Des organisations engagées qui ont choisi OKI pour construire leur présence numérique
</p>
src/_includes/partials/contact.njk
+3 -3
View File
@@ -1,8 +1,8 @@
<section class="contact" id="contact">
<div class="section-container">
<h2 style="text-align: center; margin-bottom: 1rem; color: var(--or-oki);">Envie de passer à l'action ?</h2>
<p style="text-align: center; max-width: 800px; margin: 0 auto 3rem; font-size: 1.1rem; line-height: 1.6;">
« Mais je sais pas par où commencer ! » Aucun souci ! On t'accompagne pas à pas. Un message sur nos réseaux, un mail à <a href="mailto:kontak@o-k-i.net" style="color: var(--or-oki);">kontak@o-k-i.net</a>, et on te montre comment ton talent peut changer les choses. Même si c'est juste une idée dans ta tête – chez nous, les idées deviennent des actions.
<h2>Envie de passer à l'action ?</h2>
<p class="contact-lede">
« Mais je sais pas par où commencer ! » Aucun souci ! On t'accompagne pas à pas. Un message sur nos réseaux, un mail à <a href="mailto:kontak@o-k-i.net">kontak@o-k-i.net</a>, et on te montre comment ton talent peut changer les choses. Même si c'est juste une idée dans ta tête – chez nous, les idées deviennent des actions.
</p>
</div>
<div class="contact-grid">
src/_includes/partials/faq.njk
+1 -1
View File
@@ -20,7 +20,7 @@
</div>
<div class="faq-footer">
<p style="font-size: 1.1rem; margin-bottom: 1rem;">
<p>
Vous avez d'autres questions ?
</p>
<a href="#contact" class="btn btn-secondary">
src/_includes/partials/footer.njk
+6 -5
View File
@@ -1,16 +1,17 @@
<footer>
<div class="flag-bar"></div>
<div class="footer-content">
<p style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">
<p class="footer-name">
{{ site.name }}
</p>
<p style="opacity: 0.8;">
<p>
Association à but non lucratif | Promotion des langues et cultures | Alternatives libres aux GAFAM
</p>
<p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.7;">
<p class="footer-meta">
{{ site.copyright }} | {{ site.tagline }}
</p>
<p style="margin-top: 1rem;">
<a href="/mentions-legales/" style="color: var(--or-oki); text-decoration: none; transition: opacity 0.3s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<p class="footer-legal">
<a href="/mentions-legales/">
Mentions Légales
</a>
</p>
src/_includes/partials/hero.njk
+1 -8
View File
@@ -1,15 +1,8 @@
<section class="hero">
<div class="network-bg">
<div class="node" style="top: 20%; left: 10%;"></div>
<div class="node" style="top: 50%; left: 80%; animation-delay: 1s;"></div>
<div class="node" style="top: 70%; left: 30%; animation-delay: 2s;"></div>
<div class="node" style="top: 30%; left: 60%; animation-delay: 0.5s;"></div>
<div class="node" style="top: 80%; left: 70%; animation-delay: 1.5s;"></div>
</div>
<div class="hero-content">
<h1>ORGANISATION KA</h1>
<h2 class="hero-subtitle">INTERNATIONALE</h2>
<p style="font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--or-oki); font-weight: 600;">
<p class="hero-tagline">
{{ site.tagline }}
</p>
<div class="hero-tags">
src/_includes/partials/hosting.njk
+45 -46
View File
@@ -1,13 +1,13 @@
<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>
<h2>Développement <span class="accent-text">Web sur Mesure</span></h2>
<p class="section-subtitle" style="text-align: center; margin-bottom: 3rem;">
<p class="section-subtitle">
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>
<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">
@@ -36,63 +36,62 @@
</div>
<div class="services-offerings">
<h3 style="text-align: center; color: var(--or-oki); margin: 3rem 0 2rem;">Nos offres de services</h3>
<h3>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>
<div class="offer-cards">
<div class="offer-card">
<h4>Application Web Sur Mesure</h4>
<ul class="offer-list">
<li>Gestion de membres et adhésions</li>
<li>Agenda et gestion d'événements</li>
<li>Pétitions et mobilisation en ligne</li>
<li>Caisse de solidarité, dons</li>
<li>Newsletter et communication interne</li>
</ul>
<p style="color: var(--or-oki); font-weight: bold;">Développement sur mesure</p>
<p class="offer-tagline">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>
<div class="offer-card offer-card--hosting">
<h4>Site Vitrine & Hébergement</h4>
<ul class="offer-list">
<li>WordPress ou site statique</li>
<li>Hébergement mutualisé sécurisé</li>
<li>Base de données MySQL/PostgreSQL</li>
<li>Certificat SSL gratuit</li>
<li>Serveur mail inclus</li>
</ul>
<p style="color: var(--or-oki); font-weight: bold;">Hébergement éthique</p>
<p class="offer-tagline">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>
<div class="offer-card offer-card--fediverse">
<h4>Instance Fédiverse</h4>
<p class="offer-intro">Votre association veut sa propre plateforme libre, sans dépendre d'un tiers ? On installe et administre votre instance :</p>
<ul class="offer-list">
<li>Mastodon / Pleroma (réseau social)</li>
<li>PeerTube (vidéo)</li>
<li>Castopod (podcast)</li>
<li>Pixelfed (photos)</li>
<li>Funkwhale (musique)</li>
</ul>
<p style="color: var(--or-oki); font-weight: bold;">Installation & maintenance</p>
<p class="offer-tagline">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>
<div class="hosting-note">
<h4>Gestion numérique sécurisée</h4>
<p>OKI peut assurer la gestion complète de vos propriétés numériques :</p>
<ul>
<li>Propriété et gestion de noms de domaine</li>
<li>Administration de comptes web (réseaux sociaux, emails)</li>
<li>Gestion sécurisée des accès et mots de passe</li>
<li>Protection contre les prises de contrôle internes</li>
<li>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;">
<div class="hosting-why">
<h4>Pourquoi choisir OKI ?</h4>
<p>
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
src/_includes/partials/mission.njk
+1 -1
View File
@@ -4,7 +4,7 @@
<p class="mission-text">
OKI développe des applications web sur mesure pour les associations, collectifs et organisations qui changent le monde. Nous croyons que la qualité des outils numériques ne devrait pas être réservée à ceux qui ont les moyens, c'est pourquoi nous proposons des tarifs adaptés à la réalité de chaque structure, avec une attention particulière pour les organisations militantes.
</p>
<p class="mission-text" style="font-size: 1.1rem; margin-top: 1rem;">
<p class="mission-text mission-text--secondary">
Nos langues, nos cultures, nos luttes méritent des outils qui leur ressemblent. Pas des templates génériques, de vraies solutions pensées pour vous.
</p>
src/_includes/partials/nav.njk
+3 -2
View File
@@ -1,7 +1,7 @@
<nav>
<div class="nav-container">
<a href="/" class="logo logo-with-glow" style="display: flex; align-items: center; gap: 0.5rem;">
<img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image" style="height: 2.5rem; width: auto;">
<a href="/" class="logo">
<img src="/assets/images/logo-512x512.png" alt="{{ site.shortName }} Logo" class="logo-image">
<span>{{ site.shortName }}</span>
</a>
<ul class="nav-links">
@@ -23,4 +23,5 @@
<span></span>
</div>
</div>
<div class="flag-bar"></div>
</nav>
src/_includes/partials/partners.njk
+1 -1
View File
@@ -1,6 +1,6 @@
<section id="partenaires" class="partners">
<div class="section-container">
<h2 style="text-align: center; margin-bottom: 1rem;">Nos <span class="accent-text">Partenaires</span></h2>
<h2>Nos <span class="accent-text">Partenaires</span></h2>
<p class="section-subtitle">
Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre
</p>
src/_includes/partials/projects.njk
+2 -2
View File
@@ -4,12 +4,12 @@
<div class="project-cards">
{% for project in projects %}
<a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card" style="text-decoration: none; color: inherit;">
<a href="{{ project.url }}" target="_blank" rel="noopener noreferrer" class="project-card">
<div class="project-icon">{{ project.icon }}</div>
<h3>{{ project.name }}</h3>
<p class="project-domain">{{ project.domain }}</p>
<p>{{ project.description }}</p>
<span class="service-link" style="margin-top: 1rem;">
<span class="service-link project-card-link">
Visiter le site →
</span>
</a>
src/_includes/partials/publics.njk
+3 -3
View File
@@ -29,10 +29,10 @@
</div>
<div class="publics-footer">
<p style="font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
💡 Prêt à franchir le pas ?
<p>
Prêt à franchir le pas ?
</p>
<p style="opacity: 0.9;">
<p>
Parce que tout grand changement commence par une conversation
</p>
</div>
src/_includes/partials/support.njk
+28 -62
View File
@@ -1,23 +1,19 @@
<section id="dons" class="support">
<div class="section-container">
<h2>Nous <span class="accent-text">Soutenir</span></h2>
<p style="font-size: 1.3rem; margin-bottom: 1rem;">
<p class="support-lede">
Chaque like, chaque partage, chaque don compte pour construire cet internet-là
</p>
<p style="font-size: 1.1rem; margin-bottom: 3rem; opacity: 0.9;">
<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>
<!-- Donation Options Container -->
<div style="max-width: 900px; margin: 0 auto;">
<div class="donation-panels">
<!-- One-time Donations -->
<div style="background: rgba(232, 166, 37, 0.1); border-radius: 20px; padding: 2rem; margin-bottom: 2rem;">
<h3 style="color: var(--or-oki); margin-bottom: 1.5rem; text-align: center;">
💸 Don ponctuel
</h3>
<div class="support-panel support-panel--primary">
<h3>Don ponctuel</h3>
<div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
<div class="donation-grid">
<a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
1€
</a>
@@ -36,24 +32,21 @@
</div>
<div style="text-align: center;">
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant personnalisé :</label>
<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" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
<button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
Donner
</button>
</div>
</div>
</div>
<!-- Monthly Donations -->
<div style="background: rgba(0, 168, 84, 0.1); border-radius: 20px; padding: 2rem;">
<h3 style="color: var(--vert-oki); margin-bottom: 1.5rem; text-align: center;">
⭐ Don mensuel
</h3>
<div class="support-panel support-panel--secondary">
<h3>Don mensuel</h3>
<div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
<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>
@@ -72,11 +65,11 @@
</div>
<div style="text-align: center;">
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant mensuel personnalisé :</label>
<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" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
<button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
S'abonner
</button>
</div>
@@ -85,62 +78,35 @@
</div>
<!-- Alternative Donation Methods -->
<div style="margin-top: 3rem;">
<h3 style="text-align: center; color: var(--or-oki); margin-bottom: 2rem; font-size: 1.5rem;">
<div class="alt-donation-section">
<h3 class="alt-donation-title">
Autres moyens de nous soutenir
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 700px; margin: 0 auto;">
<!-- Liberapay -->
<a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" style="
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
background: rgba(242, 179, 54, 0.1);
border: 2px solid #F2B336;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(242, 179, 54, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
<div style="font-size: 3rem;">💛</div>
<h4 style="color: #F2B336; font-size: 1.3rem; margin: 0;">Liberapay</h4>
<p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
<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>
<!-- Ko-fi -->
<a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" style="
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
background: rgba(255, 93, 93, 0.1);
border: 2px solid #FF5E5B;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(255, 93, 93, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
<div style="font-size: 3rem;">☕</div>
<h4 style="color: #FF5E5B; font-size: 1.3rem; margin: 0;">Ko-fi</h4>
<p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
<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 style="text-align: center; margin-top: 3rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 15px;">
<p style="font-size: 0.95rem; margin-bottom: 0.5rem;">
🔒 Les dons directs (montants ci-dessus) sont sécurisés par <a href="https://stripe.com/" target="_blank" style="color: var(--or-oki); text-decoration: none;">Stripe</a>.
<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 style="font-size: 0.9rem; opacity: 0.8;">
<p>
Liberapay et Ko-fi utilisent leurs propres systèmes de paiement sécurisés.
</p>
</div>
src/assets/css/styles.css
+745 -462
View File
File diff suppressed because it is too large Load Diff