117 lines
5.2 KiB
PHP
117 lines
5.2 KiB
PHP
@if(count($articles) > 0)
|
|
<div class="mx-auto container mt-8">
|
|
@php
|
|
$onIndexPage = Route::currentRouteName() === 'knowledgebase.index';
|
|
$displayedArticles = $onIndexPage ? $articles : $articles->take(3);
|
|
@endphp
|
|
|
|
{{-- Header Section --}}
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="bg-success/10 text-success p-3 rounded-full shadow-md">
|
|
<x-ri-book-open-fill class="size-6" />
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-color-base">{{ __('Documentation') }}</h1>
|
|
<p class="text-color-muted text-sm">{{ __('Explore guides, runbooks, and product tutorials.') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-2 text-color-muted">
|
|
<x-ri-time-fill class="size-4" />
|
|
<span class="text-sm">{{ count($articles) }} {{ Str::plural('article', count($articles)) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Documentation Grid --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($displayedArticles as $index => $article)
|
|
<div class="relative group bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-[1.02] overflow-hidden animate-fade-in-up" style="animation-delay: {{ $index * 0.1 }}s;">
|
|
{{-- Card Header --}}
|
|
<div class="p-6 pb-4">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="size-2 bg-success rounded-full animate-pulse"></div>
|
|
<span class="inline-flex items-center gap-1 text-xs font-medium text-success uppercase tracking-wide">
|
|
<x-ri-book-open-fill class="size-3" />
|
|
{{ $article->category->name ?? __('General') }}
|
|
</span>
|
|
</div>
|
|
<div class="text-color-muted group-hover:text-success transition-colors duration-300">
|
|
<x-ri-arrow-right-up-fill class="size-4 transform transition-transform duration-300 group-hover:scale-110" />
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-xl font-bold text-color-base mb-3 group-hover:text-success transition-colors duration-300 line-clamp-2">
|
|
{{ $article->title }}
|
|
</h2>
|
|
|
|
<div class="text-color-muted text-sm mb-4 line-clamp-3 leading-relaxed">
|
|
{{ $article->description }}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card Footer --}}
|
|
<div class="px-6 pb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-color-muted text-xs">
|
|
<x-ri-calendar-fill class="size-3" />
|
|
<span>{{ optional($article->published_at)->format('M d, Y') ?? $article->created_at->format('M d, Y') }}</span>
|
|
</div>
|
|
|
|
<a href="{{ route('knowledgebase.show', $article) }}" wire:navigate class="group/btn inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('general.view') }}
|
|
<x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover/btn:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Hover Overlay --}}
|
|
<div class="absolute inset-0 bg-gradient-to-br from-success/5 to-success/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
@if(!$onIndexPage)
|
|
{{-- View More Button --}}
|
|
<div class="mt-10 text-center">
|
|
<a href="{{ route('knowledgebase.index') }}" class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
|
|
{{ __('View More Articles') }}
|
|
<x-ri-arrow-right-line class="size-5 transform transition-transform duration-300 hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
<style>
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</div>
|
|
@endif
|