Refactor homepage layout to dynamically render sections based on configuration

This commit updates the homepage component to utilize a dynamic rendering approach for sections, allowing for configuration-based display of components. It introduces computed properties to manage section visibility and mapping of section IDs to their respective components, enhancing flexibility and maintainability of the homepage structure.

pages/index.vue

@@ -1,26 +1,55 @@
 <template>
   <div class="min-h-full">
-    <!-- 1. Willkommen mit Tradition -->
-    <Hero />
-    
-    <!-- 2. Kommende Termine -->
-    <HomeTermine />
-    
-    <!-- 3. Nächste Spiele -->
-    <Spielplan />
-    
-    <!-- 4. Aktuelles -->
-    <PublicNews />
-    
-    <!-- 5. Mitglied werden / Kontakt aufnehmen -->
-    <HomeActions />
+    <component
+      :is="getComponentForSection(section.id)"
+      v-for="section in enabledSections"
+      :key="section.id"
+    />
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import Hero from '~/components/Hero.vue'
 import HomeTermine from '~/components/HomeTermine.vue'
 import Spielplan from '~/components/Spielplan.vue'
 import PublicNews from '~/components/PublicNews.vue'
 import HomeActions from '~/components/HomeActions.vue'
+
+const { data: config } = await useFetch('/api/config')
+
+// Standard-Reihenfolge, falls Config nicht vorhanden
+const defaultSections = [
+  { id: 'banner', enabled: true },
+  { id: 'termine', enabled: true },
+  { id: 'spiele', enabled: true },
+  { id: 'aktuelles', enabled: true },
+  { id: 'kontakt', enabled: true }
+]
+
+// Lade Sections aus Config oder verwende Standard
+const sections = computed(() => {
+  if (config.value?.homepage?.sections && Array.isArray(config.value.homepage.sections)) {
+    return config.value.homepage.sections
+  }
+  return defaultSections
+})
+
+// Filtere nur aktivierte Sections
+const enabledSections = computed(() => {
+  return sections.value.filter(section => section.enabled !== false)
+})
+
+// Mapping von Section-ID zu Komponente
+const componentMap = {
+  banner: Hero,
+  termine: HomeTermine,
+  spiele: Spielplan,
+  aktuelles: PublicNews,
+  kontakt: HomeActions
+}
+
+function getComponentForSection(sectionId) {
+  return componentMap[sectionId] || null
+}
 </script>