154 lines
6.7 KiB
PHP
154 lines
6.7 KiB
PHP
{{--
|
|
Beispiel: Verwendung des CategoryService in einer Einzelkategorie-Seite
|
|
Pfad: resources/views/web/kategorie.blade.php
|
|
--}}
|
|
|
|
@extends('web.layouts.web-master')
|
|
|
|
@section('title', 'Kategorie - Business Portal 24')
|
|
|
|
@section('content')
|
|
|
|
@php
|
|
use App\Services\CategoryService;
|
|
|
|
// Kategorie aus Route-Parameter laden
|
|
$slug = request()->segment(2); // z.B. 'wirtschaft'
|
|
$category = CategoryService::getCategoryBySlug($slug);
|
|
|
|
// Wenn Kategorie nicht gefunden, 404
|
|
if (!$category) {
|
|
abort(404);
|
|
}
|
|
|
|
// Alle Kategorien für Navigation
|
|
$allCategories = CategoryService::getCategories();
|
|
|
|
// Icon- und Farb-Informationen
|
|
$iconPath = CategoryService::getIconPath($category['icon']);
|
|
$gradient = CategoryService::getGradientForColor($category['color']);
|
|
$iconColor = CategoryService::getClassForColor($category['color']);
|
|
@endphp
|
|
|
|
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
|
|
<livewire:web.burger-menu />
|
|
<livewire:web.header />
|
|
|
|
<!-- Category Header -->
|
|
<section class="bg-gradient-to-br {{ $gradient }} py-16">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<div
|
|
class="inline-flex items-center justify-center w-20 h-20 bg-white dark:bg-zinc-800 rounded-2xl shadow-lg mb-6">
|
|
<img src="{{ $iconPath }}" alt="{{ $category['name'] }}" class="h-10 w-10 {{ $iconColor }}">
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-5xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
|
|
{{ $category['name'] }}
|
|
</h1>
|
|
|
|
<p class="text-xl text-zinc-700 dark:text-zinc-300 mb-6">
|
|
{{ $category['description'] }}
|
|
</p>
|
|
|
|
<div
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-zinc-800/80 rounded-full text-sm font-medium backdrop-blur-sm">
|
|
<span>{{ $category['count'] }} Mitteilungen</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Category Navigation -->
|
|
<nav class="sticky top-0 z-40 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center gap-4 overflow-x-auto scrollbar-hide py-4">
|
|
@foreach ($allCategories as $cat)
|
|
<a href="/kategorie/{{ $cat['slug'] }}"
|
|
class="flex items-center gap-2 px-4 py-2 rounded-lg whitespace-nowrap transition-colors
|
|
{{ $cat['slug'] === $category['slug']
|
|
? 'bg-[var(--color-primary)] text-white'
|
|
: 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' }}">
|
|
<img src="{{ CategoryService::getIconPath($cat['icon']) }}" alt="{{ $cat['name'] }}"
|
|
class="h-4 w-4">
|
|
<span class="text-sm font-medium">{{ $cat['name'] }}</span>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Content Section -->
|
|
<section class="py-12">
|
|
<div class="container mx-auto px-4">
|
|
<x-web.section-header title="Aktuelle Meldungen aus {{ $category['name'] }}"
|
|
subtitle="Die neuesten Pressemitteilungen dieser Kategorie" size="medium" />
|
|
|
|
<!-- Hier würden die Pressemitteilungen angezeigt -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{{-- Press releases grid --}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Related Categories -->
|
|
<section class="py-12 bg-zinc-50 dark:bg-zinc-900">
|
|
<div class="container mx-auto px-4">
|
|
<x-web.section-header title="Weitere Kategorien" subtitle="Entdecken Sie auch diese Themenbereiche"
|
|
size="medium" />
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
@foreach ($allCategories->take(4) as $cat)
|
|
@if ($cat['slug'] !== $category['slug'])
|
|
@php
|
|
$catIconPath = CategoryService::getIconPath($cat['icon']);
|
|
$catGradient = CategoryService::getGradientForColor($cat['color']);
|
|
$catIconColor = CategoryService::getClassForColor($cat['color']);
|
|
@endphp
|
|
|
|
<a href="/kategorie/{{ $cat['slug'] }}"
|
|
class="group card-premium hover:card-premium-hover p-4 transition-all">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-12 h-12 bg-gradient-to-br {{ $catGradient }} rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<img src="{{ $catIconPath }}" alt="{{ $cat['name'] }}"
|
|
class="h-6 w-6 {{ $catIconColor }}">
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h4
|
|
class="font-semibold text-zinc-900 dark:text-zinc-100 truncate group-hover:text-[var(--color-primary)] transition-colors">
|
|
{{ $cat['name'] }}
|
|
</h4>
|
|
<p class="text-xs text-zinc-500">{{ $cat['count'] }} Mitteilungen</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<livewire:web.footer />
|
|
</main>
|
|
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
:root {
|
|
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
|
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
|
}
|
|
|
|
/* Scrollbar für horizontale Navigation verstecken */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
@endpush
|