First commit

resources/views/livewire/web/components/sections/hero-slider.blade.php

@@ -0,0 +1,139 @@
+
+<div x-data="heroSlider()" x-init="init()">
+  <section class="relative mb-10">
+    <!-- Slider Container -->
+    <div class="absolute inset-0 overflow-hidden">
+      @if(!empty($content['slides']))
+        @foreach($content['slides'] as $index => $slide)
+          <div
+            class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
+            :class="currentSlide === {{ $index }} ? 'opacity-100' : 'opacity-0'"
+          >
+            <img
+              src="{{ asset('img/assets/' . $slide['image']) }}"
+              alt="{{ $slide['image_alt'] }}"
+              class="size-full object-cover"
+            />
+            <div class="absolute inset-0 bg-gray-900 opacity-20"></div>
+          </div>
+        @endforeach
+      @endif
+    </div>
+
+    <!-- Content -->
+    <div class="relative mx-auto flex max-w-3xl flex-col items-center px-6 py-32 text-center sm:py-64 lg:px-0">
+      <h1 class="text-hero text-white">
+        {!! $content['title'] !!}
+    </h1>
+      <p class="mt-4 text-xl text-white">{!! $content['subtitle'] !!}</p>
+      <a href="{{ $content['cta1_link'] }}" class="mt-8 inline-block btn-secondary-accent">{{ $content['cta1_text'] }}</a>
+    </div>
+
+    <!-- Navigation Dots -->
+    @if(!empty($content['slides']) && count($content['slides']) > 1)
+      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
+        <div class="flex space-x-3">
+          @foreach($content['slides'] as $index => $slide)
+            <button
+              @click="setSlide({{ $index }})"
+              class="w-3 h-3 rounded-full border-2 border-white/50 transition-all duration-300"
+              :class="currentSlide === {{ $index }} ? 'bg-white border-white' : 'bg-transparent hover:border-white/80'"
+              aria-label="Slide {{ $index + 1 }} anzeigen"
+            ></button>
+          @endforeach
+        </div>
+      </div>
+    @endif
+
+    <!-- Arrow Navigation (Optional) -->
+    @if(!empty($content['slides']) && count($content['slides']) > 1)
+      <button
+        @click="previousSlide()"
+        class="absolute left-6 top-1/2 transform -translate-y-1/2 text-white/70 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full p-2"
+        aria-label="Vorheriges Bild"
+      >
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+        </svg>
+      </button>
+
+      <button
+        @click="nextSlide()"
+        class="absolute right-6 top-1/2 transform -translate-y-1/2 text-white/70 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full p-2"
+        aria-label="Nächstes Bild"
+      >
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+      </button>
+    @endif
+  </section>
+</div>
+
+<script>
+function heroSlider() {
+  return {
+    currentSlide: 0,
+    totalSlides: {{ !empty($content['slides']) ? count($content['slides']) : 0 }},
+    autoplayInterval: null,
+    autoplayTimeout: null,
+
+    init() {
+      if (this.totalSlides > 1) {
+        this.startAutoplay();
+      }
+    },
+
+    // Automatischer Wechsel (nur für Intervall)
+    autoNextSlide() {
+      this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
+    },
+
+    // Manuelle Navigation
+    nextSlide() {
+      this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
+      this.resetAutoplay();
+    },
+
+    previousSlide() {
+      this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
+      this.resetAutoplay();
+    },
+
+    setSlide(index) {
+      this.currentSlide = index;
+      this.resetAutoplay();
+    },
+
+    startAutoplay() {
+      // Zuerst alle bestehenden Timer löschen
+      this.stopAutoplay();
+
+      this.autoplayInterval = setInterval(() => {
+        this.autoNextSlide();
+      }, 5000); // Wechsel alle 5 Sekunden
+    },
+
+    stopAutoplay() {
+      if (this.autoplayInterval) {
+        clearInterval(this.autoplayInterval);
+        this.autoplayInterval = null;
+      }
+      if (this.autoplayTimeout) {
+        clearTimeout(this.autoplayTimeout);
+        this.autoplayTimeout = null;
+      }
+    },
+
+    resetAutoplay() {
+      // Alle Timer stoppen
+      this.stopAutoplay();
+
+      // Nach 5 Sekunden Pause wieder starten
+      this.autoplayTimeout = setTimeout(() => {
+        this.startAutoplay();
+      }, 1000);
+    }
+  }
+}
+</script>