Modify the background color to introduce a gradient of colors and update the text elements.

Author: HaudinFlorence

src/components/home/Hero/index.tsx

@@ -1,7 +1,7 @@
 import styles from "./styles.module.css";
 import SimpleSlider from "./LogosTableBy8";
 import Astronaut from "/img/quantstack/astronaut.svg";
-import CiteDesSciencesUrl from "@site/static/img/quantstack/geode-cropped.png";
+import CiteDesSciencesUrl from "@site/static/img/quantstack/geode-cropped-with-white-rectangle.png";
 import LogoPyDataParisUrl from "@site/static/img/quantstack/PyData_logo.png";
 import Link from "@docusaurus/Link";
 
@@ -16,24 +16,27 @@ export function PydataParis() {
           width={"100%"}
         />
       </Link>
-      <Link href={"https://pydata.org/paris2024"}>
-        <p className={styles.pydata_header}>Join QuantStack at PyData Paris</p>
-      </Link>
-      <Link href={"https://pydata.org/paris2024"}>
-        <img
-          className={styles.pydata_logo}
-          src={LogoPyDataParisUrl}
-          alt={"Logo of PyData Paris Conference."}
-          width={"10%"}
-        />
-      </Link>
-      <p className={styles.pydata_informations}>
-        September 25-26 2024
-        <br />
-        Cité des Sciences, Paris, France
-        <br />
-      </p>
-    </div>
+        <Link href={"https://pydata.org/paris2024"}>
+          <p className={styles.pydata_header}>
+            Join QuantStack at PyData Paris
+          </p>
+        </Link>
+        <Link href={"https://pydata.org/paris2024"}>
+          <div className={styles.pydata_logo_container}>
+            <img
+              className={styles.pydata_logo}
+              src={LogoPyDataParisUrl}
+              alt={"Logo of PyData Paris Conference."}
+            />
+          </div>
+        </Link>
+        <p className={styles.pydata_informations}>
+          September 25-26 2024
+          <br />
+          Cité des Sciences, Paris, France
+          <br />
+        </p>
+      </div>
   );
 }
 

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

@@ -7,47 +7,42 @@
 }
 
 .pydata_banner {
+  background-color: white;
   position: relative;
-  background-color: var(--ifm-color-secondary-s1);
 }
 
-
 @media only screen and (max-width: 530px) {
   /*Small mobile screens*/
   .logos_carousel {
     display: none;
   }
 
   .pydata_header {
-    text-align: center;
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: var(--ifm-font-size-normal);
     font-weight: 600;
     position: absolute;
     top: 10%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    min-width: 250px;
+    left: 5%;
+    text-align: start;
   }
 
   .pydata_logo {
     position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 32%;
+    left: 5%;
+    width: 10%
   }
 
   .pydata_informations {
-    text-align: center;
-    color:white;
+    color: grey;
     font-size: 12px;
     font-weight: 600;
     position: absolute;
-    top: 65%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    min-width: 250px;
+    top: 53%;
+    left: 5%;
+    text-align: start;
   }
 }
 
@@ -58,34 +53,30 @@
   }
 
   .pydata_header {
-    text-align: center;
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: var(--ifm-font-size-secondary-title);
     font-weight: 600;
     position: absolute;
-    top: 30%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    min-width: 350px;
+    top: 10%;
+    left: 10%;
   }
 
   .pydata_logo {
     position: absolute;
-    top: 10%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 28%;
+    left: 10%;
+    width: 12%
   }
 
   .pydata_informations {
-    text-align: center;
-    color: var(--ifm-color-primary-p2);
+    color: grey;
     font-size: var(--ifm-font-size-small);
     font-weight: 600;
     position: absolute;
-    top: 60%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 55%;
+    left: 10%;
+    text-align: start;
   }
 }
 
@@ -123,34 +114,30 @@
 @media only screen and (min-width: 996px) {
   /*Desktop*/
   .pydata_header {
-    text-align: center;
     color: var(--ifm-color-primary-p2);
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: var(--ifm-font-size-main-title);
     font-weight: 600;
     position: absolute;
-    top: 20%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    min-width: 600px;
+    top: 10%;
+    left: 10%;
+    text-align: start;
   }
 
   .pydata_logo {
     position: absolute;
-    top: 32%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 35%;
+    left: 10%;
+    width: 12%
   }
 
   .pydata_informations {
-    text-align: center;
-    color:white;
+    color: grey;
     font-size: var(--ifm-font-size-medium);
     font-weight: 600;
     position: absolute;
-    top: 70%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 60%;
+    left: 10%;
+    text-align: start;
   }
-
 }