@extends('frontend.layout.main')

@section('title')
    Team
@endsection

@section('styles')
    
@endsection

@section('content')
<div class="content-wrapper">

    <div class="breadcrumb-wrap bg-spring">
        <img src="assets/img/breadcrumb/br-shape-1.png" alt="Image" class="br-shape-one xs-none">
        <img src="assets/img/breadcrumb/br-shape-2.png" alt="Image" class="br-shape-two xs-none">
        <img src="assets/img/breadcrumb/br-shape-3.png" alt="Image" class="br-shape-three moveHorizontal sm-none">
        <img src="assets/img/breadcrumb/br-shape-4.png" alt="Image" class="br-shape-four moveVertical sm-none">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 col-md-8 col-sm-8">
                    <div class="breadcrumb-title">
                        <h2>Team</h2>
                        <ul class="breadcrumb-menu list-style">
                            <li><a href="index.html">Home </a></li>
                            <li>Team</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-5 col-md-4 col-sm-4 xs-none">
                    <div class="breadcrumb-img">
                        <img src="assets/img/breadcrumb/br-shape-5.png" alt="Image" class="br-shape-five animationFramesTwo">
                        <img src="assets/img/breadcrumb/br-shape-6.png" alt="Image" class="br-shape-six bounce">
                        <img src="assets/img/breadcrumb/breadcrumb-1.png" alt="Image">
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <!-- Breadcrumb End -->

     <!-- Team Section Start -->
    <section class="team-wrap pt-100 pb-75">
        <div class="container">
            <div class="row justify-content-center">
                @if ($teams)
                    @foreach ($teams as $item)
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="team-card style1">
                            <div class="team-img">
                                <img src="{{ asset('images/'.$item->picture) }}" alt="Image">
                                <ul class="social-profile list-style style1">
                                    <li>
                                        <a target="_blank" href="https://facebook.com/">
                                            <i class="ri-facebook-fill"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://linkedin.com/">
                                            <i class="ri-linkedin-fill"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://twitter.com/">
                                            <i class="ri-twitter-fill"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://pinterest.com/">
                                            <i class="ri-pinterest-fill"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="team-info">
                                <h3>{{ $item->name }}</h3>
                                <span>{{ $item->position }}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @endif
                
                
            </div>
        </div>
    </section>

</div>
@endsection

@section('scripts')
    
@endsection