000

@extends('front.layout_alt')

@section('page_title', 'product_cat')

@section('content')

.pot-thumb img {
        width: 100%; /* Ensure the image takes up the full width of the container */
        height: 100%; /* Ensure the image takes up the full height of the container */
        object-fit: cover; /* Ensure the image covers the container without distortion */
        border-radius: 20px; /* Adds a curve to the edges of the image */
    }

.pot {
        margin-bottom: 20px; /* Add some spacing between posts */
    }
</style>

<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content">
                    <h1 class="page-name">Blog</h1>
                    <ol class="breadcrumb">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">blog</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>
@foreach($posts as $post)
<div class="col-md-6">
    <div class="pot">
        <div class="pot-thumb">
            <a href="blog-single.html">
                <img class="img-responsive" src="{{ asset('storage/media/category/' . $post->image) }}" alt="{{ $post->title }}">
            </a>
        </div>
        <h2 class="post-title"><a href="blog-single.html">{{ $post->title }}</a></h2>
        <div class="post-content">
            <p>{{ $post->description }}</p>
            <a href="{{ route('blog.single', ['id' => $post->id]) }}" class="btn btn-main" style="border-radius: 25px;">Read Blog Posts</a>
        </div>
    </div>
</div>

@endforeach

</div>

</form>
				    </div>

</div>

</div>
		</div>
	</div>
</section>

@endsection