From 1f3abf7f3281046fb077ef89adc3dd651f08f8f2 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 19 Jan 2025 22:33:35 -0500
Subject: [PATCH] feat: replace placeholder image with gradient background and
 text for no image available state in CardCarousel component

---
 frontend/src/lib/components/CardCarousel.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/CardCarousel.svelte b/frontend/src/lib/components/CardCarousel.svelte
index edbf469..cb238d0 100644
--- a/frontend/src/lib/components/CardCarousel.svelte
+++ b/frontend/src/lib/components/CardCarousel.svelte
@@ -95,11 +95,14 @@
 			</div>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y-img-redundant-alt -->
-		<img
-			src={`https://placehold.co/300?text=${$t('adventures.no_image_found')}&font=roboto`}
-			alt="No image available"
-			class="w-full h-48 object-cover"
-		/>
+		<!-- add a figure with a gradient instead -  -->
+		<div class="w-full h-48 bg-gradient-to-r from-success via-base to-primary relative">
+			<!-- subtle button bottom left text -->
+			<div
+				class="absolute bottom-0 left-0 px-2 py-1 text-md font-medium bg-neutral rounded-tr-lg shadow-md"
+			>
+				{$t('adventures.no_image_found')}
+			</div>
+		</div>
 	{/if}
 </figure>