feat: header and tagline like componentkit.org

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: [      

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.
       </>
     ),
   },

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

src/pages/index.js

 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 />

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