12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
|
|
@ -5,114 +5,155 @@
|
|||
'industry',
|
||||
'region',
|
||||
'date',
|
||||
'hasImage' => false,
|
||||
'hasPdf' => false,
|
||||
'companyLogo' => null,
|
||||
'contentType' => 'FACHMELDUNG', // ANALYSE, INTERVIEW, FACHMELDUNG
|
||||
'slug',
|
||||
'imageUrl' => null,
|
||||
])
|
||||
|
||||
<article class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-[var(--color-primary)]/20 hover:scale-[1.02] shadow-sm">
|
||||
<!-- Image Preview -->
|
||||
<div class="relative h-48 bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 overflow-hidden">
|
||||
@if($imageUrl)
|
||||
<img
|
||||
src="{{ $imageUrl }}"
|
||||
alt="{{ $title }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
@php
|
||||
// Map industry to Heroicon
|
||||
$industryIcons = [
|
||||
'IT & Digitalisierung' => '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[$industry] ?? 'building-office';
|
||||
$iconPath = "/heroicons/optimized/24/outline/{$iconName}.svg";
|
||||
|
||||
// Content Type Badge Classes
|
||||
$contentTypeClasses = match ($contentType) {
|
||||
'ANALYSE' => 'bg-[var(--color-primary)] text-white',
|
||||
'INTERVIEW' => 'bg-[var(--color-secondary)] text-white',
|
||||
default => 'bg-white/80 dark:bg-zinc-900/90 border border-[var(--color-primary)]/30',
|
||||
};
|
||||
|
||||
$badgeExtraClasses = $imageUrl ? 'shadow-md backdrop-blur-sm' : 'shadow-sm';
|
||||
@endphp
|
||||
|
||||
<a href="/release/{{ $slug }}" class="group block">
|
||||
<article
|
||||
class="bg-gradient-to-br from-[var(--color-white)] to-[var(--color-primary)]/3 dark:from-[var(--color-zinc-800)] dark:to-[var(--color-primary)]/3 rounded-xl border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/20 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-[var(--color-primary)]/30 hover:translate-y-[-2px] shadow-sm h-full flex flex-col">
|
||||
|
||||
@if ($imageUrl)
|
||||
{{-- Card mit Bild --}}
|
||||
<div
|
||||
class="relative h-46 bg-gradient-to-br from-zinc-100 to-zinc-50 dark:from-zinc-800 dark:to-zinc-900 overflow-hidden">
|
||||
<img src="{{ $imageUrl }}" alt="{{ $title }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
loading="lazy" />
|
||||
|
||||
{{-- Content Type Label --}}
|
||||
<div class="absolute top-4 left-4">
|
||||
<span
|
||||
class="inline-flex bg-primary/10 items-center gap-2 text-[11px] font-semibold px-3 py-1.5 {{ $contentTypeClasses }} {{ $badgeExtraClasses }} rounded-xl shadow-sm">
|
||||
<div class="industry-icon-badge">
|
||||
<img src="{{ $iconPath }}" alt="{{ $industry }}" class="h-4 w-4" />
|
||||
</div>
|
||||
<span class="font-medium text-zinc-700 dark:text-zinc-300">{{ $industry }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="p-7 flex flex-col flex-grow">
|
||||
{{-- Meta Info --}}
|
||||
<div class="flex justify-end left gap-2 mb-4 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
|
||||
<time datetime="{{ $date }}"
|
||||
class="text-zinc-600 dark:text-zinc-400">{{ $date }}</time>
|
||||
</div>
|
||||
|
||||
{{-- Title --}}
|
||||
<h3
|
||||
class="text-xl font-bold text-zinc-900 dark:text-zinc-100 line-clamp-2 mb-4 group-hover:text-[var(--color-primary)] transition-colors leading-tight">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
{{-- Teaser --}}
|
||||
<p class="text-[15px] leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-3 mb-5 flex-grow">
|
||||
{{ $teaser }}
|
||||
</p>
|
||||
|
||||
{{-- Company Footer --}}
|
||||
<div
|
||||
class="flex items-center justify-between pt-5 border-t border-[var(--color-primary)]/10 group-hover:border-[var(--color-primary)]/20 transition-all duration-300">
|
||||
<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">{{ $company }}</span>
|
||||
</div>
|
||||
<svg class="h-5 w-5 transition-transform group-hover:translate-x-2" 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>
|
||||
@else
|
||||
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5">
|
||||
<svg class="h-16 w-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
{{-- Card ohne Bild - Textbasiert mit farbigem Hintergrund --}}
|
||||
<div class="relative p-8 flex flex-col h-full">
|
||||
|
||||
<!-- Company Logo Overlay -->
|
||||
@if($companyLogo)
|
||||
<div class="absolute bottom-3 left-3 w-12 h-12 rounded-lg bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm shadow-md flex items-center justify-center border border-gray-200/50 dark:border-gray-700/50">
|
||||
<svg class="h-6 w-6 text-[var(--color-primary)]" 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>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-5">
|
||||
<!-- Company Name -->
|
||||
@if(!$companyLogo)
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-gray-600 dark:text-gray-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-gray-900 dark:text-gray-100">{{ $company }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 line-clamp-2 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<!-- Teaser -->
|
||||
<p class="text-[15px] leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 mb-4">
|
||||
{{ $teaser }}
|
||||
</p>
|
||||
|
||||
<!-- Meta Info -->
|
||||
<div class="flex flex-wrap items-center gap-2 mb-4 text-xs text-gray-600 dark:text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3" 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>
|
||||
{{ $industry }}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
{{ $region }}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
{{ $date }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Media Badges & CTA -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
@if($hasImage)
|
||||
<span class="inline-flex items-center gap-1 text-xs rounded-full px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] border border-[var(--color-primary)]/20">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Bild
|
||||
{{-- Content Type Label --}}
|
||||
<div class="mb-0 mt-0">
|
||||
<span
|
||||
class="inline-flex items-center gap-2 text-[11px] font-bold px-3 py-2 {{ $contentTypeClasses }} {{ $badgeExtraClasses }} rounded-xl">
|
||||
<div class="industry-icon-badge">
|
||||
<img src="{{ $iconPath }}" alt="{{ $industry }}" class="h-4 w-4" />
|
||||
</div>
|
||||
<span class="font-medium text-zinc-700 dark:text-zinc-300">{{ $industry }}</span>
|
||||
</span>
|
||||
@endif
|
||||
@if($hasPdf)
|
||||
<span class="inline-flex items-center gap-1 text-xs rounded-full px-3 py-1 bg-[var(--color-secondary)]/10 text-gray-700 border border-[var(--color-secondary)]/20">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</div>
|
||||
|
||||
{{-- Meta Info --}}
|
||||
<div class="flex justify-end left gap-2 mb-10 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
<time datetime="{{ $date }}"
|
||||
class="text-zinc-600 dark:text-zinc-400">{{ $date }}</time>
|
||||
</div>
|
||||
|
||||
{{-- Title - Prominenter ohne Bild --}}
|
||||
<h3
|
||||
class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-5 group-hover:text-[var(--color-primary)] transition-colors leading-tight">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
{{-- Teaser as Quote/Highlight --}}
|
||||
<blockquote
|
||||
class="text-base leading-relaxed text-zinc-700 dark:text-zinc-300 line-clamp-5 mb-6 flex-grow italic border-l-4 border-[var(--color-primary)] pl-4">
|
||||
{{ $teaser }}
|
||||
</blockquote>
|
||||
|
||||
{{-- Company Footer --}}
|
||||
<div
|
||||
class="flex items-center justify-between pt-5 border-t border-[var(--color-primary)]/10 group-hover:border-[var(--color-primary)]/20 transition-all duration-300">
|
||||
<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>
|
||||
PDF
|
||||
</span>
|
||||
@endif
|
||||
<span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ $company }}</span>
|
||||
</div>
|
||||
<svg class="h-5 w-5 transition-transform group-hover:translate-x-2" 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>
|
||||
<a
|
||||
href="/release/{{ $slug }}"
|
||||
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] transition-colors group-hover:text-[var(--color-primary)]"
|
||||
>
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endif
|
||||
</article>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue