citrus/resources/views/blog/partials/posts.blade.php

<div class="blog itemgrid grid-view !mt-0">
  <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
    @forelse($posts as $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/tb10.jpg');
        $blogUrl = route('blog.show', $post->slug);
        
        $colorMap = [
          'teknoloji-cozumleri' => '#54a8c7', // Blue
          'yapay-zeka' => '#f78b77',          // Coral/Red
          'muzik-teknolojileri' => '#fab758',  // Yellow
          'uygulama-gelistirme' => '#7cb798',  // Mint/Green
        ];
        $catColor = $colorMap[$categorySlug] ?? '#d16b86'; // default Elemis rose/pink
        
        // Comment count logic
        $commentCount = $post->comments_count ?? ($post->comments ? $post->comments->count() : 0);
        
        // Dynamic heart likes count scaled off view_count
        $likesCount = max(3, round(($post->view_count ?? 0) * 0.1) + ($post->id % 5));
      @endphp

      <div 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 h-full flex flex-col !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
          @if($post->featured_image || $post->featured_image_url)
            <figure class="card-img-top overlay overlay-1 group">
              <a href="{{ $blogUrl }}">
                <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" style="height: 240px; object-fit: cover; width: 100%;" 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 !text-white">{{ __('blog.read_more') }}</h5>
              </figcaption>
            </figure>
          @endif
          
          <div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px] flex flex-col justify-between">
            <div>
              <div class="post-header !mb-[.9rem]">
                @if($categoryName)
                  <div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
                    <a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" style="color: {{ $catColor }} !important;" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
                  </div>
                @endif
                <h2 class="post-title h3 post-title-clamp !mt-1 !mb-3">
                  <a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
                </h2>
              </div>
              
              <div class="!relative">
                <p class="post-excerpt !mb-0">{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 160) }}</p>
              </div>
            </div>
          </div>
          
          <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.75rem] !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>
              
              <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 }}</span>
                </a>
              </li>
              
              <li class="post-likes !ml-auto inline-block">
                <a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#">
                  <i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>
                  <span>{{ $likesCount }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    @empty
      <div class="w-full text-center py-12">
        <p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
      </div>
    @endforelse
  </div>
</div>

{{-- Dynamic Custom Pagination --}}
@if(method_exists($posts, 'links') && $posts->hasPages())
  <nav class="flex mt-8" aria-label="pagination">
    <ul class="pagination pagination-alt">
      {{-- Previous Page Link --}}
      @if ($posts->onFirstPage())
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
          </a>
        </li>
      @else
        <li class="page-item">
          <a class="page-link hover:!text-[#e31e24]" href="{{ $posts->previousPageUrl() }}" aria-label="Previous">
            <span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
          </a>
        </li>
      @endif

      {{-- Pagination Elements --}}
      @foreach ($posts->getUrlRange(1, $posts->lastPage()) as $page => $url)
        @if ($page == $posts->currentPage())
          <li class="page-item active"><a class="page-link" href="#">{{ $page }}</a></li>
        @else
          <li class="page-item"><a class="page-link hover:!text-[#e31e24]" href="{{ $url }}">{{ $page }}</a></li>
        @endif
      @endforeach

      {{-- Next Page Link --}}
      @if ($posts->hasMorePages())
        <li class="page-item">
          <a class="page-link hover:!text-[#e31e24]" href="{{ $posts->nextPageUrl() }}" aria-label="Next">
            <span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
          </a>
        </li>
      @else
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
          </a>
        </li>
      @endif
    </ul>
  </nav>
@endif