harheimertc/pages/cms/index.vue

<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Content Management System
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Über uns -->
        <NuxtLink
          to="/cms/ueber-uns"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center group-hover:bg-indigo-600 transition-colors">
              <Newspaper :size="24" class="text-indigo-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Über uns</h2>
          </div>
          <p class="text-gray-600">
            Seite „Über uns" bearbeiten (WYSIWYG)
          </p>
        </NuxtLink>

        <!-- Geschichte -->
        <NuxtLink
          to="/cms/geschichte"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center group-hover:bg-amber-600 transition-colors">
              <Newspaper :size="24" class="text-amber-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Geschichte</h2>
          </div>
          <p class="text-gray-600">
            Vereinsgeschichte bearbeiten (WYSIWYG)
          </p>
        </NuxtLink>

        <!-- TT-Regeln -->
        <NuxtLink
          to="/cms/tt-regeln"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-600 transition-colors">
              <Newspaper :size="24" class="text-red-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">TT-Regeln</h2>
          </div>
          <p class="text-gray-600">
            Tischtennis-Regeln bearbeiten (WYSIWYG)
          </p>
        </NuxtLink>

        <!-- Satzung -->
        <NuxtLink
          to="/cms/satzung"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-slate-600 transition-colors">
              <svg class="w-6 h-6 text-slate-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Satzung</h2>
          </div>
          <p class="text-gray-600">
            Satzung als PDF hochladen
          </p>
        </NuxtLink>
        <!-- News -->
        <NuxtLink
          to="/mitgliederbereich/news"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors">
              <Newspaper :size="24" class="text-blue-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">News</h2>
          </div>
          <p class="text-gray-600">
            News erstellen und verwalten (intern und öffentlich)
          </p>
        </NuxtLink>

        <!-- Termine -->
        <NuxtLink
          to="/cms/termine"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-600 transition-colors">
              <Calendar :size="24" class="text-green-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Termine</h2>
          </div>
          <p class="text-gray-600">
            Vereinstermine erstellen und verwalten
          </p>
        </NuxtLink>

        <!-- Mitglieder -->
        <NuxtLink
          to="/mitgliederbereich/mitglieder"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-600 transition-colors">
              <Users :size="24" class="text-purple-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Mitglieder</h2>
          </div>
          <p class="text-gray-600">
            Mitgliederliste bearbeiten
          </p>
        </NuxtLink>

        <!-- Einstellungen -->
        <NuxtLink
          to="/cms/einstellungen"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-600 transition-colors">
              <Settings :size="24" class="text-orange-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Einstellungen</h2>
          </div>
          <p class="text-gray-600">
            Training, Trainer, Mitgliedschaft & Vorstand
          </p>
        </NuxtLink>

        <!-- Benutzerverwaltung (nur für Admin) -->
        <NuxtLink
          v-if="authStore.hasRole('admin')"
          to="/cms/benutzer"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center group-hover:bg-yellow-600 transition-colors">
              <UserCog :size="24" class="text-yellow-600 group-hover:text-white" />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">Benutzerverwaltung</h2>
          </div>
          <p class="text-gray-600">
            Benutzer freischalten und verwalten
          </p>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Newspaper, Calendar, Users, UserCog, Settings } from 'lucide-vue-next'

const authStore = useAuthStore()

definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

useHead({
  title: 'CMS - Harheimer TC',
})
</script>