WIP

docusaurus.config.js

@@ -12,6 +12,56 @@ module.exports = {
   favicon: "img/favicon/favicon.ico",
   organizationName: "facebook", // Usually your GitHub org/user name.
   projectName: "docusaurus", // Usually your repo name.
+  customFields: {
+    blockSection: [
+      {
+        title: "1. Le Lab 🧪",   
+        text: "Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C'est plus qu'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.",
+        img: 
+            { 
+              alt: "My Site Logo",
+              src: "img/logo_froggit.svg",
+            },
+      },       
+      {
+        title: "2. La CI 🔁",  
+        text: "Fournir un outil de collaboration de code sans Intégration Continue n'était pas pensable pour nous. C'est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.", 
+        img: 
+          { 
+            alt: "My Site Logo",
+            src: "img/logo_froggit.svg",
+          },
+      }, 
+      {
+        title: "3. Le Chat 💬",
+        text: "Pour collaborer les équipes ont besoin de communiquer. Qu'elles soient physiquement au même endroit ou non une communication asynchrone est importante. C'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’authentification se fera grâce au Lab, vous n’aurez qu'un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !",   
+        img: 
+          { 
+            alt: "My Site Logo",
+            src: "img/logo_froggit.svg",
+          },
+      },
+      {
+        title: "4. Les Pages 🔖",
+        text: "Vous avez besoin de créer des sites statiques pour vos documentations. C'est pour cela que nous mettons en place les GitLab pages qui vous permettent d'héberger des sites statiques.",  
+        img: 
+           { 
+             alt: "My Site Logo",
+             src: "img/logo_froggit.svg",       
+           } 
+      },   
+    ],   
+    blockSection1: 
+      {
+        title: "1. Le Lab 🧪",   
+        text: "Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C'est plus qu'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.",
+        img: 
+            { 
+              alt: "My Site Logo",
+              src: "img/logo_froggit.svg",
+            },
+      },       
+  },
   themeConfig: {
     navbar: {
       title: "Froggit",

src/components/BlockSection.js

+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-no-comment-textnodes */
+import React from "react";
+import clsx from "clsx";
+import styles from "./BlockSection.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+// eslint-disable-next-line no-unused-vars
+const { siteConfig } = useDocusaurusContext();
+
+/* const  = [
+  {
+    title: "",
+    // eslint-disable-next-line
+		Svg: require("../../static/img/bouclier.svg").default,
+    description: (
+      <>
+        <p>Vos données sont en lieu sûr et sauvegardées toutes les nuits.</p>
+      </>
+    ), 
+  },
+]; */
+const BlockSectionComponent = [
+  {
+    
+  },
+  {
+    title: "Souverain",
+    // eslint-disable-next-line
+		Svg: require("../../static/img/rgpd.svg").default,
+    description: (
+      <>
+        <p>Nous sommes hébergés en France et conformes au RGPD.</p>
+      </>
+    ),
+  },
+  {
+    // eslint-disable-next-line
+		title: "Libre",
+    // eslint-disable-next-line
+		Svg: require("../../static/img/liberte.svg").default,
+    description: (
+      <>
+        <p>Notre solution s&apos;appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
+      </>
+    ),
+  },
+];
+
+// eslint-disable-next-line
+function Feature({Svg, title, description, siteConfig }) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} alt={title} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        // eslint-disable-next-line react/jsx-no-comment-textnodes
+        <h3>{title}</h3>
+        // eslint-disable-next-line react/prop-types
+        <p>{ siteConfig.customFields.blockSection.title }</p>
+      </div>
+    </div>
+  );
+}
+
+export default function BlockSection() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {BlockSectionComponent.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/BlockSection.module.css

+/* stylelint-disable docusaurus/copyright-header */
+
+.features {
+    display: flex;
+    align-items: center;
+    padding: 2rem 0;
+    width: 100%;
+  }
+  
+  .featureSvg {
+    height: 150px;
+    width: 150px;
+  }
+  
\ No newline at end of file

src/css/custom.css

@@ -27,3 +27,15 @@
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 150px;
+  width: 150px;
+}

src/pages/index.js

+/* eslint-disable indent */
 import React from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";
@@ -5,19 +6,27 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "../components/HomepageFeatures";
 
+
+
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__subtitle">{siteConfig.tagline}</h1>                                                                             
+        <h1 className="hero__subtitle">{siteConfig.tagline}</h1>     
+        <h1 className="hero__subtitle">{siteConfig.customFields.blockSection.title}</h1>                                                                       
       </div>
     </header>
   );
 }
 
 export default function Home() {
-  const { siteConfig } = useDocusaurusContext();
+
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  
+      
+ 
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
@@ -26,6 +35,15 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <div>
+          <p>{`${siteConfig.customFields.blockSection1}`}</p>
+         
+          <img src={siteConfig.customFields.blockSection1.img.src} alt={siteConfig.customFields.blockSection1.img.alt} />
+          <h1>{siteConfig.customFields.blockSection1.title}</h1> 
+          <p>{siteConfig.customFields.blockSection1.text}</p>                                                                      
+        
+          
+        </div>
       </main>
     </Layout>
   );