feat: created early Why and HomepageWhy components

src/components/HomepageWhy.js

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

src/components/Why.js

+import React from "react";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+// eslint-disable-next-line
+export default function Why({title, icon, alt}) {
+  return (
+    <div className="col col--6 text--center padding-horiz--lg">
+      <img src={useBaseUrl("img/components/HomepageWhy/")+icon} className="why_img" alt={alt}/>
+      <p> {title} </p>
+    </div>
+  );
+}

src/css/custom.css

@@ -6,6 +6,7 @@
 @import url("matomo.css");
 @import url("tarifs.css");
 @import url("carousel.css");
+@import url("why.css");
 
 
 html, body {

src/css/why.css

+/**** 'WHY' ELEMENT ****/
+
+.why_img {
+  margin: 22px 0px 12px 0px ;
+  max-width: 82px;
+  max-height: 82px;
+}
+
+.homepageWhy_title {
+  font-size: var(--ifm-h3-font-size);
+  font-weight: 900;
+  padding-bottom: 15px;
+}

src/pages/index.js

@@ -6,6 +6,7 @@ import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
 import CarouselLibre from "@site/src/components/CarouselLibre";
 import Link from "@docusaurus/Link";
+import HomepageWhy from "@site/src/components/HomepageWhy";
 
 function HomepageHeader(){
   return (
@@ -35,7 +36,9 @@ export default function Home() {
       <main>
         <HomepagePromises />
         <HomepageFeatures />
-        <CarouselLibre/> 
+        <CarouselLibre/>
+        <HomepageWhy />
+        
       </main>
     </Layout>
   );

static/img/components/HomepageWhy/logo_froggit.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 122.52 122.52"
+   height="122.52"
+   width="122.52"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"
+   sodipodi:docname="logo_froggit.svg"
+   inkscape:version="1.1.1 (eb90963e84, 2021-10-02)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="3440"
+   inkscape:window-height="1374"
+   id="namedview171"
+   showgrid="false"
+   inkscape:zoom="0.24077702"
+   inkscape:cx="-749.65626"
+   inkscape:cy="-425.70508"
+   inkscape:window-x="0"
+   inkscape:window-y="34"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg2"
+   showguides="false"
+   inkscape:pagecheckerboard="0"><inkscape:grid
+     type="xygrid"
+     id="grid1020" /></sodipodi:namedview><metadata
+   id="metadata8"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+   id="defs6"><linearGradient
+   id="linearGradient12213"
+   inkscape:swatch="solid"><stop
+     style="stop-color:#577018;stop-opacity:1;"
+     offset="0"
+     id="stop12211" /></linearGradient><linearGradient
+   id="linearGradient2456"
+   inkscape:swatch="solid"><stop
+     id="stop2454"
+     offset="0"
+     style="stop-color:#80e5ff;stop-opacity:1;" /></linearGradient><linearGradient
+   id="linearGradient959"
+   inkscape:swatch="solid"><stop
+     id="stop957"
+     offset="0"
+     style="stop-color:#577018;stop-opacity:1;" /></linearGradient>
+
+</defs><g
+   style="display:inline"
+   transform="matrix(1.3333333,0,0,-1.3333333,0,122.52)"
+   id="g10" /><g
+   style="display:inline"
+   id="layer5" />
+
+
+
+
+
+<g
+   style="display:inline"
+   transform="matrix(0.09473595,-0.09382364,0.09382364,0.09473595,-1020.8436,212.05652)"
+   id="g1051" /><g
+   style="fill:#ffffff"
+   transform="rotate(43.374633,-986.05651,411.19771)"
+   id="g1373-9"><g
+     inkscape:transform-center-y="-4.0421931"
+     inkscape:transform-center-x="-14.129323"
+     transform="matrix(5.7344051,-0.64995836,0.64995836,5.7344051,-982.63914,-267.99132)"
+     style="fill:#ffffff"
+     id="g1205-0"><g
+       style="fill:#ffffff"
+       id="g1201-2" /></g><g
+     transform="matrix(5.7711169,-0.00754468,0.00754468,5.7711169,-936.85998,-381.75555)"
+     style="fill:#ffffff"
+     id="g1211-5" /><g
+     style="fill:#ffffff"
+     transform="translate(-116.14326,152.56959)"
+     id="g1297-2"><g
+       id="g1223-9"
+       style="fill:#ffffff"
+       transform="matrix(-5.7306441,-0.68232291,-0.68232291,5.7306441,1219.3836,-414.56777)"
+       inkscape:transform-center-x="13.298727"
+       inkscape:transform-center-y="-4.1341095"><g
+         id="g1219-7"
+         style="fill:#ffffff" /></g><g
+       id="g1229-1"
+       style="fill:#ffffff"
+       transform="matrix(-5.7711169,0.00754468,0.00754468,5.7711169,1170.3939,-536.91748)" /></g></g><path
+   style="display:inline;fill:#577018;fill-opacity:1;fill-rule:nonzero;stroke-width:0.0959126;stroke-miterlimit:4;stroke-dasharray:none;paint-order:normal"
+   d="m 58.999999,2.4285184 c -1.225201,0.039901 -2.435485,0.550177 -3.343759,1.5195392 L 3.1933542,59.940234 c -1.816583,1.938704 -1.718025,4.960812 0.2206994,6.777359 L 27.650383,89.426567 37.416002,79.25665 a 9.0272684,9.0964317 44.696074 0 1 0.953127,-5.941411 l -3.945313,-6.009758 a 9.027268,9.0964318 45.763076 0 1 -7.742178,-2.611334 9.027268,9.0964318 45.763076 0 1 0.218749,-12.814448 9.027268,9.0964318 45.763076 0 1 6.585929,-2.589853 9.027268,9.0964318 45.763076 0 1 6.230472,2.712894 9.027268,9.0964318 45.763076 0 1 1.138669,11.117189 l 2.24413,3.421879 10.412117,-29.767582 a 9.0272681,9.0964319 38.898178 0 1 -1.164059,-12.615234 9.0272681,9.0964319 38.898178 0 1 7.132805,-3.402346 9.0272681,9.0964319 38.898178 0 1 5.605472,1.99023 9.0272681,9.0964319 38.898178 0 1 1.312503,12.748057 9.0272681,9.0964319 38.898178 0 1 -5.011724,3.148433 L 50.576161,69.54376 a 9.0272684,9.0964317 44.696074 0 1 2.148434,1.568364 9.0272684,9.0964317 44.696074 0 1 0.958988,1.123049 L 83.726547,59.680479 A 9.0272681,9.0964319 47.70128 0 1 86.572252,54.491021 9.0272681,9.0964319 47.70128 0 1 99.37499,55.04571 9.0272681,9.0964319 47.70128 0 1 98.72264,67.844541 9.0272681,9.0964319 47.70128 0 1 86.060534,67.428514 L 56.964833,79.588683 60.54295,81.68438 a 9.0272682,9.096432 41.309669 0 1 5.380865,-1.666008 9.0272682,9.096432 41.309669 0 1 5.781248,2.232412 9.0272682,9.096432 41.309669 0 1 0.775389,12.792973 9.0272682,9.096432 41.309669 0 1 -12.785151,0.873056 9.0272682,9.096432 41.309669 0 1 -3.003906,-7.597662 L 51.251943,85.1336 a 9.0272684,9.0964317 44.696074 0 1 -7.32031,1.187504 l -9.281254,9.664063 24.755864,23.197263 c 1.938758,1.8165 4.960798,1.71801 6.777338,-0.2207 L 118.64842,62.969536 c 1.81656,-1.938682 1.71802,-4.962757 -0.2207,-6.779297 L 62.435531,3.7273529 C 61.465839,2.8194283 60.225202,2.3886593 58.999999,2.4285184 Z"
+   id="rect1195-7-5"
+   inkscape:connector-curvature="0" />
+
+
+
+<flowRoot
+   xml:space="preserve"
+   id="flowRoot1519"
+   style="font-style:normal;font-weight:normal;font-size:37.3333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"><flowRegion
+     id="flowRegion1521"><rect
+       id="rect1523"
+       width="420"
+       height="260"
+       x="-2440"
+       y="-37.480003" /></flowRegion><flowPara
+     id="flowPara1525" /></flowRoot>
+<flowRoot
+   xml:space="preserve"
+   id="flowRoot1531"
+   style="font-style:normal;font-weight:normal;font-size:37.3333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"><flowRegion
+     id="flowRegion1533"><rect
+       id="rect1535"
+       width="1020"
+       height="660"
+       x="-2400"
+       y="-117.48" /></flowRegion><flowPara
+     id="flowPara1537" /></flowRoot>
+</svg>