import React from "react";
import Carousel from "./Carousel";
import clsx from "clsx";

const CarouselList = [
  {
    img: "/img/CarouselLibre/gitlab_logo.png",
    name: "GitLab"
  },
  {
    img: "/img/CarouselLibre/mattermost_logo.png",
    name: "Mattermost"
  },
  {
    img: "/img/CarouselLibre/docusaurus.png",
    name: "Docusaurus"
  },
  {
    img: "/img/CarouselLibre/debian_logo.png",
    name: "Debian"
  },
  {
    img: "/img/CarouselLibre/Ansible_logo.png",
    name: "Ansible"
  },
  {
    img: "/img/CarouselLibre/Terraform_logo.png",
    name: "Terraform"
  },
  {
    img: "/img/CarouselLibre/borg_logo.png",
    name: "Borg"
  },
  {
    img: "/img/CarouselLibre/restic_logo.png",
    name: "Restic"
  },
];

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> 
      <section className="sections container">
        <Carousel list={CarouselList} />
      </section>
    </div>
  );
}