refactor: adjusted CSS naming for HomepageFeatures, HomepagePromises and Carousel components

src/components/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/HomepageFeatures.js

@@ -5,10 +5,6 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-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"
-
 
 const FeatureList = [
   {
@@ -61,19 +57,19 @@ export default function HomepageFeatures() {
     <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={styles["features-subtitle"]}>
         <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}>
+        <Tabs className="tabs-element">
           {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 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>
           ))}

src/components/HomepageFeatures.module.css

 @import url("../css/variables.css");
 
-.featuresSubtitle {
+.features-subtitle {
     padding-top: 26px;
 }
-
-.tabsElement {
-    width: 100%;
-    margin-bottom: 48px;
-    
-}
-
-.tabsElement>li {
-    margin: auto;
-    display: flex;
-    justify-content: center;
-    align-items: start;
-    transition: 0.4s;
-}
-
-.tabImages {
-    width: 360px;
-}
-
-.rowDisplay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.textDisplay {
-    padding: 15px;
-    width: 25%;
-    font-size: 20px;
-    text-align: left;
-}
-
-@media (max-width: 600px) {
-    .textDisplay {
-        width: 100%;
-        text-align: center;
-    }
-  }

src/components/HomepagePromises.js

@@ -44,7 +44,7 @@ function Promise({Svg, alt, title, description}) {
   return (
     <div className={clsx("col col--4")}>
       <div className="text--center">
-        <Svg className={styles.promiseSvg} alt={alt} />
+        <Svg className={styles["promise-svg"]} alt={alt} />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>
@@ -56,7 +56,7 @@ function Promise({Svg, alt, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <div className={styles.rowOverflow}>
+    <div className="row-overflow">
       <h2 className="promise-title">Faites la différence</h2>
       <section className="section-promises">    
         <div className="row">

src/components/HomepagePromises.module.css

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

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,6 +6,7 @@
 @import url("matomo.css");
 @import url("tarifs.css");
 @import url("carousel.css");
+@import url("features.css");
 
 
 html, body {
@@ -127,6 +128,12 @@ ul {
   padding-bottom: 20px;
 }
 
+/**** HORIZONTAL OVERFLOW ****/
+.row-overflow {
+  overflow:hidden;
+}
+
+
 /******* MAIN ELEM *******/
 .section-promises {
   padding: 4rem 0;

src/css/features.css

+/* FEATURES TABS */
+
+.tabs-element {
+    width: 100%;
+    margin-bottom: 48px;
+    
+}
+
+.tabs-element>li {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    transition: 0.4s;
+}
+
+.tab-images {
+    width: 360px;
+}
+
+.tab-row-display {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.tab-text-display {
+    padding: 15px;
+    width: 25%;
+    font-size: 20px;
+    text-align: left;
+}
+
+@media (max-width: 600px) {
+    .tab-text-display {
+        width: 100%;
+        text-align: center;
+    }
+  }