feat(T02): Static pages – home, referenzen, kontakt, legal (impressum/datenschutz/agb)

2026-07-10 01:02:27 +02:00
parent e9da21b57e
commit db5080df48
15 changed files with 1618 additions and 109 deletions
@@ -1,13 +1,128 @@
 <template>
  <div>
-    <h1 class="text-3xl font-bold text-text mb-4">Referenzen</h1>
-    <p class="text-text-muted">Unsere Referenzen werden hier angezeigt.</p>
+    <h1 class="text-3xl font-bold text-text mb-2">Referenzen</h1>
+    <p class="text-text-muted mb-8">Ein Auszug aus unseren Projekten und Veranstaltungen.</p>
+
+    <!-- Filter Chips -->
+    <div class="flex flex-wrap gap-3 mb-8" data-testid="filter-chips">
+      <button
+        v-for="cat in categories"
+        :key="cat"
+        :class="[
+          'px-4 py-2 rounded-full text-sm font-medium border transition-colors duration-fast',
+          activeFilter === cat
+            ? 'bg-accent text-white border-accent'
+            : 'bg-panel text-text-muted border-border-default hover:border-accent-border'
+        ]"
+        :data-testid="'filter-' + cat.toLowerCase()"
+        @click="activeFilter = cat"
+      >
+        {{ cat }}
+      </button>
+    </div>
+
+    <!-- Gallery Grid -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="gallery-grid">
+      <div
+        v-for="item in filteredImages"
+        :key="item.id"
+        class="relative group cursor-pointer rounded-lg overflow-hidden bg-panel border border-border-default hover:border-accent-border transition-colors duration-fast"
+        :data-testid="'gallery-item-' + item.id"
+        @click="openLightbox(item)"
+      >
+        <div class="aspect-w-4 aspect-h-3 w-full">
+          <img
+            :src="item.src"
+            :alt="item.alt"
+            class="w-full h-48 object-cover group-hover:opacity-80 transition-opacity duration-fast"
+            loading="lazy"
+          />
+        </div>
+        <div class="p-4">
+          <p class="text-accent text-sm font-bold mb-1">{{ item.title }}</p>
+          <p class="text-text-muted text-xs">{{ item.category }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Lightbox -->
+    <Lightbox
+      :is-open="lightboxOpen"
+      :image="currentImage"
+      @close="closeLightbox"
+      @prev="prevImage"
+      @next="nextImage"
+    />
  </div>
 </template>

 <script setup lang="ts">
+import { ref, computed } from "vue";
+
 useHead({
  title: "Referenzen – HMS Licht & Ton",
  meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
 });
-</script>
+
+interface GalleryItem {
+  id: number;
+  src: string;
+  alt: string;
+  title: string;
+  category: string;
+  caption: string;
+}
+
+const categories = ["Alle", "Open-Air", "Indoor", "Rigging"] as const;
+const activeFilter = ref<string>("Alle");
+
+const images: GalleryItem[] = [
+  { id: 1, src: "https://picsum.photos/seed/hms1/600/400", alt: "Open-Air Konzert", title: "Stadtfest Leipheim", category: "Open-Air", caption: "Stadtfest Leipheim – Beschallung und Lichttechnik" },
+  { id: 2, src: "https://picsum.photos/seed/hms2/600/400", alt: "Indoor Firmenevent", title: "Firmenevent Augsburg", category: "Indoor", caption: "Firmenevent in Augsburg – Komplett-Setup" },
+  { id: 3, src: "https://picsum.photos/seed/hms3/600/400", alt: "Rigging Aufbau", title: "Traversen-Rigging", category: "Rigging", caption: "Traversen-Rigging in einer Mehrzweckhalle" },
+  { id: 4, src: "https://picsum.photos/seed/hms4/600/400", alt: "Open-Air Festival", title: "Sommerfest Günzburg", category: "Open-Air", caption: "Sommerfest Günzburg – Line-Array Beschallung" },
+  { id: 5, src: "https://picsum.photos/seed/hms5/600/400", alt: "Indoor Konferenz", title: "Konferenz Neu-Ulm", category: "Indoor", caption: "Konferenz in Neu-Ulm – Mikrofonie und Mischtechnik" },
+  { id: 6, src: "https://picsum.photos/seed/hms6/600/400", alt: "Rigging Motorzug", title: "Motorzug-System", category: "Rigging", caption: "Motorzug-System für Bühnenbeleuchtung" },
+  { id: 7, src: "https://picsum.photos/seed/hms7/600/400", alt: "Open-Air Bühne", title: "Kirchweih Festzelt", category: "Open-Air", caption: "Kirchweih Festzelt – Beschallung und Beleuchtung" },
+  { id: 8, src: "https://picsum.photos/seed/hms8/600/400", alt: "Indoor Gala", title: "Gala Leipheim", category: "Indoor", caption: "Gala-Abend in Leipheim – Licht- und Tontechnik" },
+  { id: 9, src: "https://picsum.photos/seed/hms9/600/400", alt: "Rigging Seilzug", title: "Punkt-Rigging", category: "Rigging", caption: "Punkt-Rigging für Moving Heads" },
+];
+
+const filteredImages = computed(() => {
+  if (activeFilter.value === "Alle") return images;
+  return images.filter((img) => img.category === activeFilter.value);
+});
+
+const lightboxOpen = ref(false);
+const currentIndex = ref(0);
+
+const currentImage = computed<GalleryItem>(() => {
+  const item = filteredImages.value[currentIndex.value];
+  return item
+    ? { src: item.src, alt: item.alt, caption: item.caption }
+    : { src: "", alt: "", caption: "" };
+});
+
+function openLightbox(item: GalleryItem) {
+  const idx = filteredImages.value.findIndex((i) => i.id === item.id);
+  if (idx >= 0) {
+    currentIndex.value = idx;
+    lightboxOpen.value = true;
+  }
+}
+
+function closeLightbox() {
+  lightboxOpen.value = false;
+}
+
+function nextImage() {
+  currentIndex.value = (currentIndex.value + 1) % filteredImages.value.length;
+}
+
+function prevImage() {
+  currentIndex.value =
+    currentIndex.value === 0
+      ? filteredImages.value.length - 1
+      : currentIndex.value - 1;
+}
+</script>