fix: some dependencies

package-lock.json

@@ -13047,6 +13047,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
@@ -23724,6 +23737,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "peer": true
+    },
     "ua-parser-js": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",

src/components/HomepageResults.js

 import React from "react";
+import styles from "./HomepageResults.module.css";
 
 const ResultsList = [
   {
@@ -7,7 +8,9 @@ const ResultsList = [
       <>
         Froggit est pensé pour ceux qui regardent vers l&apos;avenir et choisissent des solutions robustes, responsables, qui durent dans le temps.
       </>
-    ), 
+    ),
+    img: require("../../static/img/components/HomepageResults/environment.png").default,
+
   },     
   {
     title: "Intégrez facilement les pratiques DevOps",  
@@ -15,7 +18,9 @@ const ResultsList = [
       <>
         Répondez plus vite aux besoins de vos clients avec notre forge logicielle agile pensée par des techs pour les techs.
       </>
-    ), 
+    ),
+    img: require("../../static/img/components/HomepageResults/advance.png").default,
+
   },
   {
     title: "Bénéficiez d’un service de proximité",
@@ -24,13 +29,18 @@ const ResultsList = [
         Froggit c&apos;est aussi un service client en français et une équipe qui améliore régulièrement l&apos;offre en fonction de vos retours !
       </>
     ),
+    img: require("../../static/img/components/HomepageResults/conversation.png").default,
+
   },
 ];
 
-
-function Results({title, description}) {
+// eslint-disable-next-line
+function Results({title, description, img, alt}) {
   return (
-    <div className="sectionsReverse row">    
+    <div className="sectionsReverse row">
+      <div className={styles.resultsCenter}>
+        <img className={styles.resultsImage} src={img} alt={alt}/>
+      </div>  
       <div className="col col--5">
         <h3>{title}</h3>
         <p>{description}</p>
@@ -42,13 +52,15 @@ function Results({title, description}) {
 
 export default function HomepageResults() {
   return (
-    <section className="sections container" id="results">      
-      <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
-      <div>
-        {ResultsList.map((props, idx) => (
-          <Results key={idx} {...props} />
-        ))}
-      </div>
-    </section>
+    <div className="homepage_section">
+      <section className="sections container" id="results">      
+        <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
+        <div>
+          {ResultsList.map((props, idx) => (
+            <Results key={idx} {...props} />
+          ))}
+        </div>
+      </section>
+    </div>
   );
 }

src/components/HomepageResults.module.css

+.resultsImage {
+  width: 186px;
+  aspect-ratio: 1;
+}
+
+.resultsCenter {
+  margin: auto;
+}