Site Web Public
Le site Bemba 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
| Environnement | URL |
|---|---|
| Developpement local | http://localhost:3000 |
| Preprod | http://PREPROD_SERVER_IP:3000 |
| Production | https://sig.example.com |
Structure de la Page
La page d'accueil est composee de plusieurs sections :
En-tete (Header)
L'en-tete est fixe et change d'apparence au defilement (transparent → blanc avec ombre).
Elements du header
| Element | Description |
|---|---|
| Logo PCH | Identite visuelle du projet |
| Menu A Propos | Dropdown : Initiative, Objectifs, Zones, Partenaires |
| Menu Interventions | Dropdown : Composantes 1, 2, 3, Resultats |
| Actualites | Lien vers la page actualites |
| Selecteur de langue | FR, PT, EN |
| Bouton Connexion | Acces au portail (ou "Espace connecte" si authentifie) |
Menu mobile
Sur les ecrans mobiles, le menu se transforme en hamburger avec :
- Liens de navigation
- Selecteur de langue
- Bouton connexion
Carousel Hero
Section plein ecran avec un carousel d'images automatique.
Caracteristiques
| Element | Description |
|---|---|
| Images | Carousel automatique (5 secondes par image) |
| Badge | "Republique de Guinee-Bissau" avec armoiries |
| Titre | "Projet de Capital Humain" en gradient |
| Caption | Texte descriptif de l'image courante |
| CTA | Bouton "Voir les composantes" |
| Navigation | Fleches gauche/droite + indicateurs (dots) |
| Scroll indicator | Animation 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 :
| Statistique | Valeur |
|---|---|
| Financement IDA | 20M USD |
| Menages vulnerables | 3 500 |
| Ecoliers du primaire | 111 000 |
| Enfants < 5 ans | 1M+ |
Les valeurs sont configurables via l'API d'administration.
Section A Propos
Presentation du projet avec :
| Element | Description |
|---|---|
| Image | Photo illustrant le projet |
| Badge flottant | Indice Capital Humain (HCI: 0.30) |
| Texte | Description du projet et financement |
| CTA | Bouton "Decouvrir les composantes" |
Section Zones d'Intervention
Presente les deux regions pilotes du projet :
| Region | Taux retard croissance |
|---|---|
| Oio | 36% |
| Bafata | 32% |
Chaque zone est presentee avec :
- Image de fond
- Nom de la region
- Description
- Statistique cle
Section Composantes du Projet
Trois cartes presentant les composantes :
| Composante | Budget | Description |
|---|---|---|
| 1. Transferts Monetaires | 6,74M USD | Investir dans les femmes et les enfants |
| 2. Sante & Education | 5,65M USD | Ameliorer la prestation de services |
| 3. Renforcement Institutionnel | 7,61M USD | Gestion et coordination du projet |
Section Beneficiaires
Statistiques d'impact sur fond bleu :
| Categorie | Nombre |
|---|---|
| Menages vulnerables | 3 500 |
| Ecoliers du primaire | 111 000 |
| Femmes et adolescentes | 200 000+ |
| Enfants < 5 ans | 1 million+ |
Section Plateforme PCH
Presentation des modules du systeme d'information :
Modules principaux (liste)
| Module | Description |
|---|---|
| Registre Social National | Enregistrement des menages pauvres et vulnerables |
| Transferts Monetaires | Transferts aux menages pour sante, education, nutrition |
Modules secondaires (grille)
- Carte SIG
- Suivi & Evaluation
- Gestion des Plaintes
- Securite & Audit
Section Partenaires
Logos des partenaires institutionnels :
| Partenaire | Role |
|---|---|
| Banque Mondiale | Financement |
| Ministere de la Sante | Mise en oeuvre |
| Ministere de l'Education | Mise en oeuvre |
| Min. Femmes et Solidarite | Mise en oeuvre |
Section Calendrier
Timeline horizontale du projet :
| Etape | Periode |
|---|---|
| 1. Evaluation et preparation | 2024 |
| 2. Approbation Banque Mondiale | 2025 |
| 3. Deploiement regions pilotes | 2025-26 |
| 4. Extension et consolidation | 2027-30 |
Footer
Colonnes du footer
| Colonne | Contenu |
|---|---|
| A propos | Logo, description, formulaire newsletter |
| A propos (liens) | Le Projet, Initiative, Objectifs, Zones, Partenaires |
| Contact | Adresse, email, horaires |
| Projet | Reference, periode, financement, ministeres |
Newsletter
Formulaire d'inscription a la newsletter :
- Entrez votre email
- 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
- Entrez votre adresse email
- Entrez votre mot de passe
- Cochez Se souvenir de moi si souhaite
- Cliquez sur Connexion
2. Authentification a deux facteurs (2FA)
Si votre compte a la 2FA activee :
- Connectez-vous avec vos identifiants
- Un ecran de verification apparait
- Ouvrez votre application d'authentification (Google Authenticator, Authy)
- Entrez le code a 6 chiffres
- Cliquez sur Verifier
3. Magic Link
- Cliquez sur Connexion par email (Magic Link)
- Entrez votre adresse email
- Cliquez sur Envoyer le lien de connexion
- Consultez votre boite de reception
- Cliquez sur le lien recu
:::caution 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).
:::info 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)
| Code | Langue |
|---|---|
| FR | Francais |
| PT | Portugues |
| EN | English |
Le changement est immediat et affecte l'ensemble de l'interface.
Design Responsive
Le site s'adapte a tous les ecrans :
| Taille | Adaptations |
|---|---|
| Mobile | Menu hamburger, sections empilees, carousel redimensionne |
| Tablette | Mise en page intermediaire |
| Desktop | Affichage complet avec grilles multi-colonnes |
Resolution de Problemes
Le carousel ne defiles pas
- Verifiez que JavaScript est active
- Videz le cache du navigateur (Ctrl+Shift+R)
Les images ne s'affichent pas
- Verifiez que les images existent dans
/images/landing/ - 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
- Verifiez que le serveur frontend est demarre (port 3000)
- Verifiez votre connexion reseau
- Essayez un autre navigateur