Compare revisions

Celeste Robert · Christophe Chaudier · Christophe Chaudier · Celeste Robert · Christophe Chaudier · Christophe Chaudier
--- a/README.md
+++ b/README.md
@@ -38,6 +38,10 @@ This command generates static content into the `build` directory and can be serv

 [Follow this doc](doc/theme.md).

+## Components
+
+[Follow this doc](doc/components.md)
+
 ## Three structure

 ```
@@ -66,6 +70,21 @@ More details on Project structure:
 * `/static/` -  Any contents inside here will be copied into the root of the final `build` directory
 * `/docusaurus.config.js` -  This is the equivalent of `siteConfig.js` in Docusaurus v1

+## Image organisation
+
+Static assets are arranged in a certain way, all images are contained in subfolders within the `img` folder, the subfolder depends on how they are used. The name must be the same. Following this structure: 
+
+* An image used on a page will be in a subfolder named after the page, within the `pages` folder. e.g:
+__You would find the file `kermit.png` used on the `about` page at `img/pages/about/kermit.png`__
+
+* An image used in a component will be in a subfolder named after the component, within the `components` folder. e.g:
+__You would find the file `kermit.png` used on the `slider` component at `img/components/slider/kermit.png`__
+
+* An image used on a documentation page will be in a subfolder named after the page, within the `docs` folder. e.g:
+__You would find the file `kermit.png` used on the `management` documentation page at `img/docs/management/kermit.png`__
+
+* Global images (e.g: used in the footer) will be in the `img/theme/` subfolder.
+
 ## License

 [![froggit.fr Copyright (c) 2021-present Lydra](https://cdn.icon-icons.com/icons2/2622/PNG/512/legal_license_mit_icon_157533.png)](https://choosealicense.com/licenses/mit/)

--- a/doc/components.md
+++ b/doc/components.md
+# Composants
+
+Les composants sont des extraits de code `.js` ou `.jsx` indépendants et réutilisables, ils se situent dans `src/components/`.
+
+## Liste de composants
+
+### Highlight.js
+
+Le composant **Highlight** sert à surligner un élément, en particulier du texte. Il nécéssite les props `color` qui déterminera la couleur du surlignage et `children` qui doit accueillir le texte à surligner. 
+
+### TextRight.js
+
+Le composant **TextRight** sert à afficher une image à la gauche de son bloc enfant, avec largeur égale. Il nécéssite les props `img` qui sera l'image à afficher à gauche du bloc enfant et `children` qui sera le bloc enfant d’éléments HTML.
+
+### Carousel.js
+
+Le composant **Carousel** permet de générer un carrousel en utilisant le _slider_ de [React Slick] (https://react-slick.neostack.com/).
+
+Le composant peut recevoir 5 props. `name` (optionnel) sera le texte affiché sous l'image, `link` (optionnel) permet de rendre l'image cliquable pour ouvrir un lien dans un nouvel onglet, `alt` sera le texte alternatif à l'image ou au svg. 
+Concernant l'image, il peut s'agir d'un fichier (png, svg, jpeg...) avec le props `img` ou de svg inline en html avec le props `svg` (ne pas mettre de chemin vers un fichier svg avec le props `svg`!). Si les deux arguments sont fournis, seul `img` sera pris en compte.
+
+### CarouselLibre.js
+
+Le composant **CarouselLibre** est utilisé sur la page d'accueil pour afficher un carrousel des logiciels libres (FLOSS) utilisés par Froggit, il utilise le composant générique **Carousel**
+
+Afin que les logos de FLOSS unis (par exemple blancs ou noirs) restent bien visibles peu importe le thème, les intégrer en [SVG inline](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction) dans le props `svg` et penser à supprimer les valeurs "fill". Cela leur permettra de prendre la couleur du texte selon le thème. 
+
+### HomepagePromises.js 
+
+Le composant **HomepagePromises** est utilisé sur la page d'accueil pour afficher les promesses de Froggit (section **À vous de faire la différence**). 
+
+il renvoie une section constituée d'un titre central puis d'une liste React (**PromiseList**) affichée en ligne.
+
+Les éléments **Promise** de la liste sont affichés en colonne et sont composés d'un titre, une image SVG et une description. Le composant **Promise** prendra respectivement les props `Svg`, `title` et `description`.
+
+### HomepageFeatures.js 
+
+Le composant **HomepageFeatures** affiche les fonctionnalités de Froggit sur la page d'accueil. 
--- a/docs/Gestions des plans/etang_users.md
+++ b/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/gestions_des_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/gestions_des_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/gestions_des_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/gestions_des_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/gestions_des_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/gestions_des_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/gestions_des_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/gestions_des_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/gestions_des_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.
+:::
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -17,7 +17,7 @@ module.exports = {
      title: "",
      logo: {
        alt: "Froggit Logo",
-        src: "img/logo_typo_froggit.png",
+        src: "img/theme/logo_typo_froggit.png",
      },
      items: [      
        {label: "Fonctionnalités", position: "left", to: "/#features", exact: true},

--- a/frontmatter.json
+++ b/frontmatter.json
+{
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json"
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
    "lint-fix": "eslint . --fix"
  },
  "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.21",
-    "@docusaurus/preset-classic": "2.0.0-beta.21",
+    "@docusaurus/core": "^2.0.1",
+    "@docusaurus/preset-classic": "^2.0.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",

--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -5,62 +5,68 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";

-function CarouselElement({name, img, link}) {
-  if (typeof link === "undefined" && typeof name === "undefined") {
+function Logo({img, svg, alt}) {
+  if (img) {
    return (
-      <div className="box_carousel">     
-        <div>
-          <img src={useBaseUrl(img)} className="carousel-img" />
-        </div>
-      </div>
+      <> 
+        <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
+      </>
    );
  }
-
-  else if (typeof link === "undefined") {
-    return (
-      <div className="box_carousel">     
-        <div>
-          <img src={useBaseUrl(img)} className="carousel-img" />
-          <h6 className="title_carousel">{name}</h6>
-        </div>
-      </div>
-    );
-  }
-
-  else if (typeof name === "undefined") {
+  else if (svg) {
    return (
-      <div className="box_carousel">
-        <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} className="carousel-img" />
-        </a>
-      </div>
+      <svg alt={alt}>
+        {svg}
+      </svg>
    );
  }
+}

-  else {
-    return (
-      <div className="box_carousel">
-        <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} className="carousel-img" />
-          <h6 className="title_carousel">{name}</h6>
-        </a>
-      </div>
-    );
-  }
+function CarouselElement({name, img, svg, link, alt}) {
+  return (
+    <div className="carousel_box">
+      {(() => {
+        if (link) {
+          return (
+            <a href={link} target="_blank" rel="noopener noreferrer">
+              <Logo img={img} svg={svg} alt={alt}/>
+            </a>
+          );
+        }
+        else {
+          return (
+            <Logo img={img} svg={svg} alt={alt}/>
+          );         
+        }
+      })()}   
+      {(() => {
+        if (name) {
+          return (
+            <h6 className="carousel_title">{name}</h6>
+          ); 
+        }
+      })()}
+    </div>
+  );
 }

 export default function Carousel(props) {
  const list = props.list;
  //https://react-slick.neostack.com/docs/api/
  const settings = {
-    dots: false,
    infinite: true,
+    easing: "linear",
    slidesToShow: 2,
    slidesToScroll: 1,
+    arrows: false,
    autoplay: true,
-    speed: 4000,
-    autoplaySpeed: 4000,
+    speed: 3000,
+    draggable: false,
+    swipeToSlide: false,
+    autoplaySpeed: 3000,
    variableWidth: true,
+    centerMode: true,
+    pauseOnHover: true,
    cssEase: "linear"
  };


--- a/src/components/CarouselLibre.js
+++ b/src/components/CarouselLibre.js
 import React from "react";
 import Carousel from "./Carousel";
+import clsx from "clsx";

 const CarouselList = [
  {
-    name: "Acceuil",
-    img: "/img/docusaurus.png",
-    link: "https://froggit.fr/",
+    img: "/img/components/CarouselLibre/gitlab_logo.png",
+    name: "GitLab",
+    alt: "Pourquoi nous avons choisi Gitlab ?"
  },
  {
-    img: "/img/bouclier.svg",
+    svg: <svg viewBox="-15 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+      <path d="M243.747 73.364c-8.454-18.258-20.692-33.617-36.9-46.516.432 8.756 1.374 27.484 1.374 27.484s1.01 1.327 1.42 1.901c16.38 22.876 22.365 48.231 16.91 75.771-10.94 55.222-64.772 88.91-119.325 75.138-47.892-12.091-79.878-61.06-70.82-109.609 7.15-38.327 29.801-63.859 66.584-76.833l1.333-.504 1.046-.774c4.458-6.304 8.808-12.685 13.45-19.422C63.07 2.762 7.003 47.488.58 115.522c-6.216 65.832 38.17 124.541 101.596 137.424 66.096 13.425 129.017-25.57 148.031-87.976 9.508-31.206 7.283-61.924-6.46-91.606zm-157.31 41.172c2.787 26.487 25.745 44.538 52.302 41.603 26.092-2.884 45.166-28.409 40.227-54.232-3.85-20.134-8.105-40.19-12.188-60.279-1.689-8.313-3.398-16.623-5.19-25.391-.707.621-1.035.883-1.334 1.176-8.94 8.764-17.875 17.533-26.815 26.297-10.886 10.673-21.757 21.36-32.669 32.006-10.944 10.677-15.926 23.707-14.334 38.82z"/>
+    </svg>,
+    name: "Mattermost",
+    alt: "Pourquoi nous avons choisi Mattermost ?"
  },
  {
-    img: "/img/logo_froggit.svg",
-    link: "/communaute",
+    img: "/img/components/CarouselLibre/docusaurus.png",
+    name: "Docusaurus",
+    alt: "Pourquoi nous avons choisi Docusaurus ?"
  },
  {
-    name: "hello",
-    img: "/img/logo_froggit.svg",
+    img: "/img/components/CarouselLibre/debian_logo.png",
+    name: "Debian",
+    alt: "Pourquoi nous avons choisi Debian ?",
  },
  {
-    name: "ki jan'w",
-    img: "/img/chemistry.svg",
+    svg: <svg version="1.0" encoding="utf-8" viewBox="0 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+      <path d="M 275.104 146.724 C 275.104 217.179 217.994 274.289 147.538 274.289 C 77.088 274.289 19.972 217.179 19.972 146.724 C 19.972 76.274 77.088 19.158 147.538 19.158 C 217.994 19.158 275.104 76.274 275.104 146.724 Z M 149.685 97.085 L 182.697 178.561 L 132.833 139.283 Z M 208.33 197.33 L 157.551 75.128 C 156.102 71.603 153.203 69.738 149.685 69.738 C 146.161 69.738 143.051 71.603 141.602 75.128 L 85.869 209.168 L 104.934 209.168 L 126.997 153.902 L 192.836 207.092 C 195.483 209.233 197.394 210.202 199.878 210.202 C 204.852 210.202 209.199 206.473 209.199 201.091 C 209.199 200.215 208.89 198.824 208.33 197.329 Z"/>
+      <path d="M 183.868 180.12 L 132.23 139.445 L 149.682 95.745 Z M 133.436 139.121 L 181.526 177.002 L 149.688 98.425 Z M 208.798 197.154 C 209.368 198.682 209.699 200.161 209.699 201.091 C 209.699 203.89 208.521 206.362 206.746 208.029 C 204.971 209.697 202.458 210.702 199.878 210.702 C 197.281 210.702 195.213 209.651 192.522 207.481 L 127.21 154.717 L 105.273 209.668 L 85.12 209.668 L 85.407 208.976 L 141.14 74.938 C 141.904 73.109 143.134 71.638 144.593 70.692 C 146.055 69.744 147.855 69.238 149.685 69.238 C 151.514 69.238 153.264 69.747 154.673 70.697 C 156.08 71.645 157.252 73.112 158.013 74.936 L 207.83 194.824 L 207.83 194.557 Z M 207.869 197.523 L 157.089 75.32 C 156.401 73.619 155.399 72.391 154.114 71.526 C 152.832 70.662 151.374 70.238 149.685 70.238 C 147.991 70.238 146.474 70.664 145.137 71.531 C 143.799 72.398 142.749 73.622 142.064 75.318 L 86.618 208.668 L 104.595 208.668 L 126.784 153.087 L 193.15 206.703 C 195.753 208.815 197.507 209.702 199.878 209.702 C 202.272 209.702 204.419 208.843 206.061 207.3 C 207.704 205.757 208.699 203.674 208.699 201.091 C 208.699 200.273 208.414 198.977 207.869 197.523 Z"/>
+    </svg>,
+    name: "Ansible",
+    alt: "Pourquoi nous avons choisi Ansible ?"
  },
  {
-    name: "bom dia",
-    img: "/img/read-smile.svg",
+    img: "/img/components/CarouselLibre/Terraform_logo.png",
+    name: "Terraform",
+    alt: "Pourquoi nous avons choisi Terraform ?"
+  },
+  {
+    svg: <svg version="1.0" encoding="utf-8" viewBox="0 -90 294.451 296.514" xmlns="http://www.w3.org/2000/svg">
+      <path id="p1" transform="matrix(1, 0, 0, 1, 20.9086, 32.2192)" d="M43.75 13.8021L26.6667 13.8021L26.6667 0L53.3854 0L67.2396 13.8021L67.2396 27.8646L60.3125 34.7917L67.2396 41.7187L67.2396 55.3125L53.3854 69.1146L26.6667 69.1146L26.6667 55.3125L43.75 55.3125L43.75 40.5729L26.6667 40.5729L26.6667 28.5417L43.75 28.5417ZM0 0L23.0208 0L23.0208 69.1146L0 69.1146Z"/>
+      <path id="p2" transform="matrix(1, 0, 0, 1, 97.679398, 46.021301)" d="M62.1354 41.5104L48.3333 55.3125L32.9167 55.3125L32.9167 42.3958L38.6458 42.3958L38.6458 13.8021L32.9167 13.8021L32.9167 0L48.3333 0L62.1354 13.8021ZM23.2813 42.3958L29.2708 42.3958L29.2708 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L29.2708 0L29.2708 13.8021L23.2813 13.8021Z"/>
+      <path id="p3" transform="matrix(1, 0, 0, 1, 170.231003, 46.021301)" d="M36.5104 13.8021L26.7187 13.8021L26.7187 7.76042L34.4271 0L48.3854 0L59.5833 12.9167L59.5833 27.2396L36.5104 27.2396ZM0 55.3125L0 7.10543e-15L23.0208 7.10543e-15L23.0208 55.3125Z"/>
+      <path id="p4" transform="matrix(1, 0, 0, 1, 236.429001, 46.021301)" d="M36.875 13.8021L26.6667 13.8021L26.6667 7.10543e-15L46.0937 7.10543e-15L59.8958 13.8021L59.8958 60.7812L46.0937 74.6875L15.7292 74.6875L8.80208 67.7083L8.80208 62.6042L36.875 62.6042ZM33.2292 42.3958L33.2292 48.4896L26.3542 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L23.0208 0L23.0208 42.3958Z"/>
+    </svg>,
+    name: "Borg",
+    alt: "Pourquoi nous avons choisi Borg ?"
+  },
+  {
+    img: "/img/components/CarouselLibre/restic_logo.png",
+    name: "Restic",
+    alt: "Pourquoi nous avons choisi Restic ?"
  },
 ];

 export default function CarouselLibre() {
  return (
-    <Carousel list={CarouselList} />
+    <div>
+      <h2 className={clsx("text--center")}>Restez libres !
+      </h2>
+      <p className={"text--center"}>Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
+      </p> 
+      <section className="sections container">
+        <Carousel list={CarouselList} />
+      </section>
+    </div>
  );
 }
--- a/src/components/HomepageFeatures.js
+++ b/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/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                <p className={styles.textDisplay}> {em.description} </p>
+              </div>
+            </TabItem>
+          ))}
+        </Tabs>
      </div>
+
    </section>
+
  );
 }
--- a/src/components/HomepageFeatures.module.css
+++ b/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;
+    }
+  }
--- a/src/components/HomepagePromises.js
+++ b/src/components/HomepagePromises.js
@@ -5,7 +5,8 @@ import styles from "./HomepagePromises.module.css";
 const PromiseList = [
  {
    title: "Sécurisé",
-    Svg: require("../../static/img/bouclier.svg").default,
+    Svg: require("../../static/img/components/HomepagePromises/bouclier.svg").default,
+    alt: "Icône d'un bouclier bleu",
    description: (
      <>
        <p>Vos données sont en lieu sûr et sauvegardées à deux endroits différents toutes les nuits.</p>
@@ -14,7 +15,8 @@ const PromiseList = [
  },
  {
    title: "Souverain",
-    Svg: require("../../static/img/rgpd.svg").default,
+    Svg: require("../../static/img/components/HomepagePromises/rgpd.svg").default,
+    alt: "Icône d'un cadenas avec inscrit RGPD",
    description: (
      <>
        <p>Dites bye-bye au <i>Cloud Act</i> et aux risques d’espionnage industriel. Avec Froggit vous êtes hébergé en France et protégé par les normes RGPD.</p>
@@ -23,7 +25,8 @@ const PromiseList = [
  },
  {
    title: "Libre",
-    Svg: require("../../static/img/liberte.svg").default,
+    Svg: require("../../static/img/components/HomepagePromises/liberte.svg").default,
+    alt: "Icône de menottes brisées",
    description: (
      <>
        <p>Froggit se base sur des logiciels libres reconnus et des conditions générales d’utilisation complètement éthiques.</p>
@@ -33,11 +36,11 @@ const PromiseList = [
 ];

 // eslint-disable-next-line
-function Promise({Svg, title, description}) {
+function Promise({Svg, alt, title, description}) {
  return (
    <div className={clsx("col col--4")}>
      <div className="text--center">
-        <Svg className={styles.promiseSvg} alt={title} />
+        <Svg className={styles.promiseSvg} alt={alt} />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
@@ -49,7 +52,7 @@ function Promise({Svg, title, description}) {

 export default function HomepagePromises() {
  return (
-    <div>
+    <div className={styles.rowOverflow}>
      <h2 className="promise-title">Faites la différence</h2>
      <section className="section-promises">    
        <div className="row">

--- a/src/components/HomepagePromises.module.css
+++ b/src/components/HomepagePromises.module.css
@@ -3,3 +3,7 @@
  height: 64px;
  width: auto;
 }
+
+.rowOverflow {
+  overflow:hidden;
+}
--- a/src/components/TextRight.js
+++ b/src/components/TextRight.js
@@ -2,12 +2,12 @@
 import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";

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

--- a/src/css/carousel.css
+++ b/src/css/carousel.css
 /* CAROUSEL */
-.box_carousel {
+.carousel_box {
    display: flex;
-    text-align: center;
-    margin-right: 0px;
-    margin-left: 0px;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+    margin-right: 24px;
+    margin-left: 24px;
+		height: 122px;
 }

-.carousel-img {
-    margin: 20px;
-    max-width: 110px;
+.carousel_img, .carousel_box svg {
+		padding: 8px;
+    width: 90px;
+		height: 90px;
    /* text-align: center; */
-    justify-content: space-between;
 }

-.title_carousel {
+.carousel_box svg {
+  fill: var(--ifm-font-color-base);
+}
+.carousel_title {
    display: flex;
    justify-content: center;
 }
--- a/src/pages/communaute.mdx
+++ b/src/pages/communaute.mdx
 import TextRight from '@site/src/components/TextRight';

-<TextRight img="/img/cheatsheet_cover.png">
+<TextRight img="/img/pages/communaute/cheatsheet_cover.png" alt="Illustration de l'antisèche Git">

 # Devenez deux fois plus productif grâce à GitLab !


--- a/src/pages/dummy_page.mdx
+++ b/src/pages/dummy_page.mdx
@@ -12,6 +12,7 @@ Page factice penser à créer une vraie page !
 #!/bin/bash
 echo "Hello World"
 ```
+<CarouselLibre/>

 <button className="button button--note">button--note</button>
 <button className="button button--success">button--success</button>

--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,6 +4,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
+import CarouselLibre from "@site/src/components/CarouselLibre";
 import Link from "@docusaurus/Link";

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

--- a/src/pages/tarifs.mdx
+++ b/src/pages/tarifs.mdx
@@ -36,7 +36,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
      <div class="card card_price">
        <div class="card__image margin-top--md">
          <img
-            src={useBaseUrl("img/pricing/hidden.png")}
+            src={useBaseUrl("img/pages/tarifs/hidden.png")}
            alt="Image alt text"
            title="Plan Têtard" />
        </div>
@@ -69,7 +69,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
      <div class="card  shadow--tl card_price card_price_main">
        <div class="card__image margin-top--md">
          <img
-            src={useBaseUrl("img/pricing/computer.png")}
+            src={useBaseUrl("img/pages/tarifs/computer.png")}
            alt="Image alt text"
            title="Plan Grenouille" />
        </div>
@@ -102,7 +102,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
      <div class="card card_price">
        <div class="card__image margin-top--md">
          <img
-            src={useBaseUrl("img/pricing/cauldron.png")}
+            src={useBaseUrl("img/pages/tarifs/cauldron.png")}
            alt="Image alt text"
            title="Plan Étang" />
        </div>
@@ -142,7 +142,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
      <div class="card card_price">
        <div class="card__image margin-top--md">
          <img
-            src={useBaseUrl("img/pricing/hidden.png")}
+            src={useBaseUrl("img/pages/tarifs/hidden.png")}
            alt="Image alt text"
            title="Plan Têtard" />
        </div>
@@ -175,7 +175,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
      <div class="card  shadow--tl card_price card_price_main">
         <div class="card__image margin-top--md">
          <img
-            src={useBaseUrl("img/pricing/computer.png")}
+            src={useBaseUrl("img/pages/tarifs/computer.png")}
            alt="Image alt text"
            title="Plan Grenouille" />
        </div>
@@ -205,7 +205,7 @@ Si vous achetez plusieurs plans, hors têtard, avec le **même email** vous cumu
      <div class="card card_price">
        <div class="card__image margin-top--md">
          <img
-            src={useBaseUrl("img/pricing/cauldron.png")}
+            src={useBaseUrl("img/pages/tarifs/cauldron.png")}
            alt="Image alt text"
            title="Plan Étang" />
        </div>

--- a/src/theme/Footer/index.js
+++ b/src/theme/Footer/index.js
@@ -12,8 +12,8 @@ import FooterLogo from "@theme/Footer/Logo";
 import FooterCopyright from "@theme/Footer/Copyright";
 import FooterLayout from "@theme/Footer/Layout";
 import { FaYoutube, FaLinkedin, FaGitlab, FaTwitter } from "react-icons/fa";
-import Froggitblanc from "/static/img/logo_froggit_blanc.png";
-import DontTrackMe from "/static/img/do-not-track-me.svg";
+import Froggitblanc from "/static/img/theme/logo_froggit_blanc.png";
+import DontTrackMe from "/static/img/theme/do-not-track-me.svg";
 import useBaseUrl from "@docusaurus/useBaseUrl";
No results found