Resolve "add Features on index"

Closes #8 (closed) #20 (closed)

doc/sections.md

+# Créer des sections
+ 
+# Les Composants
+
+Docusaurus étant un Framework de React, nous retrouvons la même logique, avec une vision orientée Composants.
+L'affichage d'une page web est 1 ensemble de composant réutilisable, que l'on peux assembler.
+
+Un composant (ou Componant) contient: des données (qui constitue un état, ou "state"), des comportements et un rendu (l'affichage), c'est trois notion vont interagire entre elle.
+
+Il y a également une notion de hiérarchie entre les composants.
+Nous pouvons créer une logique de composants parents / enfants:
+    - en important un composant dans un autre composant, le premier devient alors l'enfant et le second, son parent.
+    - le composant parent va alors utiliser le composant enfant
+
+Nous allons nous appuyer sur l'utilisation de Composants réutilisables pour gérer la création de nos différentes sections.
+
+Nous pouvons ensuite importer nos composants dans les fichiers qui gdans la partie du rendu de l'affichage 
+
+Pour créer un section, nous pouvons créer un composant qui contiendra les données propre à cette section, des comportements (les méthodes, fonctions..) et un rendu (affichage).
+
+Nous pouvons ainsi utiliser ce composant, qui définie notre section, dans le composant d'affichage
+
+## Création du composant de notre section
+
+Dans le dossier `./src/components/` , nous allons créer un fichier React avec l'extention `.js`.
+
+Ce fichier aura 3 partie:
+
+ - 1 pour gérer les données de notre section,
+
+ - 1 pour définir les comportements que nous attendons en utilisant différentes fonctions, 
+
+ - 1 partie qui sera chargée de définir l'affichage, le rendu visuel que nous attendons de notre section. Nous allons utiliser le JSX pour cette dernière partie,(voir [introduction au JSX](https://fr.reactjs.org/docs/introducing-jsx.html) sur la doc de React pour des explications sur cette extention syntaxique du JavaScript).
+
+## Les données de notre section
+
+Nous allons créer un tableau d'objet JavaScript pour définir les données à afficher dans notre section, Nous allons indiquer dans cet exemple les noms des titres, les descriptions et les images que nous voulons afficher...
+Nous allons ainsi pouvoir associer une clé à une valeur (voir gestion des tableau en JavaScript).
+
+Nous allons nommer notre tableau `datasArraySections` et y mettre les données à afficher:
+```
+const datasArraySections = [
+  { 
+    title: "Lorem ipsum 1 !",    
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    image: require("../../static/img/image1.png").default,
+  },
+  { 
+    title: "Lorem ipsum 2 !",    
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit.",
+    image: require("../../static/img/image2.svg").default,
+  },
+  { 
+    title: "Lorem ipsum 3 !",    
+    description: "Consectetur adipiscing elit sit. Lorem ipsum dolor sit amet, consectetur adipiscing elit sit.",
+    image: require("../../static/img/image3.jpg").default,
+  },
+];
+```
+Notre section sera décomposé en 3 parties, chacunes avec 1 titre, 1 description et 1 image différentes.
+
+## Affichage
+
+Il faut maintenant définir l'affichage que nous souhaitons que ce composant renvoie. 
+
+Nous allons tout d'abord créer une fonction dans laquelle nous plaçons le rendu, tel un template.
+
+L'utilisation du JSX va simplifier cette partie, nous avons trois éléments, les clés issues de notre tableau, à afficher à l'intérieur de balises HTML.
+
+Tous élément JavaScript doit alors être affiché entre accolade: `{---}` 
+
+Notre affichage doit impérativement être entouré de balises parents, au minimum une div.
+
+Nous allons appeller notre fonction de nom de la section que nous voulons renvoyer sur notre page, comme `Header`, `Footer`, par exemple.
+
+Nous passons comme argument les clés de notre tableau (image, title, description) à notre fonction
+
+```
+function SectionName({image, title, description}) {
+  return (
+    <div className="container"}>
+        <image alt={title} />
+      </div>
+      <div>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+```
+Ainsi, notre composant va renvoyer notre image, titre en `h3` et description en paragraphe.
+
+## Import export du Composant
+
+Il est également nécessaire d'utiliser le système d'import/export de [modules JavaScript](https://javascript.info/import-export), nous aurons dans notre cas besoin d'importer la librairie React et les feuilles de styles CSS nécéssairest ( le fichier CSS associé à notre composant) et la dépendance `clsx`, un petit utilitaire pour construire des className de manière conditionnelle).
+Nous devrons également exporter notre composant, pour qu'il puisse être réutiliser.
+
+## Définition du (ou des) Comportement(s) 
+
+Nous allons maintenant itérer sur chaque valeur de notre tableau, en utilisant la méthode .map, qui est très souvent utilisé dans les Composants React, 
+
+La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur 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/
+
+```
+export default function ComponantName() {
+  return (
+      <div>
+          {ArrayNameList.map((props, idx) => (
+            <Promise key={idx} {...props} />
+          ))}
+      </div>
+  );
+}
+```
+Notre Composant est également exporté.
+
+## Utilisation du composant 
+
+Nous pouvons désormais utiliser notre composant dans un autre, un composant parent.
+
+Dans notre cas, ce composant parent va représenter la page d'accueil du site, `./src/pages/index.js`.
+
+Il suffit d'importer notre composant enfant, que nous venons de créer, et de le mettre, comme une balise, dans la partie return de la fonction `Home`, qui retourne la vue de notre page: 
+
+```
+import React from "react";
+import HomepagePromises from "../components/HomepagePromises";
+import HomepageFeatures from "../components/HomepageFeatures";
+
+    ...
+
+export default function Home() {
+  return (
+    <Layout>
+      <HomepageHeader />
+      <main>
+        <HomepagePromises />
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}
+```
+Dans notre Layout, nous retrouvons 3 composants, le Header nommé <HomepageHeader /> qui a été créé à l'intérieur même de ce composant qui représente la page d'accueil de notre site
+
+Puis nous retrouvons 2 Composants enfants, qui ont été importé depuis le dossier `./src/components/`: - <HomepagePromises />, qui rend l'affichage de la section des Prommesses 
+    et 
+   - <HomepageFeatures />, pour la section des fonctionnalités.
+
+## Conventions
+
+- le nom d'un Composant doit commencer par une Majuscule
+- le nom d'une page doit commencer par une minuscule
+
+- nous pouvons créer une feuille de style CSS à un Composant mais elle devra être affecter uniquement à ce composant, nous donnerons le meme nom au fichier CSS suivi du suffixe `.module.css`, les