feat(creator): introduce Album component and refactor AboutCreator to use it

frontend/src/views/creators/AboutCreator.vue

@@ -1,4 +1,4 @@
-<template>
+<template>  
   <div class="p-4 relative"
        @mouseenter="showEditButtons = isLoggedIn && creatorProfileStore.creator?.id === brandingStore.value.id"
        @mouseleave="showEditButtons = false">
@@ -94,8 +94,8 @@
           </div>
         </div>
 
-        <!-- Photos Section using CreatorAlbum component -->
-        <CreatorAlbum
+        <!-- Photos Section using Album component -->
+        <Album
             v-if="hasImages || isEditMode"
             :is-edit-mode="isEditMode"
             :images="imageUrls"
@@ -130,7 +130,7 @@ import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useI18n} from 'vue-i18n';
-import CreatorAlbum from './CreatorAlbum.vue';
+import Album from './Album.vue';
 import {buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId} from '@/utils/youtube';
 
 const {t} = useI18n();
@@ -244,7 +244,7 @@ onMounted(async () => {
   await fetchAlbumData();
 });
 
-// Update images from CreatorAlbum component
+// Update images from Album component
 function updateImages(newImages) {
   imageUrls.value = newImages;
 }
@@ -401,11 +401,12 @@ function cancelEdit() {
 }
 
 .contact-info {
+  @apply text-lg text-justify whitespace-pre-line;
   @apply flex flex-col items-center;
 }
 
 .contact-item {
-  @apply text-lg text-center mb-2 font-semibold;
+  @apply text-lg text-center mb-2;
 }
 
 /* Formatting styles for description */