diff --git a/src/components/HomepageWhy.js b/src/components/HomepageWhy.js
new file mode 100644
index 0000000000000000000000000000000000000000..f4dfc8dad5ef1a657201e8abbd5bbccf836080da
--- /dev/null
+++ b/src/components/HomepageWhy.js
@@ -0,0 +1,51 @@
+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>
+ );
+}
diff --git a/src/components/Why.js b/src/components/Why.js
new file mode 100644
index 0000000000000000000000000000000000000000..d81dbd5af3b757e5800bea8c2fc20a2870950e12
--- /dev/null
+++ b/src/components/Why.js
@@ -0,0 +1,12 @@
+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>
+ );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 269a6973be24e2c99839f5b2e1dfe18650f0c48f..d2d27c9a754cacd63990eb4d37f52898058a5b32 100644
--- a/src/css/custom.css
+++ b/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 {
diff --git a/src/css/why.css b/src/css/why.css
new file mode 100644
index 0000000000000000000000000000000000000000..35ac2d7ac07c55756933c0d9c28483d513c8266d
--- /dev/null
+++ b/src/css/why.css
@@ -0,0 +1,13 @@
+/**** '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;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index e42da2ee0420c5823c7fd8f9c56860b0e6afbfde..dd1a95cd41c341c3362cfdd181c086d133835946 100644
--- a/src/pages/index.js
+++ b/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>
);
diff --git a/static/img/components/HomepageWhy/logo_froggit.svg b/static/img/components/HomepageWhy/logo_froggit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5f08cc3b8863800d34b5c591000bcdc70078dd22
--- /dev/null
+++ b/static/img/components/HomepageWhy/logo_froggit.svg
@@ -0,0 +1,131 @@
+<?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>