Aller au contenu principal

Site Web Public

Le site PCH-SIG dispose d'une page d'accueil publique accessible sans authentification. Cette page presente le Projet Capital Humain de la Guinee-Bissau et offre un point d'entree vers le portail de gestion.

Acces​

EnvironnementURL
Developpement localhttp://localhost:3000
Preprodhttp://51.75.77.220:3000
Productionhttps://sig.ucp-pch.org

Structure de la Page​

La page d'accueil est composee de plusieurs sections :

┌─────────────────────────────────────┐
│         Header (Navigation)         │
├─────────────────────────────────────┤
│      Carousel Plein Ecran           │
│      (Images + Titre + CTA)         │
├─────────────────────────────────────┤
│      Barre Statistiques Cles        │
├─────────────────────────────────────┤
│      Section A Propos               │
├─────────────────────────────────────┤
│      Section Zones d'Intervention   │
├─────────────────────────────────────┤
│      Section Composantes (3)        │
├─────────────────────────────────────┤
│      Section Beneficiaires          │
├─────────────────────────────────────┤
│      Section Plateforme PCH         │
├─────────────────────────────────────┤
│      Section Partenaires            │
├─────────────────────────────────────┤
│      Section Calendrier             │
├─────────────────────────────────────┤
│      Section CTA Final              │
├─────────────────────────────────────┤
│           Footer                    │
└─────────────────────────────────────┘

En-tete (Header)​

L'en-tete est fixe et change d'apparence au defilement (transparent → blanc avec ombre).

Elements du header​

ElementDescription
Logo PCHIdentite visuelle du projet
Menu A ProposDropdown : Initiative, Objectifs, Zones, Partenaires
Menu InterventionsDropdown : Composantes 1, 2, 3, Resultats
ActualitesLien vers la page actualites
Selecteur de langueFR, PT, EN
Bouton ConnexionAcces au portail (ou "Espace connecte" si authentifie)

Sur les ecrans mobiles, le menu se transforme en hamburger avec :

  • Liens de navigation
  • Selecteur de langue
  • Bouton connexion

Section plein ecran avec un carousel d'images automatique.

Caracteristiques​

ElementDescription
ImagesCarousel automatique (5 secondes par image)
Badge"Republique de Guinee-Bissau" avec armoiries
Titre"Projet de Capital Humain" en gradient
CaptionTexte descriptif de l'image courante
CTABouton "Voir les composantes"
NavigationFleches gauche/droite + indicateurs (dots)
Scroll indicatorAnimation pour inviter au defilement

Images par defaut​

Les images du carousel sont configurables via l'API. Par defaut :

  • hero-children.jpg (Education)
  • hero-health.jpg (Sante)

Barre Statistiques Cles​

Affiche 4 indicateurs cles du projet :

StatistiqueValeur
Financement IDA20M USD
Menages vulnerables3 500
Ecoliers du primaire111 000
Enfants < 5 ans1M+

Les valeurs sont configurables via l'API d'administration.

Section A Propos​

Presentation du projet avec :

ElementDescription
ImagePhoto illustrant le projet
Badge flottantIndice Capital Humain (HCI: 0.30)
TexteDescription du projet et financement
CTABouton "Decouvrir les composantes"

Section Zones d'Intervention​

Presente les deux regions pilotes du projet :

RegionTaux retard croissance
Oio36%
Bafata32%

Chaque zone est presentee avec :

  • Image de fond
  • Nom de la region
  • Description
  • Statistique cle

Section Composantes du Projet​

Trois cartes presentant les composantes :

ComposanteBudgetDescription
1. Transferts Monetaires6,74M USDInvestir dans les femmes et les enfants
2. Sante & Education5,65M USDAmeliorer la prestation de services
3. Renforcement Institutionnel7,61M USDGestion et coordination du projet

Section Beneficiaires​

Statistiques d'impact sur fond bleu :

CategorieNombre
Menages vulnerables3 500
Ecoliers du primaire111 000
Femmes et adolescentes200 000+
Enfants < 5 ans1 million+

Section Plateforme PCH​

Presentation des modules du systeme d'information :

Modules principaux (liste)​

ModuleDescription
Registre Social NationalEnregistrement des menages pauvres et vulnerables
Transferts MonetairesTransferts aux menages pour sante, education, nutrition
Sante CommunautaireStrategie nationale, ASC, FBP
EducationMateriel pedagogique, modele Escuela Integrada, EGRA

Modules secondaires (grille)​

  • Carte SIG
  • Suivi & Evaluation
  • Gestion des Plaintes
  • Securite & Audit

Section Partenaires​

Logos des partenaires institutionnels :

PartenaireRole
Banque MondialeFinancement
Ministere de la SanteMise en oeuvre
Ministere de l'EducationMise en oeuvre
Min. Femmes et SolidariteMise en oeuvre

Section Calendrier​

Timeline horizontale du projet :

EtapePeriode
1. Evaluation et preparation2024
2. Approbation Banque Mondiale2025
3. Deploiement regions pilotes2025-26
4. Extension et consolidation2027-30
ColonneContenu
A proposLogo, description, formulaire newsletter
A propos (liens)Le Projet, Initiative, Objectifs, Zones, Partenaires
ContactAdresse, email, horaires
ProjetReference, periode, financement, ministeres

Newsletter​

Formulaire d'inscription a la newsletter :

  1. Entrez votre email
  2. Cliquez sur "S'abonner"

Liens legaux​

  • Politique de confidentialite
  • Conditions d'utilisation

Fonctionnalites Additionnelles​

Banniere Cookies​

Au premier acces, une banniere s'affiche en bas de page :

  • Accepter : Stocke le consentement
  • Refuser : Decline les cookies

Le choix est memorise dans le localStorage.

Boutons de Navigation Scroll​

Deux boutons flottants en bas a droite :

  • Fleche haut : Retour en haut de page (visible apres defilement)
  • Fleche bas : Aller en bas de page

Contenu Dynamique​

Le contenu de la page est configurable via l'API :

  • Images du carousel
  • Textes (multilingue FR/PT/EN)
  • Statistiques
  • Composantes
  • Timeline

Configuration : Administration > Site Public

Connexion au Portail​

Acceder a la page de login​

Depuis la page d'accueil, cliquez sur :

  • Le bouton Connexion dans l'en-tete
  • Le bouton Connexion dans le CTA final

Vous serez redirige vers /login.

Methodes d'authentification​

1. Email et mot de passe​

  1. Entrez votre adresse email
  2. Entrez votre mot de passe
  3. Cochez Se souvenir de moi si souhaite
  4. Cliquez sur Connexion

2. Authentification a deux facteurs (2FA)​

Si votre compte a la 2FA activee :

  1. Connectez-vous avec vos identifiants
  2. Un ecran de verification apparait
  3. Ouvrez votre application d'authentification (Google Authenticator, Authy)
  4. Entrez le code a 6 chiffres
  5. Cliquez sur Verifier
  1. Cliquez sur Connexion par email (Magic Link)
  2. Entrez votre adresse email
  3. Cliquez sur Envoyer le lien de connexion
  4. Consultez votre boite de reception
  5. Cliquez sur le lien recu
Attention

Le lien de connexion expire au bout de 15 minutes. Verifiez votre dossier spam.

Apres connexion​

Une fois authentifie, vous etes redirige vers le tableau de bord (/dashboard).

Utilisateur connecte

Si vous etes deja connecte, le bouton "Connexion" devient "Espace connecte" et vous redirige vers le dashboard.

Changer la Langue​

Le selecteur de langue est disponible sur :

  • La page d'accueil (en-tete)
  • La page de connexion
  • Le portail (barre superieure)
CodeLangue
FRFrancais
PTPortugues
ENEnglish

Le changement est immediat et affecte l'ensemble de l'interface.

Design Responsive​

Le site s'adapte a tous les ecrans :

TailleAdaptations
MobileMenu hamburger, sections empilees, carousel redimensionne
TabletteMise en page intermediaire
DesktopAffichage complet avec grilles multi-colonnes

Resolution de Problemes​

  1. Verifiez que JavaScript est active
  2. Videz le cache du navigateur (Ctrl+Shift+R)

Les images ne s'affichent pas​

  1. Verifiez que les images existent dans /images/landing/
  2. Verifiez la configuration API du site public

Mot de passe oublie​

Utilisez la fonctionnalite Magic Link pour vous connecter sans mot de passe.

Le site ne charge pas​

  1. Verifiez que le serveur frontend est demarre (port 3000)
  2. Verifiez votre connexion reseau
  3. Essayez un autre navigateur