@extends('layouts.layout')
@section('content')
    <div class="page-scroll-nav">
        <nav class="scroll-init color2-bg">
            <ul class="no-list-style">
                <li><a class="act-scrlink tolt" href="#sec1" data-microtip-position="left" data-tooltip="Our story"><i
                            class="fal fa-building"></i></a></li>
                <li><a href="#sec2" class="tolt" data-microtip-position="left" data-tooltip="Promo Video"><i
                            class="fal fa-video"></i></a></li>
                <li><a href="#sec3" class="tolt" data-microtip-position="left" data-tooltip="Our team"><i
                            class="far fa-users-crown"></i></a></li>
                <li><a href="#sec4" class="tolt" data-microtip-position="left" data-tooltip="Why us"><i
                            class="fal fa-user-astronaut"></i></a></li>
                <li><a href="#sec5" class="tolt" data-microtip-position="left" data-tooltip="Testimonials"><i
                            class="fal fa-comment-alt-smile"></i></a></li>
            </ul>
        </nav>
    </div>
    <!--  section  -->
    <section class="parallax-section single-par" data-scrollax-parent="true">
        <div class="bg par-elem " data-bg="{{ asset('assets/images/meet-the-team-banner.webp') }}" data-scrollax="properties: { translateY: '30%' }"></div>
        <div class="overlay op7"></div>
        <div class="container">
            <div class="section-title center-align big-title">
                <h2><span>Meet The Team</span></h2>
                <span class="section-separator"></span>
                <div class="breadcrumbs fl-wrap"><a href="{{ route('home.index') }}">Home</a><span>About us</span>
                </div>
            </div>
        </div>
        <div class="header-sec-link">
            <a href="#sec1" class="custom-scroll-link"><i class="fal fa-angle-double-down"></i></a>
        </div>
    </section>
    <!--  section  end-->
    <section>
             <div class="teamCardContainer">
                <div class="banner-img">
                    <img class="" data-src="{{ asset('assets/img/meet-the-team-banner.png') }}"
                        src="{{ asset('assets/img/meet-the-team-banner.png') }}">
                </div>
                <div class="text-content">
                    <p>The dynamic Londonist team works from our London, Istanbul, and China offices. Embracing the ethos of
                        diversity and inclusion, our offices are home to team members coming from various corners of the
                        world, fostering a rich cultural tapestry by communicating proficiently in multiple languages</p>
                </div>
                <div class="grid-team">

                    @if (isset($teams) && count($teams))
                        @foreach ($teams as $team)
                            <div id="team_{{ $team->id }}" teamData="setTeamData" class="teamCard"
                                onclick="openTeamDetailModal(this)">
                                <div class="teamImgContainer">
                                    <div class="teamCardImgContent">
                                        <img class="teamCardImg" data-src="{{ $team->image }}" class="teamCardImg"
                                            src="{{ $team->image }}" alt="{{ $team->full_name }}">
                                    </div>


                                </div>
                                <div class="descContainer">
                                    <div data-name="{{ $team->full_name }}" class="teamPersonName">{{ $team->full_name }}
                                    </div>
                                    <div data-company="{{ $team->title }}" class="teamPersonCompany">{{ $team->title }}
                                    </div>
                                    <div data-detail="{!! $team->content !!}" class="teamPersonDetail"></div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                <div class="join-us-content">
                    <div class="card-content">
                        <div class="left">
                            <div class="title">Would you like to join us?</div>
                            <div class="text">If you desire to be part of our boundaryless team that constantly strives
                                for improvement, We invite you to join us!</div>
                        </div>
                        <div class="right">
                            <a href="/get-in-touch">
                                <button class="btn btn-default-orange">
                                    Join the Team
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
    </section>
@endsection