@extends('frontend.layouts.partials.app')
@section('title', 'Deposit')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')
    <section>
        <div class="flex top-0">
            <img src="{{ asset('assets/img/year.png') }}"  class="w-full max-h-screen lg:h-[400px] object-cover" alt="" />
        </div>
    </section>

    <section>
        <div class="pt-8 px-12 flex justify-center">
            <div class="flex flex-col space-y-5 items-center">
                <p class="uppercase text-xl text-[#004d6e] font-semibold">
                    what we do
                </p>
                <p class="text-xl md:text-2xl lg:text-4xl font-extrabold text-[#004d6e]">
                    Our Expertize & Deposits
                </p>
                {{-- <p class="text-xl text-[#000]">
                    Override the digital divide with additional clickthroughs from
                    DevOps.
                </p> --}}
            </div>
        </div>
        <div class="px-3 lg:px-12 pt-24 mb-12">
            <div class="grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                @forelse ($deposits as $deposit)
                    <div class="w-full flex flex-col space-y-3 items-center">
                        <a href="{{ route('deposit.detail', $deposit->slug) }}">
                            <div class="m-8 bg-white shadow-lg hover:shadow-2xl  hover:scale-105 transition-transform ease-in-out rounded-xl p-6 space-y-3 relative overflow-hidden hover:bg-[#FFFDF7] flex flex-col items-center"
                                style="max-height: 312px;">
                                <div class="w-24 h-24 bg-brandBlue rounded-full absolute -right-5 -top-7">
                                    <div class="absolute bottom-6 left-7 text-white text-2xl">
                                        <img src="{{ asset('assets/img/small-logo.png') }}" class="w-16 h-16" alt="">
                                    </div>
                                </div>
                                <div class="fill-violet-500 w-12">
                                    <img src="{{ asset('storage/' . $deposit->photo) }}" class="w-16 h-16" alt="Deposits" />
                                </div>
                                <a href="{{ route('deposit.detail', $deposit->slug) }}">
                                    <h1 class=" h-[4rem] font-bold text-xl text-ellipsis overflow-hidden line-clamp-2 m-2">
                                        {{ $deposit->name }}</h1>
                                </a>
                                <div class="text-sm text-zinc-500 line-clamp-5 overflow-hidden text-ellipsis text-justify"
                                    style="margin: 4px; overflow: hidden;">
                                    {!! $deposit->description !!}
                                </div>
                            </div>
                    </div>
                    </a>
                @empty
                    <h3 class="text-center items-center justify-center">No details available</h3>
                @endforelse
            </div>
        </div>
    </section>

    {{-- <section class="mx-auto">
    <div class="m-12 pt-12 lg:pt-24">
        <div class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 mx-auto">
            <div class="flex flex-col space-y-8">
                <div class="flex flex-col space-y-4">
                    <h3 class="text-[#161616] text-xl font-semibold">Why us</h3>
                    <h4 class="text-[#161616] text-2xl lg:text-5xl font-bold max-w-xl">
                        Trusted experts with years of experience and industry
                        accreditations
                    </h4>
                </div>

                <div class="flex flex-col space-y-5">
                    <p class="max-w-lg">
                        At Beratung, we are dedicated to guiding you on your financial
                        journey with expertise, integrity, and a personalized approach.
                        Our team of experienced financial consultants is committed to
                        helping you unlock your full financial potential, one step at a
                        time.
                    </p>

                    <p class="max-w-lg">
                        Our mission is to empower you with the knowledge and tools to
                        make informed decisions, secure your financial stability, and
                        achieve lasting success.
                    </p>
                </div>
            </div>


            <div class="hidden lg:block w-full h-auto p-3">
                <img src="{{ asset('assets/img/about-svg.svg') }}" alt="" />
            </div>

            <!--  -->
            <div class="flex flex-col space-y-6 divide-y-2">
                <div class="py-4">
                    <div class="flex flex-col space-y-3">
                        <p class="text-4xl font-extrabold text-[#161616]">30</p>
                        <p class="uppercase text-[#161616] font-bold">
                            Years of experience
                        </p>
                        <p class="text-[#5f6567] max-w-sm">
                            A decade of proven financial expertise.
                        </p>
                    </div>
                </div>
                <!--  -->
                <div class="py-4">
                    <div class="flex flex-col space-y-3">
                        <p class="text-4xl font-extrabold text-[#161616]">110</p>
                        <p class="uppercase text-[#161616] font-bold">Customers</p>
                        <p class="text-[#5f6567] max-w-sm">
                            Serving a thriving community of satisfied customers.
                        </p>
                    </div>
                </div>
                <!--  -->
                <div class="py-4">
                    <div class="flex flex-col space-y-3">
                        <p class="text-4xl font-extrabold text-[#161616]">20+</p>
                        <p class="uppercase text-[#161616] font-bold">Specialists</p>
                        <p class="text-[#5f6567] max-w-sm">
                            A dedicated team of financial experts at your deposit.
                        </p>
                    </div>
                </div>
                <!--  -->
            </div>
        </div>
    </div>
</section>

<section>
    <div class="lg:m-12 pt-20">
        <div class="flex flex-col lg:flex-row">
            <img src="{{ asset('assets/img/GettyImages-997745894.webp') }}" class="lg:w-1/2" alt="" />
            <div class="bg-[#E4EDF3] p-6 lg:p-12">
                <h3 class="mb-10 lg:pr-5 text-[#161616] font-bold text-xl lg:text-4xl leading-loose">
                    Guided by integrity, trust, and client-centricity, our values
                    drive everything we do.
                </h3>
                <div class="pl-4 flex flex-col space-y-6">
                    <!--  -->
                    <div class="flex flex-col space-y-6 lg:space-y-0 lg:flex-row lg:space-x-6">
                        <!--  -->
                        <div class="flex flex-col space-y-3">
                            <img src="{{ asset('assets/img/check-mark.png') }}" class="w-[32px]" alt="" />
                            <p class="text-[#161616] font-bold">Integrity</p>
                            <p class="text-[#5f6567] max-w-xs">
                                Uphold high ethical standards and act with honesty,
                                transparency, and professionalism in all your interactions.
                            </p>
                        </div>
                        <!--  -->
                        <div class="flex flex-col space-y-3">
                            <img src="{{ asset('assets/img/check-mark.png') }}" class="w-[32px]" alt="" />
                            <p class="text-[#161616] font-bold">Expertise</p>
                            <p class="text-[#5f6567] max-w-xs">
                                Stay up-to-date with industry trends, regulations, and best
                                practices to offer informed advice to your clients.
                            </p>
                        </div>
                    </div>
                    <!--  -->
                    <div class="flex flex-col space-y-6 lg:space-y-0 lg:flex-row lg:space-x-6">
                        <!--  -->
                        <div class="flex flex-col space-y-3">
                            <img src="{{ asset('assets/img/check-mark.png') }}" class="w-[32px]" alt="" />
                            <p class="text-[#161616] font-bold">
                                Trust and Confidentiality
                            </p>
                            <p class="text-[#5f6567] max-w-xs">
                                Understand the importance of trust and confidentiality in
                                your client relationships.
                            </p>
                        </div>
                        <!--  -->
                        <div class="flex flex-col space-y-3">
                            <img src="{{ asset('assets/img/check-mark.png') }}" class="w-[32px]" alt="" />
                            <p class="text-[#161616] font-bold">
                                Long-Term Relationships
                            </p>
                            <p class="text-[#5f6567] max-w-xs">
                                Build long-term relationships with your clients based on
                                trust, open communication, and mutual respect.
                            </p>
                        </div>
                    </div>
                    <!--  -->
                    <div class="flex flex-col space-y-6 lg:space-y-0 lg:flex-row lg:space-x-6">
                        <!--  -->
                        <div class="flex flex-col space-y-3">
                            <img src="{{ asset('assets/img/check-mark.png') }}" class="w-[32px]" alt="" />
                            <p class="text-[#161616] font-bold">Objectivity</p>
                            <p class="text-[#5f6567] max-w-xs">
                                Provide unbiased advice that is based on thorough analysis,
                                research, and a comprehensive understanding of your clients'
                                financial situations.
                            </p>
                        </div>
                        <!--  -->
                        <div class="flex flex-col space-y-3">
                            <img src="{{ asset('assets/img/check-mark.png') }}" class="w-[32px]" alt="" />
                            <p class="text-[#161616] font-bold">Accountability</p>
                            <p class="text-[#5f6567] max-w-xs">
                                Monitor progress, review strategies, and make adjustments as
                                needed to help clients stay on track towards their financial
                                goals.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> --}}
@endsection