385 lines
18 KiB
HTML
385 lines
18 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">
|
|
<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="#" 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>
|
|
<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>
|
|
</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 solution pensée pour les mutuelles, associations, clubs et organisations similaires avec sécurité avancée, multi-plateforme et synchronisation temps réel.</h3>
|
|
</div>
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</ul>
|
|
</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>
|
|
</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">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>
|
|
</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>Abidjan, Côte d'Ivoire</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>
|
|
<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>
|