@extends('layouts.tenant')

@section('title', 'Find Thought Leaders')

@section('content')
<style>
    .nav-tabs .nav-link.active {
        color: #fff !important;
        background-color: #5151ff !important;
        border-radius: 8px;
        padding: 0.6rem 1rem;
    }
    .nav-tabs .nav-link {
        background: none;
        border: 1px solid #F6F6F6 !important;
        padding: 0.6rem 1rem;
        border-radius: 8px;
    }

    .negative-margin-top-100 {
        margin-top: -100px;
    }

    .no-margin {
        margin: 0 !important;
    }
    .card {
        border: 1px solid #f1f4f8 !important;
    }

    .quote-icon {
        position: absolute;
        height: 70px;
        width: 70px;
        background: #5151ff;
        border-radius: 50%;
        top: -1rem;
        left: 2rem;
        z-index: 1;
    }
    .quote-icon img {
        padding: 22px;
    }
    .text-yellow {
        color: #FE8B75 !important;
    }
    .bg-custom-1 {
        /* background: #5862fc; */
        background-image: url("{{@$page_content->hero_section_img ?? asset('assets/images/rec_img.png')}}");
        background-size: cover;
        /* background-position: center center; */
    }
    .shape {
        pointer-events: none;
        position: absolute;
    }
    .shape-bottom {
        bottom: 0;
        left: 0;
        right: 0;
    }
    .bgCustomColor {
        color: #5862fc;
    }
    .shape:not([class*=shape-blur])>* {
        transform: scale(2);
    }
</style>
<div class="custom-hero-speaker">
    <div class="container">
        <div class="row mt-4 align-items-center justify-content-center">
            <div class="col-12 col-xl-6 col-lg-6">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#homeHero"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <div class="mt-6">
                    <h1 class="fw-700 text-white">
                        {{$visibility_content->hero_section_title ?? 'Search and Find Top Thought Leaders in Africa'}}
                    </h1>
                    <p class="text-white">
                        {!! $visibility_content->hero_section_p ?? 'Search our database for top African  executives who are experts and thought leaders in their field.' !!}
                    </p>

                    <div class="mt-5">
                        <div class="mr-4">
                            <a href="{{route('speaker')}}" class="btn custom-btn-white px-5 py-3 my-4"><i class="feather-search"></i> Find Thought Leaders</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6 col-xl-6">
                <div class="mt-6 d-none-xs">
                    <img src="{{$visibility_content->hero_section_img ?? asset('assets/images/user_img.png')}}" alt="" class="w-100">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-white">
    <div class="container">
        <div class="row justify-content-center mt-5 mb-4">
            <div class="col-12">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#homeQa"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <h4 class="text-center fw-700">
                    {{$visibility_content->first_section_title ?? 'Expertise'}}
                </h4>
            </div>
            <div class="col-12 col-xl-8 col-lg-8">
                <div class="mt-4 text-center">
                    <p class="text-center">
                        {{$visibility_content->first_section_p ?? 'Ensuring gender diversity on your company board and leadership, media reporting and events is top priority, we\'ve done all the work for you by curating a list of credible experts and thought leaders in their fields. All you have to do is search for the subject matter expertise.'}}
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-xl-6 col-xxl-6 col-lg-6">
                <div class="follow-card first-card-bg br-12 border-0 mb-3 pt-5 px-5 mt-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="">
                                <h6> {{$visibility_content->first_card_section_title ?? 'Find Speakers'}}</h6>
                                <p class="p-color">
                                    {{$visibility_content->first_card_section_title ?? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu lacus lectus orci non senectus '}}
                                </p>
                                <img src="{{$visibility_content->first_card_section_img ?? asset('assets/images/leader_img.png')}}" alt="" class="w-100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6 col-xxl-6 col-lg-6">
                <div class="follow-card second-card-bg br-12 border-0 mb-3 pt-5 px-5 mt-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="">
                                <h6> {{$visibility_content->first_card_section_title ?? 'Find Non Executive Directors'}}</h6>
                                <p class="p-color">
                                    {{$visibility_content->first_card_section_title ?? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu lacus lectus orci non senectus '}}
                                </p>
                                <img src="{{$visibility_content->first_card_section_img ?? asset('assets/images/exco_img.png')}}" alt="" class="w-100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-6">
            <div class="col-12 col-xl-6 col-xxl-6 col-lg-6">
                <div class="follow-card third-card-bg br-12 border-0 mb-3 pt-5 px-5 mt-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="">
                                <h6> {{$visibility_content->first_card_section_title ?? 'Find Volunteers'}}</h6>
                                <p class="p-color">
                                    {{$visibility_content->first_card_section_title ?? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu lacus lectus orci non senectus '}}
                                </p>
                                <img src="{{$visibility_content->first_card_section_img ?? asset('assets/images/volunteer.png')}}" alt="" class="w-100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6 col-xxl-6 col-lg-6">
                <div class="follow-card second-card-bg br-12 border-0 mb-3 pt-5 px-5 mt-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="">
                                <h6> {{$visibility_content->first_card_section_title ?? 'Find Female Leaders'}}</h6>
                                <p class="p-color">
                                    {{$visibility_content->first_card_section_title ?? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu lacus lectus orci non senectus '}}
                                </p>
                                <img src="{{$visibility_content->first_card_section_img ?? asset('assets/images/women_img.png')}}" alt="" class="w-100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- <div class="position-relative">
    <div class="shape shape-bottom shape-fluid-x bgCustomColor">
        <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor">
        </svg>
    </div>
</div> --}}
<section class="bg-custom-1">
    <div class="container py-6">
        <div class="row text-center justify-content-center">
            <div class="col-8 my-auto sm-mt">
                <h2 class="text-white">Build your visibility</h2>
                <p class="text-white">
                    It’s time to build your visibility and thought leadership so you can attract global opportunities and recognition.
                    Get Seen, Get Known, Get Heard.
                </p>
                <div class="mt-2">
                    <a class="btn custom-btn-white px-5 py-3" href="#">Join Now</a>
                </div>
            </div>
        </div>
    </div>
</section>
@include('elements.home-hero')
@include('elements.home-course')
@include('elements.home-course-user')
@include('elements.home-contributor')
@include('elements.home-mentor')
@include('elements.home-qa')
@endsection