@extends('frontend.layouts.partials.app')
@section('title', 'About Us')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section>
        <div class="w-full relative">
            <div class="h-[320px] p-10 bg-[#dedbd2]">
                <div class="flex justify-between items-center">
                    <div class="flex flex-col space-y-8">
                        <h2 class="text-3xl font-bold text-[#005aab]">News and Notices</h2>
                        <div class="flex space-x-5 items-center">
                            <p class="text-xl font-bold text-[#005aab]">Home</p>
                            <p class="text-xl font-bold text-[#005aab]">/</p>
                            <p class="text-xl font-bold text-[#005aab]">News and Notices</p>

                        </div>
                    </div>
                    <img src="{{asset('assets/img/newsAndArtivles.png')}}" class="w-1/3 rounded-md" alt="">
                </div>
            </div>
        </div>

    </section>

    <section>
        <div class="px-10 py-4">
            <div class="flex space-x-5 items-center">
                <button
                    class="p-2 border-2 border-[#005aab] w-28 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    All
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    Press Release
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    Notice
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    Gallery
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    Events
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    Auction Notice
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    Discounts
                </button>
                <button
                    class="p-2 border-2 border-[#005aab] w-44 rounded-full text-[#005aab] hover:text-white hover:bg-[#005aab] duration-200 transition ease-in-out">
                    CSR
                </button>
            </div>

            <div class="my-8 flex justify-end">
                <div class="flex space-x-5 items-center">
                    <p>From</p>
                    <input type="date">
                </div>
                <div class="pl-5 flex space-x-5 items-center">
                    <p>To</p>
                    <input type="date">
                </div>
            </div>
        </div>


        <!-- all news -->
        <div class="px-10 pb-20">
            <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5">
                <!-- item 1 -->
                <div class="flex flex-col">
                    <div class="w-[350px] h-[270px]">
                        <img src="{{asset('assets/img/news-1.jpg')}}" class="h-full w-full" alt="">
                    </div>
                    <div class="w-[350px] pl-3 pb-5 border-2 rounded-b-md">
                        <div class="p-2 text-xl">
                            <p>March 7, 2015</p>
                        </div>
                        <p class="py-1 text-2xl font-bold">Standard Post Format</p>

                        <p class="max-w-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sunt
                            exercitationem doloremque illo provident. </p>

                        <button class="text-[#525866] underline mt-2">Read More</button>
                    </div>
                </div>
                <!-- item 1 -->
                <div class="flex flex-col">
                    <div class="w-[350px] h-[270px]">
                        <img src="{{asset('assets/img/news-1.jpg')}}" class="h-full w-full" alt="">
                    </div>
                    <div class="w-[350px] pl-3 pb-5 border-2 rounded-b-md">
                        <div class="p-2 text-xl">
                            <p>March 7, 2015</p>
                        </div>
                        <p class="py-1 text-2xl font-bold">Standard Post Format</p>

                        <p class="max-w-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sunt
                            exercitationem doloremque illo provident. </p>

                        <button class="text-[#525866] underline mt-2">Read More</button>
                    </div>
                </div>
                <!-- item 1 -->
                <div class="flex flex-col">
                    <div class="w-[350px] h-[270px]">
                        <img src="{{asset('assets/img/news-1.jpg')}}" class="h-full w-full" alt="">
                    </div>
                    <div class="w-[350px] pl-3 pb-5 border-2 rounded-b-md">
                        <div class="p-2 text-xl">
                            <p>March 7, 2015</p>
                        </div>
                        <p class="py-1 text-2xl font-bold">Standard Post Format</p>

                        <p class="max-w-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sunt
                            exercitationem doloremque illo provident. </p>

                        <button class="text-[#525866] underline mt-2">Read More</button>
                    </div>
                </div>
                <!-- item 1 -->
                <div class="flex flex-col">
                    <div class="w-[350px] h-[270px]">
                        <img src="{{asset('assets/img/news-1.jpg')}}" class="h-full w-full" alt="">
                    </div>
                    <div class="w-[350px] pl-3 pb-5 border-2 rounded-b-md">
                        <div class="p-2 text-xl">
                            <p>March 7, 2015</p>
                        </div>
                        <p class="py-1 text-2xl font-bold">Standard Post Format</p>

                        <p class="max-w-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sunt
                            exercitationem doloremque illo provident. </p>

                        <button class="text-[#525866] underline mt-2">Read More</button>
                    </div>
                </div>
                <!-- item 1 -->
                <div class="flex flex-col">
                    <div class="w-[350px] h-[270px]">
                        <img src="{{asset('assets/img/news-1.jpg')}}" class="h-full w-full" alt="">
                    </div>
                    <div class="w-[350px] pl-3 pb-5 border-2 rounded-b-md">
                        <div class="p-2 text-xl">
                            <p>March 7, 2015</p>
                        </div>
                        <p class="py-1 text-2xl font-bold">Standard Post Format</p>

                        <p class="max-w-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sunt
                            exercitationem doloremque illo provident. </p>

                        <button class="text-[#525866] underline mt-2">Read More</button>
                    </div>
                </div>
                <!-- item 1 -->
                <div class="flex flex-col">
                    <div class="w-[350px] h-[270px]">
                        <img src="{{asset('assets/img/news-1.jpg')}}" class="h-full w-full" alt="">
                    </div>
                    <div class="w-[350px] pl-3 pb-5 border-2 rounded-b-md">
                        <div class="p-2 text-xl">
                            <p>March 7, 2015</p>
                        </div>
                        <p class="py-1 text-2xl font-bold">Standard Post Format</p>

                        <p class="max-w-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sunt
                            exercitationem doloremque illo provident. </p>

                        <button class="text-[#525866] underline mt-2">Read More</button>
                    </div>
                </div>

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

@endsection