Try to add colors on the background of the home page.

Author: HaudinFlorence

src/components/home/Hero/index.tsx

@@ -4,7 +4,7 @@ import Astronaut from "/img/quantstack/astronaut.svg";
 
 export function Hero() {
   return (
-    <div>
+    <div className={styles.hero_container}>
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className={"row row--no-gutters flex-full-centered"}>

src/components/home/Hero/styles.module.css

@@ -4,6 +4,9 @@
     display: none;
   }
 }
+.hero_container {
+  background-color: var(--ifm-color-primary-p0);
+}
 
 .table_with_8_customers {
   margin-bottom: var(--ifm-spacing-xl);
@@ -29,4 +32,4 @@
 
 .sub_header {
   text-align: left;
-}
+}

src/components/home/ProjectsOverview/Robotics.tsx

@@ -4,7 +4,7 @@ import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";
 
 export default function RoboticsProjects() {
   return (
-    <div className={"container"}>
+    <div className={"container" + " "+ styles.project_light_yellow}>
       <div className={"row"}>
         <div
           className={

src/components/home/ProjectsOverview/SpecialProjects.tsx

@@ -4,7 +4,7 @@ import SpecialProjectsPictureUrl from "@site/static/img/projects/jupytercad.png"
 
 export default function SpecialProjects() {
     return (
-      <div className={"container"}>
+      <div className={"container" + " " + styles.project_yellow}>
         <div className="row">
           <div className={"col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding}>
             <h1 className="padding-none">Special projects</h1>

src/components/home/ProjectsOverview/SupplyChain.tsx

@@ -4,12 +4,13 @@ import MambaPictureUrl from "@site/static/img/projects/mamba_console.png";
 
 export default function SupplyChainProjects() {
   return (
-    <div className={"container"}>
+    <div className={"container" + " " + styles.project_light_yellow}>
       <div className={"row"}>
-        
         <div
           className={
-            "col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding
+            "col col--5 col--offset-1" +
+            " " +
+            styles.col_project_overview_with_padding
           }
         >
           <h1 className="padding-none">Software supply chain </h1>
@@ -26,7 +27,11 @@ export default function SupplyChainProjects() {
             styles.col_project_overview_with_padding
           }
         >
-          <img src={MambaPictureUrl} width={"486px"} alt={"Picture showing a terminal in which mamba commands are run."} />
+          <img
+            src={MambaPictureUrl}
+            width={"486px"}
+            alt={"Picture showing a terminal in which mamba commands are run."}
+          />
         </div>
       </div>
     </div>

src/components/home/ProjectsOverview/styles.module.css

@@ -15,3 +15,12 @@
 .col_project_overview_with_padding {
   padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
 }
+
+
+.project_yellow {
+  background-color: var(--ifm-color-primary-p1);
+}
+
+.project_light_yellow {
+  background-color: var(--ifm-color-primary-p0);
+}

src/components/home/WhatWeDo/styles.module.css

@@ -51,9 +51,9 @@ div .topics_header {
 
   .whatwedo_container {
     background-color: var(--ifm-color-primary-p1);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0
+    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-2xl) 0
       var(--ifm-spacing-2xl);
-    margin-top: var(--ifm-spacing-3xl);
+    /*margin-top: var(--ifm-spacing-3xl);*/
   }
 
   .topics_card {

src/css/custom.css

@@ -11,6 +11,7 @@
   --ifm-color-grey-condaforge: #7a7865;
   --ifm-color-orange-light: #fef9ec;
   --ifm-color-indigo-i1: rgb(79, 82, 255);
+  --ifm-color-primary-p0: #FFFBD7;
   --ifm-color-primary-p1: #f6f195;
   --ifm-color-primary-p2: #1c1c16;
   --ifm-text-color-on-primary-p1: #1e1c00;