# STRUCTURE DÉFINITIVE TRUSTPAY AFRICA - CONTENU DÉTAILLÉ

## 📋 VALIDATION DE L'ARBORESCENCE

L'arborescence que je t'ai donnée est **correcte et optimale** pour ton projet.
Voici le contenu détaillé de chaque page :

---

## 🏠 PAGES PUBLIQUES

### `src/routes/+[Link]` - **Page d'accueil**

```
SECTIONS:
1. Hero
- Titre: "Vendez en toute sécurité sur WhatsApp et Facebook"
- Sous-titre: "Votre argent est protégé jusqu'à réception"
- CTA: "Créer un lien de paiement" (sans inscription)

2. Création Rapide (sans auth)

- Input montant (number)
- Input description (textarea - optionnel)
- Select délai (3, 7, 14, 30 jours)
- Bouton "Générer le lien"
- Affichage du lien généré + bouton copier

3. Comment ça marche (3 étapes)

- 1. Créez votre lien
- 2. Partagez avec votre client
- 3. Recevez votre argent

4. Trust Signals
- "500M+ FCFA sécurisés"
- "10,000+ transactions"
- "Disponible dans 8 pays"

5. CTA Vendeur
- "Vous êtes vendeur régulier ?"
- Bouton "Créer un compte gratuit"

6. Footer
- Liens légaux
- Pays supportés
- Contact
```

### `src/routes/pay/[code]/+[Link]` - **Page de paiement**

```
CONTENU DYNAMIQUE (basé sur le code):
1. Header Simple
- Logo TrustPay
- Code transaction: TP-XXXXX

2. Détails Transaction
- Montant en gros: "50,000 FCFA"
- Description (si fournie)
- Vendeur (si compte vérifié)

3. Banner Protection
 - "🔒 Votre argent est protégé pendant 7 jours"
- "Vous ne payez que si vous recevez"

4. Méthodes de Paiement
- Orange Money (bouton orange)
- MTN Money (bouton jaune)
- Wave (bouton bleu)
- Mobile Money (selon pays)

5. Footer Simple
- "Comment ça marche ?"
- "Besoin d'aide ?"

ÉTATS POSSIBLES:
- Transaction active → Afficher formulaire
- Transaction expirée → Message + créer nouveau
- Transaction payée → Redirection /success
- Transaction inexistante → Erreur 404
```

### `src/routes/success/[code]/+[Link]` - **Confirmation paiement**

```
CONTENU:
1. Icône Succès (animation)

2. Message Principal
- "Paiement réussi !"
- Montant payé
- Code transaction

3. Instructions
- "Le vendeur a été notifié"
- "Vous avez 7 jours pour confirmer réception"
- "Comment confirmer ?" → Instructions SMS

4. Détails Transaction
- Référence paiement
- Date et heure
- Méthode utilisée

5. Actions
- "Télécharger reçu" (PDF)
- "Voir statut transaction"

6. Support
- "Un problème ?"
- Numéro WhatsApp support
```

---

## 🔐 PAGES AUTHENTIFICATION

### `src/routes/auth/login/+[Link]` - **Connexion**

```
LAYOUT MINIMAL (sans header/footer):
1. Logo + Retour accueil

2. Formulaire
 - Input téléphone (avec sélecteur pays)
- Input code PIN (6 chiffres)
- Checkbox "Se souvenir"

3. Actions
- Bouton "Se connecter"
- "PIN oublié ?"

4. Alternative
- "Pas encore de compte ?"
- Lien vers inscription
```

### `src/routes/auth/register/+[Link]` - **Inscription**

```
CONTENU:
1. Étape 1/3 - Informations
- Nom/Prénom ou nom boutique
- Téléphone (avec validation pays)
- Créer PIN (6 chiffres)
- Confirmer PIN

2. Étape 2/3 - Vérification SMS

- "Code envoyé au +225XXXXXXXX"
- 6 inputs pour code OTP
- "Renvoyer le code" (après 60s)

3. Étape 3/3 - Finalisation

- Choix type compte (Personnel/Business)
- Accepter CGU
- Bouton "Créer mon compte"

VALIDATION:
- Téléphone unique
- PIN fort (pas 123456)
- OTP valide
```

### `src/routes/auth/verify/+[Link]` - **Vérification OTP**

```
CONTENU:
1. Message
- "Vérifiez votre téléphone"
- "Code envoyé au +225XXXXXXXX"

2. Input Code
- 6 cases individuelles
- Auto-focus next

3. Actions
- Timer compte à rebours (60s)
- "Renvoyer" (après expiration)
- Bouton "Vérifier"

4. Aide
- "Code non reçu ?"
- "Vérifier le numéro"
```
---

## 📊 PAGES DASHBOARD

### `src/routes/dashboard/+[Link]` - **Tableau de bord**

```
SECTIONS:
1. Header Dashboard
- "Bonjour [Nom]"
- Bouton "Nouveau lien" (primary)

2. Cartes Statistiques
- Balance disponible (gros chiffres)
- En attente de libération
- Nombre de transactions
- Taux de succès

3. Actions Rapides
- Créer un lien
- Demander un retrait
- Voir l'historique
- Support

4. Graphique Simple
- Évolution sur 7 jours
- Toggle Semaine/Mois

5. Transactions Récentes (5 dernières)

- Montant + Description
- Statut (badges couleur)
- Date
- Action rapide

6. Notifications
- Paiements reçus
- Fonds libérés
- Litiges ouverts
```

### `src/routes/dashboard/transactions/+[Link]` - **Liste transactions**

```
CONTENU:
1. Filtres
- Recherche par code/montant
- Statut (Tous/Payé/Libéré/Litige)
- Période (7j/30j/Tout)
- Export CSV

2. Tableau/Liste (mobile-first)
- Code transaction
- Montant
- Description
- Statut
- Date création
- Actions (Voir/Partager)

3. Pagination
- 20 par page
- Navigation simple
4. États vides
- "Aucune transaction"
- CTA créer première
```

### `src/routes/dashboard/transactions/[id]/+[Link]` - **Détail transaction**

```
CONTENU:
1. En-tête
- Code transaction (gros)
- Statut actuel
- Actions contextuelles

2. Timeline
- Créée le...
- Payée le... (si applicable)
- Expire le...
- Libérée le... (si applicable)

3. Détails
- Montant
- Description
- Acheteur (téléphone masqué)
- Méthode paiement

4. Actions (selon statut)

- Partager le lien (si non payé)
- Voir preuves (si litige)
- Télécharger reçu (si payé)

5. Zone Danger
- Annuler (si non payé)
- Ouvrir litige (si éligible)
```

### `src/routes/dashboard/withdrawals/+[Link]` - **Retraits**

```
SECTIONS:
1. Balance
- Disponible: XXX FCFA
- Minimum retrait: 5,000 FCFA

2. Nouveau Retrait
- Montant à retirer
- Méthode (Mobile Money/Banque)
- Détails compte
- Frais: 2%
- Montant net à recevoir

3. Historique Retraits
- Date demande
- Montant
- Statut
- Référence

4. Informations
- Délais de traitement
- Limites
 - FAQ retraits
```

### `src/routes/dashboard/settings/+[Link]` - **Paramètres**

```
SECTIONS:
1. Informations Profil
- Nom/Boutique
- Téléphone
- Pays
- Badge vérifié (si applicable)

2. Sécurité
- Changer PIN
- 2FA (activer/désactiver)
- Sessions actives

3. Notifications
- SMS (on/off)
- Email (optionnel)
- WhatsApp (optionnel)

4. Préférences
- Langue
- Devise par défaut
- Délai protection par défaut

5. Zone Danger
- Désactiver compte
- Supprimer compte
```

---

## ⚖️ PAGES LITIGES

### `src/routes/dispute/[id]/+[Link]` - **Gestion litige**

```
CONTENU:
1. Header Litige
- "Litige #ID"
- Transaction concernée
- Statut litige

2. Résumé Transaction
- Montant
- Date paiement
- Parties impliquées

3. Chat Tripartite
- Messages horodatés
- Identification claire (Acheteur/Vendeur/Modérateur)
- Input nouveau message

4. Preuves
- Upload photos/documents
- Visualisation preuves existantes
- Télécharger preuves
5. Actions (pour modérateur)
- Rembourser acheteur
- Libérer au vendeur
- Split (partiel)
- Demander plus d'infos

6. Historique
- Qui a ouvert
- Raison initiale
- Actions prises
```

---

## 📄 PAGES LÉGALES/MARKETING

### `src/routes/legal/terms/+[Link]` - **CGU**

```
CONTENU STANDARD:
1. Définitions
2. Objet du service
3. Inscription et compte
4. Utilisation du service
5. Frais et paiements
6. Responsabilités
7. Litiges
8. Modifications
9. Contact
```

### `src/routes/(marketing)/how-it-works/+[Link]` - **Comment ça marche**

```
SECTIONS:
1. Pour les Vendeurs
- 3 étapes illustrées
- Vidéo démo (optionnel)
- FAQ vendeurs

2. Pour les Acheteurs

- Protection expliquée
- Process de paiement
- FAQ acheteurs

3. Sécurité
- Mesures de protection
- Que faire en cas de problème

4. CTA
- "Commencer maintenant"
- "Créer un compte vendeur"
```

### `src/routes/(marketing)/pricing/+[Link]` - **Tarifs**

```
CONTENU:
1. Hero
- "Simple et transparent"
- "2% seulement"
2. Tableau Comparatif
- TrustPay vs Pas de protection
- Avantages listés

3. Calculateur
- Entrer montant
- Voir frais
- Montant net

4. FAQ Tarifs
- Frais cachés ?
- Réductions volume ?
- Gratuit pour acheteurs

5. CTA
- "Créer compte gratuit"
```

---

## ✅ CONFIRMATION FINALE

Cette structure est **définitive et complète** pour ton MVP. Elle couvre :

1. **Flow complet** : Création → Paiement → Libération

2. **Gestion vendeur** : Dashboard complet
3. **Protection acheteur** : Litiges et remboursements
4. **Aspects légaux** : CGU et conformité
5. **Marketing** : Pages de conversion

Tu peux coder chaque composant individuellement pendant ton apprentissage, puis les
assembler. L'architecture est modulaire et scalable.

**Commence par** :
1. Les composants UI de base (`[Link]`, `[Link]`, etc.)
2. La page d'accueil pour pratiquer les layouts
3. Le flow de paiement (coeur du métier)
4. Puis progressivement le dashboard