60 lines
3.6 KiB
PHP
60 lines
3.6 KiB
PHP
@if($announcements->count() > 0)
|
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="p-6 pb-4 border-b border-neutral/30">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="bg-primary/10 text-primary p-3 rounded-full shadow-md">
|
|
<x-ri-megaphone-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-color-base">{{ __('Announcements') }}</h2>
|
|
<p class="text-color-muted text-sm">Latest updates and news</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-4">
|
|
@foreach($announcements as $index => $announcement)
|
|
<a href="{{ route('announcements.show', $announcement) }}" wire:navigate
|
|
class="group block animate-fade-in-up" style="animation-delay: {{ $index * 0.1 }}s;">
|
|
<div class="bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 hover:border-primary/30 p-4 rounded-xl transition-all duration-300 hover:shadow-lg hover:scale-[1.02] relative overflow-hidden">
|
|
{{-- Content --}}
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex items-start gap-3 flex-1">
|
|
<div class="bg-primary/10 text-primary p-2 rounded-full shrink-0 group-hover:bg-primary/20 transition-colors duration-300">
|
|
<x-ri-newspaper-line class="size-4" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-semibold text-color-base group-hover:text-primary transition-colors duration-300 line-clamp-2 mb-1">
|
|
{{ $announcement->title }}
|
|
</h3>
|
|
<p class="text-color-muted text-sm line-clamp-2 leading-relaxed mb-2">
|
|
{{ $announcement->description }}
|
|
</p>
|
|
<div class="flex items-center gap-2 text-color-muted text-xs">
|
|
<x-ri-time-fill class="size-3" />
|
|
<span>{{ $announcement->published_at->diffForHumans() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-color-muted group-hover:text-primary transition-colors duration-300 shrink-0">
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover:translate-x-1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="p-6 pt-4 border-t border-neutral/30">
|
|
<a href="{{ route('announcements.index') }}" wire:navigate
|
|
class="group w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 hover:border-primary/30 text-color-base hover:text-primary px-6 py-3 rounded-xl font-medium transition-all duration-300 hover:shadow-lg flex items-center justify-center gap-2">
|
|
{{ __('dashboard.view_all') }}
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif |