@extends('layouts.app')


@section('content')

    <!-- main banner section -->
    <section class="main-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($nft) ? ($data->banner_content ?? '') : ''  !!}
                </div>
                <div class="col-lg-5">
                    <div class=" bnr-img-st">
                        <img class="nft-ban-img"
                             src="{{!empty($nft) ? (!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($nft) ? ($data->logo_head1 ?? '') : '' }}
                            <span>{{!empty($nft) ? ($data->logo_head2 ?? '') : '' }}</span></h2>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="logo-side-img">
                        <ul>
                            <li>
                                <img
                                    src="{{!empty($nft) ? (!empty($data->logo_image1) ? asset('images/cms/'.$data->logo_image1) : '') : ''}}">
                            </li>
                            <li>
                                <img
                                    src="{{!empty($nft) ? (!empty($data->logo_image2) ? asset('images/cms/'.$data->logo_image2) : '') : ''}}">
                            </li>
                            <li>
                                <img
                                    src="{{!empty($nft) ? (!empty($data->logo_image3) ? asset('images/cms/'.$data->logo_image3) : '') : ''}}">
                            </li>
                            <li>
                                <img
                                    src="{{!empty($nft) ? (!empty($data->logo_image4) ? asset('images/cms/'.$data->logo_image4) : '') : ''}}">
                            </li>
                            <li><img
                                    src="{{!empty($nft) ? (!empty($data->logo_image5) ? asset('images/cms/'.$data->logo_image5) : '') : ''}}">
                            </li>
                            <li>
                                <img
                                    src="{{!empty($nft) ? (!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($nft) ? ($data->logo_title ?? '') : '' }}</h6>
            <h2 class="heading42">{{!empty($nft) ? ($data->logo_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($nft) ? (!empty($data->type_icon1) ? asset('images/cms/'.$data->type_icon1) : '') : ''}}"
                                            class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($nft) ? ($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($nft) ? (!empty($data->type_icon2) ? asset('images/cms/'.$data->type_icon2) : '') : ''}}"
                                            class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($nft) ? ($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($nft) ? (!empty($data->type_icon3) ? asset('images/cms/'.$data->type_icon3) : '') : ''}}"
                                            class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($nft) ? ($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($nft) ? (!empty($data->type_icon4) ? asset('images/cms/'.$data->type_icon4) : '') : ''}}"
                                            class="img-fluid" alt="">
                                    </div>
                                    {!! !empty($nft) ? ($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($nft) ? (!empty($data->logo_type1_image1) ? asset('images/cms/'.$data->logo_type1_image1) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type1_image1) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type1_image2) ? asset('images/cms/'.$data->logo_type1_image2) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type1_image2) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type2_image1) ? asset('images/cms/'.$data->logo_type2_image1) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type2_image1) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type2_image2) ? asset('images/cms/'.$data->logo_type2_image2) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type2_image2) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type3_image1) ? asset('images/cms/'.$data->logo_type3_image1) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type3_image1) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type3_image2) ? asset('images/cms/'.$data->logo_type3_image2) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type3_image2) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type4_image1) ? asset('images/cms/'.$data->logo_type4_image1) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type4_image1) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->logo_type4_image2) ? asset('images/cms/'.$data->logo_type4_image2) : '') : ''}}"
                                           title="">
                                            <img
                                                src="{{!empty($nft) ? (!empty($data->logo_type4_image2) ? asset('images/cms/'.$data->logo_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($nft) ? (!empty($data->idea_image) ? asset('images/cms/'.$data->idea_image) : '') : ''}}"
                         alt="">
                </div>
                <div class="col-lg-7 col-md-8">
                    <h2 class="heading42">{{!empty($nft) ? ($data->idea_head1 ?? '') : '' }}
                        <span>{{!empty($nft) ? ($data->idea_head2 ?? '') : '' }}</span> {{!empty($nft) ? ($data->idea_head3 ?? '') : '' }}
                    </h2>
                    <p class="sec-para">{!! !empty($nft) ? (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>
                        <a href="tel:{{($gs->phone ?? '')}}"
                           class="default-btn">{{($gs->phone ?? '')}}</a>
                    </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">
                        @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) : 'no-image!'}}">
                            </a>
                        @else
                            <a href="{{$portfolio->main_link}}" target="_blank">
                                <img src="{{asset('images/cms/'.$portfolio->main_image)}}">
                            </a>
                            @endif

                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- packages sec start -->


    <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($nft) ? (!empty($data->idea_image) ? asset('images/cms/'.$data->idea_image) : '') : ''}}"
                         alt="">
                </div>
                <div class="col-lg-7 col-md-8">
                    <h2 class="heading42">{{!empty($nft) ? ($data->idea_head1 ?? '') : '' }}
                        <span>{{!empty($nft) ? ($data->idea_head2 ?? '') : '' }}</span> {{!empty($nft) ? ($data->idea_head3 ?? '') : '' }}
                    </h2>
                    <p class="sec-para">{!! !empty($nft) ? (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>
                        <a href="tel:{{($gs->phone ?? '')}}"
                           class="default-btn">{{($gs->phone ?? '')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="digital-platform sec-pad">
        <div class="container">
            <h6 class="sec-sm-heading">{{!empty($nft) ? ($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($nft) ? ($data->contact_title ?? '') : '' }}</h6>
                    <h2 class="heading42" data-aos="fade-right"
                        data-aos-duration="1500">{{!empty($nft) ? ($data->contact_head1 ?? '') : '' }}
                        <br> {{!empty($nft) ? ($data->contact_head2 ?? '') : '' }}
                    </h2>
                    <p class="sec-para" data-aos="fade-right"
                       data-aos-duration="1500">{{!empty($nft) ? ($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></div>


@endsection