@extends('front.layouts.app')
@section('title', 'About Us')

@section('content')
    <!-- Begin: Inner Slider -->
    <div class="main-slider innerBanner">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" data-wow-delay="0.5s">
                    <img class="img-fluid w-100 wow fadeInRight" src="{{optional($about->getMedia('aboutBannerImage')->first())->getUrl()}}" alt="First slide">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="slideContent">
                                <h2 class="headOne wow fadeInLeft">{{!empty($about) ? $data->aboutBannerTitle : ''}}</h2>
                                <img src="{{optional($about->getMedia('aboutBackgroundImage')->first())->getUrl()}}" class="img-fluid"/>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Inner Slider -->

    <section class="abSec aboutInnerSection">
        <img src="{{ asset('front/images/abElm.png') }}" class="img-fluid abElm" alt="">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7 wow fadeInLeft">
                    <div class="abCont">
                        <p>
                            {{!empty($about) ? $data->aboutBannerDescription : ''}}
                        </p>
                    </div>
                </div>
                <div class="col-md-5 wow fadeInRight">
                    <div class="abiMain">

                        <div class="abImg">
                            <img src="{{optional($about->getMedia('ImageLayer')->first())->getUrl()}}" class="img-fluid abBorder" alt="">
                            <img src="{{optional($about->getMedia('aboutImage')->first())->getUrl()}}" class="img-fluid abImage" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-md-2">
                <div class="col-md-12">
                    <div class="abCont">

                        <p>{{!empty($about) ? $data->aboutBannerMoreDescription : ''}}</p>
                        <div class="themeBtn"><a href="{{!empty($about) ? $data->aboutSectionButtonLink : ''}}"><span></span>{{!empty($about) ? $data->aboutSectionButton : ''}}</a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{{--    <section class="subSec">--}}
{{--        <div class="container">--}}
{{--            <div class="row">--}}
{{--                <div class="col-md-4 wow fadeInLeft">--}}
{{--                    <div class="subCont">--}}
{{--                        <h2>Subscribe Now!</h2>--}}
{{--                        <h3>Laborpay</h3>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="col-md-8 wow fadeInRight">--}}
{{--                    <div class="subForm">--}}
{{--                        <form>--}}
{{--                            <div class="input-group mb-3">--}}
{{--                                <input type="text" class="form-control" placeholder="Email Address:"--}}
{{--                                       aria-label="Recipient's username" aria-describedby="basic-addon2">--}}
{{--                                <div class="input-group-append">--}}
{{--                                    <button class="btn btn-outline-secondary" type="button">Send Now</button>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </form>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}
@endsection