Resolve "refactor: HomepageFeatures"

Closes #92 (closed)

docs/Gestions des plans/etang_users.md

+# Comment gérer les utilisateurs des plans Étang ?
+
+Lorsque vous achetez des plans **étangs**, ou plusieurs plans **grenouilles** vous disposez de plusieurs `sièges` pour vos utilisateurs.
+
+:::info Exemple
+
+- Avec 1 offre **étang 10** vous avez **10 sièges**, soit 9 en plus de celui de l'administrateur.
+- Avec 1 offre **étang 100**, 1 offre **étang 10** et 4 offres **grenouille** vous avez **114 sièges**, soit 113 en plus de celui de l'administrateur.
+- Avec 7 offres **grenouille** vous avez **7 sièges**, soit 6 en plus de celui de l'administrateur.
+:::
+
+:::caution Précision
+Vos abonnements serons liés au courriel renseigné dans la page de commande. Pour regrouper vos abonnements dans une seule flotte, il faut absolument tous les prendre avec le **même** courriel.
+:::
+
+## Explication en vidéo
+
+<iframe
+width="864"
+height="486"
+src="https://www.youtube.com/embed/jINa6cUGbdE"
+frameborder="0"
+allow="accelerometer;
+autoplay;
+encrypted-media;
+clipboard-write;
+encrypted-media;
+gyroscope;
+picture-in-picture;
+allowfullscreen"
+allowfullscreen>
+</iframe>
+
+## Votre groupe client
+
+Pour gérer votre flotte de sièges Froggit, vous allez utiliser la gestion des groupes du GitLab de Froggit.
+
+En tant que client de Froggit, vous disposez d’un espace de gestion des clients. C'est ce que nous appelons un **groupe client**.
+
+C'est un sous-groupe du groupe des clients de Froggit. Le nom de ce groupe est l'adresse courriel du client, celui utilisé au moment de la commande, dans lequel tous les caractères spéciaux (`.` et `@`) ont été remplacés par des '_'.
+
+Votre utilisateur GitLab client est ajouté en tant que propriétaire (_owner_) de ce sous-groupe car vous êtes propriétaire de l’abonnement Froggit.
+
+:::info Exemple
+
+Pour le client `user@domain.tld`, ce **groupe client** est accessible à cette url : <https://lab.frogg.it/admin/groups/froggit_data/customers/paid/user_domain_tld>
+
+:::
+
+:::success Sécurité
+C'est un **groupe privé** et seuls les membres de ce groupe peuvent le voir. Vous-même **ne pouvez pas** voir les groupes des autres clients
+:::
+
+:::caution Précision
+L'utilisateur [Kermit](https://lab.frogg.it/kermit), notre mascotte administratrice de l'instance est aussi propriétaire (_owner_) de votre **groupe client** car Kermit est le propriétaire du groupe racine `froggit_data`.
+
+Il n'est bien sûr pas décompté de votre nombre de sièges.
+:::
+
+Dans la [liste des groupes](https://lab.frogg.it/dashboard/groups) vous allez voir le groupe privé `🗄️ Froggit data`
+
+![Groupe racine Froggit data](/img/docs/gestion_plans/froggit_data_in_group_list.png)
+
+Si vous dépliez ce groupe complètement vous allez arriver à votre **groupe client**.
+
+![Groupe client](/img/docs/gestion_plans/customer_group_in_group_list.png)
+
+:::danger Attention !
+N'utilisez pas ce groupe pour gérer vos projets ou votre organisation. Ce groupe ne sert qu'à gérer votre flotte d'utilisateurs Froggit. Nous vous conseillons de gérer votre organisation en créant un [groupe racine (_namespace_)](https://lab.frogg.it/help/user/group/index.md#namespaces).
+
+- [ℹ️ Pour en savoir plus sur la gestion d’une organisation dans GitLab...](https://lab.frogg.it/help/topics/set_up_organization)
+- [▶️ Comment ranger ses dépôts ?](https://youtu.be/UfN7q6mukJk)
+- [▶️ GitLab Virtual Meetup - Histoires d'un collègue perfectionniste sous pression](https://youtu.be/urvBh7-4RFo)
+:::
+
+### Votre page client Froggit
+
+Dans votre groupe client vous avez un projet `My Froggit Customer Page` qui vous présentera des données synthétiques sur votre compte.
+
+![My Froggit Customer Page](/img/docs/gestion_plans/My_Froggit_Customer_Page.png)
+
+### Votre badge de sièges
+
+Dans votre **groupe client** et votre page client Froggit vous avez un badge indiquant votre nombre de sièges occupés par rapport à votre nombre de sièges total de vos abonnements en cours.
+
+Une couleur indique le remplissage de votre flotte :
+
+- **vert :** jusqu'à 80% ![badge occupation vert](https://img.shields.io/badge/Si%C3%A8ges-1%2F100-green)
+- **orange :** entre 81 et 100% ![badge occupation orange](https://img.shields.io/badge/Si%C3%A8ges-81%2F100-orange)
+- **rouge :** vous avez dépassé le nombre de sièges de votre abonnement ![badge occupation rouge](https://img.shields.io/badge/Si%C3%A8ges-101%2F100-red)
+
+En cliquant sur ce badge vous vous retrouverez sur votre espace de gestion des sièges de votre **groupe client**.
+
+:::caution Précision
+Votre badge de sièges n'est pas mis à jour instantanément.
+Il est recalculé toutes les nuits.
+:::
+
+## Gestion de vos utilisateurs
+
+### Ajouter un utilisateur à votre flotte
+
+Vous pouvez ajouter un utilisateur par son adresse courriel en cliquant sur le bouton `Invite members`.
+![invite members button](/img/docs/gestion_plans/invite_members_button.png)
+
+Vous pouvez alors remplir le formulaire d'invitation avec les informations du membre :
+
+- **adresse courriel :** si l'utilisateur n'a pas de compte sur Froggit il faut cliquer sur `Invite "email@domain.tld" by email` qui apparaît en dessous du champ de formulaire.
+- **role :** si vous voulez qu'un utilisateur puisse lui aussi gérer les membres il faut l'inviter en tant que `Maintainer` ou `Owner`
+- **date d'expiration d'accès :** après cette date le membre ne fera plus partie de votre flotte
+
+![invite members form](/img/docs/gestion_plans/invite_members_form.png)
+
+[ℹ️ Pour en savoir plus sur l'ajout des membres...](https://lab.frogg.it/help/user/group/index.md#add-users-to-a-group)
+
+Le membre va recevoir un courriel l'invitant à créer son compte sur Froggit.
+
+![invite members mail](/img/docs/gestion_plans/invite_members_mail.png)
+
+Tant qu'il n’aura pas créé son compte il apparaîtra dans la liste des invitations.
+
+![invite members pending](/img/docs/gestion_plans/invite_members_pending.png)
+
+Après avoir créé son compte, l'utilisateur apparaît alors dans la liste des membres.
+
+![invite members result](/img/docs/gestion_plans/invite_members_result.png)
+
+### Retirer un utilisateur de votre flotte
+
+Pour retirer un membre de votre flotte, il suffit simplement de cliquer sur le bouton `Remove member` à droite de la ligne du membre.
+
+![remove members button](/img/docs/gestion_plans/remove_members_button.png)
+
+[ℹ️ Pour en savoir plus sur la suppression des membres...](https://lab.frogg.it/help/user/group/index.md#remove-a-member-from-the-group)
+
+:::caution Précision
+Si un membre est retiré d'un groupe et qu'il n'appartient à aucun groupe de `froggit_data/customers` alors le compte sera désactivé et il ne pourra plus se connecter à Froggit.
+:::