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.
+:::

frontmatter.json

+{
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json"
+}

package-lock.json

@@ -5360,9 +5360,16 @@
       }
     },
     "node_modules/core-js": {
+<<<<<<< HEAD
       "version": "3.25.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.0.tgz",
       "integrity": "sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA==",
+=======
+      "version": "3.22.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.7.tgz",
+      "integrity": "sha512-Jt8SReuDKVNZnZEzyEQT5eK6T2RRCXkfTq7Lo09kpm+fHjgGewSbNjV+Wt4yZMhPDdzz2x1ulI5z/w4nxpBseg==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+>>>>>>> build: update dependencies
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -5391,9 +5398,16 @@
       }
     },
     "node_modules/core-js-pure": {
+<<<<<<< HEAD
       "version": "3.25.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.0.tgz",
       "integrity": "sha512-IeHpLwk3uoci37yoI2Laty59+YqH9x5uR65/yiA0ARAJrTrN4YU0rmauLWfvqOuk77SlNJXj2rM6oT/dBD87+A==",
+=======
+      "version": "3.22.7",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.7.tgz",
+      "integrity": "sha512-wTriFxiZI+C8msGeh7fJcbC/a0V8fdInN1oS2eK79DMBGs8iIJiXhtFJCiT3rBa8w6zroHWW3p8ArlujZ/Mz+w==",
+      "deprecated": "core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.",
+>>>>>>> build: update dependencies
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -16359,6 +16373,15 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",

src/components/HomepageFeatures.js

-/* eslint-disable linebreak-style */
-/* eslint react/prop-types: 0 */
 import React from "react";
 import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 const FeatureList = [
   {
-    title: "Le Lab 🧪",   
-    Svg: require("../../static/img/chemistry.svg").default,
-    description: (
-      <>
-        Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C&apos;est plus qu&apos;un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.
-      </>
-    ), 
-  },     
+    id: 5,
+    title: "Le\u00A0SSO\u00A0🔑",
+    svg: "hello.png",
+    alt: "Kermit, sortant de sa cachette",
+    description: "Authentifiez-vous une bonne fois pour toute !"
+  },  
   {
-    title: "La CI 🔁",  
-    Svg: require("../../static/img/rainbow.svg").default,
-    description: (
-      <>
-        Fournir un outil de collaboration de code sans Intégration Continue n&apos;était pas pensable pour nous. C&apos;est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.
-      </>
-    ), 
+    id: 1,
+    title: "Le\u00A0Lab\u00A0🧪",   
+    svg: "chemistry.svg",
+    alt: "Kermit manipule du matériel de laboratoire",
+    description:"Gérer vos projets, héberger votre code et collaborer autour de Git", 
   },
   {
-    title: "Le Chat 💬",  
-    Svg: require("../../static/img/selfie.svg").default,
-    description: (
-      <>
-        Pour collaborer les équipes ont besoin de communiquer. Qu&apos;elles soient physiquement au même endroit ou non une communication asynchrone est importante. C&apos;est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L&apos;authentification se fera grâce au Lab, vous n&apos;aurez qu&apos;un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !
-      </>
-    ),
+    id: 2,
+    title: "La\u00A0CI\u00A0🔁",
+    svg: "rainbow.svg",
+    alt: "Kermit pose devant un arc-en-ciel",
+    description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
   },
   {
-    title: "Les Pages 🔖",  
-    Svg: require("../../static/img/read-smile.svg").default,
-    description: (
-      <>
-        Vous avez besoin de créer des sites statiques pour vos documentations. C&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.
-      </>
-    ),
+    id: 4,
+    title: "Les\u00A0Pages\u00A0🔖",
+    svg: "read-smile.svg",
+    alt: "Kermit porte des lunettes rondes et lit un livre",
+    description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
   },
+  {
+    id: 3,
+    title: "Le\u00A0Chat\u00A0💬",
+    svg: "selfie.svg",
+    alt: "Kermit prend un selfie",
+    description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
+  },
+  {
+    id: 6,
+    title: "La\u00A0communauté\u00A0🍺",
+    svg: "beer.png",
+    alt: "Kermit faisant un clin d'oeil, une chope à la main",
+    description: "Une communauté Git pour solutionner vos pépins rapidement"
+  }
 ];
 
 
-function Feature({Svg, title, description}) {
-  return (
-    <div className="sectionsReverse row">    
-      <div className="col col--5 text--center">
-        <Svg className={styles.svg} alt={title} />
-      </div>
-      <div className="col col--5">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>      
-    </div>
-    
-  );
-}
-
 export default function HomepageFeatures() {
   return (
-    <section className="sections container" id="features">      
-      <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
+    <section className="sections container" id="features">   
+      <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+      </h2>
+      <div className={styles.featuresSubtitle}>
+        <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
+        </p>
+        <p className={"text--center"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
+        </p> 
+      </div>
       <div>
-        {FeatureList.map((props, idx) => (
-          <Feature key={idx} {...props} />
-        ))}
+        <Tabs className={styles.tabsElement}>
+          {FeatureList.map((em) => (
+            <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
+              <div className={styles.rowDisplay}>
+                <img src={useBaseUrl("img/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                <p className={styles.textDisplay}> {em.description} </p>
+              </div>
+            </TabItem>
+          ))}
+        </Tabs>
       </div>
+
     </section>
+
   );
 }

src/components/HomepageFeatures.module.css

-/* stylelint-disable docusaurus/copyright-header */
+@import url("../css/variables.css");
 
-.svg {
-  height: 275px;
-  width: 275px; 
-  max-width: 100%; 
+.featuresSubtitle {
+    padding-top: 26px;
 }
 
-.title {
-  font-weight: bold;
-  padding-bottom: 40px;
+.tabsElement {
+    width: 100%;
+    margin-bottom: 48px;
+    
 }
+
+.tabsElement>li {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    transition: 0.4s;
+}
+
+.tabImages {
+    width: 360px;
+}
+
+.rowDisplay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.textDisplay {
+    padding: 15px;
+    width: 25%;
+    font-size: 20px;
+    text-align: left;
+}
+
+@media (max-width: 600px) {
+    .textDisplay {
+        width: 100%;
+        text-align: center;
+    }
+  }

src/components/TextRight.js

@@ -7,7 +7,7 @@ export default function TextRight({children, img}) {
     <>
       <div className="row">
         <div className="col col--6">
-          <img src={useBaseUrl(img)} />
+          <img src={useBaseUrl(img)}/>
         </div>
         <div className="col col--6">
           {children}

src/pages/index.js

@@ -30,7 +30,7 @@ export default function Home() {
       title={siteConfig.themeConfig.navbar.title}
       description={siteConfig.tagline}
     >
-      <HomepageHeader />
+      <HomepageHeader/>
       <main>
         <HomepagePromises />
         <HomepageFeatures />