Merge pull request #279 from HaudinFlorence/add-notebook-link-banner

Add a banner for introducing Notebook.link.

Author: SylvainCorlay

src/components/home/Hero/Banner.tsx

@@ -0,0 +1,16 @@
+// src/components/PageBanner.tsx
+import React from 'react';
+import styles from "./styles.module.css";
+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>
+    );
+}

src/components/home/Hero/LinkToNotebookLink.tsx

@@ -0,0 +1,9 @@
+import styles from "./styles.module.css";
+
+export default function LinkToNotebookLink({label}) {
+  return (
+    <div className="flex-full-centered">
+      <a className={`link-to-button ${styles.link_to_notebook_link}`} href="https://notebook.link" > {label} </a>
+    </div>
+  );
+}

src/components/home/Hero/index.tsx

@@ -1,12 +1,17 @@
 import styles from "./styles.module.css";
 import SimpleSlider from "./LogosTableBy8";
 import Astronaut from "/img/quantstack/astronaut.svg";
+import Banner from "./Banner";
+
 
 export function Hero() {
   return (
     <div className={styles.hero_container}>
+      <Banner/>
+      <div className={styles.banner_image}>
+      </div>
       <div className="main-container-with-margins">
-        <div className="container upper-container-with-margin-top">
+        <div>
           <div className={"row row--no-gutters flex-full-centered"}>
             <div className="col col--6 col--offset-1">
               <h1 className="padding-none">

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

@@ -11,14 +11,80 @@
   padding-bottom: var(--ifm-spacing-3xl);
 }
 
+.banner_container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-image: url('/img/banner/notebook-link-banner.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 464px;
+  padding-bottom: 110px;
+}
+
+.banner_image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.banner_text_overlay {
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  color: white;
+  /* or whatever contrasts with your SVG */
+  font-size: 2rem;
+  font-family: var(--ifm-font-family-kode-mono);
+}
+
+.banner_text_overlay_title {
+  font-size: 48px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 100%;
+}
+
+.banner_text_overlay_subtitle {
+  font-size: 32px;
+  font-style: normal;
+}
+
+.notebook_link {
+  color: #FCF12B;
+  font-weight: 700;
+  font-style: bold;
+  line-height: 100%;
+  font-family: var(--ifm-font-family-inter);
+}
+
+.link_to_notebook_link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg,
+      #5242FF,
+      #2A2A2A);
+  color: white;
+  width: 358px;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-roboto);
+  font-weight: 600;
+  font-size: 24px;
+}
+
 @media only screen and (max-width: 996px) {
+
   /*Mobile*/
   .logos_carousel {
     display: none;
   }
 }
 
 @media only screen and (min-width: 996px) {
+
   /*Desktop*/
   .table_with_8_customers {
     margin-bottom: var(--ifm-spacing-xl);

src/css/custom.css

@@ -3,6 +3,8 @@
 @import url("https://fonts.cdnfonts.com/css/rubik-one");
 @import url("https://fonts.cdnfonts.com/css/roboto-flex");
 @import url("https://fonts.googleapis.com/css2?family=Dosis");
+@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 
 :root {
   --ifm-color-orange-jupyter: #f37726;
@@ -47,6 +49,8 @@
   --ifm-font-family-bebas-neue: "Bebas Neue";
   --ifm-font-family-rubik-one: "Rubik One";
   --ifm-font-family-dosis: "Dosis";
+  --ifm-font-family-kode-mono: "Kode Mono";
+  --ifm-font-family-inter: "Inter";
 
   /* Spacing for margins and paddings */
   --ifm-spacing-none: 0px;