235 lines
11 KiB
PHP
235 lines
11 KiB
PHP
@extends('web.layouts.web-master')
|
|
|
|
@section('title', 'Artikeldetails - 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', 'url' => '/themendossiers/ki-innovation'],
|
|
['label' => 'Die Zukunft der KI im deutschen Mittelstand'],
|
|
]" />
|
|
</div>
|
|
|
|
<!-- Page Header -->
|
|
<x-web.page-header title="Die Zukunft der KI im deutschen Mittelstand"
|
|
subtitle="Exklusive Einblicke in die Herausforderungen und Chancen der künstlichen Intelligenz">
|
|
<x-slot name="meta">
|
|
<div class="flex items-center gap-4 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<span class="badge badge-primary">Exklusiv-Interview</span>
|
|
<span>•</span>
|
|
<span>17. Oktober 2024</span>
|
|
<span>•</span>
|
|
<span>8 Min. Lesezeit</span>
|
|
</div>
|
|
</x-slot>
|
|
</x-web.page-header>
|
|
|
|
<!-- Content Layout mit Sidebar -->
|
|
<x-web.content-layout>
|
|
<x-slot name="sidebar">
|
|
<!-- Author Widget -->
|
|
<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)] flex items-center justify-center text-white font-semibold text-xl flex-shrink-0">
|
|
MS
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">Dr. Maria Schmidt</h4>
|
|
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2">Expertin für KI & Innovation</p>
|
|
<a href="#" class="text-sm text-[var(--color-primary)] hover:underline">Alle Artikel →</a>
|
|
</div>
|
|
</div>
|
|
</x-web.sidebar-widget>
|
|
|
|
<!-- Related Articles Widget -->
|
|
<x-web.sidebar-widget title="Verwandte Artikel">
|
|
<div class="space-y-4">
|
|
@foreach (range(1, 3) as $i)
|
|
<article class="group cursor-pointer">
|
|
<div class="flex gap-3">
|
|
<div
|
|
class="w-20 h-20 flex-shrink-0 rounded overflow-hidden bg-zinc-100 dark:bg-zinc-800">
|
|
<img src="https://placehold.co/200x200/345636/ffffff?text={{ $i }}"
|
|
alt="Artikel {{ $i }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h5
|
|
class="text-sm font-medium text-zinc-900 dark:text-zinc-100 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
|
|
Verwandter Artikel Titel {{ $i }}
|
|
</h5>
|
|
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">15. Okt 2024</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</x-web.sidebar-widget>
|
|
|
|
<!-- Tags Widget -->
|
|
<x-web.sidebar-widget title="Themen">
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach (['KI', 'Innovation', 'Mittelstand', 'Digitalisierung'] 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>
|
|
</x-slot>
|
|
|
|
<!-- Article Content -->
|
|
<article class="prose prose-lg dark:prose-invert max-w-none">
|
|
<div class="mb-8">
|
|
<img src="https://placehold.co/1200x600/345636/ffffff?text=Article+Header" alt="Artikelbild"
|
|
class="w-full rounded-xl">
|
|
</div>
|
|
|
|
<div class="article-content">
|
|
<p class="lead text-xl text-zinc-700 dark:text-zinc-300 mb-8">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua.
|
|
</p>
|
|
|
|
<h2>Einleitung</h2>
|
|
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat.</p>
|
|
|
|
<h2>Hauptteil</h2>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
pariatur.</p>
|
|
|
|
<blockquote class="border-l-4 border-[var(--color-primary)] pl-4 italic my-6">
|
|
"Künstliche Intelligenz wird die Art und Weise, wie wir arbeiten, grundlegend verändern."
|
|
<footer class="text-sm not-italic mt-2">— Dr. Maria Schmidt</footer>
|
|
</blockquote>
|
|
|
|
<h2>Fazit</h2>
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
laborum.</p>
|
|
</div>
|
|
|
|
<!-- Share Buttons -->
|
|
<div class="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
|
|
<h3 class="text-lg font-semibold mb-4">Artikel teilen</h3>
|
|
<div class="flex gap-3">
|
|
<button
|
|
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
|
LinkedIn
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
|
Twitter
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
|
E-Mail
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</x-web.content-layout>
|
|
|
|
<!-- Related Articles Section -->
|
|
<section class="py-12 bg-zinc-50 dark:bg-zinc-900">
|
|
<div class="container mx-auto px-4">
|
|
<x-web.section-header title="Das könnte Sie auch interessieren" subtitle="Weitere Artikel zum Thema"
|
|
size="medium" />
|
|
|
|
@php
|
|
$relatedArticles = [
|
|
[
|
|
'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=Related+1',
|
|
],
|
|
[
|
|
'badge' => 'Interview',
|
|
'badgeType' => 'primary',
|
|
'category' => 'Digitalisierung',
|
|
'categoryBadgeType' => 'secondary',
|
|
'date' => '2024-10-15',
|
|
'dateFormatted' => '15. Okt 2024',
|
|
'title' => 'Machine Learning in der Praxis',
|
|
'teaser' => 'Erfolgsgeschichten aus der deutschen Wirtschaft.',
|
|
'author' => 'Klaus Weber',
|
|
'authorInitials' => 'KW',
|
|
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Related+2',
|
|
],
|
|
[
|
|
'badge' => 'Analyse',
|
|
'badgeType' => 'primary',
|
|
'category' => 'Innovation',
|
|
'categoryBadgeType' => 'secondary',
|
|
'date' => '2024-10-14',
|
|
'dateFormatted' => '14. Okt 2024',
|
|
'title' => 'Zukunft der Automatisierung',
|
|
'teaser' => 'Chancen und Herausforderungen für Unternehmen.',
|
|
'author' => 'Anna Schmidt',
|
|
'authorInitials' => 'AS',
|
|
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Related+3',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($relatedArticles as $article)
|
|
<x-web.article-card :article="$article" />
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<livewire:web.footer />
|
|
</main>
|
|
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
:root {
|
|
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
|
|
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
|
|
}
|
|
|
|
.prose h2 {
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.prose p {
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.prose .lead {
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|
|
@endpush
|