Updated demo pages

src/views/uikit/MediaDoc.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ProductService } from '@/service/ProductService';
 import { PhotoService } from '@/service/PhotoService';
-import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+import { onMounted, ref } from 'vue';
 
 const products = ref([]);
 const images = ref([]);
@@ -65,7 +65,7 @@ const getSeverity = (status) => {
 
 <template>
     <div class="card">
-        <h5>Carousel</h5>
+        <div class="font-semibold text-xl mb-4">Carousel</div>
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
             <template #item="slotProps">
                 <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
@@ -89,14 +89,12 @@ const getSeverity = (status) => {
     </div>
 
     <div class="card">
-        <h5>Image</h5>
-        <div class="flex justify-center">
-            <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
-        </div>
+        <div class="font-semibold text-xl mb-4">Image</div>
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
 
     <div class="card">
-        <h5>Galleria</h5>
+        <div class="font-semibold text-xl mb-4">Galleria</div>
         <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />