@extends('client.target.partials.layout')
@section('header')
    <title>Our Team - {{ env('APP_NAME') }}</title>
@endsection

@section('content')
    <section class="banner-background d-flex align-items-center text-center">
        <div class="container position-relative" uk-scrollspy="cls: uk-animation-slide-top-medium; repeat: true">
            <div class="square" style="left: 0%; z-index: 2;"></div>
            <p class="text-light">Home / Our Team</p>
            <p class="medium-text text-light">Our Team</p>
        </div>
    </section>

    <section class="job-category section-padding custom-background">
        <div class="container vstack gap-3">
            <p class="fs-4 custom-text">List of Team Members</p>

            <div class="row g-3 d-flex align-items-center">
                @foreach (MPCMS::getTeams() as $Team)
                    <div class="col-md-4">
                        <div class="graphics-card p-2">
                            <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                                <a href="{{ site_url($Team->thumb) }}" data-fancybox="gallery1">
                                    <img class="uk-transition-scale-up uk-transition-opaque"
                                        src="{{ site_url($Team->thumb) }}" width="1800" height="1200" alt="Team Member Image">
                                </a>
                            </div>
                            <div class="mt-3 text-center">
                                <p class="custom-text2 mt-3 fw-bold">{{ $Team->title }}</p>
                                <p>{{ $Team->designation }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection