refactor: enhance UI components with improved styling and layout

- Updated CollectionCard, CountryCard, LodgingCard, NoteCard, RegionCard, TransportationCard, UserCard, and ShareModal components for better visual consistency and responsiveness.
- Introduced hover effects and transitions for a more interactive experience.
- Improved accessibility by ensuring proper alt text for images and using semantic HTML elements.
- Refactored date formatting logic into a utility function for reuse across components.
- Added new translations for profile viewing and joined date in the localization files.

frontend/src/lib/components/CityCard.svelte

@@ -41,25 +41,40 @@
 </script>
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
+	class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
 >
-	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{city.name}</h2>
+	<div class="card-body p-6 space-y-4">
+		<!-- Header -->
+		<h2 class="text-xl font-bold truncate">{city.name}</h2>
+
+		<!-- Metadata Badges -->
 		<div class="flex flex-wrap gap-2">
 			<div class="badge badge-primary">
 				{city.region_name}, {city.country_name}
 			</div>
-			<div class="badge badge-neutral-300">{city.region}</div>
+			<div class="badge badge-neutral-300">Region ID: {city.region}</div>
 		</div>
-		<div class="card-actions justify-end">
-			{#if !visited}
-				<button class="btn btn-primary" on:click={markVisited}
-					>{$t('adventures.mark_visited')}</button
-				>
+
+		<!-- Actions -->
+		<div class="pt-4 border-t border-base-300 flex justify-end gap-2">
+			{#if visited === false}
+				<button class="btn btn-primary btn-sm" on:click={markVisited}>
+					{$t('adventures.mark_visited')}
+				</button>
 			{/if}
-			{#if visited}
-				<button class="btn btn-warning" on:click={removeVisit}>{$t('adventures.remove')}</button>
+			{#if visited === true}
+				<button class="btn btn-warning btn-sm" on:click={removeVisit}>
+					{$t('adventures.remove')}
+				</button>
 			{/if}
 		</div>
 	</div>
 </div>
+
+<style>
+	.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>