Draft: Resolve "(component) why froggit on index"

Closes #30

src/components/HomepageWhy.js

+import React from "react";
+import clsx from "clsx";
+import Why from "./Why";
+
+const imgPath = "img/components/HomepageWhy/";
+const WhyList = [
+  {
+    id: 1,
+    title: "dummy why 1",
+    text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    icon: imgPath+"logo_froggit.svg",
+    alt: ""
+  },
+  {
+    id: 2,
+    title: "dummy why 2",
+    text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    icon: imgPath+"logo_froggit.svg",
+    alt: ""
+  },
+  {
+    id: 3,
+    title: "dummy why 3",
+    text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    icon: imgPath+"logo_froggit.svg",
+    alt: ""
+  },
+  {
+    id: 4,
+    title: "dummy why 4",
+    text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    icon: imgPath+"logo_froggit.svg",
+    alt: ""
+  }
+];
+
+export default function HomepageWhy() {
+  return (
+    <div>
+      <section className="sections container overflow-hidden">
+        <h2 className={clsx("text--center")}> Pourquoi Froggit et pas Gitlab, Github…?
+        </h2>
+        <p className={"text--center homepageWhy_title"}> Parce que collaborer autour du code, c’est bien plus que coder.
+        </p> 
+        <p className={"text--center"}>Pour mener à bien un projet, vous avez plusieurs choix :
+        </p> 
+        <div className="row">
+          {WhyList.map((props, idx) => (
+            <Why key={idx} {...props} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}