From 826923b63d5930ada5c46ea0156ebc284c294a5e Mon Sep 17 00:00:00 2001
From: HaudinFlorence <haudin.florence@gmail.com>
Date: Tue, 16 Jul 2024 00:55:13 +0200
Subject: [PATCH] Fix the contact page style.

---
 docusaurus.config.ts                        |   4 +-
 src/components/about/FourValues.tsx         |   6 +-
 src/components/about/LargePortraitCard.tsx  |   6 +-
 src/components/about/SubTeam.tsx            |   8 +-
 src/components/about/styles.module.css      | 105 ++++-------
 src/components/blog/index.tsx               |   7 +-
 src/components/blog/styles.module.css       |   3 +-
 src/components/careers/index.tsx            |   7 +-
 src/components/careers/styles.module.css    |  91 +++++----
 src/components/contact/index.tsx            |  27 ++-
 src/components/contact/styles.module.css    |  58 ++++--
 src/components/projects/Header.tsx          |  14 +-
 src/components/projects/styles.module.css   |   7 +-
 src/components/services/SpecialProjects.tsx |   2 +-
 src/components/services/Support.tsx         |   4 +-
 src/components/services/styles.module.css   |  20 +-
 src/css/custom.css                          | 197 ++++++++++----------
 17 files changed, 297 insertions(+), 269 deletions(-)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 880c9e7bd..254e2800f 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -138,7 +138,7 @@ const config: Config = {
           items: [
             {
               label: " ",
-              className: "quantstack-astronaut-footer",
+              className: "astronaut-footer",
               href: "/home",
             },
           ],
@@ -201,7 +201,7 @@ const config: Config = {
             {
               html: `
               
-               <div class="div .quantstack-address">
+                  <div class="div .address">
                       16, avenue Curti <br/>
                       94100 Saint-Maur-des-Fossés <br/>
                       France
diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
index 1e126ad94..c34c1f266 100644
--- a/src/components/about/FourValues.tsx
+++ b/src/components/about/FourValues.tsx
@@ -12,11 +12,7 @@ export default function FourValues() {
           </h1>
         </div>
       </div>
-      <ul
-        className={
-          "row padding-none flex-full-centered" + " " + styles.row_with_margins
-        }
-      >
+      <ul className="row padding-none flex-full-centered row-with-margins">
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx
index 880928d43..1fda365e4 100644
--- a/src/components/about/LargePortraitCard.tsx
+++ b/src/components/about/LargePortraitCard.tsx
@@ -52,10 +52,10 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
             <div className={styles.large_card_position}>{person.position}</div>
           </div>
         </div>
-        <div className={"row" + " " + styles.row_with_margin_bottom}>
-          <div className={"col col--3 col--offset-1 flex-full-centered"}>
+        <div className="row">
+          <div className={"col col--3 col--offset-1 flex-full-centered"} >
             <div className="flex-full-centered">
-              <div style={{marginBottom:"var(--ifm-spacing-lg)"}}>
+              <div style={{marginBottom:"var(--ifm-spacing-md)"}}>
               <img
                 src={avatarUrl}
                 className={styles.avatar}
diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx
index 19f72cc4d..0fcc8b565 100644
--- a/src/components/about/SubTeam.tsx
+++ b/src/components/about/SubTeam.tsx
@@ -11,13 +11,7 @@ export default function SubTeam({
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
       <div className={"container"}>
-        <ul
-          className={
-            "row padding-none flex-full-centered" +
-            " " +
-            styles.row_with_margin_top
-          }
-        >
+        <ul className="row padding-none flex-full-centered row-with-margin-top">
           {subTeam.map((person, index) => (
             <li className="cards-list" key={index}>
               <div className="col">
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
index 1091552ee..48a92c487 100644
--- a/src/components/about/styles.module.css
+++ b/src/components/about/styles.module.css
@@ -1,35 +1,13 @@
 .small_portrait_card {
   width: 279px;
-   height: 388px;
-   background-color: white;
-   color: var(--ifm-color-primary-p2);
-   border-radius: 8px;
-   box-shadow: 0px 0px 8px 1px #c8c8c7;
-   padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
-   text-align: center;
-   margin-bottom: var(--ifm-spacing-xl);
- }
-
-.avatar {
-  filter: grayscale(1);
-  border-radius: 50%;
-  overflow: hidden;
-  height: 160px;
-  width: 160px;
-}
-
-
-
-
-.value_header {
-  font-family: var(--ifm-font-family-rubik-one);
-  font-size: var(--ifm-font-size-secondary-title);
-  font-style: normal;
-  font-weight: 600;
-  line-height: 28px;
+  height: 388px;
+  background-color: white;
+  color: var(--ifm-color-primary-p2);
+  border-radius: 8px;
+  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
   text-align: center;
   margin-bottom: var(--ifm-spacing-xl);
-  color: var(--ifm-text-color-on-primary-p1);
 }
 
 .value_text p {
@@ -42,7 +20,6 @@
   color: var(--ifm-text-color-on-primary-p1);
 }
 
-
 div .row {
   margin-left: 0;
   margin-right: 0;
@@ -75,7 +52,7 @@ div .row {
   color: var(---ifm-text-color);
   font-style: normal;
   font-weight: 600;
-  line-height: 24px; 
+  line-height: 24px;
   letter-spacing: 0.5px;
   color: var(--ifm-color-primary-p2);
 }
@@ -89,9 +66,7 @@ div .row {
   line-height: 40px;
   color: var(--ifm-color-primary-p2);
 }
-s
-
-.large_card_position {
+s .large_card_position {
   font-size: var(--ifm--font-size-normal);
   font-family: var(--ifm-font-family-roboto);
   color: var(--ifm-color-primary-p2);
@@ -136,7 +111,13 @@ div .join_the_team_text {
   color: var(--ifm-color-secondary-s2);
 }
 
-
+.avatar {
+  filter: grayscale(1);
+  border-radius: 50%;
+  overflow: hidden;
+  height: 160px;
+  width: 160px;
+}
 
 @media only screen and (max-width: 996px) {
   /*Mobile*/
@@ -150,28 +131,27 @@ div .join_the_team_text {
     margin-bottom: var(--ifm-spacing-xl);
   }
 
-  .large_portrait_card {
-    width: 100%;
-    height: 200%;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
-
-  .row_with_margin_top {
-    margin-top: var(--ifm-spacing-xl);
-  }
-
-  .row_with_margin_bottom {
+  .value_header {
+    font-family: var(--ifm-font-family-rubik-one);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    text-align: center;
     margin-bottom: var(--ifm-spacing-xl);
+    color: var(--ifm-text-color-on-primary-p1);
   }
 
-  .row_with_margins {
-    margin: var(--ifm-spacing-xl) 0;
+  .large_portrait_card {
+    width: 100%;
+    height: 100%;
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
   }
 
   .subteam_container {
     margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl);
   }
-  
+
   .team_description {
     font-family: var(--ifm-font-family-roboto);
     font-size: 18px;
@@ -194,30 +174,26 @@ div .join_the_team_text {
     margin-bottom: var(--ifm-spacing-xl);
   }
 
-
+  .value_header {
+    font-family: var(--ifm-font-family-rubik-one);
+    font-size: var(--ifm-font-size-secondary-title);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-xl);
+    color: var(--ifm-text-color-on-primary-p1);
+  }
 
   .large_portrait_card {
     width: 1000px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
   }
 
-  .row_with_margin_top {
-    margin-top: var(--ifm-spacing-2xl);
-  }
-
-  .row_with_margin_bottom {
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
-
-
-  .row_with_margins {
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
   .subteam_container {
     margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl);
   }
-  
+
   .team_description {
     font-family: var(--ifm-font-family-roboto);
     font-size: 22px;
@@ -226,5 +202,4 @@ div .join_the_team_text {
     line-height: 28px;
     text-align: center;
   }
-  
-}
\ No newline at end of file
+}
diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx
index 470541d11..6dc19e87d 100644
--- a/src/components/blog/index.tsx
+++ b/src/components/blog/index.tsx
@@ -4,7 +4,6 @@ import BlogpostCard from "./BlogpostCard";
 
 export default function BlogsComponent({ blogpostsDetails }) {
   const numberOfBlogs = blogpostsDetails.length;
-  console.log("numberOfBlogs:", numberOfBlogs);
   const [searchField, setSearchField] = useState("");
 
   const filteredBlogPosts = blogpostsDetails.filter((blogpost) => {
@@ -15,7 +14,6 @@ export default function BlogsComponent({ blogpostsDetails }) {
       blogpost.summary.toLowerCase().includes(searchField.toLowerCase())
     );
   });
-  //const filteredBlogPosts = blogpostsDetails;
 
   const handleChange = (event) => {
     setSearchField(event.target.value);
@@ -24,12 +22,11 @@ export default function BlogsComponent({ blogpostsDetails }) {
   return (
     <div className="main-container-with-margins">
       <div className="container upper-container-with-margin-top">
-        <div className={"row"}>
+        <div className={"row row-with-margin-bottom"}>
           <div
             className={"col col--8 col--offset-2"}
-            style={{ marginBottom: "var(--ifm-spacing-5xl)" }}
           >
-            <h1 className="padding-none">
+            <h1 className="padding-none margin-none">
               Featured Posts by QuantStack Contributors
             </h1>
             <div>
diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
index 1c2bd06e8..ba5b20b18 100644
--- a/src/components/blog/styles.module.css
+++ b/src/components/blog/styles.module.css
@@ -88,6 +88,5 @@ div .blogpost_date {
   border-radius: 8px;
   padding: var(--ifm-spacing-xs) var(--ifm-spacing-lg) var(--ifm-spacing-xs)
     var(--ifm-spacing-lg);
+  margin: var(--ifm-spacing-lg) 0;
 }
-
-
diff --git a/src/components/careers/index.tsx b/src/components/careers/index.tsx
index f0626cd37..09e00b3a3 100644
--- a/src/components/careers/index.tsx
+++ b/src/components/careers/index.tsx
@@ -34,11 +34,10 @@ export default function Careers() {
           </div>
           <div
             className={
-              "row" +
+              "row flex-full-centered" +
               " " +
-              styles.join_the_team_container +
-              " " +
-              "flex-full-centered"
+              styles.join_the_team_container
+        
             }
           >
             <div className="col col--10 col--offset-1">
diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
index 1026ffdff..98a797c84 100644
--- a/src/components/careers/styles.module.css
+++ b/src/components/careers/styles.module.css
@@ -33,58 +33,79 @@
   font-weight: 700;
 }
 
-  .interview_card {
-    width: 280px;
-    height: 300px;
-    background-color: var(--ifm-background-color);
-    border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    padding: var(--ifm-spacing-sm);
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
+.interview_card {
+  width: 280px;
+  height: 300px;
+  background-color: var(--ifm-background-color);
+  border-radius: 10px;
+  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  padding: var(--ifm-spacing-sm);
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-xl);
+}
+
+.interview_picture {
+  width: 284px;
+}
+
+.interviews_container {
+  margin: var(--ifm-spacing-2xl) 0;
+}
 
+.interview_name {
+  color: var(--ifm-text-color);
+  text-align: center;
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px; /* 128.571% */
+}
+
+.interview_position {
+  color: var(--ifm-text-color);
+  text-align: center;
+  font-family: var(--ifm-font-family-roboto);
+  font-size: var(--ifm-font-size-normal);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 133.333% */
+  letter-spacing: 0.5px;
+}
+
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
   .join_the_team_text {
     text-align: center;
-    font-size: 28px;
+    font-size: 18px;
     font-family: var(--ifm-font-family-roboto);
     color: var(--ifm-color-primary-p2);
     text-align: center;
     font-style: normal;
     font-weight: 400;
-    line-height: 36px; /* 128.571% */
+    line-height: 36px;
   }
 
   .join_the_team_container {
-    padding: var(--ifm-spacing-4xl) 0;
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
-  .interview_picture {
-    width: 284px;
-  }
-
-  .interviews_container {
-    margin: var(--ifm-spacing-2xl) 0;
+    margin-top: var(--ifm-spacing-xl);
   }
+}
 
-  .interview_name {
-    color: var(--ifm-text-color);
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
+  .join_the_team_text {
     text-align: center;
-    font-family: var(--ifm-font-family-roboto);
     font-size: 28px;
+    font-family: var(--ifm-font-family-roboto);
+    color: var(--ifm-color-primary-p2);
+    text-align: center;
     font-style: normal;
     font-weight: 400;
-    line-height: 36px; /* 128.571% */
+    line-height: 36px;
+    margin-bottom: var(--ifm-spacing-3xl);
   }
 
-  .interview_position {
-    color: var(--ifm-text-color);
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: var(--ifm-font-size-normal);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
+  .join_the_team_container {
+    margin-top: var(--ifm-spacing-5xl);
   }
+}
diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
index cade0e638..a5d13c041 100644
--- a/src/components/contact/index.tsx
+++ b/src/components/contact/index.tsx
@@ -1,34 +1,33 @@
 import styles from "./styles.module.css";
 import ContactForm from "./ContactForm";
 import { useEffect, useState } from "react";
-import ContactIllustration from "/img/illustrations/contact.svg"
-
+import ContactIllustration from "/img/illustrations/contact.svg";
 
 export function Contact() {
   return (
     <div className="container upper-container-with-margin-top">
+      <h1 className={"padding-none text--center"}> Contact us</h1>
       <div className={"row"}>
         <div
-          className={
-            "col col--6 col--offset-1" + " " + "flex-full-centered" + " "
-          }
+          className="col col--5 col--offset-1 flex-full-centered"
           style={{
-            margin: "var(--ifm-spacing-2xl) 0",
-            padding: "var(--ifm-spacing-2xl)",
+            padding: "var(--ifm-spacing-xl)",
           }}
         >
-          <ContactIllustration alt={"Illustration for the contact page with a woman, a mobile phone and an enveloppe."} />
+          <ContactIllustration
+            height={"460px"}
+            alt={
+              "Illustration for the contact page with a woman, a mobile phone and an enveloppe."
+            }
+          />
         </div>
         <div
-          className={"col col--5" + " " + "padding-none" + " " + "margin-none"}
+          className={"col col--5 flex-full-centered padding-none margin-none"}
         >
-          <h1 className={"padding-none"}> Contact us</h1>
-          <div>
-            <ContactForm />
-          </div>
+          <ContactForm />
         </div>
       </div>
     </div>
   );
 }
- export default Contact;
\ No newline at end of file
+export default Contact;
diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
index 7319b82d0..ef330c1fb 100644
--- a/src/components/contact/styles.module.css
+++ b/src/components/contact/styles.module.css
@@ -4,11 +4,7 @@
   background: var(--ifm-color-blue-jupyter);
 }
 
-.send_button_container {
-  height: 59px;
-  width: 508px;
-  margin-top: var(--ifm-spacing-2xl);
-}
+
 
 .contact_form {
   margin-top: var(--ifm-spacing-xl);
@@ -19,14 +15,46 @@
   color: var(--ifm-text-color);
   background-color: var(--ifm-background-color);
 }
-.small_input {
-  width: 508px;
-  height: 56px;
-  border-radius: 4px;
-}
 
-.large_input {
-  width: 508px;
-  height: 220px;
-  border-radius: 4px;
-}
+
+
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .small_input {
+    width: 300px;
+    height: 56px;
+    border-radius: 4px;
+  }
+  
+  .large_input {
+    width: 300px;
+    height: 220px;
+    border-radius: 4px;
+  }
+  .send_button_container {
+    height: 59px;
+    width: 300px;
+    margin: var(--ifm-spacing-2xl) 0;
+  }
+  
+  }
+
+  @media only screen and (min-width: 996px) {
+    /*Desktop*/
+    .small_input {
+      width: 508px;
+      height: 56px;
+      border-radius: 4px;
+    }
+    
+    .large_input {
+      width: 508px;
+      height: 220px;
+      border-radius: 4px;
+    }
+    .send_button_container {
+      height: 59px;
+      width: 508px;
+      margin: var(--ifm-spacing-2xl) 0;
+    }
+    }
\ No newline at end of file
diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx
index a52e6418a..1fa6b2b61 100644
--- a/src/components/projects/Header.tsx
+++ b/src/components/projects/Header.tsx
@@ -2,16 +2,18 @@ import styles from "./styles.module.css";
 import HeaderMD from "./descriptions/Header.md";
 
 export default function Header() {
-    return (
-      <div className={"container upper-container-with-margin-top"}>
+  return (
+    <div className={styles.header_container}>
+      <div className={"container"}>
         <div className="row">
-          <div className={"col padding-none"+ " " + styles.header_container}>
+          <div className="col padding-none">
             <h1 className={styles.header_title}>Working in the open</h1>
             <div className={styles.header_text}>
-             <HeaderMD/>
+              <HeaderMD />
             </div>
           </div>
         </div>
       </div>
-    );
-  }
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css
index 6a8b116ae..bdb073db3 100644
--- a/src/components/projects/styles.module.css
+++ b/src/components/projects/styles.module.css
@@ -29,10 +29,10 @@ div .project_title {
 @media only screen and (max-width: 996px) {
   /*Mobile*/
 
-  .header_container {
+  .header_container{
+    padding-top: var(--ifm-spacing-2xl);
     background-color: var(--ifm-color-primary-p1);
   }
-  
   .header_title {
     padding-left: none;
   }
@@ -61,6 +61,9 @@ div .project_title {
 
 @media only screen and (min-width: 996px) {
   /*Desktop*/
+  .header_container{
+    margin-top: var(--ifm-spacing-6xl);
+  }
   .header_title {
     padding-left: var(--ifm-spacing-4xl);
   }
diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx
index a5da4f7d1..82c53fa57 100644
--- a/src/components/services/SpecialProjects.tsx
+++ b/src/components/services/SpecialProjects.tsx
@@ -17,7 +17,7 @@ export function SpecialProjects() {
             <SpecialProjectsIllustration
               alt={
                 "Picture showing an illustration of a group of people working together in an office."}
-                width={"360px"}
+                height={"300px"}
               
             />
           </div>
diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx
index e897e32ed..6cdd71c10 100644
--- a/src/components/services/Support.tsx
+++ b/src/components/services/Support.tsx
@@ -8,8 +8,8 @@ export function Support() {
       <div className="container upper-container-with-margin-top">
         <div className="row">
           <div className="col col--4 col--offset-1">
-            <div className="flex-full-centered">
-              <SupportIllustration   width={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
+            <div className="flex-full-centered" style={{marginBottom:"var(--ifm-spacing-xl)"}}>
+              <SupportIllustration  height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
             </div>
           </div>
           <div className={"col col--6"}>
diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css
index ae5caa7b5..33b070250 100644
--- a/src/components/services/styles.module.css
+++ b/src/components/services/styles.module.css
@@ -1,15 +1,31 @@
+.h2_custom {
+  color: var(--ifm-color-indigo-i1);
+}
 
-  .h2_custom {
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .transition {
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 150%;
+    text-align: center;
+    margin-top: var(--ifm-spacing-2xl);
     color: var(--ifm-color-indigo-i1);
   }
+}
 
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
   .transition {
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: 40px;
     font-style: normal;
-    font-weight: bolder;
+    font-weight: 600;
     line-height: 150%;
     text-align: center;
     margin-top: var(--ifm-spacing-4xl);
     color: var(--ifm-color-indigo-i1);
   }
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 65f90b590..5a9d1c52b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -73,7 +73,7 @@
 }
 
 .margin-none {
-  margin: none;
+  margin: 0;
 }
 
 .padding-none {
@@ -93,6 +93,67 @@ ul {
   padding: 0;
 }
 
+/***footer*****/
+.address {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__item {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__copyright {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer {
+  background-color: var(--ifm-background-color-footer);
+  color: var(--ifm-text-color-footer);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  max-width: none;
+  padding: 0 var(--ifm-spacing-2xl);
+}
+
+.footer__col {
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  height: 240px;
+}
+
+.row.footer__links {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__title {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer__bottom {
+  margin-top: var(--ifm-spacing-xl);
+}
+
+.footer__link-item {
+  color: var(--ifm-text-color-footer);
+}
+
+.footer-astronaut {
+  display: flex;
+  text-align: left;
+  margin-right: var(--ifm-spacing-lg);
+  width: 200px;
+  height: 200px;
+  padding: 10px;
+}
+
 @media (min-width: 1440px) {
   .container {
     max-width: none;
@@ -113,7 +174,19 @@ ul {
   }
 
   .upper-container-with-margin-top {
-    margin-top: var(--ifm-spacing-2xl)
+    margin-top: var(--ifm-spacing-2xl);
+  }
+
+  .row-with-margin-top {
+    margin-top: var(--ifm-spacing-xl);
+  }
+
+  .row-with-margin-bottom {
+    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .row-with-margins {
+    margin: var(--ifm-spacing-xl) 0;
   }
 
   h1 {
@@ -156,7 +229,7 @@ ul {
     font-size: 16px;
     font-weight: 500;
     color: var(--ifm-color-secondary-s2);
-    padding-top: var(--ifm-spacing-2xl);
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg) 0 var(--ifm-spacing-lg);
     background-color: var(--ifm-color-secondary-s1);
     line-height: 20px;
     letter-spacing: 0.1px;
@@ -174,6 +247,7 @@ ul {
     background-color: var(--ifm-color-secondary-s1);
     color: var(--ifm-color-secondary-s2);
   }
+
   .link-to-button {
     width: 258px;
     height: 56px;
@@ -192,7 +266,7 @@ ul {
     margin-top: var(--ifm-spacing-lg);
     margin-bottom: var(--ifm-spacing-lg);
   }
-  
+
   .link-box {
     height: 59px;
     width: auto;
@@ -201,7 +275,6 @@ ul {
     justify-content: center;
   }
 }
-/***************************************************/
 
 /******  Class that are specific to larger screens*/
 @media (min-width: 996px) {
@@ -213,9 +286,22 @@ ul {
   }
 
   .upper-container-with-margin-top {
-    margin-top: var(--ifm-spacing-6xl)
+    margin-top: var(--ifm-spacing-6xl);
+  }
+
+  .row-with-margin-top {
+    margin-top: var(--ifm-spacing-2xl);
+  }
+
+  .row-with-margin-bottom {
+    margin-bottom: var(--ifm-spacing-2xl);
+  }
+
+  .row-with-margins {
+    margin: var(--ifm-spacing-2xl) 0;
   }
 
+
   h1 {
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
@@ -254,7 +340,8 @@ ul {
     line-height: 150%;
     background-color: var(--ifm-color-secondary-s1);
     color: var(--ifm-color-secondary-s2);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0 var(--ifm-spacing-4xl);
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0
+      var(--ifm-spacing-4xl);
   }
 
   .blue-banner-header {
@@ -267,7 +354,7 @@ ul {
     letter-spacing: 2.112px;
     background-color: var(--ifm-color-secondary-s1);
     color: var(--ifm-color-secondary-s2);
-    margin-bottom:var(--ifm-spacing-2xl);
+    margin-bottom: var(--ifm-spacing-2xl);
   }
 
   .link-to-button {
@@ -288,7 +375,7 @@ ul {
     margin-top: var(--ifm-spacing-2xl);
     margin-bottom: var(--ifm-spacing-2xl);
   }
-  
+
   .link-box {
     height: 59px;
     width: auto;
@@ -296,7 +383,6 @@ ul {
     align-items: center;
     justify-content: center;
   }
-  
 }
 /***********************************************************/
 
@@ -388,65 +474,6 @@ ul {
   justify-content: center;
 }
 
-.quantstack-address {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__item {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__copyright {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer {
-  background-color: var(--ifm-background-color-footer);
-  color: var(--ifm-text-color-footer);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  max-width: none;
-}
-
-.row.footer__links {
-  display: flex;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__title {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer__bottom {
-  margin-top: var(--ifm-spacing-xl);
-}
-
-.footer__col {
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  height: 240px;
-}
-
-.footer__link-item {
-  color: var(--ifm-text-color-footer);
-}
-
-.footer-astronaut {
-  display: flex;
-  text-align: left;
-  margin-right: var(--ifm-spacing-lg);
-  width: 200px;
-  height: 200px;
-  padding: 10px;
-}
-
 .social-media-links {
   margin-left: var(--ifm-spacing-3xl);
   text-align: start;
@@ -554,35 +581,7 @@ a.menu__link:active {
   color: black;
 }
 
-/*.quantstack-icon-white {
-  background: url(@site/static/img/quantstack/logo-website-white.svg);
-  content: "";
-  display: flex;
-  height: 40px;
-  width: 40px;
-  background-repeat: no-repeat;
-}
-
-
-.quantstack-icon-black {
-  background: url(@site/static/img/quantstack/logo-website-black.svg);
-  content: "";
-  display: flex;
-  height: 40px;
-  width: 40px;
-  background-repeat: no-repeat;
-}*/
-
-.quantstack-astronaut {
-  background: url(@site/static/img/quantstack/astronaut.svg);
-  content: "";
-  display: flex;
-  height: 100px;
-  width: 100px;
-  background-repeat: no-repeat;
-}
-
-.quantstack-astronaut-footer {
+.astronaut-footer {
   background: url(@site/static/img/quantstack/astronaut-footer.svg);
   content: "";
   display: flex;
@@ -630,7 +629,7 @@ a.menu__link:active {
   background-repeat: no-repeat;
 }
 
-.close-button { 
+.close-button {
   background: url(@site/static/img/icons/CloseButton.svg);
   content: "";
   display: flex;