Implementation Engineer
193 lines
10 KiB
Vue
193 lines
10 KiB
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 · Ü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 & 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 & 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> |