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

@section('content')


@include('layouts.navbar', [
    'headerTitle' => 'News and Insight',
     'headerDescription' => ''])
     
     
<div class="w-full  relative h-full ">
        <img src="{{asset('assets/about/aboutbanner.png')}}" alt="Healthcare" class="w-full h-full object-cover absolute top-0 left-0 z-0">
        
            <div class="flex flex-col md:flex-row gap-2 justify-center items-center relative py-32"
            data-aos='fade-up'
            data-aos-duration='1100'
            >
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font"
                
                >Home > </span>
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">News and Insight </span>

            </div>
    </div>

<section class="max-w-screen-lg mx-auto px-2 container pb-28" >
    <div class="py-10 flex flex-col justify-center items-center">
        <h3 class="text-blue-500 text-sm"
        data-aos="fade-up"
        data-aos-duration="1100"
        
        >News and Insight</h3>
        <h2 class="text-3xl font-bold text-center mb-8"
          data-aos="fade-up"
        data-aos-duration="1100"
        data-aos-delay="150"
        >Health & Wellness</h2>
        <div class="grid grid-cols-1 px-4 md:grid-cols-3  mt-10 gap-6"
        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,
                    "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