88 lines
3.9 KiB
PHP
88 lines
3.9 KiB
PHP
@props(['highlight'])
|
|
|
|
@php
|
|
// Map industry to Heroicon
|
|
$industryIcons = [
|
|
'IT & Digitalisierung' => 'cpu-chip',
|
|
'KI & Innovation' => 'cpu-chip',
|
|
'Industrie & Technik' => 'cog-6-tooth',
|
|
'Finanzen & Versicherungen' => 'currency-dollar',
|
|
'Handel & E-Commerce' => 'shopping-cart',
|
|
'Bauen & Immobilien' => 'building-office',
|
|
'Mobilität & Logistik' => 'truck',
|
|
'Energie & Umwelt' => 'bolt',
|
|
'Medizin & Gesundheit' => 'heart',
|
|
'Personal & HR' => 'user-group',
|
|
'Marketing, PR & Medien' => 'megaphone',
|
|
'Recht & Steuern' => 'scale',
|
|
'Politik, Verbände & NGOs' => 'flag',
|
|
'Wissenschaft & Forschung' => 'beaker',
|
|
'Lifestyle' => 'sparkles',
|
|
'Tourismus & Kultur' => 'globe-alt',
|
|
];
|
|
|
|
$iconName = $industryIcons[$highlight['industry']] ?? 'building-office';
|
|
$iconPath = "/heroicons/optimized/24/outline/{$iconName}.svg";
|
|
@endphp
|
|
|
|
<a href="#" class="highlight-card-link">
|
|
<article class="highlight-card">
|
|
<div class="grid md:grid-cols-2">
|
|
<!-- Image -->
|
|
<div class="highlight-card-image">
|
|
<img src="{{ $highlight['image'] }}" alt="{{ $highlight['title'] }}"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-4 left-4">
|
|
<span class="highlight-badge badge badge-{{ $highlight['badgeType'] }}">
|
|
{{ $highlight['badge'] }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="highlight-card-content">
|
|
<div>
|
|
{{-- Meta Info --}}
|
|
<div class="highlight-meta">
|
|
<div class="flex items-center gap-2">
|
|
<div class="industry-icon-badge">
|
|
<img src="{{ $iconPath }}" alt="{{ $highlight['industry'] }}" class="h-4 w-4" />
|
|
</div>
|
|
<span
|
|
class="font-medium text-zinc-700 dark:text-zinc-300">{{ $highlight['industry'] }}</span>
|
|
</div>
|
|
<time datetime="{{ $highlight['date'] }}"
|
|
class="text-zinc-600 dark:text-zinc-400">{{ $highlight['date'] }}</time>
|
|
</div>
|
|
|
|
{{-- Title --}}
|
|
<h3 class="highlight-title">
|
|
{{ $highlight['title'] }}
|
|
</h3>
|
|
|
|
{{-- Teaser --}}
|
|
<p class="highlight-text">
|
|
{{ $highlight['text'] }}
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Footer --}}
|
|
<div class="highlight-footer">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-4 w-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
|
|
</path>
|
|
</svg>
|
|
<span
|
|
class="text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ $highlight['author'] }}</span>
|
|
</div>
|
|
<svg class="h-5 w-5 transition-transform group-hover:translate-x-1" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</a>
|