sections.md

const FeatureList = [
  {
    title: "Le Lab 🧪",
    Svg: require("../../static/img/chemistry.svg").default,
    description: (
      <>
        Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C&apos;est plus qu&apos;un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.
      </>
    ),
  },
  {
    title: "La CI 🔁",
    Svg: require("../../static/img/rainbow.svg").default,
    description: (
      <>
        Fournir un outil de collaboration de code sans Intégration Continue n&apos;était pas pensable pour nous. C&apos;est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.
      </>
    ),
  },
  {
    title: "Le Chat 💬",
    Svg: require("../../static/img/selfie.svg").default,
    description: (
      <>
        Pour collaborer les équipes ont besoin de communiquer. Qu&apos;elles soient physiquement au même endroit ou non une communication asynchrone est importante. C&apos;est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L&apos;authentification se fera grâce au Lab, vous n&apos;aurez qu&apos;un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !
      </>
    ),
  },
  {
    title: "Les Pages 🔖",
    Svg: require("../../static/img/read-smile.svg").default,
    description: (
      <>
        Vous avez besoin de créer des sites statiques pour vos documentations. C&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.
      </>
    ),
  },
];
// src/components/TextRight.js
import React from "react";
import styles from "./TextRight.module.css";
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function TextRight({children, img}) {
  return (
    <>
      <div className="row">
        <div className="col col--6">
          <img src={useBaseUrl(img)} />
        </div>
        <div className="col col--6">
          {children}
        </div>
      </div>
    </>
  );
}
import TextRight from '@site/src/components/TextRight';

<TextRight img="/img/mon_image.png">

# Mon Titre

Mon texte

</TextRight>
function Feature({Svg, title, description}) {
  return (
    <div className="sectionsReverse row">
      <div className="col col--5 text--center">
        <Svg className={styles.svg} alt={title} />
      </div>
      <div className="col col--5">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>

  );
}
export default function HomepageFeatures() {
  return (
    <section className="sections container" id="features">
      <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
      <div>
        {FeatureList.map((props, idx) => (
          <Feature key={idx} {...props} />
        ))}
      </div>
    </section>
  );
}
import React from "react";
import HomepagePromises from "../components/HomepagePromises";
import HomepageFeatures from "../components/HomepageFeatures";

//    (...)

export default function Home() {
  return (
    <Layout>
      <HomepageHeader />
      <main>
        <HomepagePromises />
        <HomepageFeatures />
      </main>
    </Layout>
  );
}