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 useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+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.", 
+    },
+    {
+      id: 2,
+      title: "Le Chat 💬",
+      svg: "chemistry.svg", 
+      description: "Un chat intégré pour communiquer autour du code… juste à côté du code."
+    },
+    {
+      id: 3,
+      title: "La CI 🔁",
+      svg: "selfie.svg", 
+      description: "Une communauté Git pour solutionner vos pépins rapidement."
+    },
+    {
+      id: 4,
+      title: "Les Pages 🔖",
+      svg: "read-smile.svg", 
+      description: "Tout ça avec une authentification unique !"
+    }
+  ];
+
+
+export default function HomepageFeaturesTab() {
+  return (
+    <section className="sections container" id="features">   
+     
+    <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. 
+</p>
+    <div>
+    <Tabs>
+        {FeatureList.map((em) => (
+          <TabItem value={em.title} label={em.title}>
+            <p>{em.description}</p>
+            <img src={useBaseUrl("img/" + em.svg)} />
+          </TabItem>
+        ))}
+    </Tabs>
+    </div>
+
+  </section>
+
+  );
+}
\ No newline at end of file