@extends('frontend.layouts.app')
@section('title', 'Reports')
@section('meta', 'Reports Meta Description')
@section('content')

    <div class="min-h-screen">
        <!-- banner-section -->
        <section class="relative top-[20px] lg:top-[60px]">
            <div class="">
                <img src="{{ asset(path: '/breadcrumb.jpg') }}" alt="Banner Image" class="!h-[100px] w-full object-cover " />
            </div>
            <div class="absolute w-full top-4">
                <div class="flex flex-col space-y-4 ml-10">
                    <h3 class="text-xl font-semibold text-primary">Reports</h3>
                    <div class="flex space-x-3 items-center text-base tracking-tight font-medium">
                        <a href="/" class="text-primary">Home</a>
                        <p class="text-primary text-base hover:cursor-pointer">></p>
                        <a href="/reports" class="text-primary">Reports</a>
                    </div>
                </div>
        </section>
        <!-- banner-section -->

        <div class="max-w-8xl mx-10 xl:mx-40 2xl:mx-auto mb-2 0">
            <section class="overflow-x-hidden">
                <div class="p-4 md:ml-8 lg:my-4 lg:mx-20 lg:mb-2 ">
                    <div class="flex flex-col items-center">
                        <p
                            class="inline-block px-3 py-px mb-2 text-sm font-semibold text-primary items-center align-center tracking-wider uppercase rounded-full bg-teal-accent-400 justify-center">
                            Latest Updates
                        </p>

                        <!-- Main Title -->
                        <p class="text-2xl text-primary font-bold md:text-3xl text-center">
                            Reports
                        </p>

                        <!-- Description -->
                        <p class="p-2 text-base text-gray-600 lg:text-lg text-center lg:max-w-4xl line-clamp-3">
                            Explore our detailed reports and research that highlight key findings, progress, and impact.
                        </p>

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

            <!-- Card part for our news and Article -->
            <div class="grid grid-cols-1 md:grid-cols-2 p-10 gap-10 justify-center">


                <div class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col lg:flex-row ">

                    <div class="p-5 flex-1"> <a href="#">
                            <p class="text-gray-500 font-medium font-sm">01 Aug–02 Aug, 2022</p>
                            <h5 class="mb-2  text-xl lg:text-2xl font-bold tracking-tight text-primary">
                                Training to Journalists on Climate Change and Watershed Management</h5>
                            <!-- <div class="flex justify-start">
                          <img src="{{ asset('assets/images/location-svgrepo-com.png') }}"
                          class="w-auto h-3 align-middle" alt="Location Icon">
                          <span>Halesi, Khotang</span>
                           </div> -->
                        </a>
                        <p class="mb-3 font-normal text-gray-700 ">Here are the biggest
                            enterprise technology acquisitions of 2021 so far, in reverse chronological order.
                        </p>
                        <a href="#"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-primary hover:text-primary border-2 border-primary  hover:bg-white  focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out ">
                            Read more
                            <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M1 5h12m0 0L9 1m4 4L9 9" />
                            </svg>
                        </a>
                    </div>

                </div>
                <div class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col lg:flex-row ">

                    <div class="p-5 flex-1"> <a href="#">
                            <p class="text-gray-500 font-medium font-sm">01 Aug–02 Aug, 2022</p>
                            <h5 class="mb-2  text-xl lg:text-2xl font-bold tracking-tight text-primary">
                                Training to Journalists on Climate Change and Watershed Management</h5>
                            <!-- <div class="flex justify-start">
                          <img src="{{ asset('assets/images/location-svgrepo-com.png') }}"
                          class="w-auto h-3 align-middle" alt="Location Icon">
                          <span>Halesi, Khotang</span>
                           </div> -->
                        </a>
                        <p class="mb-3 font-normal text-gray-700 ">Here are the biggest
                            enterprise technology acquisitions of 2021 so far, in reverse chronological order.
                        </p>
                        <a href="#"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-primary hover:text-primary border-2 border-primary  hover:bg-white  focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out ">
                            Read more
                            <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M1 5h12m0 0L9 1m4 4L9 9" />
                            </svg>
                        </a>
                    </div>

                </div>
                <div class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col lg:flex-row ">

                    <div class="p-5 flex-1"> <a href="#">
                            <p class="text-gray-500 font-medium font-sm">01 Aug–02 Aug, 2022</p>
                            <h5 class="mb-2  text-xl lg:text-2xl font-bold tracking-tight text-primary">
                                Training to Journalists on Climate Change and Watershed Management</h5>
                            <!-- <div class="flex justify-start">
                          <img src="{{ asset('assets/images/location-svgrepo-com.png') }}"
                          class="w-auto h-3 align-middle" alt="Location Icon">
                          <span>Halesi, Khotang</span>
                           </div> -->
                        </a>
                        <p class="mb-3 font-normal text-gray-700 ">Here are the biggest
                            enterprise technology acquisitions of 2021 so far, in reverse chronological order.
                        </p>
                        <a href="#"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-primary hover:text-primary border-2 border-primary  hover:bg-white  focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out ">
                            Read more
                            <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M1 5h12m0 0L9 1m4 4L9 9" />
                            </svg>
                        </a>
                    </div>

                </div>
                <div class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col lg:flex-row ">

                    <div class="p-5 flex-1"> <a href="#">
                            <p class="text-gray-500 font-medium font-sm">01 Aug–02 Aug, 2022</p>
                            <h5 class="mb-2  text-xl lg:text-2xl font-bold tracking-tight text-primary">
                                Training to Journalists on Climate Change and Watershed Management</h5>
                            <!-- <div class="flex justify-start">
                          <img src="{{ asset('assets/images/location-svgrepo-com.png') }}"
                          class="w-auto h-3 align-middle" alt="Location Icon">
                          <span>Halesi, Khotang</span>
                           </div> -->
                        </a>
                        <p class="mb-3 font-normal text-gray-700 ">Here are the biggest
                            enterprise technology acquisitions of 2021 so far, in reverse chronological order.
                        </p>
                        <a href="#"
                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-primary hover:text-primary border-2 border-primary  hover:bg-white  focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out ">
                            Read more
                            <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                            </svg>
                        </a>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush