Remove default footer and propose a react component to replace it

docusaurus.config.ts

@@ -64,7 +64,7 @@ const config: Config = {
       title: "",
       logo: {
         alt: "QuantStack Logo",
-        src: "img/quantstack/logo-website.svg"
+        src: "img/quantstack/logo-website.svg",
       },
 
       items: [
@@ -131,97 +131,10 @@ const config: Config = {
       ],
     },
 
-    footer: {
-      links: [
-        {
-          title: " ",
-          items: [
-            {
-              label: " ",
-              className: "astronaut-footer",
-              href: "/home",
-            },
-          ],
-        },
-
-        {
-          title: "Follow QuantStack on",
-          items: [
-            {
-              label: "GitHub",
-              className: "github-icon",
-              href: "https://github.com/QuantStack",
-            },
-            {
-              label: "LinkedIn",
-              className: "linkedin-icon",
-              href: "https://www.linkedin.com/company/quantstack/mycompany/",
-            },
-            {
-              label: "X",
-              className: "x-icon",
-              href: "https://twitter.com/QuantStack",
-            },
-          ],
-        },
-        {
-          title: "Menu ",
-          items: [
-            {
-              label: "Home",
-              href: "/home/",
-            },
-            {
-              label: "Projects",
-              href: "/projects/",
-            },
-            {
-              label: "Services",
-              href: "/services/",
-            },
-            {
-              label: "About",
-              href: "/about/",
-            },
-            {
-              label: "Careers",
-              href: "/careers/",
-            },
-            {
-              label: "Blog",
-              href: "/blog/",
-            },
-          ],
-        },
-
-
-        {
-          title: "QuantStack office ",
-          items: [
-            {
-              html: `
-
-                  <div class="div .address">
-                      16, avenue Curti <br/>
-                      94100 Saint-Maur-des-Fossés <br/>
-                      France
-                  </div>
-
-                    `,
-            },
-          ],
-        },
-      ],
-
-      copyright: copyright,
-    },
-
-
-      colorMode: {
-        defaultMode: 'light',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
-
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: true,
+      respectPrefersColorScheme: false,
     },
 
     prism: {

src/components/footer/Footer.tsx

@@ -0,0 +1,106 @@
+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";
+
+export function SocialMediasQuantStack() {
+  return (
+    <div>
+      <b>Follow us on</b> <br />
+      <div style={{marginBottom: "var(--ifm-spacing-lg)"}}>
+        <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>
+  );
+}
+
+export default function Footer() {
+  return (
+    <div className={"container" + " " + styles.footer_container}>
+      <div className={"row"} style={{ paddingBottom: "var(--ifm-spacing-xl)" }}>
+        <div
+          className={
+            "col flex-horizontally-centered" + " " + styles.col_social_media_desktop
+          }
+        >
+          <SocialMediasQuantStack />
+        </div>
+        <div className={"col flex-horizontally-centered"}>
+          <div className={"container" + " " + styles.menu_container}>
+            <div style={{ textAlign: "center" }}>
+              <b>Menu</b> <br />
+            </div>
+            <div className="row">
+              <div className="col flex-horizontally-centered">
+                <ul>
+                  <li>
+                    <Link href={"/home"}>Home</Link>
+                  </li>
+
+                  <li>
+                    <Link href={"/projects"}>Projects</Link>
+                  </li>
+                  <li>
+                    <Link href={"/about"}>About us</Link>
+                  </li>
+                </ul>
+              </div>
+              <div className="col flex-horizontally-centered">
+                <ul>
+                  <li>
+                    <Link href={"/services"}>Services</Link>
+                  </li>
+                  <li>
+                    <Link href={"/careers"}>Careers</Link>
+                  </li>
+                  <li>
+                    <Link href={"/blog"}>Blog</Link>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={
+            "col flex-full-centered" + " " + styles.col_address_desktop
+          }
+        >
+          <div>
+            <div>
+              <b>QuantStack office</b> <br />
+              16, avenue Curti <br />
+              94100 Saint-Maur-des-Fossés <br />
+              France
+            </div>
+          </div>
+        </div>
+
+        <div className={"col" + " " + styles.col_social_media_and_address_mobile}>
+          <SocialMediasQuantStack />
+
+          <div>
+            <div>
+              <b>QuantStack office</b> <br />
+              16, avenue Curti <br />
+              94100 Saint-Maur-des-Fossés <br />
+              France
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={"row flex-full-centered"}>
+        <div className={styles.copyright_container}>
+          Copyright © 2024 · QuantStack website · Built with Docusaurus
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/footer/styles.module.css

@@ -0,0 +1,36 @@
+.footer_container {
+  background-color: var(--ifm-color-primary-p1);
+  padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl) 0 var(--ifm-spacing-2xl);
+}
+
+.copyright_container {
+  text-align: center;
+  padding-bottom: var(--ifm-spacing-lg);
+}
+
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .menu_container {
+    display: none;
+  }
+
+  .col_social_media_desktop {
+    display: none;
+  }
+
+  .col_address_desktop {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
+
+  .col_social_media_mobile {
+    display: none;
+  }
+
+  .col_social_media_and_address_mobile {
+    display: none;
+  }
+}

src/components/home/styles.module.css

@@ -1,3 +1,4 @@
+
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .link_to {

src/css/custom.css

@@ -69,6 +69,11 @@
   justify-content: center;
 }
 
+.flex-horizontally-centered {
+  display: flex;
+  justify-content: center;
+}
+
 .horizontally-centered {
   justify-content: center;
 }
@@ -95,10 +100,6 @@ ul {
 }
 
 /***footer*****/
-.address {
-  color: var(--ifm-text-color-footer);
-}
-
 .footer__item {
   color: var(--ifm-text-color-footer);
 }
@@ -148,10 +149,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/about.tsx

@@ -2,12 +2,14 @@ import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import {About} from "../components/about";
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import Footer from "../components/footer/Footer";
 
 export default function AboutPage(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <BrowserOnly>{() => <About />}</BrowserOnly>
+      <Footer/>
     </Layout>
   );
 }

src/pages/blog.tsx

@@ -2,13 +2,15 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import BlogsComponent from "../components/blog";
 import blogpostDetails from "@site/src/components/blog/blogpostsDetails.json";
+import Footer from "../components/footer/Footer";
 
 
 export default function BlogPage(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <BlogsComponent blogpostsDetails={blogpostDetails} />
+      <Footer/>
     </Layout>
   );
 }

src/pages/careers.tsx

@@ -1,13 +1,15 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Careers from '../components/careers';
+import Footer from "../components/footer/Footer";
 
 
 export default function CareersPage(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <Careers />
+      <Footer/>
     </Layout>
   );
 }

src/pages/contact.tsx

@@ -2,12 +2,14 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Contact from "@site/src/components/contact";
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import Footer from "../components/footer/Footer";
 
 export default function ContactPage(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <BrowserOnly>{() => <Contact />}</BrowserOnly>
+      <Footer/>
     </Layout>
   );
 }

src/pages/home.tsx

@@ -2,13 +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/footer/Footer";
 
 export default function HomePage(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <main>
       <BrowserOnly>{() => <Home />}</BrowserOnly>
+      <Footer/>
       </main>
     </Layout>
   );

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/footer/Footer";
 
 export default function QSWebsite(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <BrowserOnly>{() => <Home />}</BrowserOnly>
+      <Footer/>
     </Layout>
   );
 }
+