12-05-2026 Frontend dev

2026-05-12 18:32:33 +02:00 · 2026-05-12 18:32:33 +02:00 · 5b8bdf4182
commit 5b8bdf4182
parent 405df0a122
779 changed files with 480564 additions and 6241 deletions
--- a/_docs/COMPONENT_DOCUMENTATION.md
+++ b/_docs/COMPONENT_DOCUMENTATION.md
@ -0,0 +1,485 @@
+# Komponenten-Dokumentation
+
+Diese Dokumentation beschreibt alle wiederverwendbaren Blade-Komponenten für die Presseecho und Businessportal24 Themes.
+
+## Inhaltsverzeichnis
+1. [Layout-Komponenten](#layout-komponenten)
+2. [Navigation-Komponenten](#navigation-komponenten)
+3. [Content-Komponenten](#content-komponenten)
+4. [Card-Komponenten](#card-komponenten)
+5. [Verwendungsbeispiele](#verwendungsbeispiele)
+
+---
+
+## Layout-Komponenten
+
+### Content-Layout
+**Pfad:** `resources/views/components/web/content-layout.blade.php`
+
+Hauptlayout für Unterseiten mit optionaler Sidebar.
+
+**Props:**
+- `$sidebar` (slot): Sidebar-Inhalt (optional)
+- `$sidebarPosition` (string): Position der Sidebar - `'left'` oder `'right'` (default: `'right'`)
+
+**Beispiel ohne Sidebar:**
+```blade
+<x-web.content-layout>
+    <article>
+        <!-- Ihr Content hier -->
+    </article>
+</x-web.content-layout>
+```
+
+**Beispiel mit Sidebar:**
+```blade
+<x-web.content-layout>
+    <x-slot name="sidebar">
+        <x-web.sidebar-widget title="Filter">
+            <!-- Sidebar-Inhalte -->
+        </x-web.sidebar-widget>
+    </x-slot>
+    
+    <article>
+        <!-- Hauptcontent -->
+    </article>
+</x-web.content-layout>
+```
+
+### Page Header
+**Pfad:** `resources/views/components/web/page-header.blade.php`
+
+Header für Unterseiten mit Titel, Subtitle und optionalem Bild.
+
+**Props:**
+- `$title` (string, required): Hauptüberschrift
+- `$subtitle` (string, optional): Untertitel
+- `$meta` (slot, optional): Meta-Informationen (Badges, Datum, etc.)
+- `$image` (string, optional): URL für Header-Bild
+- `$compact` (bool): Kompakte Version (default: `false`)
+
+**Beispiel:**
+```blade
+<x-web.page-header 
+    title="Die Zukunft der KI"
+    subtitle="Exklusive Einblicke in die Herausforderungen">
+    <x-slot name="meta">
+        <span class="badge badge-primary">Exklusiv-Interview</span>
+        <span>17. Oktober 2024</span>
+    </x-slot>
+</x-web.page-header>
+```
+
+---
+
+## Navigation-Komponenten
+
+### Main Navigation
+**Pfad:** `resources/views/components/web/main-navigation.blade.php`
+
+Sticky Navigation für verschiedene Themes.
+
+**Props:**
+- `$theme` (string): Theme-Name - `'presseecho'` oder `'businessportal24'` (default: `'presseecho'`)
+- `$items` (array, optional): Custom Navigation-Items
+
+**Beispiel Standard:**
+```blade
+<x-web.main-navigation theme="presseecho" />
+```
+
+**Beispiel Custom Items:**
+```blade
+<x-web.main-navigation 
+    theme="presseecho"
+    :items="[
+        ['label' => 'Kategorien', 'url' => '/kategorien'],
+        ['label' => 'Autoren', 'url' => '/autoren'],
+    ]" 
+/>
+```
+
+### Breadcrumb
+**Pfad:** `resources/views/components/web/breadcrumb.blade.php`
+
+Breadcrumb-Navigation für Unterseiten.
+
+**Props:**
+- `$items` (array, required): Array von Breadcrumb-Items
+
+**Beispiel:**
+```blade
+<x-web.breadcrumb :items="[
+    ['label' => 'Themendossiers', 'url' => '/themendossiers'],
+    ['label' => 'KI & Innovation', 'url' => '/themendossiers/ki'],
+    ['label' => 'Artikel-Titel']
+]" />
+```
+
+---
+
+## Content-Komponenten
+
+### Section Header
+**Pfad:** `resources/views/components/web/section-header.blade.php`
+
+Header für Content-Sections.
+
+**Props:**
+- `$title` (string, required): Section-Titel
+- `$subtitle` (string, optional): Subtitle
+- `$size` (string): Größe - `'small'`, `'medium'`, `'large'` (default: `'medium'`)
+
+**Beispiel:**
+```blade
+<x-web.section-header 
+    title="Neueste Analysen"
+    subtitle="Fundierte Einschätzungen von Branchenexperten"
+    size="medium" 
+/>
+```
+
+### Hero Banner
+**Pfad:** `resources/views/components/web/hero-banner.blade.php`
+
+Hero-Section für Startseiten.
+
+**Props:**
+- `$theme` (string): Theme-Name (default: `'presseecho'`)
+- `$title` (slot): Hero-Titel
+- `$subtitle` (slot): Hero-Subtitle
+
+**Beispiel:**
+```blade
+<x-web.hero-banner theme="presseecho">
+    <x-slot name="title">
+        Exklusive Fachmeldungen <span class="opacity-50">für Ihre Recherche</span>
+    </x-slot>
+    <x-slot name="subtitle">
+        Exklusive Wirtschaftsinformationen für Journalisten
+    </x-slot>
+</x-web.hero-banner>
+```
+
+### Sidebar Widget
+**Pfad:** `resources/views/components/web/sidebar-widget.blade.php`
+
+Widget-Container für Sidebar-Elemente.
+
+**Props:**
+- `$title` (string, optional): Widget-Titel
+- `$icon` (slot, optional): Icon als SVG
+
+**Beispiel:**
+```blade
+<x-web.sidebar-widget title="Über den Autor">
+    <div class="flex items-start gap-4">
+        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)]">
+            <!-- Avatar -->
+        </div>
+        <div>
+            <h4 class="font-semibold">Dr. Maria Schmidt</h4>
+            <p class="text-sm">Expertin für KI</p>
+        </div>
+    </div>
+</x-web.sidebar-widget>
+```
+
+---
+
+## Card-Komponenten
+
+### Article Card
+**Pfad:** `resources/views/components/web/article-card.blade.php`
+
+Standard-Karte für Artikel.
+
+**Props:**
+- `$article` (array, required): Artikel-Daten
+
+**Erforderliche Array-Struktur:**
+```php
+$article = [
+    'badge' => 'Analyse',
+    'badgeType' => 'primary', // primary, secondary, success, warning
+    'category' => 'Industrie 4.0',
+    'categoryBadgeType' => 'secondary',
+    'date' => '2024-10-16',
+    'dateFormatted' => '16. Okt 2024',
+    'title' => 'Artikeltitel',
+    'teaser' => 'Kurzbeschreibung...',
+    'author' => 'Thomas Müller',
+    'authorInitials' => 'TM',
+    'image' => 'https://...',
+];
+```
+
+**Beispiel:**
+```blade
+<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+    @foreach ($articles as $article)
+        <x-web.article-card :article="$article" />
+    @endforeach
+</div>
+```
+
+### Dossier Card
+**Pfad:** `resources/views/components/web/dossier-card.blade.php`
+
+Karte für Themendossiers.
+
+**Props:**
+- `$dossier` (array, required): Dossier-Daten
+
+**Erforderliche Array-Struktur:**
+```php
+$dossier = [
+    'title' => 'KI in der Industrie',
+    'description' => 'Alle Facetten der künstlichen Intelligenz...',
+    'articleCount' => 12,
+    'image' => 'https://...',
+];
+```
+
+**Beispiel:**
+```blade
+<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+    @foreach ($dossiers as $dossier)
+        <x-web.dossier-card :dossier="$dossier" />
+    @endforeach
+</div>
+```
+
+### Highlight Card
+**Pfad:** `resources/views/components/web/highlight-card.blade.php`
+
+Karte für Highlights (wird im Slider verwendet).
+
+**Props:**
+- `$highlight` (array, required): Highlight-Daten
+
+**Erforderliche Array-Struktur:**
+```php
+$highlight = [
+    'badge' => 'Exklusiv-Interview',
+    'badgeType' => 'primary',
+    'industry' => 'KI & Innovation',
+    'date' => '17. Oktober 2024',
+    'title' => 'Die Zukunft der KI',
+    'text' => 'Beschreibungstext...',
+    'author' => 'Dr. Maria Schmidt',
+    'authorRole' => 'Expertin für KI',
+    'initials' => 'MS',
+    'image' => 'https://...',
+];
+```
+
+### Highlights Slider
+**Pfad:** `resources/views/components/web/highlights-slider.blade.php`
+
+Interaktiver Slider für Highlights mit Navigation und Keyboard-Support.
+
+**Props:**
+- `$highlights` (array, required): Array von Highlight-Daten
+- `$theme` (string): Theme-Name (default: `'presseecho'`)
+
+**Beispiel:**
+```blade
+@php
+    $highlights = [
+        [
+            'badge' => 'Exklusiv-Interview',
+            'badgeType' => 'primary',
+            'industry' => 'KI & Innovation',
+            'date' => '17. Oktober 2024',
+            'title' => 'Die Zukunft der KI',
+            'text' => 'Interview-Text...',
+            'author' => 'Dr. Maria Schmidt',
+            'authorRole' => 'Expertin',
+            'initials' => 'MS',
+            'image' => 'https://...',
+        ],
+        // ... weitere Highlights
+    ];
+@endphp
+
+<x-web.highlights-slider :highlights="$highlights" theme="presseecho" />
+```
+
+---
+
+## Verwendungsbeispiele
+
+### Beispiel 1: Artikel-Detailseite
+
+```blade
+@extends('web.layouts.web-master')
+
+@section('content')
+<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
+    <livewire:web.burger-menu />
+    <livewire:web.header />
+    
+    <x-web.main-navigation theme="presseecho" />
+    
+    <div class="container mx-auto px-4">
+        <x-web.breadcrumb :items="[
+            ['label' => 'Themendossiers', 'url' => '/themendossiers'],
+            ['label' => 'KI & Innovation', 'url' => '/ki'],
+            ['label' => 'Artikel-Titel']
+        ]" />
+    </div>
+    
+    <x-web.page-header 
+        title="Die Zukunft der KI"
+        subtitle="Exklusive Einblicke">
+        <x-slot name="meta">
+            <span class="badge badge-primary">Interview</span>
+            <span>17. Oktober 2024</span>
+        </x-slot>
+    </x-web.page-header>
+    
+    <x-web.content-layout>
+        <x-slot name="sidebar">
+            <x-web.sidebar-widget title="Über den Autor">
+                <!-- Author Info -->
+            </x-web.sidebar-widget>
+        </x-slot>
+        
+        <article class="prose prose-lg">
+            <!-- Artikel-Content -->
+        </article>
+    </x-web.content-layout>
+    
+    <livewire:web.footer />
+</main>
+@endsection
+```
+
+### Beispiel 2: Kategorie-Übersicht
+
+```blade
+@extends('web.layouts.web-master')
+
+@section('content')
+<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
+    <livewire:web.burger-menu />
+    <livewire:web.header />
+    
+    <x-web.main-navigation theme="presseecho" />
+    
+    <div class="container mx-auto px-4">
+        <x-web.breadcrumb :items="[
+            ['label' => 'Themendossiers', 'url' => '/themendossiers'],
+            ['label' => 'KI & Innovation']
+        ]" />
+    </div>
+    
+    <x-web.page-header 
+        title="KI & Innovation"
+        subtitle="Alle Artikel zum Thema"
+        image="https://..." />
+    
+    <x-web.content-layout>
+        <x-slot name="sidebar">
+            <x-web.sidebar-widget title="Filter">
+                <!-- Filter-Optionen -->
+            </x-web.sidebar-widget>
+        </x-slot>
+        
+        <div class="grid md:grid-cols-2 gap-6">
+            @foreach ($articles as $article)
+                <x-web.article-card :article="$article" />
+            @endforeach
+        </div>
+    </x-web.content-layout>
+    
+    <livewire:web.footer />
+</main>
+@endsection
+```
+
+---
+
+## CSS-Klassen
+
+### Badge-Typen
+- `badge` - Basis-Badge
+- `badge-primary` - Primary-Farbe
+- `badge-secondary` - Secondary-Farbe
+- `badge-success` - Erfolg (Grün)
+- `badge-warning` - Warnung (Gelb)
+
+### Button-Typen
+- `btn-primary` - Primary-Button mit Gradient
+- `btn-secondary` - Secondary-Button
+- `pagination-btn` - Pagination-Button
+- `pagination-active` - Aktive Pagination-Seite
+
+### Card-Typen
+- `card` - Basis-Karte
+- `card-hover` - Karte mit Hover-Effekt
+- `highlight-card` - Highlight-Karte (Slider)
+
+### Layout-Klassen
+- `section-light-bg` - Heller Section-Hintergrund
+- `section-gradient-bg` - Gradient Section-Hintergrund
+- `page-header` - Page-Header-Container
+- `page-header-compact` - Kompakter Page-Header
+
+---
+
+## Theme-Anpassung
+
+Alle Komponenten respektieren die Theme-Variablen:
+
+```css
+:root {
+    --primary: /* HSL-Werte */
+    --secondary: /* HSL-Werte */
+    --color-primary: /* Hex-Werte */
+    --color-secondary: /* Hex-Werte */
+}
+```
+
+**Presseecho:**
+- Primary: `#345636` (Grün)
+- Secondary: `#6b8f71` (Hellgrün)
+
+**Businessportal24:**
+- Primary: `#cf3628` (Rot)
+- Secondary: `#f0834a` (Orange)
+
+---
+
+## Best Practices
+
+1. **Komponenten-Verwendung:**
+   - Nutzen Sie immer die wiederverwendbaren Komponenten
+   - Vermeiden Sie duplizierte HTML-Strukturen
+   - Verwenden Sie Props für dynamische Inhalte
+
+2. **CSS-Klassen:**
+   - Nutzen Sie die vordefinierten CSS-Klassen aus `shared-styles.css`
+   - Vermeiden Sie Inline-Styles, wo möglich
+   - Theme-spezifische Overrides in den jeweiligen Theme-CSS-Dateien
+
+3. **Datenstruktur:**
+   - Halten Sie sich an die definierten Array-Strukturen
+   - Verwenden Sie `@php`-Blöcke für Daten-Definitionen
+   - Dokumentieren Sie Custom-Properties
+
+4. **Accessibility:**
+   - Verwenden Sie semantische HTML-Tags
+   - Fügen Sie `aria-label` zu interaktiven Elementen hinzu
+   - Testen Sie die Keyboard-Navigation
+
+---
+
+## Support
+
+Bei Fragen zur Verwendung der Komponenten:
+- Siehe Beispiele unter `/resources/views/web/examples/`
+- Konsultieren Sie diese Dokumentation
+- Prüfen Sie die bestehenden Implementierungen in `presseecho.blade.php`
+