feat: update security headers and improve content security policy; enhance hero image component and loading states in public news

components/PublicNews.vue

@@ -1,7 +1,6 @@
 <template>
   <section
-    v-if="news.length > 0"
-    class="py-16 sm:py-20 bg-white"
+    class="py-16 sm:py-20 bg-white min-h-[32rem]"
   >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-16">
@@ -14,7 +13,29 @@
         </p>
       </div>
 
-      <div class="flex justify-center">
+      <div
+        v-if="isLoading"
+        class="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      >
+        <div
+          v-for="placeholder in 3"
+          :key="`news-placeholder-${placeholder}`"
+          class="bg-gray-50 rounded-xl p-6 border border-gray-200"
+        >
+          <div class="h-4 w-32 bg-gray-200 rounded animate-pulse mb-4" />
+          <div class="h-7 w-3/4 bg-gray-200 rounded animate-pulse mb-4" />
+          <div class="space-y-2">
+            <div class="h-4 w-full bg-gray-200 rounded animate-pulse" />
+            <div class="h-4 w-5/6 bg-gray-200 rounded animate-pulse" />
+            <div class="h-4 w-2/3 bg-gray-200 rounded animate-pulse" />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else-if="news.length > 0"
+        class="flex justify-center"
+      >
         <div
           class="grid gap-8"
           :class="getGridClass()"
@@ -43,6 +64,18 @@
           </article>
         </div>
       </div>
+
+      <div
+        v-else
+        class="max-w-xl mx-auto text-center bg-gray-50 border border-gray-200 rounded-xl p-8"
+      >
+        <p class="text-gray-700 font-semibold mb-2">
+          Aktuell keine News
+        </p>
+        <p class="text-gray-600 text-sm">
+          Neue Vereinsnachrichten erscheinen hier automatisch.
+        </p>
+      </div>
     </div>
 
     <!-- News Modal -->
@@ -91,13 +124,16 @@ import { Calendar, X } from 'lucide-vue-next'
 
 const news = ref([])
 const selectedNews = ref(null)
+const isLoading = ref(true)
 
 const loadNews = async () => {
   try {
     const response = await $fetch('/api/news-public')
-    news.value = response.news
+    news.value = Array.isArray(response?.news) ? response.news : []
   } catch (error) {
     console.error('Fehler beim Laden der öffentlichen News:', error)
+  } finally {
+    isLoading.value = false
   }
 }