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

    <section>
        <div class="h-[300px] px-10">
            <div class="flex justify-between items-center">
                <h3 class="text-3xl font-semibold text-[#005aab]">
                    Goodwill Finance News
                </h3>
                <img src="{{asset('assets/img/News-Image-3.jpg')}}" alt=""/>
            </div>
        </div>
    </section>

    <section>
        <div class="px-10 flex space-x-10 items-center">
            <div>
                <img src="{{asset('assets/img/News-Image-1.jpg')}}" class="pr-10 w-[90%] rounded-xl" alt=""/>

                <p class="text-[#828282] mt-8">Feb 08,2024</p>

                <p class="text-2xl text-[#222] font-semibold mt-4">
                    Standard Post Format
                </p>

                <p class="max-w-2xl mt-5 text-[#444]">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt
                    tempora laudantium molestiae. Libero a error id dicta impedit rerum!
                    Accusantium consectetur illo tempora velit consequatur, sit earum
                    omnis inventore, voluptas vel rerum temporibus ex dignissimos
                    assumenda pariatur neque explicabo autem.
                </p>

                <div class="mt-5 flex space-x-8">
                    <img src="{{asset('assets/img/quote.jpg')}}" alt=""/>
                    <p class="text-[#818080] text-xl">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Molestiae, incidunt!
                    </p>
                </div>

                <p class="max-w-3xl mt-5 text-[#444]">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ea
                    iure culpa odio quasi voluptate nemo corporis et dolor, ullam
                    consequuntur eveniet! Quos dolore, saepe quas suscipit nam
                    voluptatibus repellat neque corrupti amet, placeat provident error
                    possimus tenetur numquam laborum! Lorem ipsum dolor sit amet
                    consectetur adipisicing elit. Porro itaque ad quia fuga similique
                    expedita sed adipisci, aut iusto nihil.
                </p>
                <p class="max-w-3xl mt-5 text-[#444]">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ea
                    iure culpa odio quasi voluptate nemo corporis et dolor, ullam
                    consequuntur eveniet! Quos dolore, saepe quas suscipit nam
                    voluptatibus repellat neque corrupti amet, placeat provident error
                    possimus tenetur numquam laborum! Lorem ipsum dolor sit amet
                    consectetur adipisicing elit. Porro itaque ad quia fuga similique
                    expedita sed adipisci, aut iusto nihil.
                </p>
                <div class="mt-5 grid gap-6 grid-cols-2">
                    <div class="flex space-x-5 items-center">
                        <img src="{{asset('assets/img/check2.png')}}" class="w-5" alt=""/>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                    </div>
                    <div class="flex space-x-5 items-center">
                        <img src="{{asset('assets/img/check2.png')}}" class="w-5" alt=""/>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                    </div>
                    <div class="flex space-x-5 items-center">
                        <img src="{{asset('assets/img/check2.png')}}" class="w-5" alt=""/>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                    </div>
                    <div class="flex space-x-5 items-center">
                        <img src="{{asset('assets/img/check2.png')}}" class="w-5" alt=""/>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="bg-[#f3f4f6] w-[550px] rounded-xl p-5">
                    <div class="flex justify-between">
                        <p class="text-[#023f88] text-base font-semibold">Recent Posts</p>
                        <p class="text-[#023f88] text-base font-semibold">
                            View All Posts
                        </p>
                    </div>

                    <!--  -->
                    <div class="mt-8 bg-white p-4 rounded-2xl shadow-xl">
                        <div class="flex space-x-10">
                            <div class="w-[66.14px] h-[66.14px]">
                                <img src="{{asset('assets/img/news-2.jpg')}}" class="w-full h-full" alt=""/>
                            </div>

                            <div class="flex flex-col space-y-1">
                                <p class="flex space-x-3 items-center">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                         viewBox="0 0 1024 1024" height="1em" width="1em"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                        <path
                                            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
                                    </svg>
                                    <span>11 Feb, 2024</span>
                                </p>
                                <p class="text-sm">
                                    शाखारहित बैकिङ्ग सेवा अबरुद्ध हुने सम्बन्धी सूचना
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mt-8 bg-white p-4 rounded-2xl shadow-xl">
                        <div class="flex space-x-10">
                            <div class="w-[66.14px] h-[66.14px]">
                                <img src="{{asset('assets/img/news-2.jpg')}}" class="w-full h-full" alt=""/>
                            </div>

                            <div class="flex flex-col space-y-1">
                                <p class="flex space-x-3 items-center">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                         viewBox="0 0 1024 1024" height="1em" width="1em"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                        <path
                                            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
                                    </svg>
                                    <span>11 Feb, 2024</span>
                                </p>
                                <p class="text-sm">
                                    शाखारहित बैकिङ्ग सेवा अबरुद्ध हुने सम्बन्धी सूचना
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mt-8 bg-white p-4 rounded-2xl shadow-xl">
                        <div class="flex space-x-10">
                            <div class="w-[66.14px] h-[66.14px]">
                                <img src="{{asset('assets/img/news-2.jpg')}}" class="w-full h-full" alt=""/>
                            </div>

                            <div class="flex flex-col space-y-1">
                                <p class="flex space-x-3 items-center">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                         viewBox="0 0 1024 1024" height="1em" width="1em"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                        <path
                                            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
                                    </svg>
                                    <span>11 Feb, 2024</span>
                                </p>
                                <p class="text-sm">
                                    शाखारहित बैकिङ्ग सेवा अबरुद्ध हुने सम्बन्धी सूचना
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mt-8 bg-white p-4 rounded-2xl shadow-xl">
                        <div class="flex space-x-10">
                            <div class="w-[66.14px] h-[66.14px]">
                                <img src="{{asset('assets/img/news-2.jpg')}}" class="w-full h-full" alt=""/>
                            </div>

                            <div class="flex flex-col space-y-1">
                                <p class="flex space-x-3 items-center">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                         viewBox="0 0 1024 1024" height="1em" width="1em"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                        <path
                                            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
                                    </svg>
                                    <span>11 Feb, 2024</span>
                                </p>
                                <p class="text-sm">
                                    शाखारहित बैकिङ्ग सेवा अबरुद्ध हुने सम्बन्धी सूचना
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mt-8 bg-white p-4 rounded-2xl shadow-xl">
                        <div class="flex space-x-10">
                            <div class="w-[66.14px] h-[66.14px]">
                                <img src="{{asset('assets/img/news-2.jpg')}}" class="w-full h-full" alt=""/>
                            </div>

                            <div class="flex flex-col space-y-1">
                                <p class="flex space-x-3 items-center">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                         viewBox="0 0 1024 1024" height="1em" width="1em"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                        <path
                                            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
                                    </svg>
                                    <span>11 Feb, 2024</span>
                                </p>
                                <p class="text-sm">
                                    शाखारहित बैकिङ्ग सेवा अबरुद्ध हुने सम्बन्धी सूचना
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-5 bg-white shadow-lg rounded-xl p-5 flex justify-center">
                    <div class="flex flex-col space-y-5 items-center">
                        <img src="{{asset('assets/img/folder.png')}}" class="w-1/4" alt=""/>
                        <p>Download here</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery -->
    <section>
        <div class="m-10">
            <h2 class="text-[#023f88] text-3xl font-semibold">Gallery</h2>

            <div class="mt-5 grid gap-6 grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg1.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg2.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg3.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg4.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg5.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg6.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg7.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
                <div class="w-[280px] h-[150px]">
                    <img src="{{asset('assets/img/news/newsimg8.jpg')}}" class="w-full h-full rounded-md" alt=""/>
                </div>
            </div>
        </div>
    </section>

@endsection