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,19 +1,83 @@
 <template>
  <div>
-    <section class="mb-12">
-      <p class="text-sm text-accent font-semibold mb-2">Seit 2003 &middot; Über 20 Jahre Veranstaltungstechnik</p>
-      <h1 class="text-4xl lg:text-5xl font-extrabold mb-4">Professionelle Technik für Ihre Veranstaltung</h1>
-      <p class="text-text-muted text-lg mb-6 max-w-2xl">
-        Von der Firmenevent-Beschallung bis zur Open-Air-Großproduktion: HMS Licht &amp; Ton liefert
-        Tontechnik, Lichttechnik, Rigging und Komplettlösungen aus Leipheim und Ellzee.
-      </p>
-      <div class="flex flex-wrap gap-4">
-        <NuxtLink to="/mietkatalog" class="btn-primary">Mietkatalog öffnen</NuxtLink>
-        <NuxtLink to="/kontakt" class="btn-secondary">Beratung anfragen</NuxtLink>
+    <!-- Hero Section -->
+    <section class="relative mb-16 overflow-hidden rounded-lg">
+      <div class="absolute inset-0 bg-bg">
+        <img
+          src="https://images.unsplash.com/photo-1505236858219-8359eb222e89?w=1600&q=80"
+          alt="Veranstaltungstechnik"
+          class="w-full h-full object-cover opacity-30"
+          loading="eager"
+        />
+      </div>
+      <div class="absolute inset-0 bg-gradient-to-t from-bg via-bg/80 to-bg/50" />
+      <div class="relative px-6 py-20 lg:py-32 max-w-4xl">
+        <p class="text-sm text-accent font-semibold mb-2">Seit 2003 &middot; Über 20 Jahre Veranstaltungstechnik</p>
+        <h1 class="text-4xl lg:text-6xl font-extrabold mb-4" data-testid="hero-headline">
+          Veranstaltungstechnik
+        </h1>
+        <p class="text-text-muted text-lg lg:text-xl mb-8 max-w-2xl">
+          Professionelle Tontechnik, Lichttechnik, Rigging und Komplettlösungen
+          für Ihre Veranstaltung. Von der Firmenevent-Beschallung bis zur
+          Open-Air-Großproduktion – HMS Licht &amp; Ton liefert aus Leipheim und Ellzee.
+        </p>
+        <div class="flex flex-wrap gap-4">
+          <NuxtLink to="/mietkatalog" class="btn-primary" data-testid="hero-cta-mietkatalog">
+            Mietkatalog öffnen
+          </NuxtLink>
+          <NuxtLink to="/kontakt" class="btn-secondary" data-testid="hero-cta-kontakt">
+            Beratung anfragen
+          </NuxtLink>
+        </div>
      </div>
    </section>

-    <section class="mb-12">
+    <!-- Speaker Grid (Equipment Types) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold mb-6">Unser Equipment</h2>
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4" data-testid="speaker-grid">
+        <div
+          v-for="eq in equipmentTypes"
+          :key="eq.label"
+          class="flex flex-col items-center gap-3 p-5 rounded-lg border border-border-default bg-panel hover:border-accent-border transition-colors duration-fast"
+        >
+          <div class="w-12 h-12 flex items-center justify-center text-secondary">
+            <component :is="eq.icon" />
+          </div>
+          <span class="text-xs text-text-muted text-center">{{ eq.label }}</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Über uns Section -->
+    <section class="mb-16 bg-panel rounded-lg p-8" data-testid="about-section">
+      <h2 class="text-2xl font-bold mb-6">Über uns</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-6">
+        <div class="text-center">
+          <p class="text-4xl font-extrabold text-accent mb-1" data-testid="stat-years">20+</p>
+          <p class="text-sm text-text-muted">Jahre Erfahrung</p>
+        </div>
+        <div class="text-center">
+          <p class="text-4xl font-extrabold text-accent mb-1" data-testid="stat-devices">1000+</p>
+          <p class="text-sm text-text-muted">Geräte im Mietpark</p>
+        </div>
+        <div class="text-center">
+          <p class="text-4xl font-extrabold text-accent mb-1" data-testid="stat-events">500+</p>
+          <p class="text-sm text-text-muted">Events betreut</p>
+        </div>
+      </div>
+      <p class="text-text-muted text-sm max-w-3xl">
+        HMS Licht &amp; Ton ist Ihr verlässlicher Partner für Veranstaltungstechnik in
+        Bayerisch-Schwaben und darüber hinaus. Seit über 20 Jahren planen, liefern und
+        betreiben wir Technik für Konzerte, Firmenevents, Festspiele und private
+        Feiern. Unser Team aus erfahrenen Tontechnikern, Lichttechnikern und Rigging-Spezialisten
+        sorgt dafür, dass Ihre Veranstaltung perfekt läuft – vom ersten Beratungsgespräch
+        bis zum letzten Kabel am Abbau.
+      </p>
+    </section>
+
+    <!-- 8 Service Cards -->
+    <section class="mb-16" data-testid="services-section">
      <h2 class="text-2xl font-bold mb-6">Leistungen</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div
@@ -26,10 +90,24 @@
        </div>
      </div>
    </section>
+
+    <!-- Mietkatalog CTA -->
+    <section class="mb-12 text-center bg-panel rounded-lg p-10" data-testid="mietkatalog-cta">
+      <h2 class="text-2xl font-bold mb-4">Bereit für Ihr nächstes Event?</h2>
+      <p class="text-text-muted mb-6 max-w-2xl mx-auto">
+        Durchstöbern Sie unseren Mietkatalog mit über 1.000 Artikeln – von Lautsprechern
+        über Lichtanlagen bis zu Rigging-Material.
+      </p>
+      <NuxtLink to="/mietkatalog" class="btn-primary" data-testid="cta-mietkatalog-link">
+        Zum Mietkatalog
+      </NuxtLink>
+    </section>
  </div>
 </template>

 <script setup lang="ts">
+import { h } from "vue";
+
 useHead({
  title: "HMS Licht & Ton – Veranstaltungstechnik Leipheim/Ellzee",
  meta: [
@@ -48,5 +126,68 @@ const services = [
  { title: "Verkauf", description: "Neu- und Gebrauchtgeräte führender Hersteller mit Beratung, Inbetriebnahme und Service." },
  { title: "Personal", description: "Qualifizierte Tontechniker, Lichttechniker und Rigger für Aufbau, Betrieb und Abbau." },
  { title: "Transport", description: "Eigene Transportfahrzeuge für sichere An- und Ablieferung inklusive Verladekonzept." },
+  { title: "Lagerung", description: "Klimatisierte und gesicherte Lagerung für empfindliche Technik zwischen den Einsätzen." },
+  { title: "Werkstatt", description: "Reparatur und Wartung eigener sowie fremder Geräte durch unsere zertifizierten Techniker." },
+  { title: "Installation", description: "Festinstallationen in Veranstaltungsräumen, Kirchen, Schulen und Firmengebäuden." },
+  { title: "Booking", description: "Vermittlung von Künstlern, DJs und Technikern für Ihre Veranstaltung aus unserem Partnernetzwerk." },
 ];
-</script>
+
+type EquipmentIcon = () => ReturnType<typeof h>;
+
+const equipmentTypes: { label: string; icon: EquipmentIcon }[] = [
+  {
+    label: "Lautsprecher",
+    icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
+      h("rect", { x: 8, y: 8, width: 32, height: 32, rx: 2, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("circle", { cx: 24, cy: 24, r: 8, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("circle", { cx: 24, cy: 24, r: 4, fill: "none", stroke: "currentColor", "stroke-width": 1.5 }),
+    ]),
+  },
+  {
+    label: "Mischpulte",
+    icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
+      h("rect", { x: 6, y: 12, width: 36, height: 24, rx: 2, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("line", { x1: 14, y1: 18, x2: 14, y2: 30, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("line", { x1: 22, y1: 18, x2: 22, y2: 30, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("line", { x1: 30, y1: 18, x2: 30, y2: 30, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("circle", { cx: 14, cy: 30, r: 3, fill: "none", stroke: "currentColor", "stroke-width": 1.5 }),
+    ]),
+  },
+  {
+    label: "Lichtanlagen",
+    icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
+      h("rect", { x: 18, y: 6, width: 12, height: 10, rx: 1, fill: "currentColor" }),
+      h("path", { d: "M24 16 L24 24", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round" }),
+      h("circle", { cx: 24, cy: 30, r: 6, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("path", { d: "M18 30 L14 30 M30 30 L34 30", stroke: "currentColor", "stroke-width": 1.5, "stroke-linecap": "round", opacity: 0.5 }),
+    ]),
+  },
+  {
+    label: "Rigging",
+    icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
+      h("path", { d: "M24 6 L24 18", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round" }),
+      h("rect", { x: 16, y: 18, width: 16, height: 20, rx: 2, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("path", { d: "M20 18 L16 10 M28 18 L32 10", stroke: "currentColor", "stroke-width": 1.5, "stroke-linecap": "round" }),
+    ]),
+  },
+  {
+    label: "Traversen",
+    icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
+      h("rect", { x: 6, y: 20, width: 36, height: 8, rx: 1, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("line", { x1: 12, y1: 20, x2: 12, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("line", { x1: 18, y1: 20, x2: 18, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("line", { x1: 24, y1: 20, x2: 24, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("line", { x1: 30, y1: 20, x2: 30, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
+      h("line", { x1: 36, y1: 20, x2: 36, y2: 28, stroke: "currentColor", "stroke-width": 1.5 }),
+    ]),
+  },
+  {
+    label: "Komplett-Setups",
+    icon: () => h("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none" }, [
+      h("circle", { cx: 24, cy: 24, r: 18, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+      h("path", { d: "M24 6 L24 18 M6 24 L18 24 M24 30 L24 42 M30 24 L42 24", stroke: "currentColor", "stroke-width": 1.5, "stroke-linecap": "round" }),
+      h("circle", { cx: 24, cy: 24, r: 6, fill: "none", stroke: "currentColor", "stroke-width": 2 }),
+    ]),
+  },
+];
+</script>