veza/veza-docs/current/domains/misc/figma-pages.md

---
id: "figma-pages"
title: "📱 Pages Figma - Veza Platform"
sidebar_label: "📱 Pages Figma - Veza Platform"
---
> NOTE: Cette page reflète l'ÉTAT ACTUEL.

# 📱 Pages Figma - Veza Platform

> **Spécifications détaillées des pages pour la réalisation Figma**

## 📋 **Structure des Pages**

### **1. Page d'Accueil (Home)**
```
URL: /
Layout: Header + Sidebar + Main Content + Mini-Player
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
```

#### **Sections Principales**

**Hero Section**
- **Hauteur** : 400px
- **Background** : Gradient (indigo-500 to purple-600)
- **Contenu** : 
  - Titre principal : "Créer, Partager, Collaborer"
  - Sous-titre : "La plateforme musicale pour créateurs"
  - CTA : "Commencer maintenant"
  - Image : Illustration musicale

**Tracks Populaires**
- **Hauteur** : 200px
- **Layout** : Carrousel horizontal
- **Cards** : 4 tracks visibles
- **Contenu** : Cover + Titre + Artiste + Durée

**Artistes en Vedette**
- **Hauteur** : 300px
- **Layout** : Grid 3x2
- **Cards** : 200px de largeur
- **Contenu** : Avatar + Nom + Genre + Followers

**Playlists Recommandées**
- **Hauteur** : 400px
- **Layout** : Grid 2x3
- **Cards** : 300px de largeur
- **Contenu** : Cover + Titre + Description + Track count

**Activité Récente**
- **Hauteur** : 300px
- **Layout** : Liste verticale
- **Cards** : 100px de hauteur
- **Contenu** : Avatar + Action + Time + Track preview

**Tutoriels Populaires**
- **Hauteur** : 300px
- **Layout** : Grid 2x2
- **Cards** : 250px de largeur
- **Contenu** : Thumbnail + Titre + Durée + Views

**Contests Actifs**
- **Hauteur** : 120px
- **Layout** : Bannière horizontale
- **Contenu** : Titre + Description + CTA + Timer

**Live Streams**
- **Hauteur** : 200px
- **Layout** : Carrousel horizontal
- **Cards** : 3 streams visibles
- **Contenu** : Thumbnail + Titre + Artiste + Viewers

#### **Responsive Adaptations**

**Mobile (320px - 768px)**
- Hero : 300px de hauteur
- Grids : 1 colonne
- Carrousels : 2 items visibles
- Cards : 100% largeur

**Tablet (768px - 1024px)**
- Hero : 350px de hauteur
- Grids : 2 colonnes
- Carrousels : 3 items visibles
- Cards : 50% largeur

**Desktop (1024px - 1440px)**
- Hero : 400px de hauteur
- Grids : 3 colonnes
- Carrousels : 4 items visibles
- Cards : 33% largeur

**Large Desktop (1440px+)**
- Hero : 400px de hauteur
- Grids : 4 colonnes
- Carrousels : 5 items visibles
- Cards : 25% largeur

---

### **2. Bibliothèque (Library)**
```
URL: /library
Layout: Header + Sidebar + Main Content + Mini-Player
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
```

#### **Sections Principales**

**Header avec Filtres**
- **Hauteur** : 80px
- **Contenu** : 
  - Titre : "Ma Bibliothèque"
  - Filtres : Tous, Tracks, Playlists, Favoris, etc.
  - Recherche : Input avec icône
  - Actions : Upload, Créer playlist

**Mes Tracks**
- **Hauteur** : 400px
- **Layout** : Table
- **Colonnes** : Cover, Titre, Artiste, Album, Durée, Actions
- **Contenu** : Liste des tracks uploadés

**Playlists**
- **Hauteur** : 300px
- **Layout** : Grid 4x3
- **Cards** : 200px de largeur
- **Contenu** : Cover + Titre + Track count + Actions

**Favoris**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 80px de hauteur
- **Contenu** : Cover + Titre + Artiste + Actions

**Historique**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 80px de hauteur
- **Contenu** : Cover + Titre + Artiste + Time

**Téléchargements**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 80px de hauteur
- **Contenu** : Cover + Titre + Artiste + Status

**Collaborations**
- **Hauteur** : 300px
- **Layout** : Grid 3x2
- **Cards** : 250px de largeur
- **Contenu** : Cover + Titre + Collaborateurs + Status

**Drafts**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 80px de hauteur
- **Contenu** : Cover + Titre + Last modified + Actions

**Archives**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 80px de hauteur
- **Contenu** : Cover + Titre + Artiste + Archived date

#### **Responsive Adaptations**

**Mobile (320px - 768px)**
- Header : 60px de hauteur
- Table : Cards verticales
- Grids : 1 colonne
- Cards : 100% largeur

**Tablet (768px - 1024px)**
- Header : 70px de hauteur
- Table : Colonnes réduites
- Grids : 2 colonnes
- Cards : 50% largeur

**Desktop (1024px - 1440px)**
- Header : 80px de hauteur
- Table : Toutes les colonnes
- Grids : 3 colonnes
- Cards : 33% largeur

**Large Desktop (1440px+)**
- Header : 80px de hauteur
- Table : Toutes les colonnes
- Grids : 4 colonnes
- Cards : 25% largeur

---

### **3. Découverte (Discover)**
```
URL: /discover
Layout: Header + Sidebar + Main Content + Mini-Player
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
```

#### **Sections Principales**

**Filtres Avancés**
- **Hauteur** : 60px
- **Contenu** : 
  - Genres : Dropdown multi-select
  - Mood : Chips sélectionnables
  - Durée : Slider range
  - BPM : Input range
  - Date : Date picker

**Nouveautés**
- **Hauteur** : 200px
- **Layout** : Carrousel horizontal
- **Cards** : 4 tracks visibles
- **Contenu** : Cover + Titre + Artiste + Durée + Badge "Nouveau"

**Tendances**
- **Hauteur** : 200px
- **Layout** : Carrousel horizontal
- **Cards** : 4 tracks visibles
- **Contenu** : Cover + Titre + Artiste + Durée + Badge "Trending"

**Artistes Similaires**
- **Hauteur** : 250px
- **Layout** : Grid 4x2
- **Cards** : 150px de largeur
- **Contenu** : Avatar + Nom + Genre + Followers + Follow button

**Genres**
- **Hauteur** : 300px
- **Layout** : Grid 3x3
- **Cards** : 200px de largeur
- **Contenu** : Cover + Nom + Track count + Play button

**Mood**
- **Hauteur** : 300px
- **Layout** : Grid 2x4
- **Cards** : 250px de largeur
- **Contenu** : Cover + Mood + Track count + Play button

**Événements**
- **Hauteur** : 300px
- **Layout** : Liste verticale
- **Cards** : 120px de hauteur
- **Contenu** : Cover + Titre + Date + Location + RSVP

**Charts**
- **Hauteur** : 400px
- **Layout** : Table
- **Colonnes** : Position, Cover, Titre, Artiste, Durée, Actions
- **Contenu** : Classement des tracks

**Radio**
- **Hauteur** : 250px
- **Layout** : Grid 2x3
- **Cards** : 200px de largeur
- **Contenu** : Cover + Nom + Description + Listeners + Play button

#### **Responsive Adaptations**

**Mobile (320px - 768px)**
- Filtres : Drawer coulissant
- Carrousels : 2 items visibles
- Grids : 1 colonne
- Table : Cards verticales

**Tablet (768px - 1024px)**
- Filtres : Barre horizontale
- Carrousels : 3 items visibles
- Grids : 2 colonnes
- Table : Colonnes réduites

**Desktop (1024px - 1440px)**
- Filtres : Barre horizontale complète
- Carrousels : 4 items visibles
- Grids : 3 colonnes
- Table : Toutes les colonnes

**Large Desktop (1440px+)**
- Filtres : Barre horizontale complète
- Carrousels : 5 items visibles
- Grids : 4 colonnes
- Table : Toutes les colonnes

---

### **4. Communauté (Community)**
```
URL: /community
Layout: Header + Sidebar + Main Content + Mini-Player
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
```

#### **Sections Principales**

**Salons de Discussion**
- **Hauteur** : 300px
- **Layout** : Liste verticale
- **Cards** : 100px de hauteur
- **Contenu** : Avatar + Nom + Description + Members + Online count

**Directs**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 80px de hauteur
- **Contenu** : Avatar + Nom + Last message + Time + Unread count

**Groupes**
- **Hauteur** : 300px
- **Layout** : Grid 3x2
- **Cards** : 200px de largeur
- **Contenu** : Cover + Nom + Description + Members + Join button

**Événements**
- **Hauteur** : 300px
- **Layout** : Liste verticale
- **Cards** : 120px de hauteur
- **Contenu** : Cover + Titre + Date + Location + RSVP + Attendees

**Profils**
- **Hauteur** : 300px
- **Layout** : Grid 4x3
- **Cards** : 150px de largeur
- **Contenu** : Avatar + Nom + Genre + Followers + Follow button

**Activité**
- **Hauteur** : 400px
- **Layout** : Feed vertical
- **Cards** : 120px de hauteur
- **Contenu** : Avatar + Action + Content + Time + Interactions

**Jam Sessions**
- **Hauteur** : 300px
- **Layout** : Grid 2x2
- **Cards** : 250px de largeur
- **Contenu** : Cover + Titre + Participants + Status + Join button

**Forums**
- **Hauteur** : 200px
- **Layout** : Liste verticale
- **Cards** : 100px de hauteur
- **Contenu** : Icon + Nom + Description + Posts + Last activity

#### **Responsive Adaptations**

**Mobile (320px - 768px)**
- Grids : 1 colonne
- Cards : 100% largeur
- Feed : Cards empilées
- Navigation : Drawer

**Tablet (768px - 1024px)**
- Grids : 2 colonnes
- Cards : 50% largeur
- Feed : Cards empilées
- Navigation : Sidebar réduite

**Desktop (1024px - 1440px)**
- Grids : 3 colonnes
- Cards : 33% largeur
- Feed : Cards empilées
- Navigation : Sidebar complète

**Large Desktop (1440px+)**
- Grids : 4 colonnes
- Cards : 25% largeur
- Feed : Cards empilées
- Navigation : Sidebar complète

---

### **5. Studio (Studio)**
```
URL: /studio
Layout: Header + Sidebar + Main Content + Mini-Player
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
```

#### **Sections Principales**

**Projets**
- **Hauteur** : 300px
- **Layout** : Grid 3x2
- **Cards** : 250px de largeur
- **Contenu** : Cover + Nom + Last modified + Status + Actions

**Collaboration**
- **Hauteur** : 400px
- **Layout** : Interface temps réel
- **Contenu** : 
  - Participants : Liste des collaborateurs
  - Chat : Messages en temps réel
  - Audio : Waveform partagé
  - Contrôles : Play/Pause, Record, Mute

**Plugins**
- **Hauteur** : 300px
- **Layout** : Grid 4x3
- **Cards** : 150px de largeur
- **Contenu** : Icon + Nom + Description + Status + Install button

**Mastering**
- **Hauteur** : 300px
- **Layout** : Interface de mastering
- **Contenu** : 
  - Waveform : Visualisation audio
  - Contrôles : EQ, Compression, Limiter
  - Presets : Templates prédéfinis
  - Export : Formats et qualité

**Templates**
- **Hauteur** : 300px
- **Layout** : Grid 3x3
- **Cards** : 200px de largeur
- **Contenu** : Cover + Nom + Genre + BPM + Use button

**Exports**
- **Hauteur** : 200px
- **Layout** : Panel de configuration
- **Contenu** : 
  - Formats : WAV, MP3, FLAC
  - Qualité : 44.1kHz, 48kHz, 96kHz
  - Bitrate : 16bit, 24bit, 32bit
  - Export : Bouton d'export

**Samples**
- **Hauteur** : 300px
- **Layout** : Grid 4x4
- **Cards** : 100px de largeur
- **Contenu** : Waveform + Nom + Durée + Play button

**Presets**
- **Hauteur** : 300px
- **Layout** : Grid 3x4
- **Cards** : 150px de largeur
- **Contenu** : Icon + Nom + Description + Apply button

#### **Responsive Adaptations**

**Mobile (320px - 768px)**
- Grids : 1 colonne
- Interface : Simplifiée
- Cards : 100% largeur
- Collaboration : Drawer

**Tablet (768px - 1024px)**
- Grids : 2 colonnes
- Interface : Intermédiaire
- Cards : 50% largeur
- Collaboration : Panel

**Desktop (1024px - 1440px)**
- Grids : 3 colonnes
- Interface : Complète
- Cards : 33% largeur
- Collaboration : Sidebar

**Large Desktop (1440px+)**
- Grids : 4 colonnes
- Interface : Complète
- Cards : 25% largeur
- Collaboration : Sidebar

---

## 🎨 **Design Tokens**

### **1. Couleurs par Page**

**Home**
- Primary : #6366F1 (indigo-500)
- Secondary : #8B5CF6 (purple-500)
- Accent : #F59E0B (amber-500)

**Library**
- Primary : #10B981 (emerald-500)
- Secondary : #059669 (emerald-600)
- Accent : #F59E0B (amber-500)

**Discover**
- Primary : #3B82F6 (blue-500)
- Secondary : #2563EB (blue-600)
- Accent : #F59E0B (amber-500)

**Community**
- Primary : #8B5CF6 (purple-500)
- Secondary : #7C3AED (violet-600)
- Accent : #F59E0B (amber-500)

**Studio**
- Primary : #EF4444 (red-500)
- Secondary : #DC2626 (red-600)
- Accent : #F59E0B (amber-500)

### **2. Typographie par Section**

**Titres de Page**
- Font : 36px, Bold
- Color : #F9FAFB (gray-50)
- Line Height : 1.3

**Sous-titres**
- Font : 24px, Semibold
- Color : #D1D5DB (gray-300)
- Line Height : 1.4

**Contenu**
- Font : 16px, Regular
- Color : #F9FAFB (gray-50)
- Line Height : 1.5

**Métadonnées**
- Font : 14px, Regular
- Color : #9CA3AF (gray-400)
- Line Height : 1.4

### **3. Espacement par Layout**

**Sections Principales**
- Padding : 24px
- Margin : 16px
- Gap : 16px

**Cards**
- Padding : 16px
- Margin : 8px
- Gap : 8px

**Listes**
- Padding : 12px
- Margin : 4px
- Gap : 4px

---

## 🚀 **Plan d'Implémentation**

### **Phase 1 : Pages Principales (3-4 jours)**
- [ ] Page d'accueil
- [ ] Bibliothèque
- [ ] Découverte
- [ ] Communauté
- [ ] Studio

### **Phase 2 : Pages Secondaires (2-3 jours)**
- [ ] Analytics
- [ ] Marketplace
- [ ] Formation
- [ ] Radio
- [ ] Profil

### **Phase 3 : Responsive (2-3 jours)**
- [ ] Mobile adaptations
- [ ] Tablet adaptations
- [ ] Desktop optimizations
- [ ] Large screen adaptations

### **Phase 4 : Polish (1-2 jours)**
- [ ] Final touches
- [ ] Consistency check
- [ ] Export assets
- [ ] Documentation

---

*Document créé le 2024-01-15 - Veza Platform Design Team*