feat: add results component in home page

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/HomepageFeatures.module.css

@@ -7,7 +7,11 @@
 .tabsElement {
     width: 100%;
     margin-bottom: 48px;
+}
     
+.title {
+  font-weight: bold;
+  padding-bottom: 40px;
 }
 
 .tabsElement>li {

src/components/HomepageResults.js

+import React from "react";
+import environment from "@site/static/img/components/HomepageResults/environment.png";
+import advance from "@site/static/img/components/HomepageResults/advance.png";
+import conversation from "@site/static/img/components/HomepageResults/conversation.png";
+
+import styles from "./HomepageResults.module.css";
+
+const ResultsList = [
+  {
+    title: "Alliez compétitivité et respect de l’environnement",
+    description: (
+      <>
+        Froggit est pensé pour ceux qui regardent vers l&apos;avenir et choisissent des solutions robustes, responsables, qui durent dans le temps.
+      </>
+    ),
+    img: environment,
+    alt: "Dessin d'un espace naturel"
+  },     
+  {
+    title: "Intégrez facilement les pratiques DevOps",  
+    description: (
+      <>
+        Répondez plus vite aux besoins de vos clients avec notre forge logicielle agile pensée par des techs pour les techs.
+      </>
+    ),
+    img: advance,
+    alt: "Dessin d'une flèche croissante dans un engrenage"
+
+  },
+  {
+    title: "Bénéficiez d’un service de proximité",
+    description: (
+      <>
+        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: conversation,
+    alt: "Dessin de deux personne ayant une conversation"
+
+  },
+];
+
+// eslint-disable-next-line
+function Results({title, description, img, alt}) {
+  return (
+    <div className="sectionsReverse row">
+      <div className={"col col--5 " + styles.resultsCenter}>
+        <img className={styles.resultsImage} src={img} alt={alt}/>
+      </div>  
+      <div className="col col--5">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>      
+    </div>
+    
+  );
+}
+
+export default function HomepageResults() {
+  return (
+    <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 {
+  display: flex;
+  justify-content: center;
+}

src/css/custom.css

@@ -143,10 +143,18 @@ ul {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  text-align: end;
 }
 
 .sectionsReverse:nth-of-type(odd) {
   flex-direction: row-reverse;
+  text-align: start;
+}
+
+.stickers {
+  height: 275px;
+  width: 275px; 
+  max-width: 100%; 
 }
 
 /******* ADMONITIONS *******/
@@ -208,4 +216,5 @@ ul {
 .promise-title {
   display: flex;
   justify-content: center;
+  text-align: center;
 }

src/pages/index.js

@@ -2,10 +2,12 @@ import React from "react";
 import Layout from "@theme/Layout"; 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
-import HomepagePromises from "../components/HomepagePromises";
-import HomepageFeatures from "../components/HomepageFeatures";
-import CarouselLibre from "@site/src/components/CarouselLibre";
 import Link from "@docusaurus/Link";
+import HomepageResults from "@site/src/components/HomepageResults";
+import HomepagePromises from "@site/src/components/HomepagePromises";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import CarouselLibre from "@site/src/components/CarouselLibre";
+
 
 function HomepageHeader(){
   return (
@@ -36,6 +38,7 @@ export default function Home() {
         <HomepagePromises />
         <HomepageFeatures />
         <CarouselLibre/> 
+        <HomepageResults />
       </main>
     </Layout>
   );

src/pages/mentions_legales.md

@@ -78,6 +78,10 @@ Le code source du site est disponible sur [ce dépôt Froggit🐸](https://lab.f
 - **Souverain :** conçues par [Becris](https://www.flaticon.com/fr/auteurs/becris) sur [Flaticon](https://www.flaticon.com/fr/icone-gratuite/rgpd_3202690).
 - **Libre :** conçues par [Freepik](https://www.freepik.com) sur [Flaticon](https://www.flaticon.com/fr/icone-gratuite/liberte_2284958).
 - **Kermit :** conçues par [stickerfolio](https://www.flaticon.com/authors/stickerfolio) sur [Flaticon](https://www.flaticon.com/stickers-pack/frog).
+- **Environement** conçue par [iconixar](https://www.flaticon.com/authors/iconixar) sur [Flaticon](https://www.flaticon.com/packs/ecology-environment-10).
+- **Advance** conçue par [iconixar](https://www.flaticon.com/authors/iconixar) sur [Flaticon](https://www.flaticon.com/packs/setup-and-settings-18)
+- **Conversation** conçue par [iconixar](https://www.flaticon.com/authors/iconixar) sur [Flaticon](https://www.flaticon.com/packs/language-learning-21)
+
 
 :::note Sources
 [Lydra dépôt git Legal version 1.0.0](https://gitlab.com/lydra/legal/-/blob/1.0.0/mentions_legales.md)