Add pydata logo

Transform the title and the image into links
Remove the text giving the url of pydata website.

Author: HaudinFlorence

src/components/home/Hero/index.tsx

@@ -2,23 +2,36 @@ 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 LogoPyDataParisUrl from "@site/static/img/quantstack/PyData_logo.png";
+import Link from "@docusaurus/Link";
 
 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>
+      <Link href={"https://pydata.org/paris2024"}>
+        <img
+          className={styles.pydata_image}
+          src={CiteDesSciencesUrl}
+          alt={"Banner to promote Pydata Paris."}
+          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 />
-        <a>https://pydata.org/paris2024</a>
       </p>
     </div>
   );

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

@@ -11,6 +11,7 @@
   background-color: var(--ifm-color-secondary-s1);
 }
 
+
 @media only screen and (max-width: 530px) {
   /*Small mobile screens*/
   .logos_carousel {
@@ -24,15 +25,22 @@
     font-size: var(--ifm-font-size-normal);
     font-weight: 600;
     position: absolute;
-    top: 15%;
+    top: 35%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 250px;
   }
 
+  .pydata_logo {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .pydata_informations {
     text-align: center;
-    color:var(--ifm-color-primary-p2);
+    color:white;
     font-size: 12px;
     font-weight: 600;
     position: absolute;
@@ -62,6 +70,13 @@
     min-width: 350px;
   }
 
+  .pydata_logo {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .pydata_informations {
     text-align: center;
     color: var(--ifm-color-primary-p2);
@@ -114,19 +129,26 @@
     font-size: var(--ifm-font-size-main-title);
     font-weight: 600;
     position: absolute;
-    top: 30%;
+    top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 600px;
   }
 
+  .pydata_logo {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .pydata_informations {
     text-align: center;
-    color: var(--ifm-color-primary-p2);
+    color: white;
     font-size: var(--ifm-font-size-medium);
     font-weight: 600;
     position: absolute;
-    top: 60%;
+    top: 70%;
     left: 50%;
     transform: translate(-50%, -50%);
   }