@extends('components.main-app')

@section('title', 'News')

@section('content')
@include('components.navbar')
<script>
    AOS.init();
</script>
<div class="bg-center bg-cover oswald" style=" background-image: url('{{ url('/images/newsandevents.png') }}');">
    <div class="flex items-center justify-center">
        <div class="container mx-auto">
            <div class="py-40 ml-4 text-white md:ml-20">
                <h1 class="text-2xl font-bold lg:text-6xl" style="color:#00263e" ;>News and Events</h1>
            </div>
        </div>
    </div>
</div>

<div class="container mx-auto overflow-x-hidden oswald">
    <div class="grid grid-cols-1 my-20 lg:space-x-4 lg:grid-cols-2">
        <div data-aos="fade-right" class="overflow-x-hidden ">
            <a href="{{url('news_and_events_details')}}">
                <div class="grid grid-cols-1 p-4 my-4 space-x-4 md:p-8 md:grid-cols-2 hover:shadow-xl">
                    <div>
                        <img src="{{asset('images/news&event.png')}}" alt="">
                    </div>
                    <div class="flex flex-col space-y-2" style="color:#00263e">
                        <h3 class="text-2xl font-bold" style="color:#00263e">Lorem Ipsum Dolor</h3>
                        <div class="flex flex-row space-x-8">
                            <div class="flex flex-row items-center">
                                <i class='bx bxs-user'></i>
                                <p>Admin</p>
                            </div>
                            <div class="flex flex-row items-center">
                                <i class='bx bxs-calendar'></i>
                                <p>
                                    June 6, 2024
                                </p>
                            </div>
                        </div>
                        <p class="text-justify">
                            Sed ut dui nec leo mattis pharetra vitae non justo. Nam congue lorem ullamcorper quam consequat, sit amet porttitor elit eleifend. Morbi lobortis risus quis neque maximus bibendum. Sed convallis hendrerit justo, pretium iaculis lacus ullamcorper id. Ut scelerisque, massa at
                        </p>
                    </div>
                </div>
            </a>
            <a href="{{url('news_and_events_details')}}">
                <div class="grid grid-cols-1 p-4 my-4 space-x-4 md:p-8 md:grid-cols-2 hover:shadow-xl">
                    <div>
                        <img src="{{asset('images/news2.png')}}" alt="">
                    </div>
                    <div class="flex flex-col space-y-2" style="color:#00263e">
                        <h3 class="text-2xl font-bold" style="color:#00263e">Lorem Ipsum Dolor</h3>
                        <div class="flex flex-row space-x-8">
                            <div class="flex flex-row items-center">
                                <i class='bx bxs-user'></i>
                                <p>Admin</p>
                            </div>
                            <div class="flex flex-row items-center">
                                <i class='bx bxs-calendar'></i>
                                <p>
                                    June 6, 2024
                                </p>
                            </div>
                        </div>
                        <p class="text-justify">
                            Sed ut dui nec leo mattis pharetra vitae non justo. Nam congue lorem ullamcorper quam consequat, sit amet porttitor elit eleifend. Morbi lobortis risus quis neque maximus bibendum. Sed convallis hendrerit justo, pretium iaculis lacus ullamcorper id. Ut scelerisque,
                        </p>
                    </div>
                </div>
            </a>
            <a href="{{url('news_and_events_details')}}">
                <div class="grid grid-cols-1 p-4 my-4 space-x-4 md:p-8 md:grid-cols-2 hover:shadow-xl">

                    <div>
                        <img src="{{asset('images/news1.png')}}" alt="">
                    </div>
                    <div class="flex flex-col space-y-2" style="color:#00263e">
                        <h3 class="text-2xl font-bold" style="color:#00263e">Lorem Ipsum Dolor</h3>
                        <div class="flex flex-row space-x-8">
                            <div class="flex flex-row items-center">
                                <i class='bx bxs-user'></i>
                                <p>Admin</p>
                            </div>
                            <div class="flex flex-row items-center">
                                <i class='bx bxs-calendar'></i>
                                <p>
                                    June 6, 2024
                                </p>
                            </div>
                        </div>
                        <p class="text-justify">
                            Sed ut dui nec leo mattis pharetra vitae non justo. Nam congue lorem ullamcorper quam consequat, sit amet porttitor elit eleifend. Morbi lobortis risus quis neque maximus bibendum. Sed convallis hendrerit justo, pretium iaculis lacus ullamcorper id. Ut
                        </p>
                    </div>
                </div>
            </a>
        </div>
        <div data-aos="fade-left" class="mt-12 overflow-x-hidden ">
            <div class="flex justify-center ">
                <div class="max-w-lg px-10 border-2 border-black md:px-12 rounded-xl">
                    <h1 class="my-4 mb-8 text-2xl font-bold text-center" style="color:#00263e;">
                        Latest News and Events
                    </h1>
                    <div class="grid grid-cols-1 my-4 space-y-8">
                        <a href="{{url('news_and_events_details')}}">
                            <div class="flex flex-col md:flex-row">
                                <div class="flex justify-center">
                                    <img class="object-cover w-full h-40" src="{{asset('images/news1.png')}}" alt="">
                                </div>
                                <div class="ml-2 ">
                                    <h1 class="text-xl font-bold">Lorem Ipsum Dolor</h1>
                                    <div class="flex flex-row items-center">
                                        <i class='bx bxs-calendar'></i>
                                        <p>June 6,2024</p>
                                    </div>
                                </div>
                            </div>
                        </a>

                        <a href="{{url('news_and_events_details')}}">
                            <div class="flex flex-col md:flex-row">
                                <div class="flex justify-center">
                                    <img class="object-cover w-full h-40" src="{{asset('images/news1.png')}}" alt="">
                                </div>
                                <div class="ml-2 ">
                                    <h1 class="text-xl font-bold">Lorem Ipsum Dolor</h1>
                                    <div class="flex flex-row items-center">
                                        <i class='bx bxs-calendar'></i>
                                        <p>June 6,2024</p>
                                    </div>
                                </div>
                            </div>
                        </a>

                        <a href="{{url('news_and_events_details')}}">
                            <div class="flex flex-col md:flex-row">
                                <div class="flex justify-center">
                                    <img class="object-cover w-full h-40" src="{{asset('images/news1.png')}}" alt="">
                                </div>
                                <div class="ml-2 ">
                                    <h1 class="text-xl font-bold">Lorem Ipsum Dolor</h1>
                                    <div class="flex flex-row items-center">
                                        <i class='bx bxs-calendar'></i>
                                        <p>June 6,2024</p>
                                    </div>
                                </div>
                            </div>
                        </a>


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

@include('components.footer')

@endsection