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,96 +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,84 @@
+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"} style={{ paddingBottom: "var(--ifm-spacing-xl)" }}>
+        <div className="col col--4" style={{display:"flex", alignItems:"center"}}>
+          <div className={styles.astronaut_container}>
+            <div>
+              <Link href={"/home"}>
+                <AstronautPicture width={"140px"} height={"140px"} />
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div
+          className={
+            "col col--4 flex-full-centred" + " " + styles.menu_container
+          }
+        >
+          <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>
+            <li>
+              <Link href={"/contact"}>Contact us</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="col col--4 flex-full-centered">
+          <div className={styles.social_media_links}>
+            <b>Follow us on</b> <br />
+            <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>
+      <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,31 @@
+.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;
+}
+
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .astronaut_container {
+    display: none;
+  }
+  .menu_container {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
+  .astronaut-container {
+    padding: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .social_media_links {
+    padding-bottom: var(--ifm-spacing-xl);
+  }
+}

src/components/home/styles.module.css

@@ -1,9 +1,3 @@
-.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*/

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,7 +2,7 @@ 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";
+import Footer from "../components/footer/Footer";
 
 export default function QSWebsite(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();