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

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

diff --git a/client/src/components/Dashboard/index.tsx b/client/src/components/Dashboard/index.tsx
index 2e7e2c3..8fd517e 100644
--- a/client/src/components/Dashboard/index.tsx
+++ b/client/src/components/Dashboard/index.tsx
@@ -29,13 +29,20 @@ 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 8ae6ec6..26d8c39 100644
--- a/client/src/components/Dashboard/style.module.scss
+++ b/client/src/components/Dashboard/style.module.scss
@@ -80,13 +80,9 @@
 
     .bannerImage {
       position: absolute;
-      inset: 0;
+      top: 0;
+      right: 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;
     }