Resolve "refactor: HomepageFeatures"

Closes #92 (closed)

src/components/HomepageFeaturesTab.js

@@ -7,6 +7,13 @@ import TabItem from '@theme/TabItem';
 import TextRight from '@site/src/components/TextRight';
 
 const FeatureList = [
+      {
+      id: 5,
+      title: "Le\u00A0SSO\u00A0🔑",
+      svg: "hello.png",
+      alt: "Kermitt, sortant de sa cachette",
+      description: "Authentifiez-vous une bonne fois pour toute !"
+    },  
     {
       id: 1,
       title: "Le\u00A0Lab\u00A0🧪",   
@@ -21,13 +28,6 @@ const FeatureList = [
       alt: "Kermitt prend un selfie",
       description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
     },
-    {
-      id: 3,
-      title: "Le\u00A0Chat\u00A0💬",
-      svg: "read-smile.svg",
-      alt: "Kermitt porte des lunettes rondes et lit un livre",
-      description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
-    },
     {
       id: 4,
       title: "Les\u00A0Pages\u00A0🔖",
@@ -36,11 +36,11 @@ const FeatureList = [
       description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
     },
     {
-      id: 5,
-      title: "Le\u00A0SSO\u00A0🔑",
-      svg: "hello.png",
-      alt: "Kermitt, sortant de sa cachette",
-      description: "Tout ça avec une authentification unique !"
+      id: 3,
+      title: "Le\u00A0Chat\u00A0💬",
+      svg: "read-smile.svg",
+      alt: "Kermitt porte des lunettes rondes et lit un livre",
+      description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
     },
     {
       id: 6,
@@ -55,22 +55,22 @@ const FeatureList = [
 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>
-    <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>
+      <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+      </h2>
+      <div className={styles.featuresSubtitle}>
+        <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>
     <div>
-    <Tabs className={styles.tabsTitle}>
+    <Tabs className={styles.tabsElement}>
         {FeatureList.map((em) => (
           <TabItem className={clsx("text--center")} value={em.title} label={em.title}>
-            <TextRight img={useBaseUrl("img/" + em.svg)} alt={em.alt}>
-              <div className={styles.textDisplay}>
-                <p> {em.description} </p>
+              <div className={styles.colDisplay}>
+                <img src={useBaseUrl("img/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                <p className={styles.textDisplay}> {em.description} </p>
               </div>
-            </TextRight>
           </TabItem>
         ))}
     </Tabs>