truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: kariyer formu, mobil offcanvas menu ve blog modulu iyilestirmeleri

Browse Source
This commit is contained in:
Muhammet Güler
2026-03-10 18:50:23 +03:00
parent f4f601a492
commit 4924cb0dc8
25 changed files with 1220 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/blog/index.blade.php
+189 -163
View File
@@ -21,172 +21,23 @@
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="blog classic-view !mt-[-7rem]">
@forelse($posts as $index => $post)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : '';
@endphp
@if($index < 3)
{{-- İlk 3 blog yazısı classic-view formatında --}}
<article class="post !mb-8">
<div class="card">
@if($post->featured_image_url)
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover" rel="category">{{ $categoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title !mt-1 !leading-[1.35] !mb-0">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="!relative">
<p>{{ $excerpt }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($authorName)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ __('blog.by') }} {{ $authorName }}</span>
</a>
</li>
@endif
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $commentCount }} {{ __('blog.comments') }}</span>
</a>
</li>
@endif
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /.post -->
@endif
@empty
<div class="text-center py-12">
<p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
</div>
@endforelse
<!-- Category Filter -->
@if(isset($categories) && $categories->count() > 0)
<div class="flex flex-wrap justify-center !mb-10 gap-2 blog-filter-menu">
<a href="#" class="category-filter-btn active !text-[0.8rem] !font-bold !uppercase !tracking-[0.02rem] !px-4 !py-2 !rounded-full !border !border-[#e31e24] !bg-[#e31e24] !text-white hover:!bg-[#c8191f] hover:!border-[#c8191f] transition-colors" data-category="">
{{ __('blog.all_categories', ['default' => 'Tümü']) }}
</a>
@foreach($categories as $category)
<a href="#" class="category-filter-btn !text-[0.8rem] !font-bold !uppercase !tracking-[0.02rem] !px-4 !py-2 !rounded-full !border !border-[#eef2f6] !bg-[#eef2f6] !text-[#343f52] hover:!bg-[#e31e24] hover:!text-white hover:!border-[#e31e24] transition-colors" data-category="{{ $category->slug }}">
{{ $category->name }}
</a>
@endforeach
</div>
<!-- /.blog -->
@if($posts->count() > 3)
<div class="blog itemgrid grid-view">
<div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
@foreach($posts as $index => $post)
@if($index >= 3)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
@endphp
<article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card">
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover" rel="category">{{ $categoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="!relative">
<p>{{ \Illuminate\Support\Str::limit($excerpt, 120) }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>{{ $commentCount }}
</a>
</li>
@endif
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /.post -->
@endif
@endforeach
</div>
<!-- /.isotope -->
</div>
<!-- /.blog itemgrid -->
@endif
{{-- Pagination --}}
@if(method_exists($posts, 'links') && $posts->hasPages())
<div class="mt-8">
{{ $posts->links() }}
</div>
@endif
<div id="blog-posts-container" class="relative min-h-[400px]">
@include('blog.partials.posts')
</div>
</div>
<!-- /column -->
</div>
@@ -194,4 +45,179 @@
</div>
<!-- /.container -->
</div>
@push('styles')
<style>
/* Loading Overlay for AJAX Requests */
.blog-loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
z-index: 10;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.blog-loading-overlay.active {
opacity: 1;
pointer-events: all;
}
.blog-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #e31e24;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('blog-posts-container');
const filterBtns = document.querySelectorAll('.category-filter-btn');
// Create loading overlay
const overlay = document.createElement('div');
overlay.className = 'blog-loading-overlay';
overlay.innerHTML = '<div class="blog-spinner"></div>';
container.appendChild(overlay);
function fetchPosts(url) {
overlay.classList.add('active');
container.style.minHeight = container.offsetHeight + 'px'; // Maintain height during load
// Add AJAX header
fetch(url, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'text/html'
}
})
.then(response => response.text())
.then(html => {
// Update the posts container with new HTML
container.innerHTML = html;
// Re-append the overlay so it's ready for the next request
container.appendChild(overlay);
// Re-bind pagination links
bindPaginationLinks();
// Reinitialize any necessary plugins here (e.g. tooltips or image loaders if any)
// Update URL and History
window.history.pushState({html: html}, '', url);
// Smooth scroll to top of blog section
document.querySelector('.blog-filter-menu').scrollIntoView({ behavior: 'smooth', block: 'start' });
setTimeout(() => {
overlay.classList.remove('active');
container.style.minHeight = 'auto'; // Reset min-height safely
}, 300);
})
.catch(error => {
console.error('Error fetching posts:', error);
overlay.classList.remove('active');
});
}
function bindPaginationLinks() {
const paginationLinks = container.querySelectorAll('.pagination-container a, .pagination a');
paginationLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
fetchPosts(this.href);
});
});
}
// Bind Filter Buttons
filterBtns.forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
// Update active state
filterBtns.forEach(b => {
b.classList.remove('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
b.classList.add('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
});
this.classList.remove('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
this.classList.add('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
const category = this.getAttribute('data-category');
// Construct URL
const url = new URL(window.location.href);
if (category) {
url.searchParams.set('category', category);
} else {
url.searchParams.delete('category');
}
// Reset to page 1 on category change
url.searchParams.delete('page');
fetchPosts(url.toString());
});
});
// Handle browser back/forward buttons
window.addEventListener('popstate', function(e) {
if (e.state && e.state.html) {
container.innerHTML = e.state.html;
container.appendChild(overlay);
bindPaginationLinks();
// Update active filter button based on URL
const urlParams = new URLSearchParams(window.location.search);
const currentCategory = urlParams.get('category') || '';
filterBtns.forEach(b => {
b.classList.remove('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
b.classList.add('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
if (b.getAttribute('data-category') === currentCategory) {
b.classList.remove('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
b.classList.add('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
}
});
} else {
// Fallback for full page reload for history items without state
window.location.reload();
}
});
// Initial binding of pagination links that are on page load
bindPaginationLinks();
// Set initial active state based on URL
const urlParams = new URLSearchParams(window.location.search);
const initialCategory = urlParams.get('category') || '';
if (initialCategory) {
const activeBtn = Array.from(filterBtns).find(btn => btn.getAttribute('data-category') === initialCategory);
if (activeBtn) {
filterBtns.forEach(b => {
b.classList.remove('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
b.classList.add('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
});
activeBtn.classList.remove('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
activeBtn.classList.add('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
}
}
});
</script>
@endpush
@endsection
resources/views/blog/partials/posts.blade.php
+166
View File
@@ -0,0 +1,166 @@
<div class="blog classic-view !mt-[-7rem]">
@forelse($posts as $index => $post)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : '';
@endphp
@if($index < 3)
{{-- İlk 3 blog yazısı classic-view formatında --}}
<article class="post !mb-8">
<div class="card">
@if($post->featured_image_url)
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title !mt-1 !leading-[1.35] !mb-0">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="!relative">
<p>{{ $excerpt }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($authorName)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ __('blog.by') }} {{ $authorName }}</span>
</a>
</li>
@endif
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $commentCount }} {{ __('blog.comments') }}</span>
</a>
</li>
@endif
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /.post -->
@endif
@empty
<div class="text-center py-12">
<p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
</div>
@endforelse
</div>
<!-- /.blog -->
@if($posts->count() > 3)
<div class="blog itemgrid grid-view">
<div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
@foreach($posts as $index => $post)
@if($index >= 3)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
$excerpt = method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '');
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
@endphp
<article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card">
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="!relative">
<p>{{ \Illuminate\Support\Str::limit($excerpt, 120) }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>{{ $commentCount }}
</a>
</li>
@endif
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /.post -->
@endif
@endforeach
</div>
<!-- /.isotope -->
</div>
<!-- /.blog itemgrid -->
@endif
{{-- Pagination --}}
@if(method_exists($posts, 'links') && $posts->hasPages())
<div class="mt-8 pagination-container">
{{ $posts->links() }}
</div>
@endif