Add config system for training, trainer, membership and impressum with CMS editor

components/Membership.vue

@@ -117,53 +117,46 @@
 </template>
 
 <script setup>
-import { Check, Star, Heart, FileText, Eye } from 'lucide-vue-next'
+import { ref, computed, onMounted } from 'vue'
+import { Check, Star, Heart, FileText, Eye, User, Users } from 'lucide-vue-next'
 
-const plans = [
-  {
-    name: 'Kinder/Jugend',
-    price: '72',
+const config = ref(null)
+
+const loadConfig = async () => {
+  try {
+    const response = await $fetch('/api/config')
+    config.value = response.config
+  } catch (error) {
+    console.error('Fehler beim Laden der Config:', error)
+  }
+}
+
+onMounted(() => {
+  loadConfig()
+})
+
+const plans = computed(() => {
+  if (!config.value?.mitgliedschaft) return []
+  
+  const icons = [Star, Check, Heart, User, Users]
+  const gradients = [
+    'from-blue-500 to-cyan-500',
+    'from-primary-500 to-green-600',
+    'from-orange-500 to-red-500',
+    'from-purple-500 to-pink-500',
+    'from-indigo-500 to-blue-500'
+  ]
+  
+  return config.value.mitgliedschaft.map((m, index) => ({
+    name: m.typ,
+    description: m.beschreibung || '',
+    price: m.preis.toString(),
     period: 'Jahr',
-    description: 'Perfekt für junge Tischtennisspieler bis 18 Jahre',
-    features: [
-      'Unbegrenzte Hallennutzung',
-      'Kostenfreies Jugendtraining',
-      'Teilnahme an Jugendturnieren',
-      'Clubveranstaltungen',
-      'Gäste mitbringen',
-    ],
-    icon: Star,
-    gradient: 'from-blue-500 to-cyan-500',
-  },
-  {
-    name: 'Erwachsene',
-    price: '120',
-    period: 'Jahr',
-    description: 'Vollmitgliedschaft für Erwachsene',
-    features: [
-      'Unbegrenzte Hallennutzung',
-      'Freies Spielen nach Verfügbarkeit',
-      'Clubveranstaltungen',
-      'Gäste mitbringen',
-      'Zugang Trainingsbereich',
-    ],
-    icon: Check,
-    gradient: 'from-primary-500 to-green-600',
-    popular: true,
-  },
-  {
-    name: 'Passiv',
-    price: '30',
-    period: 'Jahr',
-    description: 'Unterstützen Sie Ihren Lieblingsverein',
-    features: [
-      'Vereinsunterstützung',
-      'Vereinsinformationen',
-      'Keine Spielberechtigung',
-    ],
-    icon: Heart,
-    gradient: 'from-orange-500 to-red-500',
-  },
-]
+    features: m.features || [],
+    icon: icons[index % icons.length],
+    gradient: gradients[index % gradients.length],
+    popular: index === 0
+  }))
+})
 </script>