From bffc03b915c76847d9b423480858b158aed1c9c8 Mon Sep 17 00:00:00 2001
From: Hugues <hugues@lydra.fr>
Date: Tue, 10 Aug 2021 13:31:21 +0000
Subject: [PATCH] feat: header and tagline like componentkit.org

---
 docusaurus.config.js               |  4 ++--
 src/components/HomepageFeatures.js |  8 ++++----
 src/css/custom.css                 | 22 +++++++++++++++++++++-
 src/pages/index.js                 | 18 ++++++++++++------
 src/pages/index.module.css         | 12 ++++++++----
 5 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 06723cc..3a46cb4 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -3,7 +3,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: "Forggit.fr",
+  title: "Simplifiez-vous le code !",
   tagline: "Froggit aide à booster la coopération des Dev, Ops et autres Techs des entreprises autour du code source, sans gérer une infrastructure complexe !",
   url: "https://new.froggit.fr",
   baseUrl: "/",
@@ -16,7 +16,7 @@ module.exports = {
     navbar: {
       title: "Froggit",
       logo: {
-        alt: "My Site Logo",
+        alt: "Froggit Logo",
         src: "img/logo_froggit.svg",
       },
       items: [      
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 42a0e6c..4ef1124 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -10,7 +10,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>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.</p>
+        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.
       </>
     ), 
   },     
@@ -19,7 +19,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>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.</p>
+        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.
       </>
     ), 
   },
@@ -28,7 +28,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>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 !</p>
+        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 !
       </>
     ),
   },
@@ -37,7 +37,7 @@ const FeatureList = [
     Svg: require("../../static/img/logo_froggit.svg").default,
     description: (
       <>
-        <p>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.</p>
+        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.
       </>
     ),
   },
diff --git a/src/css/custom.css b/src/css/custom.css
index 48cbe39..b8aac77 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -20,9 +20,11 @@
   --ifm-color-tonic-three: #805D93;
   --ifm-color-primary-dark: #0c0c0cb0;
   --ifm-color-primary-light: #ffffff;
+  --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
   --ifm-font-family-base: "Comfortaa", cursive;
-  --ifm-font-family: "Montserrat",  sans-serif; 
+  --ifm-font-family: "Montserrat",  sans-serif;
+  --ifm-navbar-shadow: none; 
 }
 
 .docusaurus-highlight-code-line {
@@ -67,6 +69,20 @@ p {
   font-size: 18px;
 } 
 
+.navbar--fixed-top {
+  position: sticky; 
+  top: 0;
+  z-index: 1; 
+ } 
+
+header {
+  height: 500px;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 6vw),0 100%)
+}
+
 /************ main elements style***********/
 .sections {
   padding: 4rem 0;
@@ -90,8 +106,12 @@ p {
   font-family: var( --ifm-font-family);
 }
 
+
 /************ sub-footer style ***********/
 .footer__bottom {
   font-family: var(--ifm-font-family); 
   font-weight: 600;
 } 
+
+
+
diff --git a/src/pages/index.js b/src/pages/index.js
index aa1da7c..094de15 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,27 +1,33 @@
 import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
+import Layout from "@theme/Layout"; 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepagePromises from "../components/HomepagePromises";
 import HomepageFeatures from "../components/HomepageFeatures";
+import Link from "@docusaurus/Link";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={styles.heroBanner}>
       <div className="container">
-        <h1 className="hero__subtitle">{siteConfig.tagline}</h1>
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w">
+              En savoir plus
+        </Link>
+
       </div>
-    </header>
+    </header>      
   );
 }
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
+    
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={siteConfig.themeConfig.navbar.title}
       description="Description will go into a meta tag in <head />"
     >
       <HomepageHeader />
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 3f2b62a..57121c5 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -9,8 +9,11 @@
   padding: 4rem 0; 
   text-align: center;
   position: relative;
-  overflow: hidden visible;
-  background-color: var(--ifm-color-light-green);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+  background-color: var(--ifm-color-light-green);  
 }
 
  @media screen and (max-width: 966px) {
@@ -19,8 +22,9 @@
   }
 }
 
-.buttons {
+.container {
+  height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
-}
+} 
-- 
GitLab