refactor: added title and redesigned component

src/components/HomepageWhy.js

@@ -6,25 +6,29 @@ const imgPath = "img/components/HomepageWhy/";
 const WhyList = [
   {
     id: 1,
-    title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    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: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    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: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    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: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
+    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: ""
   }
@@ -33,12 +37,12 @@ const WhyList = [
 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 :
+      <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) => (

src/components/Why.js

@@ -2,11 +2,16 @@ import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
 // eslint-disable-next-line
-export default function Why({title, icon, alt}) {
+export default function Why({title, text, icon, alt}) {
   return (
-    <div className="col col--6 text--center padding-horiz--lg">
-      <img src={useBaseUrl(icon)} className="why_img" alt={alt}/>
-      <p> {title} </p>
+    <div className="col col--6 padding-horiz--lg margin-top--md">
+      <div className="row">
+        <img src={useBaseUrl(icon)} className="why_img" alt={alt}/>
+        <div className="why_col padding-horiz--md">
+          <span className="why_title"> {title} </span>
+          <p> {text} </p>
+        </div>
+      </div>
     </div>
   );
 }

src/css/custom.css

@@ -210,3 +210,8 @@ ul {
   display: flex;
   justify-content: center;
 }
+
+/**** UTILITIES ****/
+.overflow-hidden {
+  overflow: hidden;
+}

src/css/why.css

 /**** 'WHY' ELEMENT ****/
 
 .why_img {
-  margin: 22px 0px 12px 0px ;
-  max-width: 82px;
-  max-height: 82px;
+  margin: 8px 18px 0px 8px ;
+  max-width: 58px;
+  max-height: 58px;
+  pointer-events: none;
+  
+}
+
+.why_title {
+  font-size: 1.2rem;
+  font-weight: 700;
 }
 
 .homepageWhy_title {
@@ -11,3 +18,9 @@
   font-weight: 900;
   padding-bottom: 15px;
 }
+
+.why_col {
+  display: flex;
+  flex-direction: column;
+  max-width: 78%;
+}