         <article class="flex flex-col shadow my-5">
                <!-- Article Image -->
                <a href="{{route('view', $post)}}" class="hover:opacity-75">
                    <img src="{{$post->getThumbnail()}}" class="w-full h-40 object-cover">
                </a>
                <div class="bg-white flex flex-col justify-start p-4">

            @foreach($post->categories as $category)
                <p class="text-blue-700 text-sm font-bold uppercase pb-2">
                    {{$category->title}}
                </p>
            @endforeach

            <a href="{{route('view', $post)}}" class="text-3xl font-bold hover:text-gray-700 pb-3">
                    {{$post->title}}
            </a>
                    <p class="text-sm pb-3 flex items-center space-x-2 text-gray-600">
                        <i class="fas fa-calendar-alt"></i> 
                        <span>{{$post->getFormattedDate()}}</span>
                        <i class="fas fa-user ml-4"></i> 
                        <a href="#" class="font-semibold hover:text-gray-800">{{$post->user->name}}</a>
                        <!-- Total Comments -->
                        <i class="fas fa-comments ml-4"></i>
                        <span>{{ $post->comments->count() + $post->comments->sum(fn($comment) => $comment->replies->count()) }}</span>
                    </p>
                    <a href="{{route('view', $post)}}" class="pb-3">{!! $post->ShortBody() !!}</a>
                    <a href="{{ route('view', $post) }}" 
   class="uppercase text-gray-800 hover:text-blue-800 transform transition duration-300 hover:scale-105">
   Continue Reading <i class="fas fa-arrow-right"></i>
                  </a>
                </div>
            </article>