refactor: nouvelle identité visuelle, design plat et affirmé
Remplace les codes visuels generiques (degrades animes, icones flottantes, cartes glassmorphiques, coins organiques) par un systeme graphique sobre et institutionnel : aplats de couleur, bandeau 'drapeau' OKI, typographie Archivo/Inter, cartes a bordure d'accent. Les couleurs de marque sont inchangees.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user