hms-licht-ton/frontend/pages/index.vue

<template>
  <div>
    <!-- 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>

    <!-- 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
          v-for="service in services"
          :key="service.title"
          class="bg-panel border border-border-default rounded-lg p-5 hover:border-accent-border transition-colors duration-fast"
        >
          <h3 class="text-accent text-sm font-bold mb-2">{{ service.title }}</h3>
          <p class="text-text-muted text-sm">{{ service.description }}</p>
        </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: [
    { name: "robots", content: "noindex, nofollow, noarchive, nosnippet" },
    { property: "og:type", content: "website" },
    { property: "og:title", content: "HMS Licht & Ton – Veranstaltungstechnik" },
    { property: "og:description", content: "Professionelle Veranstaltungstechnik aus Leipheim/Ellzee. Vermietung, Verkauf, Personal, Transport." },
    { property: "og:locale", content: "de_DE" },
    { property: "og:site_name", content: "HMS Licht & Ton" },
    { property: "og:url", content: "https://hms.media-on.de" },
  ],
});

const services = [
  { title: "Vermietung", description: "Lautsprecher, Mischpulte, Lichtanlagen, Rigging und Komplett-Setups aus unserem 1.000+ Geräte umfassenden Mietlager." },
  { 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." },
];

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>