Update layout

Author: SylvainCorlay

src/components/home/Hero/Banner.tsx

@@ -1,19 +1,16 @@
 // src/components/PageBanner.tsx
 import React from 'react';
-import BannerSvg from '@site/static/img/banner/notebook-link-banner.svg';
 import styles from "./styles.module.css";
 import LinkToNotebookLink from './LinkToNotebookLink';
 
 export default function Banner() {
     return (
         <div className={styles.banner_container}>
-            <BannerSvg className={styles.banner_image} role="img" />
             <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/styles.module.css

@@ -14,7 +14,13 @@
 .banner_container {
   position: relative;
   width: 100%;
-  display: inline-block;
+  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 {
@@ -24,10 +30,9 @@
 }
 
 .banner_text_overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
   color: white;
   /* or whatever contrasts with your SVG */
@@ -39,7 +44,6 @@
   font-size: 48px;
   font-weight: 400;
   font-style: normal;
-  letter-spacing: -4%;
   line-height: 100%;
 }
 
@@ -99,4 +103,4 @@
     text-align: center;
     margin: var(--ifm-spacing-2xl) 0;
   }
-}
+}