feat: add systemeio form on community page

docusaurus.config.js

@@ -23,12 +23,8 @@ module.exports = {
         {label: "✨ Fonctionnalités", position: "left", to: "/#features", exact: true},
         {label: "❓ FAQ", position: "left", to: "/faq"},
         {label: "💰 Tarifs", position: "left", to: "/tarifs"},
-        {label: "📔 Doc", position: "left", type: "doc", docId: "intro"},
-        {
-          label: "🎁 Antisèche git",
-          position: "left",
-          href: "https://lydra.systeme.io/froggit-inscription",
-        },
+        {label: "📔 Doc", position: "left", type: "doc", docId: "intro", },
+        {label: "🎁 Antisèche et Communauté git", position: "left", to: "/communaute"},
         {
           label: "👤 Connexion",
           position: "right",

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>
+    </>
+  );
+}

src/components/TextRight.module.css

+li::marker {
+  color: var(--ifm-color-dark-green);
+}

src/css/custom.css

@@ -21,7 +21,7 @@
     src: url('/fonts/jetbrainsmono.woff') format('woff');
 }
 
-/* VARIABLES */
+/******** VARIABLES ********/
 :root {
   --ifm-color-primary: #000000;  
   --ifm-color-dark-green: #577018;
@@ -40,6 +40,7 @@
   --ifm-container-width: 100%; 
   --ifm-container-max-width: 950px;
   --ifm-navbar-shadow: none;
+  --ifm-button-shadow: 1px 3px 4px #b6b6b6;
 }
 
 .docusaurus-highlight-code-line {
@@ -52,8 +53,8 @@
 html[data-theme='dark'] {
   --ifm-background-color: #18191a;
   --ifm-background-surface-color: #18191a;
-  --ifm-hover-overlay: rgba(255, 255, 255, 0.05); 
-  --ifm-color-content-secondary: rgba(255, 255, 255, 1);
+  --ifm-hover-overlay: #ffffff0d;
+  --ifm-color-content-secondary: var(--ifm-color-primary-light);
   --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
 }
 
@@ -77,6 +78,25 @@ a:hover {
   transition: 0.3s;
 }
 
+form > p {
+  font-size: small;
+  margin-top: 2em;
+}
+
+input {
+  width: 95%;
+  display: block;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  margin-left: 1em;
+  padding: 10px;
+  border-radius: var(--ifm-button-border-radius);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--ifm-color-dark-green);
+  font-family: var(--ifm-font-family-base);
+}
+
 .heroBanner_src-pages-index-module {
   padding: 0.5rem !important;
   padding-bottom: 2.5rem !important;
@@ -154,6 +174,8 @@ ul {
   border-color: var(--ifm-color-dark-green);
   color: var(--ifm-color-frame);
   border-style: none;
+  white-space : initial;
+  font-family: var(--ifm-font-family-base);
 }
 
 .button--beta {
@@ -239,6 +261,7 @@ a.footer__link-item:hover {
 }
 
 /************ sub-footer style ***********/
+/* SUB-FOOTER STYLE */
 .footer__bottom {
   font-family: var(--ifm-font-family); 
   font-weight: 600;
@@ -297,3 +320,10 @@ html[data-theme='dark'] a:hover {
 html[data-theme='dark'] .menu__link {
   color: var(--ifm-color-tonic-one);
 }
+
+/****** Media screen *******/
+@media screen and (max-width:330px) {
+  .navbar {
+      width: 330px;
+  }
+}

src/pages/communaute.mdx

+import TextRight from '@site/src/components/TextRight';
+
+<TextRight img="/img/cheatsheet_cover.png">
+
+# Devenez deux fois plus productif grâce à GitLab !
+
+> « J’utilise git **tous les jours** et j’ai appris à être **deux fois plus productif** grâce à un environnement de développement aux petits oignons couplé avec le service GitLab. »  – Christophe Chaudier
+
+En vous inscrivant, vous recevrez : 
+
+- Une **antisèche** des commandes git les plus utilisées.
+- L'accès à **une communauté** de partage autour de git et de GitLab **en français** qui s'appuie sur un forum de discussion et un wiki.
+- Des informations et astuces régulières qui vous feront **gagner en productivité** en utilisant GitLab.
+- Des **réductions** à nos formations.
+
+<form method="post" action="https://systeme.io/embedded/3299399/subscription">
+<input type="text" name="first_name" placeholder="Prénom" required="required" />
+
+<input type="email" name="email" placeholder="Email" required="required" />
+
+<button type="submit" class="button button--beta button--lg">Oui je veux recevoir des ressources sur GitLab en français !</button>
+
+Vos données personnelles ne seront utilisées que pour vous envoyer des messages d'information et commerciaux. 
+Votre vie privée est importante pour nous et votre adresse courriel est en sécurité, **nous ne vendrons jamais vos courriels** à des tiers.
+
+Vous pourrez vous désinscrire à tout moment en cliquant sur le lien en bas de chaque mail.
+
+**Cette désinscription entraînera votre désinscription de la communauté Froggit.**
+
+Les données recueillies sur cette page sont stockées par notre [sous-traitant systeme.io](https://systeme.io/?sa=sa0002743266bfa20f069aff9d665aa29843fe7bd162&trial=30&tk=tunnelfroggit), dont la politique de confidentialité est [disponible ici](https://systeme.io/fr/info/privacy?sa=sa0002743266bfa20f069aff9d665aa29843fe7bd162&trial=30&tk=tunnelfroggit).
+
+</form>
+
+</TextRight>

src/pages/dummy_page.md

@@ -6,8 +6,3 @@ description: "page factice"
 # Page factice
 
 Page factice penser à créer une vraie page !
-
-```bash
-#!/bin/bash
-echo "Hello World"
-```

src/pages/index.js

@@ -6,7 +6,7 @@ import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
 import Link from "@docusaurus/Link";
 
-function HomepageHeader() {
+function HomepageHeader(){
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={styles.heroBanner}>