Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
HomepageFeatures.js 2.82 KiB
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";

const FeatureList = [
  {
    id: 5,
    title: "Le\u00A0SSO\u00A0🔑",
    svg: "hello.png",
    alt: "Kermit, sortant de sa cachette",
    description: "Authentifiez-vous une bonne fois pour toute !"
  },  
  {
    id: 1,
    title: "Le\u00A0Lab\u00A0🧪",   
    svg: "chemistry.svg",
    alt: "Kermit manipule du matériel de laboratoire",
    description:"Gérer vos projets, héberger votre code et collaborer autour de Git", 
  },
  {
    id: 2,
    title: "La\u00A0CI\u00A0🔁",
    svg: "rainbow.svg",
    alt: "Kermit pose devant un arc-en-ciel",
    description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
  },
  {
    id: 4,
    title: "Les\u00A0Pages\u00A0🔖",
    svg: "read-smile.svg",
    alt: "Kermit porte des lunettes rondes et lit un livre",
    description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
  },
  {
    id: 3,
    title: "Le\u00A0Chat\u00A0💬",
    svg: "selfie.svg",
    alt: "Kermit prend un selfie",
    description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
  },
  {
    id: 6,
    title: "La\u00A0communauté\u00A0🍺",
    svg: "beer.png",
    alt: "Kermit faisant un clin d'oeil, une chope à la main",
    description: "Une communauté Git pour solutionner vos pépins rapidement"
  }
];


export default function HomepageFeatures() {
  return (
    <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>

  );
}