Resolve "refactor: HomepageFeatures"

Closes #92 (closed)

src/components/HomepageFeaturesTab.js

 import React from "react";
 import clsx from "clsx";
-import styles from "./HomepageFeatures.module.css";
+import styles from "./HomepageFeaturesTab.module.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TextRight from '@site/src/components/TextRight';
 
 const FeatureList = [
     {
       id: 1,
-      title: "Le Lab",   
-      svg: "rainbow.svg",
-      description: "Des applications qui passent tous les tests grâce aux fonctionnalités Gitlab-CE, Gitlab-CI et Gitlab pages.", 
+      title: "Le\u00A0Lab\u00A0🧪",   
+      svg: "chemistry.svg",
+      description:"Gérer vos projets, héberger votre code et collaborer autour de Git", 
     },
     {
       id: 2,
-      title: "Le Chat 💬",
-      svg: "chemistry.svg", 
-      description: "Un chat intégré pour communiquer autour du code… juste à côté du code."
+      title: "La\u00A0CI\u00A0🔁",
+      svg: "selfie.svg", 
+      description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
     },
     {
       id: 3,
-      title: "La CI 🔁",
-      svg: "selfie.svg", 
-      description: "Une communauté Git pour solutionner vos pépins rapidement."
+      title: "Le\u00A0Chat\u00A0💬",
+      svg: "read-smile.svg", 
+      description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
     },
     {
       id: 4,
-      title: "Les Pages 🔖",
-      svg: "read-smile.svg", 
+      title: "Les\u00A0Pages\u00A0🔖",
+      svg: "rainbow.svg", 
+      description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
+    },
+    {
+      id: 5,
+      title: "La\u00A0communauté\u00A0🍺",
+      svg: "beer.png", 
+      description: "Une communauté Git pour solutionner vos pépins rapidement."
+    },
+    {
+      id: 6,
+      title: "Le\u00A0SSO\u00A0🔑",
+      svg: "hello.png", 
       description: "Tout ça avec une authentification unique !"
     }
   ];
@@ -39,16 +52,19 @@ export default function HomepageFeaturesTab() {
      
     <h2 className={clsx("text--center text--uppercase")}>Optimisez votre manière de façonner vos applications
 </h2>
-    <p className={clsx("text--center text--uppercase")}>De la planification au déploiement en passant par le testing… <br/> <br/>
-
-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. 
+    <h3 className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
+    </h3>
+<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>
-    <Tabs>
+    <Tabs className={styles.tabsTitle}>
         {FeatureList.map((em) => (
-          <TabItem value={em.title} label={em.title}>
-            <p>{em.description}</p>
-            <img src={useBaseUrl("img/" + em.svg)} />
+          <TabItem className={clsx("text--center")} value={em.title} label={em.title}>
+            <TextRight img={useBaseUrl("img/" + em.svg)}>
+              <div className={styles.textDisplay}>
+                <p> {em.description} </p>
+              </div>
+            </TextRight>
           </TabItem>
         ))}
     </Tabs>