Added images in springboard

client/src/components/SpringboardButton.tsx

@@ -4,10 +4,12 @@ import { useNavigate } from "react-router-dom";
 export default function SpringboardButton({
   title,
   subtitle,
+  imageSrc,
   linkToPage,
 }: {
   title: string;
   subtitle: string;
+  imageSrc: string;
   linkToPage: string;
 }) {
   const navigate = useNavigate();
@@ -16,9 +18,14 @@ export default function SpringboardButton({
       onPress={() => {
         navigate(linkToPage);
       }}
-      className="border-4 border-primary-500 bg-neutral-700 hover:bg-primary-500 text-white"
+      className="relative border-4 border-primary-500 text-white p-0"
     >
-      <div className="flex flex-col justify-between w-full h-full py-4 px-2 text-left *:text-wrap mr-16">
+      <img
+        src={imageSrc}
+        alt={title}
+        className="absolute w-full h-full inset-0 object-cover brightness-50"
+      />
+      <div className="relative flex flex-col justify-between w-full h-full py-4 px-6 text-left *:text-wrap transition-colors hover:bg-primary-500">
         <p className="text-2xl font-semibold">{title}</p>
         <p>{subtitle}</p>
       </div>

client/src/pages/SpringboardPage.tsx

@@ -85,21 +85,25 @@ export default function SpringboardPage() {
               <SpringboardButton
                 title="Community Forums"
                 subtitle="Be involved in discussions among your neighbourhood"
+                imageSrc="../assets/community-forums.png"
                 linkToPage="/community-posts"
               ></SpringboardButton>
               <SpringboardButton
                 title="Events"
                 subtitle="Participate in exciting upcoming events around Singapore"
+                imageSrc="../assets/events.png"
                 linkToPage="/events"
               ></SpringboardButton>
               <SpringboardButton
                 title="Home Bill Contest"
                 subtitle="Save resources, win vouchers!"
+                imageSrc="../assets/home-bill-contest.png"
                 linkToPage="/home-bill-contest"
               ></SpringboardButton>
               <SpringboardButton
                 title="Karang Guni Scheduling"
                 subtitle="Arrange doorstep sales for your old gears with Karang Guni"
+                imageSrc="../assets/karang-guni.png"
                 linkToPage="/karang-guni-schedules"
               ></SpringboardButton>
             </div>