Add a temporary banner to the home page hero.

Author: HaudinFlorence

src/components/home/Hero/index.tsx

@@ -1,10 +1,33 @@
 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";
+
+export function PydataParis() {
+  return (
+    <div className={styles.pydata_banner}>
+      <img
+        className={styles.pydata_image}
+        src={CiteDesSciencesUrl}
+        alt={"Banner to promote Pydata Paris."}
+        width={"100%"}
+      />
+      <p className={styles.pydata_header}>Join QuantStack at PyData Paris</p>
+      <p className={styles.pydata_informations}>
+        September 25-26 2024
+        <br />
+        Cité des Sciences, Paris, France
+        <br />
+        <a>https://pydata.org/paris2024</a>
+      </p>
+    </div>
+  );
+}
 
 export function Hero() {
   return (
     <div className={styles.hero_container}>
+      <PydataParis />
       <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

@@ -1,9 +1,40 @@
+.pydata_image {
+  height: 100%;
+  filter: grayscale(0.8);
+}
+
+.pydata_banner {
+  position: relative;
+}
+
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .logos_carousel {
     display: none;
   }
+
+  .pydata_header {
+    position: absolute;
+    top: 20%;
+    left: 17%;
+    color: var(--ifm-color-primary-p1);
+    font-size: 16px;
+  }
+
+  .pydata_informations {
+    text-align: center;
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    color: white;
+    font-size: 12px;
+  }
+
+  a {
+    color: var(--ifm-color-primary-p1);
+  }
 }
+
 .hero_container {
   background-color: var(--ifm-color-primary-p0);
   padding-bottom: var(--ifm-spacing-3xl);
@@ -34,3 +65,27 @@
 .sub_header {
   text-align: left;
 }
+
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
+  .pydata_header {
+    position: absolute;
+    top: 18%;
+    left: 37%;
+    color: var(--ifm-color-primary-p1);
+    font-size: 32px;
+  }
+
+  .pydata_informations {
+    text-align: center;
+    position: absolute;
+    top: 40%;
+    left: 40%;
+    color: white;
+    font-size: 24px;
+  }
+
+  a {
+    color: var(--ifm-color-primary-p1);
+  }
+}