Attempt

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

@@ -15,6 +15,8 @@
   position: relative;
   width: 100%;
   display: inline-block;
+  background-image: url('/img/banner/notebook-link-banner.svg');
+  height: 464px;
 }
 
 .banner_image {
@@ -24,10 +26,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 */
@@ -99,4 +100,4 @@
     text-align: center;
     margin: var(--ifm-spacing-2xl) 0;
   }
-}
+}