README.md

@@ -70,6 +70,12 @@ More details on Project structure:
 * `/static/` -  Any contents inside here will be copied into the root of the final `build` directory
 * `/docusaurus.config.js` -  This is the equivalent of `siteConfig.js` in Docusaurus v1
 
+## Naming conventions
+
+- *Components* files and folders must be named using camel case (e.g `Hello world component` = `HelloWorldComponent`)
+- *Page* files must be named using kebab case, all lower cases (e.g `Hello world page` = `hello-world-page`)
+- *Style classes* must be name using kebab case as well, all lower cases (e.g `Hello world title` = `hello-world-title`)
+
 ## Image organisation
 
 Static assets are arranged in a certain way, all images are contained in subfolders within the `img` folder, the subfolder depends on how they are used. The name must be the same. Following this structure: 

doc/components.md

@@ -28,11 +28,25 @@ Afin que les logos de FLOSS unis (par exemple blancs ou noirs) restent bien visi
 ### HomepagePromises.js 
 
 Le composant **HomepagePromises** est utilisé sur la page d'accueil pour afficher les promesses de Froggit (section **À vous de faire la différence**). 
+Il renvoie une section constituée d'un titre central puis d'une liste React (**PromiseList**) affichée en ligne avec le composant **Promises**.
 
-il renvoie une section constituée d'un titre central puis d'une liste React (**PromiseList**) affichée en ligne.
+### Promises.js
 
-Les éléments **Promise** de la liste sont affichés en colonne et sont composés d'un titre, une image SVG et une description. Le composant **Promise** prendra respectivement les props `Svg`, `title` et `description`.
+Le composant **Promises** permet de générer une carte affichée en colonne et composée d'un titre, une image SVG et une description. Le composant **Promises** prendra respectivement les props `Svg`, `alt`, `title` et `description`.
 
 ### HomepageFeatures.js 
 
-Le composant **HomepageFeatures** affiche les fonctionnalités de Froggit sur la page d'accueil. 
+Le composant **HomepageFeatures** affiche les fonctionnalités de Froggit sur la page d'accueil (section **Optimisez votre manière de façonner vos applications**) sous forme d'onglets à l'aide du composant **Features**.
+
+### Features.js
+
+Le composant **Features** génère des onglets, chaque onglet est représenté par un titre et une fois ouvert, il affiche une image accompagnée d'un court texte. Il prend respectivement les props `title`, `svg` et `description`.
+
+### HomepageResults 
+
+Le composant **HomepageResults** affiche les résultats à attendre de Froggit sur la page d'accueil (section **Obtenez de meilleurs résultats…** ). Il utilise des cartes retournées par le composant **Results**.
+
+### Results.js 
+
+Le composant **Results** retourne une carte composée d'une colone textuelle avec un titre et une image, ainsi qu'une colone illustratrice composée d'une image. La colone textuelle se situe à gauche pour les enfants impairs et à droite pour les enfants pairs. 
+Il prend respectivement les props `title`, `description`, `img` et `alt`.

docusaurus.config.js

@@ -102,7 +102,7 @@ module.exports = {
             },
             {
               label: "Mentions légales",
-              to: "/mentions_legales",
+              to: "/mentions-legales",
             },
             {
               label: "📜 CGV",

src/components/Carousel.js → src/components/Carousel/Carousel.js

@@ -9,7 +9,7 @@ function Logo({img, svg, alt}) {
   if (img) {
     return (
       <> 
-        <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
+        <img src={useBaseUrl(img)} alt={alt} className="carousel-img" />
       </>
     );
   }
@@ -24,7 +24,7 @@ function Logo({img, svg, alt}) {
 
 function CarouselElement({name, img, svg, link, alt}) {
   return (
-    <div className="carousel_box">
+    <div className="carousel-box">
       {(() => {
         if (link) {
           return (
@@ -42,7 +42,7 @@ function CarouselElement({name, img, svg, link, alt}) {
       {(() => {
         if (name) {
           return (
-            <h6 className="carousel_title">{name}</h6>
+            <h6 className="carousel-title">{name}</h6>
           ); 
         }
       })()}

src/components/CarouselLibre.js → src/components/Carousel/CarouselLibre.js

@@ -57,7 +57,7 @@ const CarouselList = [
 
 export default function CarouselLibre() {
   return (
-    <div className="homepage_section">
+    <div className="homepage-section">
       <section className="sections container">
         <h2 className={clsx("text--center")}>Restez libres !
         </h2>

src/components/Features/Features.js

+import React from "react";
+import clsx from "clsx";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+/* eslint-disable react/prop-types */
+export default function Features(props) {
+  return (
+    <div>
+      <Tabs className="tabs-element">
+        {props.list.map((em, idx) => (
+          <TabItem key={idx} className={clsx("text--center")} value={em.title} label={em.title}>
+            <div className="tab-row-display">
+              <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className="tab-images"/>
+              <p className="tab-text-display"> {em.description} </p>
+            </div>
+          </TabItem>
+        ))}
+      </Tabs>
+    </div>
+  );
+
+}

src/components/HomepageFeatures.js → src/components/Features/HomepageFeatures.js

 import React from "react";
 import clsx from "clsx";
-import styles from "./HomepageFeatures.module.css";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import Features from "./Features";
+
 
 const FeatureList = [
   {
@@ -53,30 +51,18 @@ const FeatureList = [
 
 export default function HomepageFeatures() {
   return (
-    <div className="homepage_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}>
+        <div className="padding-top--md">
           <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 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>
+        <Features list={FeatureList}/>
       </section>
     </div>
-
   );
 }

src/components/HomepagePromises.module.css

-/* stylelint-disable docusaurus/copyright-header */
-.promiseSvg {
-  height: 64px;
-  width: auto;
-}
-
-.rowOverflow {
-  overflow:hidden;
-}

src/components/HomepagePromises.js → src/components/Promises/HomepagePromises.js

 import React from "react";
-import clsx from "clsx";
-import styles from "./HomepagePromises.module.css";
+import bouclier from "@site/static/img/components/HomepagePromises/bouclier.svg";
+import rgpd from "@site/static/img/components/HomepagePromises/rgpd.svg";
+import liberte from "@site/static/img/components/HomepagePromises/liberte.svg";
+import Promises from "./Promises";
+
+const PromiseSectionTitle = "Faites la différence";
 
 const PromiseList = [
   {
     title: "Sécurisé",
-    Svg: require("../../static/img/components/HomepagePromises/bouclier.svg").default,
+    Svg: bouclier,
     alt: "Icône d'un bouclier bleu",
     description: (
       <>
@@ -15,7 +19,7 @@ const PromiseList = [
   },
   {
     title: "Souverain",
-    Svg: require("../../static/img/components/HomepagePromises/rgpd.svg").default,
+    Svg: rgpd,
     alt: "Icône d'un cadenas avec inscrit RGPD",
     description: (
       <>
@@ -25,7 +29,7 @@ const PromiseList = [
   },
   {
     title: "Libre",
-    Svg: require("../../static/img/components/HomepagePromises/liberte.svg").default,
+    Svg: liberte,
     alt: "Icône de menottes brisées",
     description: (
       <>
@@ -35,29 +39,14 @@ const PromiseList = [
   },
 ];
 
-// eslint-disable-next-line
-function Promise({Svg, alt, title, description}) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.promiseSvg} alt={alt} />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
 export default function HomepagePromises() {
   return (
-    <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-overflow homepage-section">
+      <h2 className="text--center"> {PromiseSectionTitle} </h2>
+      <section className="section-promises">    
         <div className="row">
           {PromiseList.map((props, idx) => (
-            <Promise key={idx} {...props} />
+            <Promises key={idx} {...props} />
           ))}
         </div>   
       </section>

src/components/Promises/Promises.js

+import React from "react";
+import clsx from "clsx";
+
+// eslint-disable-next-line
+export default function Promises({Svg, alt, title, description}) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className="promise-svg" alt={alt} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}

src/components/HomepageResults.js → src/components/Results/HomepageResults.js

 import React from "react";
+import Results from "./Results";
 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",
@@ -40,27 +39,11 @@ const ResultsList = [
   },
 ];
 
-// 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">
+    <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>
+        <h2 className="text--center">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
         <div>
           {ResultsList.map((props, idx) => (
             <Results key={idx} {...props} />

src/components/Results/Results.js

+import React from "react";
+
+// eslint-disable-next-line
+export default function Results({title, description, img, alt}) {
+  return (
+    <div className="sections-reverse row">
+      <div className="col col--5 results-center">
+        <img className="results-image" src={img} alt={alt}/>
+      </div>  
+      <div className="col col--5">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>      
+    </div>
+    
+  );
+}

src/css/carousel.css

 /* CAROUSEL */
-.carousel_box {
+.carousel-box {
     display: flex;
 		flex-direction: column;
 		justify-content: space-between;
@@ -9,17 +9,17 @@
 		height: 122px;
 }
 
-.carousel_img, .carousel_box svg {
+.carousel-img, .carousel-box svg {
 		padding: 8px;
     width: 90px;
 		height: 90px;
     /* text-align: center; */
 }
 
-.carousel_box svg {
+.carousel-box svg {
   fill: var(--ifm-font-color-base);
 }
-.carousel_title {
+.carousel-title {
     display: flex;
     justify-content: center;
 }

src/css/custom.css

@@ -6,7 +6,8 @@
 @import url("matomo.css");
 @import url("tarifs.css");
 @import url("carousel.css");
-
+@import url("features.css");
+@import url("results.css");
 
 html, body {
   margin: 0;
@@ -115,11 +116,11 @@ ul {
 } 
 
 /****** HERO TITLE ******/
-.hero__title {
+.hero-title {
   color: var(--ifm-color-white);
 }
 
-.hero__subtitle {
+.hero-subtitle {
   color: var(--ifm-color-white);
   width: 90%;
   text-align: center;
@@ -127,6 +128,12 @@ ul {
   padding-bottom: 20px;
 }
 
+/**** HORIZONTAL OVERFLOW ****/
+.row-overflow {
+  overflow:hidden;
+}
+
+
 /******* MAIN ELEM *******/
 .section-promises {
   padding: 4rem 0;
@@ -137,7 +144,7 @@ ul {
   padding: 4rem 0;
   width: var(--ifm-container-max-width);
 }
-.sectionsReverse {
+.sections-reverse {
   margin: 0 16px 0 16px;
   padding: 4rem 0;
   display: flex;
@@ -146,7 +153,7 @@ ul {
   text-align: end;
 }
 
-.sectionsReverse:nth-of-type(odd) {
+.sections-reverse:nth-of-type(odd) {
   flex-direction: row-reverse;
   text-align: start;
 }
@@ -207,7 +214,7 @@ ul {
 }
 
 /* background color on homepage */
-.homepage_section:nth-child(even) {
+.homepage-section:nth-child(even) {
   background-color: var(--section-background);
 }
 
@@ -218,8 +225,8 @@ ul {
   }
 }
 
-.promise-title {
-  display: flex;
-  justify-content: center;
-  text-align: center;
+/* stylelint-disable docusaurus/copyright-header */
+.promise-svg {
+  height: 64px;
+  width: auto;
 }

src/components/HomepageFeatures.module.css → src/css/features.css

-@import url("../css/variables.css");
+/* FEATURES TABS */
 
-.featuresSubtitle {
-    padding-top: 26px;
-}
-
-.tabsElement {
+.tabs-element {
     width: 100%;
     margin-bottom: 48px;
-}
     
-.title {
-  font-weight: bold;
-  padding-bottom: 40px;
 }
 
-.tabsElement>li {
+.tabs-element>li {
     margin: auto;
     display: flex;
     justify-content: center;
@@ -22,11 +14,11 @@
     transition: 0.4s;
 }
 
-.tabImages {
+.tab-images {
     width: 360px;
 }
 
-.rowDisplay {
+.tab-row-display {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -34,7 +26,7 @@
     flex-wrap: wrap;
 }
 
-.textDisplay {
+.tab-text-display {
     padding: 15px;
     width: 25%;
     font-size: 20px;
@@ -42,7 +34,7 @@
 }
 
 @media (max-width: 600px) {
-    .textDisplay {
+    .tab-text-display {
         width: 100%;
         text-align: center;
     }

src/css/footer.css

@@ -8,7 +8,7 @@
     font-family: var(--ifm-font-family);
 }
 
-.footer_container {
+.footer-container {
     display: flex;
     justify-content: center;
 }
@@ -21,7 +21,7 @@
     color: var(--ifm-color-secondary);
 }
 
-.footer_icons {
+.footer-icons {
     margin-left: 12px;
     margin-right: 12px;
     width: 1.8rem;

src/css/results.css

+/**** RESULTS ****/
+
+.results-image {
+  width: 186px;
+  aspect-ratio: 1;
+}
+
+.results-center {
+  display: flex;
+  justify-content: center;
+}

src/pages/dummy_page.mdx → src/pages/dummy-page.mdx

@@ -2,7 +2,7 @@
 title: dummy
 description: "page factice"
 ---
-import CarouselLibre from "@site/src/components/CarouselLibre";
+import CarouselLibre from "@site/src/components/Carousel/CarouselLibre";
 
 # Page factice
 

src/pages/faq.md

@@ -167,6 +167,6 @@ La communauté bénéficiera gratuitement des services suivants :
 
 Pour le moment nous sommes très pris par la bêta de **Froggit** mais nous espérons pouvoir lancer la communauté début 2022.
 
-> Vous avez une question qui n’est pas dans la FAQ [écrivez-nous](/dummy_page).
+> Vous avez une question qui n’est pas dans la FAQ [écrivez-nous](/dummy-page).
 
 [^SSO]: Single Sign On: authentification unique entre plusieurs services.