231 lines
12 KiB
PHP
231 lines
12 KiB
PHP
@extends('web.layouts.web-master')
|
|
|
|
@section('title', 'KI & Innovation - Themendossier - Presseecho')
|
|
|
|
@section('content')
|
|
|
|
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
|
|
<!-- Burger Menu & Header -->
|
|
<livewire:web.burger-menu />
|
|
<livewire:web.header />
|
|
|
|
<!-- Main Navigation -->
|
|
<x-web.main-navigation theme="presseecho" />
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="container mx-auto px-4">
|
|
<x-web.breadcrumb :items="[['label' => 'Themendossiers', 'url' => '/themendossiers'], ['label' => 'KI & Innovation']]" />
|
|
</div>
|
|
|
|
<!-- Page Header with Image -->
|
|
<x-web.page-header title="KI & Innovation"
|
|
subtitle="Alle Facetten der künstlichen Intelligenz in Produktion und Logistik"
|
|
image="https://placehold.co/800x600/345636/ffffff?text=KI+Header">
|
|
<x-slot name="meta">
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-1 bg-white dark:bg-zinc-800 rounded-full text-sm font-medium">
|
|
<svg class="w-4 h-4 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
|
</path>
|
|
</svg>
|
|
<span>42 Artikel</span>
|
|
</div>
|
|
</x-slot>
|
|
</x-web.page-header>
|
|
|
|
<!-- Filter Bar -->
|
|
<section class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 py-4">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center justify-between gap-4 flex-wrap">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Sortieren:</span>
|
|
<select
|
|
class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
|
|
<option>Neueste zuerst</option>
|
|
<option>Älteste zuerst</option>
|
|
<option>Meistgelesen</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-zinc-600 dark:text-zinc-400">Ansicht:</span>
|
|
<button class="p-2 rounded bg-[var(--color-primary)] text-white">
|
|
<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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-2 rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300">
|
|
<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="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Content Layout -->
|
|
<x-web.content-layout>
|
|
<x-slot name="sidebar">
|
|
<!-- Filter Widget -->
|
|
<x-web.sidebar-widget title="Filter">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h4 class="font-medium text-sm mb-2">Content-Typ</h4>
|
|
<div class="space-y-2">
|
|
@foreach (['Alle', 'Interview', 'Analyse', 'Fachmeldung'] as $type)
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" {{ $type === 'Alle' ? 'checked' : '' }}
|
|
class="rounded border-zinc-300">
|
|
<span class="text-sm">{{ $type }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-medium text-sm mb-2">Zeitraum</h4>
|
|
<select
|
|
class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
|
|
<option>Letzte 7 Tage</option>
|
|
<option>Letzter Monat</option>
|
|
<option>Letztes Jahr</option>
|
|
<option>Alle</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</x-web.sidebar-widget>
|
|
|
|
<!-- Popular Tags -->
|
|
<x-web.sidebar-widget title="Beliebte Themen">
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach (['Machine Learning', 'Deep Learning', 'Automatisierung', 'IoT', 'Big Data', 'Cloud Computing'] as $tag)
|
|
<a href="#"
|
|
class="px-3 py-1 text-sm bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 rounded-full hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
|
{{ $tag }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</x-web.sidebar-widget>
|
|
|
|
<!-- Newsletter -->
|
|
<x-web.sidebar-widget title="Newsletter">
|
|
<p class="text-sm mb-4">Bleiben Sie auf dem Laufenden mit unserem wöchentlichen Newsletter.</p>
|
|
<form class="space-y-3">
|
|
<input type="email" placeholder="Ihre E-Mail"
|
|
class="w-full px-4 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
|
|
<button type="submit" class="w-full btn-primary py-2 text-sm">
|
|
Anmelden
|
|
</button>
|
|
</form>
|
|
</x-web.sidebar-widget>
|
|
</x-slot>
|
|
|
|
<!-- Articles Grid -->
|
|
<div class="space-y-8">
|
|
<!-- Featured Article -->
|
|
<article class="card card-hover overflow-hidden group cursor-pointer">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="relative h-64 md:h-full overflow-hidden bg-zinc-100 dark:bg-zinc-800">
|
|
<img src="https://placehold.co/800x600/345636/ffffff?text=Featured" alt="Featured"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
<div class="absolute top-4 left-4">
|
|
<span class="badge badge-primary shadow-md">Featured</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400 mb-3">
|
|
<span class="badge badge-secondary text-xs">Exklusiv-Interview</span>
|
|
<span>•</span>
|
|
<time>17. Oktober 2024</time>
|
|
</div>
|
|
<h3
|
|
class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-3 group-hover:text-[var(--color-primary)] transition-colors">
|
|
Die Zukunft der KI im deutschen Mittelstand
|
|
</h3>
|
|
<p class="text-zinc-700 dark:text-zinc-300 line-clamp-3">
|
|
Im exklusiven Interview spricht Dr. Maria Schmidt über die Chancen und Herausforderungen
|
|
der künstlichen Intelligenz für mittelständische Unternehmen.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-4">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-sm">
|
|
MS
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">Dr. Maria Schmidt</p>
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400">Expertin für KI</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Articles Grid -->
|
|
@php
|
|
$articles = array_fill(0, 9, [
|
|
'badge' => 'Analyse',
|
|
'badgeType' => 'primary',
|
|
'category' => 'KI & Innovation',
|
|
'categoryBadgeType' => 'secondary',
|
|
'date' => '2024-10-16',
|
|
'dateFormatted' => '16. Okt 2024',
|
|
'title' => 'KI-Strategien für den Mittelstand',
|
|
'teaser' => 'Wie mittelständische Unternehmen erfolgreich KI implementieren.',
|
|
'author' => 'Thomas Müller',
|
|
'authorInitials' => 'TM',
|
|
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Article',
|
|
]);
|
|
@endphp
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
@foreach ($articles as $article)
|
|
<x-web.article-card :article="$article" />
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
|
|
<div class="flex items-center gap-2">
|
|
<button class="pagination-btn pagination-nav disabled:opacity-50" disabled>
|
|
<svg class="h-5 w-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 class="pagination-btn pagination-active">1</button>
|
|
<button class="pagination-btn">2</button>
|
|
<button class="pagination-btn">3</button>
|
|
<span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
|
|
<button class="pagination-btn">10</button>
|
|
<button class="pagination-btn pagination-nav">
|
|
<svg class="h-5 w-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>
|
|
</nav>
|
|
</div>
|
|
</x-web.content-layout>
|
|
|
|
<!-- Footer -->
|
|
<livewire:web.footer />
|
|
</main>
|
|
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
:root {
|
|
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
|
|
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
|
|
}
|
|
</style>
|
|
@endpush
|