@extends('front.layouts.app')
@section('content')
<!-- START INNER BANNER SECTION -->
<div class="inner-banner" @if(@$metaArr['main_banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-12">
                <div class="inner-banner-content">
                    <h4>{!! @$metaArr['main_banner_subtitle'] !!}</h4>
                    <h1>{!! @$metaArr['main_banner_title'] !!}</h1>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['main_banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</div>
<!-- END INNER BANNER SECTION -->
<!-- START ABOUT SECTION -->
<section class="com-discover-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 artical-col">
                <div class="artical-img right">
                    @if(@$metaArr['content_img_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img']" id="content_img" />
                    @else
                    <div class="mk-about-img">
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['content_img_alt']) !!}">
                    </div>
                    @endif
                </div>
                <div class="mk-about-content artical-content">
                    <div class="sec-title line-left mb-5">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    <p class="sec-title-para">
                        {!! @$metaArr['content_description'] !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ABOUT SECTION -->

<!-- START COM.BUILDING SECTION -->
<section class="com-discover-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="sec-title line-left mb-5 d-lg-none">
                    <h2>{!! @$metaArr['community_building_title'] !!}</h2>
                </div>
                @if(@$metaArr['community_building_img_type'] == "video")
                <x-video-js-player :src="$metaArr['community_building_img']" id="community_building_img" />
                @else
                <div class="com-discover-img">
                    <img src="{!! getCmsFileUrl(@$metaArr['community_building_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['community_building_title']) !!}" />
                </div>
                @endif
            </div>
            <div class="col-lg-6 ms-auto">
                <div class="sec-title line-left mb-5 d-none d-lg-block">
                    <h2>{!! @$metaArr['community_building_title'] !!}</h2>
                </div>
                <div class="com-services">
                    @if(isset($metaArr['community_buildings']) && is_array($metaArr['community_buildings']) && count($metaArr['community_buildings']) > 0)
                    @foreach($metaArr['community_buildings'] as $community_buildings)
                    <h5>{!! $community_buildings['title'] !!}</h5>
                    <p>{!! $community_buildings['description'] !!}</p>

                    @if(@$community_buildings['link'])
                    <a href="{!! $community_buildings['link'] !!}" class="btn read-more-link" @if(@$community_buildings['link_open_in_new_tab']) target="_blank" @endif>{!! @$community_buildings['btn_caption'] ?? "Read More" !!} <i class="fa fa-arrow-right"></i></a>
                    @endif

                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END COM.BUILDING SECTION -->

<!-- START COM.CARE SECTION -->
<section class="com-discover-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 ms-auto order-lg-2">
                <div class="sec-title line-left mb-5 d-lg-none">
                    <h2>{!! @$metaArr['community_care_title'] !!}</h2>
                </div>
                @if(@$metaArr['community_care_img_type'] == "video")
                <x-video-js-player :src="$metaArr['community_care_img']" id="community_care_img" />
                @else
                <div class="com-discover-img responsive-image">
                    <img src="{!! getCmsFileUrl(@$metaArr['community_care_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['community_care_title']) !!}" />
                </div>
                @endif
            </div>
            <div class="col-lg-6">
                <div class="sec-title line-left mb-5 d-none d-lg-block">
                    <h2>{!! @$metaArr['community_care_title'] !!}</h2>
                </div>
                <div class="com-services">
                    @if(isset($metaArr['community_cares']) && is_array($metaArr['community_cares']) && count($metaArr['community_cares']) > 0)
                    @foreach($metaArr['community_cares'] as $community_cares)
                    <h5>{!! $community_cares['title'] !!}</h5>
                    <p>{!! $community_cares['description'] !!}</p>

                    @if(@$community_cares['link'])
                    <a href="{!! $community_cares['link'] !!}" class="btn read-more-link" @if(@$community_cares['link_open_in_new_tab']) target="_blank" @endif>{!! @$community_cares['btn_caption'] ?? "Read More" !!} <i class="fa fa-arrow-right"></i></a>
                    @endif

                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END COM.CARE SECTION -->

<!-- START COM.SUPPORT SECTION -->
<section class="com-discover-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="sec-title line-left mb-5 d-lg-none">
                    <h2>{!! @$metaArr['community_support_title'] !!}</h2>
                </div>
                @if(@$metaArr['community_support_img_type'] == "video")
                <x-video-js-player :src="$metaArr['community_support_img']" id="community_support_img" />
                @else
                <div class="com-discover-img">
                    <img src="{!! getCmsFileUrl(@$metaArr['community_support_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['community_support_title']) !!}" />
                </div>
                @endif
            </div>
            <div class="col-lg-6 ms-auto">
                <div class="sec-title line-left mb-5 d-none d-lg-block">
                    <h2>{!! @$metaArr['community_support_title'] !!}</h2>
                </div>
                <div class="com-services">
                    @if(isset($metaArr['community_supports']) && is_array($metaArr['community_supports']) && count($metaArr['community_supports']) > 0)
                    @foreach($metaArr['community_supports'] as $community_supports)
                    <h5>{!! $community_supports['title'] !!}</h5>
                    <p>{!! $community_supports['description'] !!}</p>

                    @if(@$community_supports['link'])
                    <a href="{!! $community_supports['link'] !!}" class="btn read-more-link" @if(@$community_supports['link_open_in_new_tab']) target="_blank" @endif>{!! @$community_supports['btn_caption'] ?? "Read More" !!} <i class="fa fa-arrow-right"></i></a>
                    @endif

                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END COM.SUPPORT SECTION -->

@includeIf('front.includes.elexio_form')

@includeIf('front.includes.current-week-events')

<section class="already-part-sec" @if(@$metaArr['banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['banner_img']) !!});" @endif>
    <div class="container">
        <div class="sec-title line-none">
            <!-- <strong>{!! @$metaArr['content_subtitle'] !!}</strong> -->
            <h2>{!! @$metaArr['banner_title'] !!}</h2>
        </div>
        <div class="sec-title-para">
            {!! @$metaArr['banner_description'] !!}
        </p>
        <a href="{!! @$metaArr['banner_link'] !!}" class="arrow-btn" @if(@$metaArr['banner_link_open_in_new_tab']) target="_blank" @endif><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" class="img-fluid" alt="arrow-right-blue"></a>
    </div>
    @if(@$metaArr['banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</section>

@includeIf('front.includes.faq')

@endsection

@section('js')
@stack('js')
@endsection