Define a custom footer.

Author: HaudinFlorence

docusaurus.config.ts

@@ -131,7 +131,7 @@ const config: Config = {
       ],
     },
 
-    footer: {
+    /*footer: {
       links: [
         {
           title: " ",
@@ -214,7 +214,7 @@ const config: Config = {
       ],
 
       copyright: copyright,
-    },
+    },*/
 
       colorMode: {
         defaultMode: 'light',

src/components/home/Footer.tsx

@@ -0,0 +1,69 @@
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+import GHPicture from "@site/static/img/socialmedias/GH.svg";
+import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
+import XPicture from "@site/static/img/socialmedias/X.svg";
+import AstronautPicture from "@site/static/img/quantstack/astronaut-footer.svg";
+
+export default function Footer() {
+  return (
+    <div className={"container" + " " + styles.footer_container}>
+      <div className={"row"}>
+        <div className={"col"}>
+          <div
+            className={styles.astronaut_container}
+          >
+            <Link href={"/home"}>
+              <div className="astronaut-footer" />
+            </Link>
+          </div>
+        </div>
+
+        <div className="col">
+          <b>Menu</b> <br />
+          <ul>
+            <li>
+              <Link href={"/home"}>Home</Link>
+            </li>
+            <li>
+              <Link href={"/projects"}>Projects</Link>
+            </li>
+            <li>
+              <Link href={"/about"}>About us</Link>
+            </li>
+            <li>
+              <Link href={"/services"}>Services</Link>
+            </li>
+            <li>
+              <Link href={"/careers"}>Careers</Link>
+            </li>
+            <li>
+              <Link href={"/blog"}>Blog</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="col">
+          <div>
+            <Link href={"https://github.com/QuantStack"}>{<GHPicture />}</Link>
+            <Link
+              href={"https://www.linkedin.com/company/quantstack/mycompany"}
+            >
+              {<LinkedInPicture />}
+            </Link>
+            <Link href={"https://twitter.com/QuantStack"}>{<XPicture />}</Link>
+          </div>
+          <div className={styles.office_address}>
+            <b>QuantStack office</b> <br />
+            16, avenue Curti <br />
+            94100 Saint-Maur-des-Fossés <br />
+            France
+          </div>
+        </div>
+      </div>
+      <div className={"row"}>
+        Copyright © 2024 · QuantStack website · Built with Docusaurus
+      </div>
+    </div>
+  );
+}

src/components/home/styles.module.css

@@ -1,3 +1,10 @@
+.footer_container {
+  background-color: var(--ifm-color-primary-p1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .link_to {

src/css/custom.css

@@ -148,10 +148,8 @@ ul {
 
 .footer-astronaut {
   display: flex;
-  text-align: left;
-  margin-right: var(--ifm-spacing-lg);
-  width: 200px;
-  height: 200px;
+  width: 35px;
+  height: 35px;
   padding: 10px;
 }
 

src/pages/index.tsx

@@ -2,12 +2,15 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Home from "../components/home/Home";
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import Footer from "../components/home/Footer";
 
 export default function QSWebsite(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <BrowserOnly>{() => <Home />}</BrowserOnly>
+      <Footer/>
     </Layout>
   );
 }
+