diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js index e5f788cc650c8bea70df1f0bad84bb743812dedc..1c64e7387dbcbe40d6d828bb43122f7f9737bf76 100644 --- a/src/components/HomepageFeatures.js +++ b/src/components/HomepageFeatures.js @@ -2,56 +2,56 @@ 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 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" - } - ]; + { + 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 HomepageFeaturesTab() { +export default function HomepageFeatures() { return ( <section className="sections container" id="features"> <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications @@ -63,19 +63,19 @@ export default function HomepageFeaturesTab() { </p> </div> <div> - <Tabs className={styles.tabsElement}> - {FeatureList.map((em) => ( - <TabItem className={clsx("text--center")} value={em.title} label={em.title}> + <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/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/> <p className={styles.textDisplay}> {em.description} </p> </div> - </TabItem> - ))} - </Tabs> + </TabItem> + ))} + </Tabs> </div> - </section> + </section> ); }