129 lines
4.6 KiB
PHP
129 lines
4.6 KiB
PHP
@props([
|
|
'highlights' => [],
|
|
'theme' => 'businessportal24',
|
|
])
|
|
|
|
@php
|
|
$sectionBgClass = match ($theme) {
|
|
'presseecho' => 'bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-900',
|
|
'businessportal24' => 'main-content-section',
|
|
default => 'bg-white dark:bg-zinc-950',
|
|
};
|
|
@endphp
|
|
|
|
<section class="relative overflow-hidden {{ $sectionBgClass }} py-12 md:py-16 animate-fade-in">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="mb-8 flex items-end justify-between">
|
|
<div>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mb-2 flex items-center gap-3">
|
|
<span class="gradient-indicator"></span>
|
|
Highlights der Woche
|
|
</h2>
|
|
<p class="text-zinc-600 dark:text-zinc-400 ml-5">Exklusive Einblicke und Top-Analysen</p>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="hidden md:flex items-center gap-2">
|
|
<button id="highlights-prev" class="slider-nav-btn" aria-label="Vorheriges Highlight">
|
|
<svg class="w-5 h-5" 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 id="highlights-next" class="slider-nav-btn" aria-label="Nächstes Highlight">
|
|
<svg class="w-5 h-5" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slider Container -->
|
|
<div class="slider-wrapper">
|
|
<div id="highlights-slider" class="highlights-slider">
|
|
@foreach ($highlights as $highlight)
|
|
<x-web.highlight-card :highlight="$highlight" />
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Pagination Dots -->
|
|
<div class="slider-dots">
|
|
@foreach ($highlights as $index => $highlight)
|
|
<button data-slide="{{ $index }}" class="slider-dot {{ $index === 0 ? 'active' : '' }}"
|
|
aria-label="Zu Slide {{ $index + 1 }}"></button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const slider = document.getElementById('highlights-slider');
|
|
const prevBtn = document.getElementById('highlights-prev');
|
|
const nextBtn = document.getElementById('highlights-next');
|
|
const dots = document.querySelectorAll('.slider-dot');
|
|
|
|
if (!slider || !prevBtn || !nextBtn) return;
|
|
|
|
let currentSlide = 0;
|
|
const totalSlides = dots.length;
|
|
|
|
function updateSlider() {
|
|
const slideWidth = slider.children[0].offsetWidth;
|
|
slider.scrollTo({
|
|
left: currentSlide * (slideWidth + 24), // 24px = gap-6
|
|
behavior: 'smooth'
|
|
});
|
|
updateDots();
|
|
updateButtons();
|
|
}
|
|
|
|
function updateDots() {
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle('active', index === currentSlide);
|
|
});
|
|
}
|
|
|
|
function updateButtons() {
|
|
prevBtn.disabled = currentSlide === 0;
|
|
nextBtn.disabled = currentSlide === totalSlides - 1;
|
|
}
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentSlide > 0) {
|
|
currentSlide--;
|
|
updateSlider();
|
|
}
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
if (currentSlide < totalSlides - 1) {
|
|
currentSlide++;
|
|
updateSlider();
|
|
}
|
|
});
|
|
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener('click', () => {
|
|
currentSlide = index;
|
|
updateSlider();
|
|
});
|
|
});
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowLeft' && currentSlide > 0) {
|
|
currentSlide--;
|
|
updateSlider();
|
|
} else if (e.key === 'ArrowRight' && currentSlide < totalSlides - 1) {
|
|
currentSlide++;
|
|
updateSlider();
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
updateButtons();
|
|
});
|
|
</script>
|