Merge pull request #133 from HaudinFlorence/add_a_temporary_banner_to_the_home_page

Add a temporary banner to the home page hero.

Author: SylvainCorlay

docusaurus.config.ts

@@ -215,6 +215,7 @@ const config: Config = {
 
       copyright: copyright,
     },
+  
 
       colorMode: {
         defaultMode: 'light',

src/components/home/Hero/index.tsx

@@ -1,10 +1,49 @@
 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-with-white-rectangle.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}>
+      <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"}>
+          <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>
+  );
+}
 
 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,85 @@
-@media only screen and (max-width: 996px) {
+.pydata_image {
+  filter: grayscale(0.8);
+  width: 100%;
+  height: auto;
+  display: block;
+  opacity: calc(0.4);
+}
+
+.pydata_banner {
+  background-color: white;
+  position: relative;
+}
+
+@media only screen and (max-width: 530px) {
+  /*Small mobile screens*/
+  .logos_carousel {
+    display: none;
+  }
+
+  .pydata_header {
+    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: 5%;
+    text-align: start;
+  }
+
+  .pydata_logo {
+    position: absolute;
+    top: 32%;
+    left: 5%;
+    width: 10%
+  }
+
+  .pydata_informations {
+    color: grey;
+    font-size: 12px;
+    font-weight: 600;
+    position: absolute;
+    top: 53%;
+    left: 5%;
+    text-align: start;
+  }
+}
+
+@media only screen and (min-width: 530px) and (max-width: 996px) {
   /*Mobile*/
   .logos_carousel {
     display: none;
   }
+
+  .pydata_header {
+    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: 10%;
+    left: 10%;
+  }
+
+  .pydata_logo {
+    position: absolute;
+    top: 28%;
+    left: 10%;
+    width: 12%
+  }
+
+  .pydata_informations {
+    color: grey;
+    font-size: var(--ifm-font-size-small);
+    font-weight: 600;
+    position: absolute;
+    top: 55%;
+    left: 10%;
+    text-align: start;
+  }
 }
+
 .hero_container {
   background-color: var(--ifm-color-primary-p0);
   padding-bottom: var(--ifm-spacing-3xl);
@@ -34,3 +110,34 @@
 .sub_header {
   text-align: left;
 }
+
+@media only screen and (min-width: 996px) {
+  /*Desktop*/
+  .pydata_header {
+    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: 10%;
+    left: 10%;
+    text-align: start;
+  }
+
+  .pydata_logo {
+    position: absolute;
+    top: 35%;
+    left: 10%;
+    width: 12%
+  }
+
+  .pydata_informations {
+    color: grey;
+    font-size: var(--ifm-font-size-medium);
+    font-weight: 600;
+    position: absolute;
+    top: 60%;
+    left: 10%;
+    text-align: start;
+  }
+}