Update Notebook.link banner.

src/components/home/Hero/Banner.tsx

@@ -5,11 +5,35 @@ import LinkToNotebookLink from './LinkToNotebookLink';
 
 export default function Banner() {
     return (
-        <div className={styles.banner_container}>
-            <div className={styles.banner_text_overlay}>
-                <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
-                <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
-                 <LinkToNotebookLink label={"Get started"}/>
+        <div>
+            <div className={styles.banner_container_small}>
+                <div className={styles.banner_text_overlay}>
+                    <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
+                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <LinkToNotebookLink label={"Get started"} />
+                </div>
+            </div>
+            <div className={styles.banner_container_medium}>
+
+                <div className={styles.banner_text_overlay}>
+                    <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
+                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <LinkToNotebookLink label={"Get started"} />
+                </div>
+            </div>
+            <div className={styles.banner_container_large}>
+                <div className={styles.banner_text_overlay}>
+                    <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
+                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <LinkToNotebookLink label={"Get started"} />
+                </div>
+            </div>
+            <div className={styles.banner_container_very_large}>
+                <div className={styles.banner_text_overlay}>
+                    <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
+                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <LinkToNotebookLink label={"Get started"} />
+                </div>
             </div>
         </div>
     );

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

@@ -11,18 +11,55 @@
   padding-bottom: var(--ifm-spacing-3xl);
 }
 
-.banner_container {
+.banner_container_small {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
-  background-image: url('/img/banner/notebook-link-banner.svg');
+  background-image: url('/img/banner/notebook-link-banner-small.svg');
   background-position: center;
   background-repeat: no-repeat;
   height: 464px;
   padding-bottom: 110px;
 }
 
+.banner_container_medium {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-image: url('/img/banner/notebook-link-banner-medium.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 464px;
+  padding-bottom: 110px;
+}
+
+.banner_container_large {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-image: url('/img/banner/notebook-link-banner-large.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 464px;
+  padding-bottom: 110px;
+}
+
+.banner_container_very_large {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-image: url('/img/banner/notebook-link-banner-very-large.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 464px;
+  padding-bottom: 110px;
+}
+
+
 .banner_image {
   width: 100%;
   height: auto;
@@ -75,17 +112,49 @@
   font-size: 24px;
 }
 
-@media only screen and (max-width: 996px) {
+@media only screen and (max-width: 576px) {
 
   /*Mobile*/
   .logos_carousel {
     display: none;
   }
+
+  .banner_container_medium {
+    display: none
+  }
+
+  .banner_container_large {
+    display: none
+  }
+
+  .banner_container_very_large {
+    display: none
+  }
+}
+
+@media screen and (min-width: 576px) and (max-width: 996px) {
+
+  /*Tablet*/
+  .logos_carousel {
+    display: none;
+  }
+
+  .banner_container_small {
+    display: none
+  }
+
+  .banner_container_large {
+    display: none
+  }
+
+  .banner_container_very_large {
+    display: none
+  }
 }
 
-@media only screen and (min-width: 996px) {
+@media screen and (min-width: 996px) and (max-width: 1511px) {
 
-  /*Desktop*/
+  /*Desktop: small screen*/
   .table_with_8_customers {
     margin-bottom: var(--ifm-spacing-xl);
   }
@@ -103,4 +172,50 @@
     text-align: center;
     margin: var(--ifm-spacing-2xl) 0;
   }
+
+  .banner_container_small {
+    display: none
+  }
+
+  .banner_container_medium {
+    display: none
+  }
+
+  .banner_container_very_large {
+    display: none
+  }
 }
+
+@media only screen and (min-width: 1511px) {
+
+  /* Desktop : large screen*/
+  .table_with_8_customers {
+    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .customer_logo {
+    filter: grayscale(1);
+    width: 100px;
+  }
+
+  .worked_with {
+    font-size: 24px;
+    font-weight: 200;
+    font-family: var(--ifm-font-family-rubik-one);
+    color: var(--ifm-color-primary-p2);
+    text-align: center;
+    margin: var(--ifm-spacing-2xl) 0;
+  }
+
+  .banner_container_small {
+    display: none
+  }
+
+  .banner_container_medium {
+    display: none
+  }
+
+  .banner_container_large {
+    display: none
+  }
+}