<x-layouts.app-layout :page="$page">

    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">{{ $page->title }}</h1>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="container py-5">
        <h1 class="text-center mb-5 fw-bold">@lang('Latest News')</h1>
        <div class="row row-cols-1 row-cols-md-3 g-4">

            <!-- News Card 1 -->
            @foreach ($news as $new)
                <div class="col">
                    <div class="card h-100 shadow-sm border-0 rounded-3">
                        <img src="{{ asset('storage/' . $new->image) }}" class="card-img-top" alt="News Image 1">
                        <div class="card-body">
                            <h5 class="card-title">{{ $new->title }}</h5>
                            <p class="card-text text-muted">
                                {{ $new->short_description }}
                            </p>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <small class="text-secondary">
                                {{ $new->date ? $new->date->format('F d, Y') : '' }}
                            </small>

                        </div>
                        <a href="{{ route('new', $new) }}" class="btn btn-primary mt-auto">Read More</a>
                    </div>
                </div>
            @endforeach


        </div>
    </div>
</x-layouts.app-layout>
