362 lines
23 KiB
PHP
362 lines
23 KiB
PHP
@extends('web.layouts.web-master')
|
|
|
|
@section('title', 'Presseecho - Ihr Magazin für Wirtschaft & Industrie')
|
|
|
|
@section('content')
|
|
|
|
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
|
<!-- Burger Menu Component -->
|
|
<livewire:web.burger-menu />
|
|
|
|
<!-- Header Component -->
|
|
<livewire:web.header />
|
|
|
|
<!-- Main Navigation for Presseecho -->
|
|
<nav class="sticky top-0 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm backdrop-blur-sm transition-colors duration-200">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center justify-center gap-8 h-14">
|
|
<a href="/themendossiers"
|
|
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
|
|
Themendossiers
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
<span class="text-gray-300 dark:text-gray-700">|</span>
|
|
<a href="/fachbereiche"
|
|
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
|
|
Fachbereiche
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
<span class="text-gray-300 dark:text-gray-700">|</span>
|
|
<a href="/experten"
|
|
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
|
|
Experten
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section - Recherche-fokussierte Überschrift -->
|
|
<section class="bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:via-gray-950 dark:to-[var(--color-secondary)]/10 py-12 border-b border-gray-100 dark:border-gray-900">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-4 leading-tight">
|
|
Exklusive Branchenanalysen & Fachmeldungen<br class="hidden md:block">
|
|
<span class="text-[var(--color-primary)]">für Ihre Recherche</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
Kuratierte Wirtschaftsinformationen für Journalisten, Analysten und Entscheider
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Block 1: Highlights der Woche (Hero Section) -->
|
|
<section class="relative overflow-hidden bg-white dark:bg-gray-950 py-12 md:py-16 animate-fade-in">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
|
|
<span class="w-2 h-10 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
|
Highlights der Woche
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 ml-5">Exklusive Einblicke und Top-Analysen</p>
|
|
</div>
|
|
|
|
<!-- Hero Article -->
|
|
<div class="card card-hover overflow-hidden group cursor-pointer">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<!-- Image -->
|
|
<div class="relative h-64 md:h-96 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
|
<img src="https://placehold.co/800x600/345636/ffffff?text=Hero+Interview"
|
|
alt="Hero Article"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-4 left-4">
|
|
<span class="badge badge-primary shadow-md">
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
|
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
Exklusiv-Interview
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex flex-col justify-center p-6 md:p-8">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
<span class="badge badge-secondary">KI & Innovation</span>
|
|
<span>•</span>
|
|
<time datetime="2024-10-17">17. Oktober 2024</time>
|
|
</div>
|
|
|
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4 group-hover:text-[var(--color-primary)] transition-colors">
|
|
Die Zukunft der KI im deutschen Mittelstand
|
|
</h3>
|
|
|
|
<p class="text-gray-700 dark:text-gray-300 text-base md:text-lg mb-6 line-clamp-3">
|
|
Im exklusiven Interview spricht Dr. Maria Schmidt, Leiterin des KI-Instituts München, über die Chancen und Herausforderungen der künstlichen Intelligenz für mittelständische Unternehmen.
|
|
</p>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<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">
|
|
MS
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">Dr. Maria Schmidt</p>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400">Expertin für KI & Innovation</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<a href="#" class="btn-primary inline-flex items-center gap-2">
|
|
Interview lesen
|
|
<svg class="w-4 h-4" 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>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Block 2: Neueste Analysen & Experten-Interviews -->
|
|
<section class="py-12 md:py-16 bg-gray-50/50 dark:bg-gray-900/50">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
|
|
<span class="w-1.5 h-8 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
|
Neueste Analysen & Experten-Interviews
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 ml-5">Fundierte Einschätzungen von Branchenexperten</p>
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Article Card 1 -->
|
|
<article class="card card-hover overflow-hidden group cursor-pointer">
|
|
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
|
<img src="https://placehold.co/600x400/345636/ffffff?text=Analyse+1"
|
|
alt="Analyse 1"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-3 left-3">
|
|
<span class="badge badge-primary shadow-md text-xs">Analyse</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
|
|
<span class="badge badge-secondary text-xs">Industrie 4.0</span>
|
|
<span>•</span>
|
|
<time datetime="2024-10-16">16. Okt 2024</time>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
|
Nachhaltigkeit in der Produktion: Neue Wege für die Industrie
|
|
</h3>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
|
|
Eine umfassende Analyse zeigt, wie deutsche Unternehmen den Wandel zur nachhaltigen Produktion meistern.
|
|
</p>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
|
TM
|
|
</div>
|
|
<span class="text-gray-600 dark:text-gray-400">Thomas Müller</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article Card 2 -->
|
|
<article class="card card-hover overflow-hidden group cursor-pointer">
|
|
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
|
<img src="https://placehold.co/600x400/345636/ffffff?text=Interview+2"
|
|
alt="Interview 2"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-3 left-3">
|
|
<span class="badge badge-primary shadow-md text-xs">Interview</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
|
|
<span class="badge badge-secondary text-xs">Digitalisierung</span>
|
|
<span>•</span>
|
|
<time datetime="2024-10-15">15. Okt 2024</time>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
|
Cybersecurity: "Prävention beginnt beim Menschen"
|
|
</h3>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
|
|
IT-Sicherheitsexperte Klaus Weber erklärt, warum Schulung wichtiger ist als Technik.
|
|
</p>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
|
KW
|
|
</div>
|
|
<span class="text-gray-600 dark:text-gray-400">Klaus Weber</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article Card 3 -->
|
|
<article class="card card-hover overflow-hidden group cursor-pointer">
|
|
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
|
<img src="https://placehold.co/600x400/345636/ffffff?text=Analyse+3"
|
|
alt="Analyse 3"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-3 left-3">
|
|
<span class="badge badge-primary shadow-md text-xs">Analyse</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
|
|
<span class="badge badge-secondary text-xs">Wirtschaft</span>
|
|
<span>•</span>
|
|
<time datetime="2024-10-14">14. Okt 2024</time>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
|
Fachkräftemangel: Wie Unternehmen gegensteuern können
|
|
</h3>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
|
|
Neue Strategien im Recruiting und der Mitarbeiterbindung zeigen erste Erfolge.
|
|
</p>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
|
AS
|
|
</div>
|
|
<span class="text-gray-600 dark:text-gray-400">Anna Schmidt</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Block 3: Im Fokus: Themendossiers -->
|
|
<section class="py-12 md:py-16 bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:to-[var(--color-secondary)]/10 border-y border-[var(--color-primary)]/10">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="mb-8 text-center">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
|
Im Fokus: Themendossiers
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400">Umfassende Recherchen zu den wichtigsten Branchenthemen</p>
|
|
</div>
|
|
|
|
<!-- Dossier Grid -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Dossier 1 -->
|
|
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
|
|
<div class="relative h-56 overflow-hidden">
|
|
<img src="https://placehold.co/600x400/345636/ffffff?text=KI+in+der+Industrie"
|
|
alt="KI Dossier"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 p-5">
|
|
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
|
|
12 Artikel
|
|
</span>
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
|
|
KI in der Industrie
|
|
</h3>
|
|
<p class="text-sm text-white/90 line-clamp-2">
|
|
Alle Facetten der künstlichen Intelligenz in Produktion und Logistik
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Dossier 2 -->
|
|
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
|
|
<div class="relative h-56 overflow-hidden">
|
|
<img src="https://placehold.co/600x400/345636/ffffff?text=Energiewende"
|
|
alt="Energiewende Dossier"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 p-5">
|
|
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
|
|
8 Artikel
|
|
</span>
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
|
|
Energiewende 2024
|
|
</h3>
|
|
<p class="text-sm text-white/90 line-clamp-2">
|
|
Wie Unternehmen die Transformation zur Klimaneutralität meistern
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Dossier 3 -->
|
|
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
|
|
<div class="relative h-56 overflow-hidden">
|
|
<img src="https://placehold.co/600x400/345636/ffffff?text=New+Work"
|
|
alt="New Work Dossier"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 p-5">
|
|
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
|
|
15 Artikel
|
|
</span>
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
|
|
New Work & Kultur
|
|
</h3>
|
|
<p class="text-sm text-white/90 line-clamp-2">
|
|
Moderne Arbeitsmodelle und ihre Auswirkungen auf Unternehmen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Block 4: Ausgewählte Fachmeldungen -->
|
|
<section class="py-12 md:py-16 bg-white dark:bg-gray-950">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
|
|
<span class="w-1.5 h-8 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
|
Ausgewählte Fachmeldungen
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 ml-5">Redaktionell kuratierte Pressemitteilungen aus Wirtschaft und Industrie</p>
|
|
</div>
|
|
|
|
<!-- Press Releases Grid -->
|
|
<livewire:web.press-releases-grid />
|
|
|
|
<!-- Load More Button -->
|
|
<div class="mt-12 text-center">
|
|
<button class="btn-primary px-8 py-3 text-base inline-flex items-center gap-2">
|
|
Weitere Meldungen laden
|
|
<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="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Component -->
|
|
<livewire:web.footer />
|
|
</main>
|
|
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* Domain-spezifische Color-Variablen für Inline-Styles */
|
|
:root {
|
|
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
|
|
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
|
|
}
|
|
|
|
/* Alpine.js Cloak */
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
@endpush
|