| 
@extends('components.layouts.app')
 @section('content')
 <div class="container mx-auto px-4">
 <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Blog Posts</h1>
 <div class="grid gap-6 lg:grid-cols-2">
 @foreach ($posts as $post)
 <a href="{{ route('posts.show', $post->slug) }}" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:bg-gray-100 dark:hover:bg-gray-700">
 @if($post->featured_image)
 <div class="mb-4">
 <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-auto rounded-lg">
 </div>
 @endif
 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $post->title }}</h3>
 <p class="mt-2 text-gray-600 dark:text-gray-400">{{ Str::limit($post->content, 150) }}</p>
 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
 <span>By {{ $post->author->name }}</span> | <span>{{ $post->published_at->format('M d, Y') }}</span>
 </div>
 </a>
 @endforeach
 </div>
 <div class="mt-6">
 {{ $posts->links() }}
 </div>
 </div>
 @endsection
 
 |