.husky/pre-commit

+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo 'Starting commit... 🐶'
+npm run lint -- --fix
+echo 'Code indented 👍'

package.json

@@ -13,7 +13,9 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "lint": "eslint .",
-    "lint-fix": "eslint . --fix"
+    "lint-fix": "eslint . --fix",
+    "prepare": "husky install",
+    "husky": "husky install"
   },
   "dependencies": {
     "@docusaurus/core": "^2.0.1",
@@ -55,6 +57,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
+    "husky": "^8.0.1",
     "node": "^16.14.2",
     "prettier": "^2.3.2"
   }

src/components/CarouselLibre.js

@@ -57,12 +57,12 @@ const CarouselList = [
 
 export default function CarouselLibre() {
   return (
-    <div>
-      <h2 className={clsx("text--center")}>Restez libres !
-      </h2>
-      <p className={"text--center"}>Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
-      </p> 
+    <div className="homepage_section">
       <section className="sections container">
+        <h2 className={clsx("text--center")}>Restez libres !
+        </h2>
+        <p className="text--center margin-bottom--lg">Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
+        </p> 
         <Carousel list={CarouselList} />
       </section>
     </div>

src/components/HomepageFeatures.js

@@ -53,29 +53,30 @@ const FeatureList = [
 
 export default function HomepageFeatures() {
   return (
-    <section className="sections container" id="features">   
-      <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
-      </h2>
-      <div className={styles.featuresSubtitle}>
-        <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
-        </p>
-        <p className={"text--center"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
-        </p> 
-      </div>
-      <div>
-        <Tabs className={styles.tabsElement}>
-          {FeatureList.map((em) => (
-            <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
-              <div className={styles.rowDisplay}>
-                <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
-                <p className={styles.textDisplay}> {em.description} </p>
-              </div>
-            </TabItem>
-          ))}
-        </Tabs>
-      </div>
-
-    </section>
+    <div className="homepage_section">
+      <section className="sections container" id="features">   
+        <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+        </h2>
+        <div className={styles.featuresSubtitle}>
+          <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
+          </p>
+          <p className={"text--center margin-bottom--lg"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
+          </p> 
+        </div>
+        <div>
+          <Tabs className={styles.tabsElement}>
+            {FeatureList.map((em) => (
+              <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
+                <div className={styles.rowDisplay}>
+                  <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                  <p className={styles.textDisplay}> {em.description} </p>
+                </div>
+              </TabItem>
+            ))}
+          </Tabs>
+        </div>
+      </section>
+    </div>
 
   );
 }

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/HomepagePromises.js

@@ -52,9 +52,9 @@ function Promise({Svg, alt, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <div className={styles.rowOverflow}>
-      <h2 className="promise-title">Faites la différence</h2>
-      <section className="section-promises">    
+    <div className={styles.rowOverflow+" homepage_section"}>
+      <section className="section-promises"> 
+        <h2 className="promise-title margin-bottom--lg">Faites la différence</h2>  
         <div className="row">
           {PromiseList.map((props, idx) => (
             <Promise key={idx} {...props} />

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 *******/
@@ -198,6 +206,11 @@ ul {
   color: var(--ifm-color-warning);
 }
 
+/* background color on homepage */
+.homepage_section:nth-child(even) {
+  background-color: var(--section-background);
+}
+
 /****** MEDIA SCREEN *******/
 @media screen and (max-width:330px) {
   .navbar {
@@ -208,4 +221,5 @@ ul {
 .promise-title {
   display: flex;
   justify-content: center;
+  text-align: center;
 }

src/css/dark-theme.css

@@ -5,6 +5,7 @@ html[data-theme='dark'] {
     --ifm-font-color-base: var(--ifm-color-white);
     --ifm-font-color-base-inverse: var(--ifm-color-white);
     --ifm-font-color-secondary: var(--ifm-color-white);
+    --section-background: var(--ifm-color-gray-900);
     /* admonitions base */
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
     --ifm-color-success-contrast-background: var(--ifm-color-success);

src/css/variables.css

@@ -66,6 +66,7 @@
     --ifm-color-secondary-darkest: #9aa4b3;
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray);
     --ifm-color-secondary-contrast-foreground: var(--ifm-color-secondary);
+    --section-background: var(--ifm-color-gray-100);
 
     /* Success */
     --ifm-color-success-lightest: #68861d;

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 (
@@ -31,11 +33,12 @@ export default function Home() {
       title={siteConfig.themeConfig.navbar.title}
       description={siteConfig.tagline}
     >
-      <HomepageHeader/>
+      <HomepageHeader />
       <main>
         <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)