Add public/private news system with homepage display

components/PublicNews.vue

@@ -0,0 +1,76 @@
+<template>
+  <section v-if="news.length > 0" class="py-16 sm:py-20 bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
+          Aktuelles
+        </h2>
+        <div class="w-24 h-1 bg-primary-600 mx-auto mb-6" />
+        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+          Die neuesten Nachrichten aus unserem Verein
+        </p>
+      </div>
+
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <article
+          v-for="item in news"
+          :key="item.id"
+          class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:shadow-lg transition-shadow"
+        >
+          <div class="flex items-center text-sm text-gray-500 mb-3">
+            <Calendar :size="16" class="mr-2" />
+            {{ formatDate(item.created) }}
+          </div>
+          
+          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">
+            {{ item.title }}
+          </h3>
+          
+          <p class="text-gray-700 line-clamp-3">
+            {{ item.content }}
+          </p>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Calendar } from 'lucide-vue-next'
+
+const news = ref([])
+
+const loadNews = async () => {
+  try {
+    const response = await $fetch('/api/news-public')
+    news.value = response.news
+  } catch (error) {
+    console.error('Fehler beim Laden der öffentlichen News:', error)
+  }
+}
+
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleDateString('de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+onMounted(() => {
+  loadNews()
+})
+</script>
+
+<style scoped>
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
+