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

    <section class="h-[250px] lg:h-[500px] w-full">
        <div class="flex flex-col lg:flex-row w-full h-full">
            <img src="{{ asset('assets/img/management-banner.jpg') }}" class="h-full lg:w-1/2" alt="" />
            <div class="hidden h-full lg:w-1/2 bg-[#2c2c2c] p-8 text-white lg:flex justify-center items-center lg:p-0">
                <h2 class="text-2xl lg:text-4xl font-bold">Management Team</h2>
            </div>
        </div>
    </section>

    <section class="bg-[#f9faff] mx-auto">
        <div class="py-10 px-10">
            <div class="w-full flex flex-col items-center">
                <h2 class="text-2xl lg:text-4xl text-[#004d6e] font-semibold">
                    Our Management Team
                </h2>
                <!--  -->
                <div class="mt-12 lg:mt-36 grid grid-cols-1 lg:gap-6 md:grid-cols-2 lg:grid-cols-3 gap-8 ">
                    @forelse ($managementTeam as $team)
                        <div class="w-[306px] bg-white flex flex-col items-center rounded-md shadow-xl p-3">
                            <div class="w-[200px] h-[200px] rounded-full overflow-hidden object-fit">
                                <img src="{{ asset('storage/' . $team->photo) }}" class="h-auto rounded-full"
                                    alt="" />
                            </div>
                            <div class="py-6 flex flex-col space-y-5 items-center">
                                <p class="text-[#000000cc] font-semibold">
                                    {{ $team->name }}
                                </p>
                                <p class="uppercase text-[#4f86f9] font-semibold line-clamp-2 px-3 text-wrap">
                                    {{ $team->designation->name }}
                                </p>
                            </div>
                        </div>
                    @empty
                        <h3 class="text-center mt-4">Details are not avaliable...</h3>
                    @endforelse
                </div>
            </div>
    </section>

@endsection