feat: changed card style and formatting to improve clarity for users

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>

src/lib/components/SpaceCard.svelte

@@ -4,16 +4,18 @@
     interface Props {
         alt: string;
         imgSrc: string;
+        title?: Snippet;
         description?: Snippet;
         href?: string;
     }
 
-    const { alt, imgSrc, description, href }: Props = $props();
+    const { alt, imgSrc, title, description, href }: Props = $props();
 </script>
 
 <a class="card" {href}>
     <img src={imgSrc} {alt} />
     <div class="description">
+        {@render title?.()}
         {@render description?.()}
     </div>
 </a>
@@ -22,7 +24,7 @@
     .card {
         display: flex;
         flex-direction: column;
-        background-color: #38353f;
+        background-color: #49bd85;
     }
     .description {
         padding: 0.5rem;

src/routes/+page.svelte

@@ -27,6 +27,10 @@
             href="/space/{studySpace.id}"
             imgSrc={imgUrl}
         >
+            {#snippet title()}
+                <h1>{studySpace.location}</h1>
+            {/snippet}
+
             {#snippet description()}
                 <p>{studySpace.description}</p>
             {/snippet}