294 lines
16 KiB
HTML
294 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:ui="http://java.sun.com/jsf/facelets"
|
|
xmlns:f="http://java.sun.com/jsf/core"
|
|
xmlns:h="http://java.sun.com/jsf/html"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/public-template.xhtml">
|
|
|
|
<ui:define name="title">Nos Formulaires - UnionFlow</ui:define>
|
|
|
|
<ui:define name="head">
|
|
<style>
|
|
.formulaire-card {
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.formulaire-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.formulaire-card.recommande {
|
|
border-color: #10b981;
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.formulaire-card.recommande::before {
|
|
content: 'RECOMMANDÉ';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #10b981;
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
z-index: 10;
|
|
}
|
|
|
|
.prix-badge {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.prix-periode {
|
|
font-size: 0.9rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.fonctionnalite-active {
|
|
color: #10b981;
|
|
}
|
|
|
|
.fonctionnalite-inactive {
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.toggle-facturation {
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.facturation-option {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.facturation-option.active {
|
|
background: #3b82f6;
|
|
color: white;
|
|
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.economie-badge {
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<!-- En-tête Hero -->
|
|
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
|
<div class="max-w-screen-lg mx-auto text-center">
|
|
<div class="text-900 text-6xl font-bold mb-4">Choisissez votre formule</div>
|
|
<div class="text-700 text-xl mb-6">
|
|
Des solutions adaptées à chaque taille d'organisation
|
|
</div>
|
|
<div class="text-600 line-height-3 text-lg">
|
|
Gérez efficacement votre association avec nos outils professionnels.
|
|
Commencez gratuitement et évoluez selon vos besoins.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toggle Facturation -->
|
|
<div class="surface-section px-4 py-4 md:px-6 lg:px-8 border-bottom-1 surface-border">
|
|
<div class="max-w-screen-lg mx-auto">
|
|
<div class="flex justify-content-center">
|
|
<div class="toggle-facturation">
|
|
<div class="flex">
|
|
<div class="facturation-option #{formulaireBean.typeFacturationSelectionne.name() == 'MENSUEL' ? 'active' : ''}">
|
|
<p:commandLink value="Mensuel"
|
|
action="#{formulaireBean.setTypeFacturationSelectionne('MENSUEL')}"
|
|
update="formulaires-grid"
|
|
styleClass="no-underline" />
|
|
</div>
|
|
<div class="facturation-option #{formulaireBean.typeFacturationSelectionne.name() == 'ANNUEL' ? 'active' : ''}">
|
|
<p:commandLink value="Annuel"
|
|
action="#{formulaireBean.setTypeFacturationSelectionne('ANNUEL')}"
|
|
update="formulaires-grid"
|
|
styleClass="no-underline" />
|
|
<span class="economie-badge ml-2">Économisez jusqu'à 16%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grille des Formulaires -->
|
|
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
|
<div class="max-w-screen-xl mx-auto">
|
|
<h:panelGroup id="formulaires-grid">
|
|
<div class="grid">
|
|
<ui:repeat value="#{formulaireBean.formulaires}" var="formulaire">
|
|
<div class="col-12 md:col-6 xl:col-3">
|
|
<div class="formulaire-card surface-card p-6 border-round shadow-2 #{formulaire.recommande ? 'recommande' : ''}">
|
|
|
|
<!-- En-tête du formulaire -->
|
|
<div class="text-center mb-5">
|
|
<div class="#{formulaire.couleurTheme} text-white inline-flex align-items-center justify-content-center border-circle mb-3"
|
|
style="width: 60px; height: 60px;">
|
|
<i class="#{formulaire.iconeFormulaire} text-2xl"></i>
|
|
</div>
|
|
<div class="text-900 font-bold text-2xl mb-2">#{formulaire.nom}</div>
|
|
<div class="text-600 line-height-3">#{formulaire.description}</div>
|
|
</div>
|
|
|
|
<!-- Prix -->
|
|
<div class="text-center mb-5">
|
|
<div class="text-900 prix-badge">
|
|
#{formulaireBean.getPrixAffiche(formulaire)}
|
|
</div>
|
|
<div class="prix-periode">
|
|
Jusqu'à #{formulaire.quotaMaxMembres} membres
|
|
</div>
|
|
<h:panelGroup rendered="#{formulaireBean.typeFacturationSelectionne.name() == 'ANNUEL'}">
|
|
<div class="text-green-600 font-semibold text-sm mt-1">
|
|
#{formulaireBean.getEconomieAffichee(formulaire)}
|
|
</div>
|
|
</h:panelGroup>
|
|
</div>
|
|
|
|
<!-- Fonctionnalités -->
|
|
<div class="mb-6">
|
|
<ul class="list-none p-0 m-0">
|
|
<li class="flex align-items-center mb-3">
|
|
<i class="pi pi-check fonctionnalite-active mr-2"></i>
|
|
<span class="text-900">Gestion des membres</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-3">
|
|
<i class="pi pi-check fonctionnalite-active mr-2"></i>
|
|
<span class="text-900">Gestion des cotisations</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-3">
|
|
<i class="pi #{formulaire.gestionEvenements ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
|
<span class="text-900">Gestion des événements</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-3">
|
|
<i class="pi #{formulaire.gestionAides ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
|
<span class="text-900">Demandes d'aide</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-3">
|
|
<i class="pi #{formulaire.rapportsAvances ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
|
<span class="text-900">Rapports avancés</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-3">
|
|
<i class="pi #{formulaire.supportPrioritaire ? 'pi-check fonctionnalite-active' : 'pi-times fonctionnalite-inactive'} mr-2"></i>
|
|
<span class="text-900">Support prioritaire</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Boutons d'action -->
|
|
<div class="flex flex-column gap-3">
|
|
<p:commandButton value="Choisir ce formulaire"
|
|
action="#{formulaireBean.selectionnerFormulaire(formulaire)}"
|
|
oncomplete="PF('souscriptionDialog').show()"
|
|
update=":souscription-form"
|
|
styleClass="p-button-lg w-full #{formulaire.couleurTheme.replace('bg-', 'p-button-')}"/>
|
|
|
|
<p:commandButton value="Voir les détails"
|
|
action="#{formulaireBean.voirDetailsFormulaire(formulaire)}"
|
|
styleClass="p-button-outlined p-button-secondary w-full"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</h:panelGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section FAQ rapide -->
|
|
<div class="surface-100 px-4 py-8 md:px-6 lg:px-8">
|
|
<div class="max-w-screen-lg mx-auto text-center">
|
|
<div class="text-900 text-4xl font-bold mb-4">Questions fréquentes</div>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-card p-4 border-round shadow-1 h-full">
|
|
<i class="pi pi-question-circle text-blue-500 text-3xl mb-3"></i>
|
|
<div class="text-900 font-bold mb-2">Puis-je changer de formule ?</div>
|
|
<div class="text-600">Oui, vous pouvez upgrader ou downgrader à tout moment selon vos besoins.</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-card p-4 border-round shadow-1 h-full">
|
|
<i class="pi pi-shield text-green-500 text-3xl mb-3"></i>
|
|
<div class="text-900 font-bold mb-2">Mes données sont-elles sécurisées ?</div>
|
|
<div class="text-600">Absolument. Nous utilisons un chiffrement de niveau bancaire pour protéger vos données.</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-card p-4 border-round shadow-1 h-full">
|
|
<i class="pi pi-phone text-purple-500 text-3xl mb-3"></i>
|
|
<div class="text-900 font-bold mb-2">Quel support est disponible ?</div>
|
|
<div class="text-600">Support par email pour tous, support prioritaire et téléphonique pour Premium+.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dialog de souscription -->
|
|
<p:dialog id="souscription-dialog" widgetVar="souscriptionDialog"
|
|
header="Finaliser votre souscription"
|
|
modal="true" responsive="true" width="600" height="400">
|
|
<h:form id="souscription-form">
|
|
<h:panelGroup rendered="#{formulaireBean.formulaireSelectionne != null}">
|
|
<div class="p-4">
|
|
<div class="text-center mb-4">
|
|
<div class="#{formulaireBean.formulaireSelectionne.couleurTheme} text-white inline-flex align-items-center justify-content-center border-circle mb-3"
|
|
style="width: 60px; height: 60px;">
|
|
<i class="#{formulaireBean.formulaireSelectionne.iconeFormulaire} text-2xl"></i>
|
|
</div>
|
|
<div class="text-900 font-bold text-2xl">#{formulaireBean.formulaireSelectionne.nom}</div>
|
|
<div class="text-600">#{formulaireBean.getPrixAffiche(formulaireBean.formulaireSelectionne)}</div>
|
|
</div>
|
|
|
|
<div class="formgrid grid mb-4">
|
|
<div class="field col">
|
|
<label class="block text-900 font-medium mb-2">Type de facturation</label>
|
|
<p:selectOneRadio value="#{formulaireBean.typeFacturationSelectionne}" layout="custom">
|
|
<f:selectItem itemValue="MENSUEL" itemLabel="Mensuel" />
|
|
<f:selectItem itemValue="ANNUEL" itemLabel="Annuel (économisez 16%)" />
|
|
</p:selectOneRadio>
|
|
<div class="grid">
|
|
<div class="col-6">
|
|
<p:radioButton itemIndex="0" />
|
|
<label class="ml-2">Mensuel</label>
|
|
</div>
|
|
<div class="col-6">
|
|
<p:radioButton itemIndex="1" />
|
|
<label class="ml-2">Annuel</label>
|
|
<span class="economie-badge ml-2">-16%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p:commandButton value="Procéder au paiement"
|
|
action="#{formulaireBean.procederSouscription()}"
|
|
styleClass="p-button-lg #{formulaireBean.formulaireSelectionne.couleurTheme.replace('bg-', 'p-button-')}"
|
|
icon="pi pi-credit-card"/>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
</h:form>
|
|
</p:dialog>
|
|
</ui:define>
|
|
</ui:composition> |