@extends('layouts.main-app')
@section('title', 'Homepage')

@section('content')


    @include('layouts.navbar', [
        'headerTitle' => 'News and Insight',
        'headerDescription' => '',
    ])


    <!--<div class="relative w-full h-full ">-->
    <!--        <img src="{{ asset('assets/about/aboutbanner.png') }}" alt="Healthcare" class="absolute top-0 left-0 z-0 object-cover w-full h-full">-->

    <!--            <div class="relative flex flex-col items-center justify-center gap-2 py-32 md:flex-row"-->
    <!--            data-aos='fade-up'-->
    <!--            data-aos-duration='1100'-->
    <!--            >-->
    <!--                <span class="text-xl font-bold text-white sm:text-2xl md:text-3xl lg:text-4xl inter-font"-->

    <!--                >Home > </span>-->
    <!--                <span class="text-xl font-bold text-white sm:text-2xl md:text-3xl lg:text-4xl inter-font">News and Insight </span>-->

    <!--            </div>-->
    <!--    </div>-->

    <section class="container max-w-screen-lg px-2 mx-auto pb-28">
        <div class="flex flex-col items-center justify-center py-10">
            <h3 class="text-sm text-blue-500" data-aos="fade-up" data-aos-duration="1100">News and Insight</h3>
            <h2 class="mb-8 text-3xl font-bold text-center" data-aos="fade-up" data-aos-duration="1100"
                data-aos-delay="150">Health & Wellness</h2>
            <div class="grid grid-cols-1 gap-6 px-4 mt-10 md:grid-cols-3" data-aos='fade-up' data-aos-duration='1100'
                data-aos-delay='300'>
                {{-- newsupdate cards --}}
                @foreach ($news as $new)
                    @include('frontend.components.newsudpate.newscard', [
                        'title' => $new->title,
                        'slug_title' => $new->slug_title,
                        'image' => $new->image,
                        'date' => $new->created_at->format('M d, Y'), // Formatting the date properly
                    ])
                @endforeach


            </div>
            <div class="py-10" data-aos='fade-up' data-aos-duration='1100'>
                {{ $news->links('vendor.pagination.tailwind') }}
            </div>
        </div>
    </section>

@endsection