@extends('front.layouts.master')
@section('css')
    <link href="/front/css/lightgallery.css" rel="stylesheet">
@endsection
@section('content')
    <div class="clearfix"></div>
    <section class="container mt-4 mb-2">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb radius15 shadow-sm">
                    <ul>
                        <li><a href="/">صفحه اصلی / </a></li>
                        <li><a href="#" class="current">اعضای تیم ما</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="container mb-4">
        <div class="team-boxed our-team bg-lighten radius20 p-3">
            <div class="row people">
                @foreach ($teams as $item)
                <div class="col-xl-3 col-md-4 item">
                    <div class="box">
                        <img class="rounded-circle" src="{{$item->pic}}">
                        <h3 class="name">{{$item->nf}}</h3>
                        <p class="title"> {{$item->position}}</p>
                        <p class="description">{{$item->description}}</p>
                        <div class="social mt-3">
                            <a href="{{$item->whatsapp}}"><i class="fab fa-whatsapp "></i></a>
                            <a href="{{$item->telegram}}"><i class="fab fa-telegram"></i></a>
                            <a href="{{$item->instagram}}"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
              
                @endforeach
            

            </div>

        </div>
    </section>
@endsection
@section('js-page')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#lightgallery').lightGallery();
        });
    </script>

    <script src="/front/js/picturefill.min.js"></script>
    <script src="/front/js/lightgallery.js"></script>
    <script src="/front/js/jquery.mousewheel.min.js"></script>
@endsection