600 lines
36 KiB
HTML
600 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
lang="fr">
|
|
|
|
<h:head>
|
|
<f:facet name="first">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
<!-- Obsolète : apple-mobile-web-app-capable. Remplacé par mobile-web-app-capable -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<link rel="icon" href="#{request.contextPath}/resources/freya-layout/images/favicon.ico" type="image/x-icon" />
|
|
</f:facet>
|
|
|
|
<title>UnionFlow - Plateforme de Gestion Intégrée pour Mutuelles, Associations et Clubs</title>
|
|
|
|
<!-- Freya Layout Resources (placés dans le head pour éviter tout conflit et suivre le template) -->
|
|
<h:outputStylesheet name="css/primeicons.css" library="freya-layout" />
|
|
<h:outputStylesheet name="css/primeflex.min.css" library="freya-layout" />
|
|
<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="freya-layout" />
|
|
<h:outputStylesheet name="primefaces-freya-#{guestPreferences.componentTheme}/theme.css" />
|
|
<meta name="description" content="UnionFlow : La solution complète de gestion pour les mutuelles, associations, clubs (informatiques, juridiques, etc.) et organisations similaires. Gestion des membres, cotisations, événements, solidarité et analytics." />
|
|
</h:head>
|
|
|
|
<h:body styleClass="landing-body">
|
|
<div class="landing-wrapper">
|
|
<!-- Landing Topbar -->
|
|
<div class="landing-topbar">
|
|
<div class="landing-topbar-left">
|
|
<h:link id="logolink" outcome="/pages/secure/dashboard" styleClass="logo">
|
|
<p:graphicImage name="images/logo-freya.svg" library="freya-layout" />
|
|
</h:link>
|
|
|
|
<ul class="landing-menu">
|
|
<li>
|
|
<a href="#" id="landing-menu-close">
|
|
<i class="pi pi-times"> </i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#home">Accueil</a>
|
|
</li>
|
|
<li>
|
|
<a href="#features">Fonctionnalités</a>
|
|
</li>
|
|
<li>
|
|
<a href="#benefits">Avantages</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="landing-topbar-right">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Landing Banner (Hero Section) -->
|
|
<div id="home" class="landing-banner">
|
|
<div class="landing-banner-content">
|
|
<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>
|
|
<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>
|
|
|
|
<!-- Landing Features Section -->
|
|
<div id="features" class="landing-features">
|
|
<div class="grid parallax-box">
|
|
<div class="col-12 lg:col-3">
|
|
<div class="feature yellow">
|
|
<span>1</span>
|
|
<div class="feature-card">
|
|
<span>1</span>
|
|
<div class="card-content">
|
|
<h3>Gestion des Membres</h3>
|
|
<h5>Inscription, profils détaillés, gestion des statuts, historique des adhésions et suivi complet de chaque membre.</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-3">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="feature blue">
|
|
<span>2</span>
|
|
<div class="feature-card">
|
|
<span>2</span>
|
|
<div class="card-content">
|
|
<h3>Gestion des Cotisations</h3>
|
|
<h5>Types variés (mensuelle, annuelle, adhésion, événement, formation, projet, solidarité), suivi des paiements et rappels automatiques. <strong>Paiements sécurisés via Wave</strong> (bientôt disponible).</h5>
|
|
<div style="margin-top: 10px;">
|
|
<!-- Image locale du client (servie depuis META-INF/resources/images) -->
|
|
<h:graphicImage value="#{request.contextPath}/images/logo-wave.png" style="max-height: 30px; width: auto;" alt="Wave - Paiements mobiles" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="feature gray">
|
|
<span>3</span>
|
|
<div class="feature-card">
|
|
<span>3</span>
|
|
<div class="card-content">
|
|
<h3>Organisation<br/>d'Événements</h3>
|
|
<h5>Assemblées générales, réunions, formations, conférences, ateliers, séminaires, événements sociaux avec gestion des inscriptions.</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-3 feature-4">
|
|
<div class="col-12">
|
|
<div class="feature darker-gray">
|
|
<span>4</span>
|
|
<div class="feature-card">
|
|
<span>4</span>
|
|
<div class="card-content">
|
|
<h3>Système de Solidarité</h3>
|
|
<h5>Gestion complète des demandes d'aide, propositions, évaluations, suivi des statuts et coordination des actions solidaires.</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="feature darker-blue">
|
|
<span>5</span>
|
|
<div class="feature-card">
|
|
<span>5</span>
|
|
<div class="card-content">
|
|
<h3>Gestion des Organisations</h3>
|
|
<h5>Gestion des clubs et unions avec hiérarchie organisationnelle, statistiques détaillées, rapports et vue d'ensemble complète.</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-3">
|
|
<div class="feature gray">
|
|
<span>6</span>
|
|
<div class="feature-card">
|
|
<span>6</span>
|
|
<div class="card-content">
|
|
<h3>Analytics & Rapports</h3>
|
|
<h5>Tableaux de bord interactifs, KPIs en temps réel, analyses approfondies et rapports personnalisables pour une prise de décision éclairée.</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benefits Section -->
|
|
<div id="benefits" class="landing-pricing">
|
|
<div class="section-header">
|
|
<span class="title">Pourquoi choisir UnionFlow ?</span>
|
|
<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">
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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">
|
|
<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>
|
|
|
|
<!-- Footer -->
|
|
<div class="layout-footer">
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-4">
|
|
<div class="grid">
|
|
<div class="col-6">
|
|
<span class="footer-menutitle">NAVIGATION</span>
|
|
<ul>
|
|
<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.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.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>
|
|
</div>
|
|
<div class="col-12 md:col-6 lg:col-3">
|
|
<span class="footer-menutitle">CONTACT</span>
|
|
<ul>
|
|
<li>support@unionflow.dev</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>
|
|
<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">
|
|
<h4>UnionFlow</h4>
|
|
<h6>Copyright © 2025 UnionFlow Dev Team</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="landing-mask"> </div>
|
|
</div>
|
|
<!-- Landing Page JavaScript - selon Freya -->
|
|
<h:outputScript name="js/layout.js" library="freya-layout" />
|
|
<h:outputScript>
|
|
<![CDATA[
|
|
(function() {
|
|
'use strict';
|
|
|
|
const initParallax = function() {
|
|
if (typeof $ === 'undefined') return;
|
|
|
|
$(document).ready(function() {
|
|
const parallax = function() {
|
|
const scrolled = $(window).scrollTop();
|
|
$('.landing-banner').css('top', -(scrolled * 0.01) + '%');
|
|
$('.landing-banner-content').css('top', (scrolled * -0.065) + '%');
|
|
$('.parallax-box .lg\\:col-3:odd').css('transform', 'translateY(' + (scrolled * 0.01) + '%)');
|
|
$('.parallax-box .lg\\:col-3:even').css('margin-top', -(scrolled * 0.01) + '%');
|
|
};
|
|
$(window).scroll(parallax);
|
|
});
|
|
};
|
|
|
|
const initMenu = function() {
|
|
if (typeof $ === 'undefined') return;
|
|
|
|
const hideMenu = function() {
|
|
$('.landing-menu').removeClass('fadeInDown').addClass('fadeOutUp');
|
|
setTimeout(function() {
|
|
$('.landing-wrapper').removeClass('landing-menu-active');
|
|
$('.landing-menu').removeClass('fadeOutUp');
|
|
$(document.body).removeClass('block-scroll');
|
|
}, 150);
|
|
};
|
|
|
|
const showMenu = function() {
|
|
$('.landing-wrapper').addClass('landing-menu-active');
|
|
$('.landing-menu').addClass('fadeInDown');
|
|
$(document.body).addClass('block-scroll');
|
|
};
|
|
|
|
$(function() {
|
|
$('#landing-menu-button').on('click', function(e) {
|
|
const wrapper = $('.landing-wrapper');
|
|
if (wrapper.hasClass('landing-menu-active')) {
|
|
hideMenu();
|
|
} else {
|
|
showMenu();
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
|
|
$('.landing-menu').find('a').on('click', function() {
|
|
hideMenu();
|
|
});
|
|
});
|
|
};
|
|
|
|
const initScroll = function() {
|
|
if (typeof $ === 'undefined') return;
|
|
|
|
$(document).ready(function() {
|
|
$('html, body').animate({ scrollTop: 0 }, 1);
|
|
});
|
|
|
|
const isMobile = function() {
|
|
return $(window).width() <= 896;
|
|
};
|
|
|
|
$('a[href*="#"]:not([href="#"])').click(function() {
|
|
const target = $(this.hash);
|
|
if (target.length) {
|
|
const offset = isMobile() ? target.offset().top : target.offset().top - 100;
|
|
$('html, body').animate({ scrollTop: offset }, 500);
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initParallax();
|
|
initMenu();
|
|
initScroll();
|
|
});
|
|
} else {
|
|
initParallax();
|
|
initMenu();
|
|
initScroll();
|
|
}
|
|
})();
|
|
]]>
|
|
</h:outputScript>
|
|
|
|
</h:body>
|
|
|
|
</html>
|