@extends('front/layouts/main')

@section('title'){{ @trans('movement.seo_the_movement_title') }}@endsection
@section('description'){{ @trans('movement.seo_the_movement_desc') }}@endsection

@section('content')

    <main class="movement-page bg-white">
        <div class="container">
            <div class="row justify-content-center">
                @if(isset($popularMovement) && $popularMovement != '')
                <div class="col-lg-7">
                    <div class="info-with-cover-img">
                        
                        <div class="cover-img">
                            @if($popularMovement->cover_image != '')
                             <a href="{{route('front.movement.movementdetails',['slug' => $popularMovement->slug])}}"><img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$popularMovement->mover_user_id}}/{{$popularMovement->id}}/small/{{$popularMovement->cover_image}}" alt="{{$popularMovement->movement_title}}" class="fit-img" ></a>
                            @endif
                        </div>
                        <div class="info">
                            <a href="{{route('front.series.seriesdetails',['slug' => $popularMovement->sslug])}}" class="bold smd-font-size"><span class="material-icons smd-font-size">book</span>{{$popularMovement->series_name}}</a>
                            <h1 class="bold large-font-size my-2"><a href="{{route('front.movement.movementdetails',['slug' => $popularMovement->slug])}}" class="bold large-font-size">{{$popularMovement->movement_title}}</a></h1>                            
                             <p class="smd-font-size">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $popularMovement->mslug])}}">{{$popularMovement->first_name. ' '.$popularMovement->last_name}}</a> {{ @trans('movement.on') }} {{getDateFormat2($popularMovement->updated_at)}}</p>
                            <div class="d-flex">
                                <div class="like mr-3">
                                    <div class="custom-control custom-checkbox p-0">
                                        <label class="custom-control-label smd-font-size d-flex align-items-center" for="customCheck"><span class="material-icons title-font mr-1">favorite</span>{{$popularMovement->count_like}}</label>
                                    </div>
                                </div>
                                <a href="javascript:void(0)" class="smd-font-size d-flex align-items-center"><span class="material-icons title-font mr-1">share</span> {{$popularMovement->count_share}}</a>
                            </div>
                        </div>
                       
                    </div>
                </div>
                <div class="col-lg-5 mt-4 mt-lg-0">
                    <!-- horizontal-card-view -->
                    @if(isset($popularMovements2) && count($popularMovements2) > 0)
                    @foreach($popularMovements2 as $popularMovement2)
                    <div class="media horizontal-card-view flex-wrap flex-sm-nowrap">
                        @if($popularMovement2->cover_image != '')
                            <a href="{{route('front.movement.movementdetails',['slug' => $popularMovement2->slug])}}"><img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$popularMovement2->mover_user_id}}/{{$popularMovement2->id}}/small/{{$popularMovement2->cover_image}}" alt="{{$popularMovement2->movement_title}}" class="mr-0 mr-sm-3 mb-2 mb-sm-0 mt-1 fit-img rounded-lg" style="width:130px; height: 130px;"></a>
                        @endif
                        <div class="media-body align-items-top">
                            <div class="chips d-flex align-items-center flex-wrap">
                                <a href="{{route('front.series.seriesdetails',['slug' => $popularMovement2->sslug])}}" class="em-chip rounded-chip d-flex align-items-center mr-auto"><span class="material-icons smd-font-size mr-1">book</span>{{$popularMovement2->series_name}}</a>
                                @if($popularMovement2->does_contain_audio == 1)
                                <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                                @endif
                                @if($popularMovement2->does_contain_video == 1)
                                <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                                @endif

                            </div>
                            <a href="{{route('front.movement.movementdetails',['slug' => $popularMovement2->slug])}}" class="mt-2 mb-1 d-block bold md-font-size">{{$popularMovement2->movement_title}}</a>
                            <p class="xs-font-size mb-1">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $popularMovement2->mslug])}}">{{$popularMovement2->first_name. ' '.$popularMovement2->last_name}}</a> {{ @trans('movement.on') }} {{getDateFormat2($popularMovement2->updated_at)}}</p>
                            <div class="d-flex">
                                <div class="like mr-3">
                                    <div class="custom-control custom-checkbox p-0">
                                        <label class="custom-control-label smd-font-size gray d-flex align-items-center" for="like1"><span class="material-icons title-font mr-1">favorite</span>{{$popularMovement2->count_like}}</label>
                                    </div>
                                </div>
                                <a href="javascript:void(0)" class="smd-font-size gray d-flex align-items-center"><span class="material-icons title-font mr-1">share</span> {{$popularMovement2->count_share}}</a>
                            </div>
                        </div>
                    </div>
                    <!--- End -->
                    @endforeach
                    @endif
                </div>
                @endif
            </div>
        </div>
        
        @if(isset($popularHotOffThePress) && count($popularHotOffThePress) > 0)
        <section class="section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="title-wrapper border-0">
                            <h2 class="box-title large-font-size">{{ @trans('movement.hot_off_the_press') }}</h2>
                            <a href="{{route('front.movement.movementfront',['hot' => 1, 'act=1'])}}" class="btn btn-em">{{ @trans('movement.view_all') }}</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    @foreach($popularHotOffThePress as $hotmovement)
                    <div class="col-sm-6 col-lg-3 vertical-card-view d-flex flex-column mt-4 mt-sm-0">
                        @if($hotmovement->cover_image != '')
                         <a href="{{route('front.movement.movementdetails',['slug' => $hotmovement->slug])}}"><img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$hotmovement->mover_user_id}}/{{$hotmovement->id}}/small/{{$hotmovement->cover_image}}" alt="{{$hotmovement->movement_title}}" class="rounded-lg mb-3 d-block fit-img" style="height: 200px;"></a>
                        @endif

                        <div class="chips d-flex align-items-center flex-wrap">
                            <a href="{{route('front.series.seriesdetails',['slug' => $hotmovement->sslug])}}" class="em-chip rounded-chip d-flex align-items-center mr-auto"><span class="material-icons smd-font-size mr-1">book</span>{{$hotmovement->series_name}}</a>
                            @if($hotmovement->does_contain_audio == 1)
                            <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                            @endif
                            @if($hotmovement->does_contain_video == 1)
                            <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                            @endif
                        </div>
                        <a href="{{route('front.movement.movementdetails',['slug' => $hotmovement->slug])}}" class="mt-2 mb-2 d-block bold title-font">{{$hotmovement->movement_title}}</a>
                        <p class="smd-font-size mt-auto mb-1">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $hotmovement->mslug])}}">{{$hotmovement->first_name. ' '.$hotmovement->last_name}}</a> {{ @trans('movement.on') }} {{getDateFormat2($hotmovement->updated_at)}}</p>
                        <hr class="my-2 w-100">
                        <div class="d-flex">
                            <div class="like mr-3">
                                <div class="custom-control custom-checkbox p-0">
                                    <label class="custom-control-label smd-font-size gray d-flex align-items-center" for="like1"><span class="material-icons title-font mr-1">favorite</span>{{$hotmovement->count_like}}</label>
                                </div>
                            </div>
                            <a href="javascript:void(0)" class="smd-font-size gray d-flex align-items-center"><span class="material-icons title-font mr-1">share</span> {{$hotmovement->count_share}}</a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
        @endif

        @if(isset($serires) && count($serires) > 0)
        <section class="section dark-bg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="title-wrapper border-0">
                            <h2 class="box-title large-font-size">{{ @trans('movement.popular_series') }}</h2>
                            <a href="{{route('front.series.seriesfront',['sort' => 3, 'act=1'])}}" class="btn btn-em">{{ @trans('movement.view_all') }}</a>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center mt-4 mt-md-0">
                    <div class="col-12">
                        <div class="owl-carousel owl-theme col-five-slider">
                             @foreach($serires as $series)
                            <div class="item h-100">
                                <div class="info-with-cover-img small h-100">
                                    <div class="cover-img">
                                        @if($series->cover_image != '')
                                            <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.series') }}/{{$series->id}}/medium/{{$series->cover_image}}" class="fit-img rounded-lg w-100" alt="{{$series->series_name}}" />
                                        @endif                                        
                                    </div>
                                    <div class="info">
                                        <a href="{{route('front.movement.categorydetails',['slug' => $series->cslug])}}" class="semibold xs-font-size">{{$series->cname}}</a>
                                        <h2 class="my-1 bold medium-font-size"><a href="{{route('front.series.seriesdetails',['slug' => $series->slug])}}" class="bold medium-font-size">{{$series->series_name}}</a></h2>
                                        <p class="smd-font-size semibold mb-2">{{@trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $series->mslug])}}">{{$series->first_name. ' '.$series->last_name}}</a></p>
                                        @if($series->count_follower > 0)
                                        <a href="javascript:void(0)" class="xs-font-size d-flex align-items-center"><span class="material-icons mr-2">supervised_user_circle</span> {{$series->count_follower}} {{ @trans('movement.followers') }}</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif      
                                    
        @if(isset($movers) && count($movers) > 0)
        <section class="section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="title-wrapper border-0">
                            <h2 class="box-title large-font-size">{{@trans('movement.popular_movers')}}</h2>

                            <a href="{{route('front.mover.moverlisting')}}" class="btn btn-em">{{@trans('movement.view_all')}}</a>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center mt-4 mt-md-0">
                    <div class="col-12">
                        <div class="owl-carousel owl-theme col-five-slider">
                            @foreach($movers as $mover)
                            <div class="item">
                                <a href="{{route('front.movement.moverdetails',['slug' => $mover->slug])}}">
                                <img src="{{profileimage($mover->profile_image, 'medium', $mover->mover_user_id)}}" alt="{{$mover->first_name. ' '.$mover->last_name}}" class="rounded-lg d-block fit-img w-100" style="height: 238px;" /></a>

                                <a href="{{route('front.movement.moverdetails',['slug' => $mover->slug])}}" class="medium-font-size bold d-block mt-3 mb-2">{{$mover->first_name. ' '.$mover->last_name}}</a>
                                <a href="javascript:void(0)" class="xs-font-size d-flex align-items-center gray semibold"><span class="material-icons mr-2 gray">supervised_user_circle</span> {{$mover->count_follower}} {{@trans('movement.followers')}}</a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
         @endif

        @if( (isset($topics) && count($topics) > 0) || (isset($categories) && count($categories) > 0) )
        <section class="section pop-sec dark-bg">
            <div class="container">
                <div class="row">
                    @if(isset($categories) && count($categories) > 0)
                    <div class="col-md-6">
                        <div class="title-wrapper align-items-center">
                            <h2 class="box-title large-font-size">{{@trans('movement.popular_categories')}}</h2>                           
                        </div>
                        <div class="chips d-flex align-items-center flex-wrap">
                            @foreach($categories as $category)
                                <a href="{{route('front.movement.categorydetails',['slug' => $category->slug])}}" class="em-chip rounded-chip body-font-size py-2 px-3">{{$category->name}}</a>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    @if(isset($topics) && count($topics) > 0)
                    <div class="col-md-6 border-left mt-5 mt-md-0">
                        <div class="title-wrapper align-items-center">
                            <h2 class="box-title large-font-size">{{@trans('movement.popular_topics')}}&nbsp;</h2>                            
                        </div>
                        <div class="chips d-flex align-items-center flex-wrap">
                            @foreach($topics as $topic)
                                <a href="{{route('front.movement.topicdetails',['slug' => $topic->slug])}}" class="em-chip rounded-chip body-font-size py-2 px-3">{{$topic->name}}</a>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </section>
        @endif

        
        @if( (isset($topics) && count($videoMovements) > 0) || (isset($audioMovements) && count($audioMovements) > 0) )
        <section class="section articles">
            <div class="container">
                <div class="row">
                    @if(isset($videoMovements) && count($videoMovements) > 0)
                    <div class="col-lg-6">
                        <div class="title-wrapper align-items-center border-0">
                            <h2 class="box-title large-font-size">{{ @trans('movement.articles_with_videos') }}</h2>
                            <a href="{{route('front.movement.movementfront',['type' => 2, 'act=1'])}}" class="btn btn-em">{{ @trans('movement.view_all') }}</a>
                        </div>
                        @foreach($videoMovements as $videoMovement)
                        <div class="media horizontal-card-view flex-wrap flex-sm-nowrap">
                            
                            @if($videoMovement->cover_image != '')
                             <a href="{{route('front.movement.movementdetails',['slug' => $videoMovement->slug])}}"><img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$videoMovement->mover_user_id}}/{{$videoMovement->id}}/small/{{$videoMovement->cover_image}}" alt="{{$videoMovement->movement_title}}" class="mr-sm-3 mt-sm-1 mb-2 mb-sm-0 fit-img rounded-lg" style="width:169px; height: 169px;"></a>
                            @endif
                            <div class="media-body align-items-top">
                                <div class="chips d-flex align-items-center flex-wrap">
                                    <a href="{{route('front.series.seriesdetails',['slug' => $videoMovement->sslug])}}" class="em-chip rounded-chip d-flex align-items-center mr-auto"><span class="material-icons smd-font-size mr-1">book</span>{{$videoMovement->series_name}}</a>
                                    @if($videoMovement->does_contain_audio == 1)
                                    <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                                    @endif
                                    <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                                </div>
                                <a href="{{route('front.movement.movementdetails',['slug' => $videoMovement->slug])}}" class="mt-2 mb-2 d-block bold medium-font-size">{{$videoMovement->movement_title}}</a>
                                <p class="xs-font-size mb-1">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $videoMovement->mslug])}}">{{$videoMovement->first_name. ' '.$videoMovement->last_name}}</a> {{ @trans('movement.on') }} {{getDateFormat2($videoMovement->updated_at)}}</p>
                                <hr class="my-2">
                                <div class="d-flex">
                                    <div class="like mr-3">
                                        <div class="custom-control custom-checkbox p-0">
                                            <label class="custom-control-label smd-font-size gray d-flex align-items-center" for="like1"><span class="material-icons title-font mr-1">favorite</span>{{$videoMovement->count_like}}</label>
                                        </div>
                                    </div>                                    
                                    <a href="javascript:void(0)" class="smd-font-size gray d-flex align-items-center"><span class="material-icons title-font mr-1">share</span> {{$videoMovement->count_share}}</a>
                                </div>
                            </div>
                        </div>
                         @endforeach                        
                    </div>
                    @endif
                    @if(isset($audioMovements) && count($audioMovements) > 0)
                    <div class="col-lg-6 border-left mt-5 mt-lg-0">
                        <div class="title-wrapper align-items-center border-0">
                            <h2 class="box-title large-font-size">{{ @trans('movement.articles_with_audios') }}</h2>
                            <a href="{{route('front.movement.movementfront',['type' => 1, 'act=1'])}}" class="btn btn-em">{{ @trans('movement.view_all') }}</a>
                        </div>
                        @foreach($audioMovements as $audioMovement)
                        <div class="media horizontal-card-view flex-wrap flex-sm-nowrap">
                            @if($audioMovement->cover_image != '')
                             <a href="{{route('front.movement.movementdetails',['slug' => $audioMovement->slug])}}"><img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$audioMovement->mover_user_id}}/{{$audioMovement->id}}/small/{{$audioMovement->cover_image}}" alt="{{$audioMovement->movement_title}}" class="mr-sm-3 mt-sm-1 mb-2 mb-sm-0 fit-img rounded-lg" style="width:169px; height: 169px;"></a>
                            @endif
                            <div class="media-body align-items-top">
                                <div class="chips d-flex align-items-center flex-wrap">
                                   <a href="{{route('front.series.seriesdetails',['slug' => $audioMovement->sslug])}}" class="em-chip rounded-chip d-flex align-items-center mr-auto"><span class="material-icons smd-font-size mr-1">book</span>{{$audioMovement->series_name}}</a>
                                    <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                                    @if($audioMovement->does_contain_video == 1)
                                    <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                                    @endif
                                </div>
                                <a href="{{route('front.movement.movementdetails',['slug' => $audioMovement->slug])}}" class="mt-2 mb-2 d-block bold medium-font-size">{{$audioMovement->movement_title}}</a>
                                <p class="xs-font-size mb-1">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $audioMovement->mslug])}}">{{$audioMovement->first_name. ' '.$audioMovement->last_name}}</a> {{ @trans('movement.on') }} {{getDateFormat2($audioMovement->updated_at)}}</p>
                                <hr class="my-2">
                                <div class="d-flex">
                                    <div class="like mr-3">
                                        <div class="custom-control custom-checkbox p-0">
                                            <label class="custom-control-label smd-font-size gray d-flex align-items-center" for="like1"><span class="material-icons title-font mr-1">favorite</span>{{$audioMovement->count_like}}</label>
                                        </div>
                                    </div>                                    
                                    <a href="javascript:void(0)" class="smd-font-size gray d-flex align-items-center"><span class="material-icons title-font mr-1">share</span> {{$audioMovement->count_share}}</a>
                                </div>
                            </div>
                        </div>
                        @endforeach   
                    </div>
                    @endif
                </div>
            </div>
        </section>
        @endif
        
        <section class="section benifit-sec dark-bg">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12 text-center">
                        <h2 class="h2 sec-title mb-5">Why Make a Move?</h2>
                    </div>
                    <div class="col-md-3 col-sm-6 text-center">
                        <img src="{{ asset('img/movement-visibility.svg') }}" alt="Influence">
                        <h3 class="mt-3 mb-1">Influence</h3>
                        <p class="gray">Reach an audience of professionals in our growing community</p>
                    </div>
                    <div class="col-md-3 col-sm-6 text-center mt-4 mt-sm-0">
                        <img src="{{ asset('img/movement-branding.svg') }}" alt="Brand">
                        <h3 class="mt-3 mb-1">Brand</h3>
                        <p class="gray">Position yourself as a Mover and industry leader</p>
                    </div>
                    <div class="col-md-3 col-sm-6 text-center mt-4 mt-md-0">
                        <img src="{{ asset('img/movement-dynamism.svg') }}" alt="Synergy">
                        <h3 class="mt-3 mb-1">Synergy</h3>
                        <p class="gray">Easy integration of Audio and Video content allows you to draw on your creativity</p>
                    </div>
                    <div class="col-md-3 col-sm-6 text-center mt-4 mt-md-0">
                        <img src="{{ asset('img/movement-reach.svg') }}" alt="Reach">
                        <h3 class="mt-3 mb-1">Reach</h3>
                        <p class="gray">Upload content on trending topics and have interested viewers be notified as your content is published</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section curated-cate-sec">
            <div class="container">
                <div class="row flex-column-reverse flex-md-row align-items-center">
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h2>Run Individual &amp; Company Pages</h2>
                        <p>#TheMovement allows you to run both personal and company pages. When you register a profile, you gain direct access to our existing community. Unlike traditional social media platforms, you instantly have gain access to community in the tens of thousands.</p>
                        @guest
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-transparent">{{ @trans('movement.become_a_mover') }}</a>
                        @endif
                        @if((Auth::user() && !Auth::user()->hasRole('mover')) ) 
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-transparent">{{ @trans('movement.become_a_mover') }}</a>
                        @endif
                        
                    </div>
                    <div class="col-md-6">
                        <img src="{{ asset('img/run-individual-company-pages.png') }}" srcset="{{ asset('img/run-individual-company-pages@2x.png 2x') }}" alt="Run Individual &amp; Company Pages">
                    </div>
                </div>
                <div class="row align-items-center mt-5">
                    <div class="col-md-6">
                        <img src="{{ asset('img/ceate-seriessvg.png') }}" srcset="{{ asset('img/ceate-seriessvg@2x.png') }}" alt="Create Series">
                    </div>
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h2>Create Series</h2>
                        <p>A series is a collection of articles or media content that has a running theme. #TheMovement allows you to run multiple series with completely different focuses, allowing you to showcase the full suite of your personality and passion. For example, you could run one series that is focused on ‘Book Reviews’ another Series with your “Reflections on the Fintech Industry” and third series with audio chats with other “Thought Leaders”</p>
                        @guest
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-transparent become-cons">{{ @trans('movement.become_a_mover') }}</a>
                        @endif
                        @if((Auth::user() && !Auth::user()->hasRole('mover')) ) 
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-transparent become-cons">{{ @trans('movement.become_a_mover') }}</a>
                        @endif                        
                    </div>
                </div>
                <div class="row flex-column-reverse flex-md-row align-items-center">
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h2>Speaker Inquiries</h2>
                        <p>Make your online persona reap opportunities in your Professional Career. When registering your Mover Profile, you can tick the ‘Open for Inquiries’ feature. This will publically inform content viewers that you are open to Public Speaking and Panel Engagements.</p>
                        @guest
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-transparent">{{ @trans('movement.become_a_mover') }}</a>
                        @endif
                        @if((Auth::user() && !Auth::user()->hasRole('mover')) ) 
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-transparent">{{ @trans('movement.become_a_mover') }}</a>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <img src="{{ asset('img/speaker-inquiries.png') }}" srcset="{{ asset('img/speaker-inquiries@2x.png 2x') }}" alt="Speaker Inquiries">
                    </div>
                </div>
            </div>
        </section>

        @guest
        
        <section class="section join-cons-sec" id="become-mover">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-md-10 text-center">
                         <h2 class="h2 sec-title xl-font-size">{{ @trans('movement.join_empower_movement_now') }}</h2>
                        <p class="tagline m-0 gray">{{ @trans('movement.join_empower_movement_now_notes') }}</p>
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-em mt-4">{{ @trans('movement.become_a_mover') }}</a>
                    </div>
                </div>
            </div>
        </section>
        @endguest
        @if((Auth::user() && !Auth::user()->hasRole('mover')) ) 
        
        <section class="section join-cons-sec" id="become-mover">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-md-10 text-center">
                         <h2 class="h2 sec-title xl-font-size">{{ @trans('movement.join_empower_movement_now') }}</h2>
                        <p class="tagline m-0 gray">{{ @trans('movement.join_empower_movement_now_notes') }}</p>
                        <a href="{{route('front.movement.sign-up')}}" class="btn btn-em mt-4">{{ @trans('movement.become_a_mover') }}</a>
                    </div>
                </div>
            </div>
        </section>
        @endif
    </main>
   
    
@endsection