@extends('layouts.app')


@section('content')

    <!-- main banner section -->
    <section class="main-banner anim-banner inner-banner">
        <div class="container">
            <div class="row align-items-end justify-content-between no-gutters">
                <div class="col-lg-7 banner-text">
                    {!! !empty($animation_page) ? ($data->banner_content ?? '') : ''  !!}
                </div>
                <div class="col-lg-5">
                    <div class="bnr-img-st ">
                        <img class="anim-img" src="{{!empty($animation_page) ? (!empty($data->banner_image) ? asset('images/cms/'.$data->banner_image) : '') : ''}}">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="banner-logo">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="logo-side-txt">
                        <h2>{{!empty($animation_page) ? ($data->logo_head1 ?? '') : '' }}<span>{{!empty($animation_page) ? ($data->logo_head2 ?? '') : '' }}</span></h2>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="logo-side-img">
                        <ul>
                            <li>
                                <img src="{{!empty($animation_page) ? (!empty($data->logo_image1) ? asset('images/cms/'.$data->logo_image1) : '') : ''}}">
                            </li>
                            <li>
                                <img src="{{!empty($animation_page) ? (!empty($data->logo_image2) ? asset('images/cms/'.$data->logo_image2) : '') : ''}}">
                            </li>
                            <li>
                                <img src="{{!empty($animation_page) ? (!empty($data->logo_image3) ? asset('images/cms/'.$data->logo_image3) : '') : ''}}">
                            </li>
                            <li>
                                <img src="{{!empty($animation_page) ? (!empty($data->logo_image4) ? asset('images/cms/'.$data->logo_image4) : '') : ''}}">
                            </li>
                            <li><img src="{{!empty($animation_page) ? (!empty($data->logo_image5) ? asset('images/cms/'.$data->logo_image5) : '') : ''}}">
                            </li>
                            <li>
                                <img src="{{!empty($animation_page) ? (!empty($data->logo_image6) ? asset('images/cms/'.$data->logo_image6) : '') : ''}}">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="logos-creating sec-pad">
        <div class="container">
            <h6 class="sec-sm-heading">{{!empty($animation_page) ? ($data->animation_title ?? '') : '' }}</h6>
            <h2 class="heading42">{{!empty($animation_page) ? ($data->animation_head ?? '') : '' }}</h2>
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="row no-gutters service-tab-wrap nav nav-tabs" role="tablist">
                        <li class="col-lg-6 col-md-6 col-sm-6 web-service-box box-1">
                            <a class="nav-link active" data-toggle="tab" href="#web-app">
                                <div class="service-text-wrap">
                                    <div class="de-serv-img">
                                        <img src="{{!empty($animation_page) ? (!empty($data->type_icon1) ? asset('images/cms/'.$data->type_icon1) : '') : ''}}" class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($animation_page) ? ($data->type_content1 ?? '') : ''  !!}
                                </div>
                            </a>
                        </li>
                        <li class="col-lg-6 col-md-6 col-sm-6 web-service-box box-2">
                            <a class="nav-link" data-toggle="tab" href="#b2b">
                                <div class="service-text-wrap">
                                    <div class="de-serv-img">
                                        <img src="{{!empty($animation_page) ? (!empty($data->type_icon2) ? asset('images/cms/'.$data->type_icon2) : '') : ''}}" class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($animation_page) ? ($data->type_content2 ?? '') : ''  !!}
                                </div>
                            </a>
                        </li>
                        <li class="col-lg-6 col-md-6 col-sm-6 web-service-box box-3">
                            <a class=" nav-link" data-toggle="tab" href="#cms">
                                <div class="service-text-wrap">
                                    <div class="de-serv-img">
                                        <img src="{{!empty($animation_page) ? (!empty($data->type_icon3) ? asset('images/cms/'.$data->type_icon3) : '') : ''}}" class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($animation_page) ? ($data->type_content3 ?? '') : ''  !!}
                                </div>
                            </a>
                        </li>
                        <li class="col-lg-6 col-md-6 col-sm-6 web-service-box box-4">
                            <a class="nav-link" data-toggle="tab" href="#ecom">
                                <div class="service-text-wrap">
                                    <div class="de-serv-img">
                                        <img src="{{!empty($animation_page) ? (!empty($data->type_icon4) ? asset('images/cms/'.$data->type_icon4) : '') : ''}}" class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($animation_page) ? ($data->type_content4 ?? '') : ''  !!}
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="tab-content inner-tab-content" id="nav-tabContent" data-aos="fade-left"
                         data-aos-duration="1000">
                        <div class="tab-pane fade active show" id="web-app">
                            <div class="inner-service-image-box ">
                                <div class="web-serv-img01 hover-effect">
                                    <div class="logo-design-tab">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type1_image1) ? asset('images/cms/'.$data->animation_type1_image1) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type1_image1) ? asset('images/cms/'.$data->animation_type1_image1) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="web-serv-img02 hover-effect">
                                    <div class="logo-design-tab bg-color">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type1_image2) ? asset('images/cms/'.$data->animation_type1_image2) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type1_image2) ? asset('images/cms/'.$data->animation_type1_image2) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade " id="b2b">
                            <div class="inner-service-image-box ">
                                <div class="web-serv-img01 hover-effect">
                                    <div class="logo-design-tab">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type2_image1) ? asset('images/cms/'.$data->animation_type2_image1) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type2_image1) ? asset('images/cms/'.$data->animation_type2_image1) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="web-serv-img02 hover-effect">
                                    <div class="logo-design-tab bg-color">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type2_image2) ? asset('images/cms/'.$data->animation_type2_image2) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type2_image2) ? asset('images/cms/'.$data->animation_type2_image2) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade " id="cms">
                            <div class="inner-service-image-box ">
                                <div class="web-serv-img01 hover-effect">
                                    <div class="logo-design-tab">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type3_image1) ? asset('images/cms/'.$data->animation_type3_image1) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type3_image1) ? asset('images/cms/'.$data->animation_type3_image1) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="web-serv-img02 hover-effect">
                                    <div class="logo-design-tab bg-color">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type3_image2) ? asset('images/cms/'.$data->animation_type3_image2) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type3_image2) ? asset('images/cms/'.$data->animation_type3_image2) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade " id="ecom">
                            <div class="inner-service-image-box ">
                                <div class="web-serv-img01 hover-effect">
                                    <div class="logo-design-tab">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type4_image1) ? asset('images/cms/'.$data->animation_type4_image1) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type4_image1) ? asset('images/cms/'.$data->animation_type4_image1) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="web-serv-img02 hover-effect">
                                    <div class="logo-design-tab bg-color">
                                        <a data-fancybox="allportfolio" href="{{!empty($animation_page) ? (!empty($data->animation_type4_image2) ? asset('images/cms/'.$data->animation_type4_image2) : '') : ''}}" title="">
                                            <img src="{{!empty($animation_page) ? (!empty($data->animation_type4_image2) ? asset('images/cms/'.$data->animation_type4_image2) : '') : ''}}" class="img-fluid" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="main-cta">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-4 col-md-4 cta-img-area">
                    <img class="img-fluid cta-img1" src="{{!empty($animation_page) ? (!empty($data->idea_image) ? asset('images/cms/'.$data->idea_image) : '') : ''}}" alt="">
                </div>
                <div class="col-lg-7 col-md-8">
                    <h2 class="heading42">{{!empty($animation_page) ? ($data->idea_head1 ?? '') : '' }} <span>{{!empty($animation_page) ? ($data->idea_head2 ?? '') : '' }}</span> {{!empty($animation_page) ? ($data->idea_head3 ?? '') : '' }}</h2>
                    <p class="sec-para">{!! !empty($animation_page) ? (nl2br(e($data->idea_content)) ?? '') : '' !!}
                    </p>
                    <div class="banner-btn cta-btns">
                        <a href="Javascript:;" class="default-btn popup-open">Let's Start <i
                                class="fas fa-angle-right"></i></a>
                        <a href="Javascript:;" class="default-btn chat">Live Chat <i class="fas fa-angle-right"></i></a>
                        @if($gs->phone)
                        <a href="tel:{{($gs->phone ?? '')}}" class="default-btn">{{($gs->phone ?? '')}}</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- portfolio sec start -->
    <section class="portfolio port-sec sec-pad">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <h2 class="heading42">Our Portfolio</h2>
                </div>
            </div>
        </div>
        <div class="container-fluid port-tab-content tab-content" id="pills-tabContent">
            <div class="row port-slider">
                @foreach($portfolios as $portfolio)
                    <div class="col-md-3 mb-4">
                        <div class="port-img">
                            @if(is_null($portfolio->main_link))
                                <a href="{{isset($portfolio) ? asset('images/cms/'.$portfolio->preview_image) : 'no-image!'}}"
                                   data-fancybox="allportfolio" rel="ligthbox" tabindex="0">
                                    <img src="{{isset($portfolio) ? asset('images/cms/'.$portfolio->main_image) : 'no0image!'}}">
                                </a>
                            @else
                                <a href="{{$portfolio->main_link}}" target="_blank">
                                    <img src="{{isset($portfolio) ? asset('images/cms/'.$portfolio->main_image) : 'no-image!'}}">
                                </a>
                            @endif
{{--                            <img alt="portfolio-image" src="{{asset('images/cms/'.$portfolio->main_image)}}">--}}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- packages sec start -->
    <section class="packages inner-packages sec-pad">
        <div class="container">
            <h6 class="sec-sm-heading">{{!empty($animation_page) ? ($data->package_title ?? '') : '' }}</h6>
            <h2 class="heading42">{{!empty($animation_page) ? ($data->package_head1 ?? '') : '' }}<br>
                {{!empty($animation_page) ? ($data->package_head2 ?? '') : '' }}
            </h2>
            <div class="inner-packages-area portfolio-tab-text tab-content">
                <div class="row packages-wrapper owl-carousel owl-theme justify-content-center">
                    @foreach($animations as $animation)
                        <div class="item mb-4" data-package-box="">
                            <div class="justbg">
                                <div class="packagemeta">
                                    <div class="content">
                                        <h6>{{$animation->name ?? ''}}</h6>
                                        <div class="ffprice">
                                            <h5 class="borderr">${{$animation->discount ?? ''}} <span
                                                    class="priceusd">USD</span></h5>

                                            @if(!empty($animation->price ?? ''))
                                                <h4><span
                                                        class="blink">${{$animation->price ?? ''}}</span>{{$animation->percentage ?? ''}}
                                                    %
                                                    off!</h4>
                                            @else
                                            @endif                                        </div>
                                    </div>
                                </div>
                                <div class="fornt_section_content">
                                    <div class="pack-btn">
                                        <a href="Javascript:;" class="default-btn-2 order-package"
                                           data-sku="WEB_INFORMATIVE_BASIC_WEBSITE" data-promotion-id="0"
                                           data-id="{{$animation->id ?? ''}}"
                                           data-price="{{$animation->discount ?? ''}}"
                                           data-price-text="${{ number_format($animation->discount, 2) ?? '' }}"
                                           data-title="{{$animation->name ?? ''}}"
                                           data-package-id="5021" id="basic">Start Project </a>
                                    </div>
                                    <div class="desccontent" data-package-scroll="">
                                        {!! $animation->description ?? ''!!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>


    <section class="main-cta">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-4 col-md-4 cta-img-area">
                    <img class="img-fluid cta-img1" src="{{!empty($animation_page) ? (!empty($data->idea_image) ? asset('images/cms/'.$data->idea_image) : '') : ''}}" alt="">
                </div>
                <div class="col-lg-7 col-md-8">
                    <h2 class="heading42">{{!empty($animation_page) ? ($data->idea_head1 ?? '') : '' }} <span>{{!empty($animation_page) ? ($data->idea_head2 ?? '') : '' }}</span> {{!empty($animation_page) ? ($data->idea_head3 ?? '') : '' }}</h2>
                    <p class="sec-para">{!! !empty($animation_page) ? (nl2br(e($data->idea_content)) ?? '') : '' !!}
                    </p>
                    <div class="banner-btn cta-btns">
                        <a href="Javascript:;" class="default-btn popup-open">Let's Start <i
                                class="fas fa-angle-right"></i></a>
                        <a href="Javascript:;" class="default-btn chat">Live Chat <i class="fas fa-angle-right"></i></a>
                        @if($gs->phone)
                        <a href="tel:{{($gs->phone ?? '')}}" class="default-btn">{{($gs->phone ?? '')}}</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="digital-platform sec-pad">
        <div class="container">
            <h6 class="sec-sm-heading">{{!empty($animation_page) ? ($data->testimonial_title ?? '') : '' }}</h6>
        @include("front.partials.testamonials")
        {{--            <h2 class="heading42">Our Clients <i class="fas fa-heart"></i> Us</h2>--}}
{{--            <div class="testi-slider owl-carousel owl-theme">--}}
{{--                @foreach($testimonials as $testimonial)--}}
{{--                    <div class="testi-wrapper">--}}
{{--                        <div class="testi-img">--}}
{{--                            <img src="{{asset('images/coma.png')}}" alt="">--}}
{{--                        </div>--}}
{{--                        <div class="client-review">--}}
{{--                            <p>"{{$testimonial->comment}}"</p>--}}
{{--                        </div>--}}
{{--                        <div class="client-detail">--}}
{{--                            <img src="{{asset('images/cms/'.$testimonial->image)}}" alt="">--}}
{{--                            <div class="client-name">--}}
{{--                                <h4>{{$testimonial->name}}</h4>--}}
{{--                                <h5>{{$testimonial->designation}}</h5>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @endforeach--}}
{{--            </div>--}}

            <!-- footer contact form sec start -->

            <div class="row form-area">
                <div class="col-lg-4 col-md-5">
                    <h6 class="sec-sm-heading" data-aos="fade-right" data-aos-duration="1500">{{!empty($animation_page) ? ($data->contact_title ?? '') : '' }}</h6>
                    <h2 class="heading42" data-aos="fade-right" data-aos-duration="1500">{{!empty($animation_page) ? ($data->contact_head1 ?? '') : '' }}<br> {{!empty($animation_page) ? ($data->contact_head2 ?? '') : '' }}
                    </h2>
                    <p class="sec-para" data-aos="fade-right" data-aos-duration="1500">{{!empty($animation_page) ? ($data->contact_content ?? '') : '' }}
                    </p>
                    <ul class="digital-cta" data-aos="fade-right" data-aos-duration="1500">
                        @if($gs->phone)
                        <li><a href="tel:{{($gs->phone ?? '')}}"><i class="fas fa-phone"></i> {{($gs->phone ?? '')}}</a>
                        </li>
                        @endif
                        @if($gs->email)
                        <li><a href="mailto: {{($gs->email ?? '')}}"><i class="fas fa-envelope-open-text"></i>
                                {{($gs->email ?? '')}}</a>
                        </li>
                            @endif
                    </ul>
                </div>
                <div class="col-lg-8 col-md-7">
                    <div class="form-wrapper" data-aos="fade-left" data-aos-duration="1500">
                        <form class="main-footer-form" id="regForm" method="post" enctype="multipart/form-data"
                              action="{{route('contactForm')}}">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Name" name="name"
                                           data-validation="required">
                                </div>
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Email Address"
                                           name="email" data-validation="required">
                                </div>
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Phone Number"
                                           maxlength="10" name="phone" data-validation="required">
                                </div>
                                <div class="col-md-6 contact-form">
                                    <input type="text" class="form-control" placeholder="Enter Your Services"
                                           name="services" data-validation="required">
                                </div>
                                <div class="col-md-12 contact-form">
                                    <textarea name="message" id="msg" placeholder="Enter your Project Brief"></textarea>
                                </div>
                                <div class="form-btn">
                                    <div id="formResult"></div>
                                    <div class="clearfix"></div>
                                    <button class="default-btn-2 btn-10" type="submit" id="signupBtn">Let's Start <i
                                            class="fas fa-angle-right"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </section>

@endsection