fix: add carousel component

package.json

@@ -27,10 +27,13 @@
     "@svgr/webpack": "^6.2.1",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
+    "jquery": "^3.6.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.3.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "url-loader": "^4.1.1"
   },
   "browserslist": {

src/components/Carousel.js

+/* eslint react/prop-types: 0 */
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+function CarouselElement({name, img, link}) {
+  if (typeof link === "undefined" && typeof name === "undefined") {
+    return (
+      <div className="box_carousel">     
+        <div>
+          <img src={useBaseUrl(img)} className="carousel-img" />
+        </div>
+      </div>
+    );
+  }
+
+  else if (typeof link === "undefined") {
+    return (
+      <div className="box_carousel">     
+        <div>
+          <img src={useBaseUrl(img)} className="carousel-img" />
+          <h6 className="title_carousel">{name}</h6>
+        </div>
+      </div>
+    );
+  }
+
+  else if (typeof name === "undefined") {
+    return (
+      <div className="box_carousel">
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img src={useBaseUrl(img)} className="carousel-img" />
+        </a>
+      </div>
+    );
+  }
+
+  else {
+    return (
+      <div className="box_carousel">
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img src={useBaseUrl(img)} className="carousel-img" />
+          <h6 className="title_carousel">{name}</h6>
+        </a>
+      </div>
+    );
+  }
+}
+
+export default function Carousel(props) {
+  const list = props.list;
+  //https://react-slick.neostack.com/docs/api/
+  const settings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: 4000,
+    autoplaySpeed: 4000,
+    variableWidth: true,
+    cssEase: "linear"
+  };
+
+  return (
+    <div>
+      <Slider {...settings}>
+        {list.map((props, idx) => (
+          <CarouselElement key={idx} {...props} />
+        ))}
+      </Slider>
+    </div>
+  );
+}

src/components/CarouselLibre.js

+import React from "react";
+import Carousel from "./Carousel";
+
+const CarouselList = [
+  {
+    name: "Acceuil",
+    img: "/img/docusaurus.png",
+    link: "https://froggit.fr/",
+  },
+  {
+    img: "/img/bouclier.svg",
+  },
+  {
+    img: "/img/logo_froggit.svg",
+    link: "/communaute",
+  },
+  {
+    name: "hello",
+    img: "/img/logo_froggit.svg",
+  },
+  {
+    name: "ki jan'w",
+    img: "/img/chemistry.svg",
+  },
+  {
+    name: "bom dia",
+    img: "/img/read-smile.svg",
+  },
+];
+
+export default function CarouselLibre() {
+  return (
+    <Carousel list={CarouselList} />
+  );
+}

src/css/carousel.css

+/* CAROUSEL */
+.box_carousel {
+    display: flex;
+    text-align: center;
+    margin-right: 0px;
+    margin-left: 0px;
+}
+
+.carousel-img {
+    margin: 20px;
+    max-width: 110px;
+    /* text-align: center; */
+    justify-content: space-between;
+}
+
+.title_carousel {
+    display: flex;
+    justify-content: center;
+}

src/css/custom.css

@@ -4,6 +4,7 @@
 @import url("dark-theme.css");
 @import url("matomo.css");
 @import url("tarifs.css");
+@import url("carousel.css");
 
 
 html, body {

src/pages/dummy_page.md → src/pages/dummy_page.mdx

@@ -2,6 +2,7 @@
 title: dummy
 description: "page factice"
 ---
+import CarouselLibre from "@site/src/components/CarouselLibre";
 
 # Page factice
 
@@ -12,6 +13,12 @@ Page factice penser à créer une vraie page !
 echo "Hello World"
 ```
 
+## Hello mon carousel Libre !
+
+<div>
+    <CarouselLibre />
+</div>
+
 :::note
 
 Some **content** with _markdown_ `syntax`. Check [this `api`](#).

src/pages/index.js

@@ -7,11 +7,10 @@ import HomepageFeatures from "../components/HomepageFeatures";
 import Link from "@docusaurus/Link";
 
 function HomepageHeader(){
-  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={styles.heroBanner}>
       <div className="sections container">
-        <h1 className="hero__title">Simplifiez-vous le code... <br />et faites plaisir à vos techs.</h1>
+        <h1 className="hero__title">Simplifiez-vous le code... <br />et faites plaisir à vos techs !</h1>
         <p className="hero__subtitle">Collaborez autour du code sur la première plateforme intégrée DevOps <i>Made in France</i>. Avec Froggit, sécurisez vos données, améliorez vos performances et protégez enfin la planète.</p>
         <div className="button-frame">
           <Link className="button button--beta button--lg" to="/tarifs">