From af65a34a9161f2aade09231a00f53c5f0554a2f4 Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Sat, 28 Dec 2024 20:03:13 +0800
Subject: [PATCH] Use background image for higher quality banner

---
 client/src/components/Dashboard/index.tsx         | 9 +--------
 client/src/components/Dashboard/style.module.scss | 8 ++++++--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Dashboard/index.tsx b/client/src/components/Dashboard/index.tsx
index 8fd517e..2e7e2c3 100644
--- a/client/src/components/Dashboard/index.tsx
+++ b/client/src/components/Dashboard/index.tsx
@@ -29,20 +29,13 @@ const Dashboard = ({ name, faq, status, timeline }: DashboardProps) => {
   return (
     <div className={styles.container}>
       <Card gap={1.5} className={`${styles.card} ${styles.banner}`}>
+        <div className={styles.bannerImage} />
         <Typography variant="headline/heavy/large" component="h1" className={styles.title}>
           Welcome, {name}!
         </Typography>
         <Typography variant="body/medium" component="p" className={styles.subtitle}>
           Access the application and view DiamondHacks updates here.
         </Typography>
-        <Image
-          src={Banner.src}
-          alt="Two diamond critters find a large jewel in a vault"
-          width={1128}
-          height={350}
-          quality={100}
-          className={styles.bannerImage}
-        />
       </Card>
       <Card gap={1.5} className={`${styles.card} ${styles.status}`}>
         <Typography variant="headline/heavy/small" component="h2">
diff --git a/client/src/components/Dashboard/style.module.scss b/client/src/components/Dashboard/style.module.scss
index 26d8c39..8ae6ec6 100644
--- a/client/src/components/Dashboard/style.module.scss
+++ b/client/src/components/Dashboard/style.module.scss
@@ -80,9 +80,13 @@
 
     .bannerImage {
       position: absolute;
-      top: 0;
-      right: 0;
+      inset: 0;
       z-index: -1;
+      // next/image ruins the image quality for some reason
+      background-image: url('/assets/banner.png');
+      background-size: contain;
+      background-position: right;
+      background-repeat: no-repeat;
       animation: fade-in 3.5s 1.5s backwards;
     }