Refactoring
This commit is contained in:
dahoud
@@ -53,12 +53,18 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="landing-topbar-right">
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Accéder" />
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="outcome" value="/pages/secure/dashboard" />
|
||||
<ui:param name="styleClass" value="landing-button" />
|
||||
</ui:include>
|
||||
<a href="#{request.contextPath}/pages/secure/dashboard.xhtml"
|
||||
style="display:inline-flex;align-items:center;gap:.45rem;
|
||||
padding:.5rem 1.25rem;border-radius:6px;
|
||||
border:2px solid rgba(255,255,255,.75);
|
||||
color:#fff;font-size:.875rem;font-weight:700;
|
||||
text-decoration:none;letter-spacing:.02em;
|
||||
transition:background .2s,border-color .2s;"
|
||||
onmouseover="this.style.background='rgba(255,255,255,.18)';this.style.borderColor='#fff'"
|
||||
onmouseout="this.style.background='transparent';this.style.borderColor='rgba(255,255,255,.75)'">
|
||||
Accéder
|
||||
<i class="pi pi-arrow-right" style="font-size:.78rem;"></i>
|
||||
</a>
|
||||
<a href="#" id="landing-menu-button">
|
||||
<i class="pi pi-bars"> </i>
|
||||
</a>
|
||||
@@ -71,12 +77,20 @@
|
||||
<span class="title">UnionFlow</span>
|
||||
<h3>Plateforme de Gestion Intégrée pour Mutuelles, Associations et Clubs<br/>
|
||||
Simplifiez la gestion de votre organisation avec une solution complète et moderne</h3>
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Accéder à la plateforme" />
|
||||
<ui:param name="icon" value="pi pi-sign-in" />
|
||||
<ui:param name="outcome" value="/pages/secure/dashboard" />
|
||||
<ui:param name="styleClass" value="landing-button" />
|
||||
</ui:include>
|
||||
<a href="#{request.contextPath}/pages/secure/dashboard.xhtml"
|
||||
style="display:inline-flex;align-items:center;gap:.6rem;
|
||||
padding:1rem 2.5rem;border-radius:8px;
|
||||
background:#fff;
|
||||
color:#1e1e2e;
|
||||
font-size:1.05rem;font-weight:800;
|
||||
text-decoration:none;letter-spacing:.01em;
|
||||
box-shadow:0 6px 24px rgba(0,0,0,.25);
|
||||
transition:transform .25s,box-shadow .25s;"
|
||||
onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 12px 36px rgba(0,0,0,.3)'"
|
||||
onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 24px rgba(0,0,0,.25)'">
|
||||
<i class="pi pi-sign-in" style="font-size:.95rem;"></i>
|
||||
Accéder à la plateforme
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -175,57 +189,246 @@
|
||||
<div id="benefits" class="landing-pricing">
|
||||
<div class="section-header">
|
||||
<span class="title">Pourquoi choisir UnionFlow ?</span>
|
||||
<h3>Une solution pensée pour les mutuelles, associations, clubs et organisations similaires avec sécurité avancée, multi-plateforme et synchronisation temps réel.</h3>
|
||||
<h3>Une plateforme robuste et moderne bâtie pour les organisations du monde entier —<br/>
|
||||
avec une sensibilité particulière pour les réalités africaines.</h3>
|
||||
</div>
|
||||
|
||||
<!-- Grille des avantages -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="pricing-card">
|
||||
<h2>Sécurité</h2>
|
||||
<span class="price">100%</span>
|
||||
<span class="time">Sécurisé</span>
|
||||
<ul>
|
||||
<li>Connexion sécurisée et centralisée</li>
|
||||
<li>Contrôle d'accès basé sur les rôles</li>
|
||||
<li>Protection des données sensibles</li>
|
||||
<li>Chiffrement des communications</li>
|
||||
|
||||
<!-- Sécurité de niveau entreprise -->
|
||||
<div class="col-12 md:col-6 lg:col-4 flex">
|
||||
<div style="background:var(--surface-0);border:1px solid var(--surface-200);border-radius:14px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s;width:100%;"
|
||||
onmouseover="this.style.boxShadow='0 10px 30px rgba(0,0,0,.12)';this.style.transform='translateY(-3px)'"
|
||||
onmouseout="this.style.boxShadow='0 2px 10px rgba(0,0,0,.06)';this.style.transform='translateY(0)'">
|
||||
<div style="width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:var(--blue-50);">
|
||||
<i class="pi pi-shield" style="color:var(--blue-600);font-size:1.25rem;"></i>
|
||||
</div>
|
||||
<h3 style="color:var(--text-color);font-size:1.1rem;font-weight:700;margin:0 0 .75rem 0;">
|
||||
Sécurité de niveau entreprise
|
||||
</h3>
|
||||
<p style="color:var(--text-color-secondary);line-height:1.7;margin:0 0 1.25rem 0;font-size:.9rem;">
|
||||
Authentification centralisée SSO, gestion des accès par rôle et traçabilité
|
||||
complète de toutes les actions sur la plateforme.
|
||||
</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
OpenID Connect via Keycloak
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Contrôle d'accès granulaire par rôle
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Chiffrement de bout en bout
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4 preferred">
|
||||
<div class="pricing-card pro">
|
||||
<span class="preferred-tag">RECOMMANDÉ</span>
|
||||
<h2>Multi-Plateforme</h2>
|
||||
<span class="price">24/7</span>
|
||||
<span class="time">Disponible</span>
|
||||
<ul>
|
||||
<li>Application web responsive</li>
|
||||
<li>Application mobile Flutter</li>
|
||||
<li>iOS et Android</li>
|
||||
<li>Accès depuis n'importe où</li>
|
||||
|
||||
<!-- Multi-plateforme -->
|
||||
<div class="col-12 md:col-6 lg:col-4 flex">
|
||||
<div style="background:var(--surface-0);border:1px solid var(--surface-200);border-radius:14px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s;width:100%;"
|
||||
onmouseover="this.style.boxShadow='0 10px 30px rgba(0,0,0,.12)';this.style.transform='translateY(-3px)'"
|
||||
onmouseout="this.style.boxShadow='0 2px 10px rgba(0,0,0,.06)';this.style.transform='translateY(0)'">
|
||||
<div style="width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:var(--green-50);">
|
||||
<i class="pi pi-mobile" style="color:var(--green-600);font-size:1.25rem;"></i>
|
||||
</div>
|
||||
<h3 style="color:var(--text-color);font-size:1.1rem;font-weight:700;margin:0 0 .75rem 0;">
|
||||
Accessible partout, tout le temps
|
||||
</h3>
|
||||
<p style="color:var(--text-color-secondary);line-height:1.7;margin:0 0 1.25rem 0;font-size:.9rem;">
|
||||
Une application web responsive et une application mobile native pour
|
||||
que vos gestionnaires et membres restent connectés en toutes circonstances.
|
||||
</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Web responsive (tous navigateurs)
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Application mobile iOS & Android
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Disponible 24h/24, 7j/7
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="pricing-card enterprise">
|
||||
<h2>Cloud</h2>
|
||||
<span class="price">Cloud</span>
|
||||
<span class="time">Moderne</span>
|
||||
<ul>
|
||||
<li>Architecture cloud-native</li>
|
||||
<li>Synchronisation temps réel</li>
|
||||
<li>Sauvegarde automatique</li>
|
||||
<li>Scalabilité illimitée</li>
|
||||
|
||||
<!-- Cloud-Native -->
|
||||
<div class="col-12 md:col-6 lg:col-4 flex">
|
||||
<div style="background:var(--surface-0);border:1px solid var(--surface-200);border-radius:14px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s;width:100%;"
|
||||
onmouseover="this.style.boxShadow='0 10px 30px rgba(0,0,0,.12)';this.style.transform='translateY(-3px)'"
|
||||
onmouseout="this.style.boxShadow='0 2px 10px rgba(0,0,0,.06)';this.style.transform='translateY(0)'">
|
||||
<div style="width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:var(--purple-50);">
|
||||
<i class="pi pi-server" style="color:var(--purple-600);font-size:1.25rem;"></i>
|
||||
</div>
|
||||
<h3 style="color:var(--text-color);font-size:1.1rem;font-weight:700;margin:0 0 .75rem 0;">
|
||||
Architecture cloud-native
|
||||
</h3>
|
||||
<p style="color:var(--text-color-secondary);line-height:1.7;margin:0 0 1.25rem 0;font-size:.9rem;">
|
||||
Bâtie sur Quarkus et une architecture microservices, la plateforme monte en
|
||||
charge automatiquement et garantit une haute disponibilité.
|
||||
</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Microservices Quarkus haute performance
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Scalabilité élastique
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Sauvegardes automatisées
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pilotage par la donnée -->
|
||||
<div class="col-12 md:col-6 lg:col-4 flex">
|
||||
<div style="background:var(--surface-0);border:1px solid var(--surface-200);border-radius:14px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s;width:100%;"
|
||||
onmouseover="this.style.boxShadow='0 10px 30px rgba(0,0,0,.12)';this.style.transform='translateY(-3px)'"
|
||||
onmouseout="this.style.boxShadow='0 2px 10px rgba(0,0,0,.06)';this.style.transform='translateY(0)'">
|
||||
<div style="width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:var(--orange-50);">
|
||||
<i class="pi pi-chart-bar" style="color:var(--orange-600);font-size:1.25rem;"></i>
|
||||
</div>
|
||||
<h3 style="color:var(--text-color);font-size:1.1rem;font-weight:700;margin:0 0 .75rem 0;">
|
||||
Pilotage par la donnée
|
||||
</h3>
|
||||
<p style="color:var(--text-color-secondary);line-height:1.7;margin:0 0 1.25rem 0;font-size:.9rem;">
|
||||
Des tableaux de bord interactifs et des KPIs en temps réel pour prendre
|
||||
les bonnes décisions au bon moment.
|
||||
</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Dashboards et KPIs temps réel
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Rapports exportables (PDF, Excel)
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Analyse des tendances et historiques
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Adapté à votre contexte — carte mise en avant -->
|
||||
<div class="col-12 md:col-6 lg:col-4 flex">
|
||||
<div style="background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-800) 100%);border-radius:14px;padding:2rem;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:box-shadow .25s,transform .25s;width:100%;position:relative;overflow:hidden;"
|
||||
onmouseover="this.style.transform='translateY(-3px)'"
|
||||
onmouseout="this.style.transform='translateY(0)'">
|
||||
<div style="position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.07);"></div>
|
||||
<div style="position:absolute;bottom:-30px;right:20px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.05);"></div>
|
||||
<div style="width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:rgba(255,255,255,.15);">
|
||||
<i class="pi pi-globe" style="color:#fff;font-size:1.25rem;"></i>
|
||||
</div>
|
||||
<h3 style="color:#fff;font-size:1.1rem;font-weight:700;margin:0 0 .75rem 0;">
|
||||
Conçu pour les organisations du monde
|
||||
</h3>
|
||||
<p style="color:rgba(255,255,255,.82);line-height:1.7;margin:0 0 1.25rem 0;font-size:.9rem;">
|
||||
Mutuelles, clubs Lions, associations sportives, fédérations professionnelles —
|
||||
UnionFlow s'adapte à toute structure, sur tous les continents.
|
||||
</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.82);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:rgba(255,255,255,.9);"></i>
|
||||
Mutuelles & caisses de solidarité
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.82);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:rgba(255,255,255,.9);"></i>
|
||||
Clubs Lions, Rotary, associations civiques
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.82);font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:rgba(255,255,255,.9);"></i>
|
||||
Fédérations & réseaux multi-niveaux
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Déploiement flexible -->
|
||||
<div class="col-12 md:col-6 lg:col-4 flex">
|
||||
<div style="background:var(--surface-0);border:1px solid var(--surface-200);border-radius:14px;padding:2rem;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s;width:100%;"
|
||||
onmouseover="this.style.boxShadow='0 10px 30px rgba(0,0,0,.12)';this.style.transform='translateY(-3px)'"
|
||||
onmouseout="this.style.boxShadow='0 2px 10px rgba(0,0,0,.06)';this.style.transform='translateY(0)'">
|
||||
<div style="width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:var(--indigo-50);">
|
||||
<i class="pi pi-cog" style="color:var(--indigo-600);font-size:1.25rem;"></i>
|
||||
</div>
|
||||
<h3 style="color:var(--text-color);font-size:1.1rem;font-weight:700;margin:0 0 .75rem 0;">
|
||||
Déploiement selon vos contraintes
|
||||
</h3>
|
||||
<p style="color:var(--text-color-secondary);line-height:1.7;margin:0 0 1.25rem 0;font-size:.9rem;">
|
||||
Hébergez la plateforme chez vous ou laissez-nous la gérer. L'API ouverte
|
||||
s'intègre facilement à vos outils existants.
|
||||
</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
SaaS cloud géré ou on-premise
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);margin-bottom:.4rem;font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
API REST ouverte & documentée
|
||||
</li>
|
||||
<li style="display:flex;align-items:center;gap:.5rem;color:var(--text-color-secondary);font-size:.85rem;">
|
||||
<i class="pi pi-check" style="color:var(--green-500);"></i>
|
||||
Évolutions et support continus
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bande de chiffres clés -->
|
||||
<div style="background:linear-gradient(135deg,var(--primary-700),var(--primary-900));border-radius:16px;padding:2.5rem 2rem;margin-top:3rem;">
|
||||
<div class="grid text-center" style="color:#fff;">
|
||||
<div class="col-6 md:col-3" style="padding:1rem;">
|
||||
<div style="font-size:2.5rem;font-weight:800;line-height:1;">6+</div>
|
||||
<div style="font-size:.85rem;opacity:.8;margin-top:.5rem;line-height:1.4;">Types d'organisations<br/>supportés</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-3" style="padding:1rem;">
|
||||
<div style="font-size:2.5rem;font-weight:800;line-height:1;">100%</div>
|
||||
<div style="font-size:.85rem;opacity:.8;margin-top:.5rem;line-height:1.4;">Données sécurisées<br/>et chiffrées</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-3" style="padding:1rem;">
|
||||
<div style="font-size:2.5rem;font-weight:800;line-height:1;">24/7</div>
|
||||
<div style="font-size:.85rem;opacity:.8;margin-top:.5rem;line-height:1.4;">Disponibilité<br/>garantie</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-3" style="padding:1rem;">
|
||||
<div style="font-size:2.5rem;font-weight:800;line-height:1;">∞</div>
|
||||
<div style="font-size:.85rem;opacity:.8;margin-top:.5rem;line-height:1.4;">Scalabilité<br/>cloud-native</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Découvrir toutes les fonctionnalités" />
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="outcome" value="/pages/secure/dashboard" />
|
||||
<ui:param name="styleClass" value="landing-button" />
|
||||
</ui:include>
|
||||
<a href="#{request.contextPath}/pages/secure/dashboard.xhtml"
|
||||
style="display:inline-flex;align-items:center;gap:.6rem;
|
||||
padding:.95rem 2.25rem;border-radius:8px;
|
||||
background:var(--primary-color,#6366f1);
|
||||
color:var(--primary-color-text,#fff);
|
||||
font-size:1rem;font-weight:700;
|
||||
text-decoration:none;letter-spacing:.02em;
|
||||
box-shadow:0 4px 18px rgba(99,102,241,.35);
|
||||
transition:transform .25s,box-shadow .25s,opacity .2s;"
|
||||
onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 10px 30px rgba(99,102,241,.5)'"
|
||||
onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 18px rgba(99,102,241,.35)'">
|
||||
Accéder à la plateforme
|
||||
<i class="pi pi-arrow-right" style="font-size:.9rem;"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -240,16 +443,16 @@
|
||||
<li><a href="#home">Accueil</a></li>
|
||||
<li><a href="#features">Fonctionnalités</a></li>
|
||||
<li><a href="#benefits">Avantages</a></li>
|
||||
<li><a href="/pages/secure/dashboard">Tableau de Bord</a></li>
|
||||
<li><a href="/pages/secure/dashboard.xhtml">Tableau de Bord</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="footer-menutitle">FONCTIONNALITÉS</span>
|
||||
<ul>
|
||||
<li><a href="/pages/secure/membre/liste">Membres</a></li>
|
||||
<li><a href="/pages/secure/cotisation/historique">Cotisations</a></li>
|
||||
<li><a href="/pages/secure/evenement/calendrier">Événements</a></li>
|
||||
<li><a href="/pages/secure/aide/documentation">Aide</a></li>
|
||||
<li><a href="/pages/secure/membre/liste.xhtml">Membres</a></li>
|
||||
<li><a href="/pages/secure/cotisation/historique.xhtml">Cotisations</a></li>
|
||||
<li><a href="/pages/secure/evenement/calendrier.xhtml">Événements</a></li>
|
||||
<li><a href="/pages/secure/aide/documentation.xhtml">Aide</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,22 +461,34 @@
|
||||
<span class="footer-menutitle">CONTACT</span>
|
||||
<ul>
|
||||
<li>support@unionflow.dev</li>
|
||||
<li>Abidjan, Côte d'Ivoire</li>
|
||||
<li>Afrique & International</li>
|
||||
<li>Plateforme de Gestion Intégrée</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-5">
|
||||
<span class="footer-menutitle">NEWSLETTER</span>
|
||||
<span class="footer-subtitle">Rejoignez notre newsletter pour être informé des nouvelles fonctionnalités.</span>
|
||||
<h:form>
|
||||
<div class="newsletter-input">
|
||||
<p:inputText placeholder="adresse email" />
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="S'abonner" />
|
||||
<ui:param name="outlined" value="false" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
<div class="newsletter-input">
|
||||
<input type="email"
|
||||
placeholder="adresse email"
|
||||
style="flex:1;padding:.6rem 1rem;border-radius:6px;
|
||||
border:1px solid rgba(255,255,255,.25);
|
||||
background:rgba(255,255,255,.1);
|
||||
color:#fff;font-size:.875rem;outline:none;"
|
||||
onfocus="this.style.borderColor='rgba(255,255,255,.6)'"
|
||||
onblur="this.style.borderColor='rgba(255,255,255,.25)'" />
|
||||
<button type="button"
|
||||
style="display:inline-flex;align-items:center;gap:.4rem;
|
||||
padding:.6rem 1.25rem;border-radius:6px;
|
||||
background:#fff;color:#1e1e2e;
|
||||
font-size:.875rem;font-weight:700;
|
||||
border:none;cursor:pointer;white-space:nowrap;
|
||||
transition:opacity .2s;"
|
||||
onmouseover="this.style.opacity='.88'"
|
||||
onmouseout="this.style.opacity='1'">
|
||||
S'abonner
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="footer-bottom">
|
||||
|
||||
Reference in New Issue
Block a user