Draft: Resolve "(footer) froggit icon and social icons"

Closes #25 (closed)

doc/sections.md

-# Créer des sections 
+# Créer des sections
  
 Docusaurus étant un Framework de la librairie React, on y retrouve la même logique.
 
@@ -39,43 +39,44 @@ Nous appelons notre tableau `featuresList` car c'est la liste des fonctionnalit
 ```jsx
 const FeatureList = [
   {
-    title: "1. Le Lab 🧪",   
-    Svg: require("../../static/img/logo_froggit.svg").default,
+    title: "Le Lab 🧪",   
+    Svg: require("../../static/img/chemistry.svg").default,
     description: (
       <>
-        <p>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.</p>
+        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.
       </>
     ), 
   },     
   {
-    title: "2. La CI 🔁",  
-    Svg: require("../../static/img/logo_froggit.svg").default,
+    title: "La CI 🔁",  
+    Svg: require("../../static/img/rainbow.svg").default,
     description: (
       <>
-        <p>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.</p>
+        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.
       </>
     ), 
   },
   {
-    title: "3. Le Chat 💬",  
-    Svg: require("../../static/img/logo_froggit.svg").default,
+    title: "Le Chat 💬",  
+    Svg: require("../../static/img/selfie.svg").default,
     description: (
       <>
-        <p>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 !</p>
+        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 !
       </>
     ),
   },
   {
-    title: "4. Les Pages 🔖",  
-    Svg: require("../../static/img/logo_froggit.svg").default,
+    title: "Les Pages 🔖",  
+    Svg: require("../../static/img/read-smile.svg").default,
     description: (
       <>
-        <p>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.</p>
+        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.
       </>
     ),
   },
 ];  
 ```
+
 Notre section affichera les 4 éléments, chacune avec un titre, une description et une image en Svg.
 
 
@@ -94,16 +95,18 @@ Notre affichage doit impérativement être entouré de balises parents, telle un
 Nous passons comme argument les clés de notre tableau (Svg, title, description) à notre fonction
 
 ```jsx
-function Features({Svg, title, description}) {
+function Feature({Svg, title, description}) {
   return (
-    <div className={"container"}>
-      <Svg alt={title} />
-    </div>
-      <div>
+    <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>      
     </div>
+    
   );
 }
 ```
@@ -122,14 +125,17 @@ Nous itérons sur chaque élément de notre tableau, en utilisant la méthode Ja
 
 La méthode map() crée un nouveau tableau avec les résultats de chaque élément du tableau. [Voici un tutoriel expliquant cette méthode](https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/).
 
-```
+```jsx
 export default function HomepageFeatures() {
   return (
-    <div>
-      {FeaturesList.map((props, idx) => (
-        <Features key={idx} {...props} />
-      ))}
-    </div>
+    <section className="sections container" id="features">      
+      <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
+      <div>
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
+      </div>
+    </section>
   );
 }
 ```