@extends('layouts.app')


@section('content')
    <style>
        .portfolio-main-banner {
            background-image: url({{!empty($portfolio) ? (!empty($data->banner_image) ? asset('images/cms/'.$data->banner_image) : '') : ''}});
            background-size: cover;
            padding: 110px 0 110px !important;
        }
    </style>

    <!-- main banner section -->
    <section class="main-banner portfolio-main-banner inner-banner">
        <div class="container">
            <div class="row align-items-center justify-content-start no-gutters">
                <div class="col-lg-6 col-md-6 col-sm-12 banner-text">
                    <h2 class="heading42">{{!empty($portfolio) ? ($data->banner_head1 ?? '') : '' }}
                        <br><span>{{!empty($portfolio) ? ($data->banner_head2 ?? '') : '' }} </span><br> {{!empty($portfolio) ? ($data->banner_head3 ?? '') : '' }}
                    </h2>
                </div>
            </div>
        </div>
    </section>

    <!-- portfolio sec start -->
    @include('front.partials.portfolio')
{{--    <section class="portfolio port-sec sec-pad">--}}
{{--        <div class="container">--}}
{{--            <div class="row justify-content-between">--}}
{{--                <div class="col-lg-4">--}}
{{--                    <h2 class="heading42" data-aos="fade-right"--}}
{{--                        data-aos-duration="1500">Our Portfolio</h2>--}}
{{--                </div>--}}
{{--                <div class="col-lg-8">--}}
{{--                    <div class="port-tabs-list">--}}
{{--                        <ul class="port-tabs nav nav-pills" id="pills-tab" role="tablist" data-aos="fade-left"--}}
{{--                            data-aos-duration="1500">--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link active" id="pills-profile-tab" data-toggle="pill" href="#website"--}}
{{--                                   role="tab" aria-controls="pills-profile" aria-selected="false">Website</a>--}}
{{--                            </li>--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#logo"--}}
{{--                                   role="tab" aria-controls="pills-contact" aria-selected="false">Logo</a>--}}
{{--                            </li>--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#e-commerce"--}}
{{--                                   role="tab"--}}
{{--                                   aria-controls="pills-contact" aria-selected="false">Branding</a>--}}
{{--                            </li>--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#video" role="tab"--}}
{{--                                   aria-controls="pills-contact" aria-selected="false">Animation</a>--}}
{{--                            </li>--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#nft" role="tab"--}}
{{--                                   aria-controls="pills-contact" aria-selected="false">NFT Design</a>--}}
{{--                            </li>--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#illustration"--}}
{{--                                   role="tab" aria-controls="pills-contact" aria-selected="false">Illustration</a>--}}
{{--                            </li>--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#smm" role="tab"--}}
{{--                                   aria-controls="pills-contact" aria-selected="false">Social Media</a>--}}
{{--                            </li>--}}

{{--                        </ul>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="container-fluid port-tab-content tab-content" id="pills-tabContent">--}}
{{--            <div class="tab-pane fade show active" id="website" role="tabpanel" data-aos="zoom-in-up"--}}
{{--                 data-aos-duration="1500" aria-labelledby="pills-profile-tab">--}}
{{--                <div class="row port-slider">--}}
{{--                    @foreach($portfolio_websites as $portfolio_website)--}}
{{--                        <div class="col-md-3 port-web-col-4">--}}
{{--                            <div class="port-img port-web-img-st">--}}
{{--                                @if(is_null($portfolio_website->main_link))--}}
{{--                                    <a href="{{asset('images/cms/'.$portfolio_website->preview_image)}}"--}}
{{--                                       data-fancybox="allportfolio"--}}
{{--                                       rel="ligthbox" tabindex="0"> <img--}}
{{--                                            src="{{asset('images/cms/'.$portfolio_website->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @else--}}
{{--                                    <a href="{{$portfolio_website->main_link}}" target="_blank">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_website->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @endif--}}
{{--                                <img class="port-web-st port-web-th-img1"--}}
{{--                                     src="{{asset('images/cms/'.$portfolio_website->side_image1)}}">--}}
{{--                                <img class="port-web-st port-web-th-img2"--}}
{{--                                     src="{{asset('images/cms/'.$portfolio_website->side_image2)}}">--}}

{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="tab-pane fade" id="e-commerce" role="tabpanel" data-aos="zoom-in-up" data-aos-duration="1500"--}}
{{--                 aria-labelledby="pills-contact-tab">--}}
{{--                <div class="row port-slider">--}}
{{--                    @foreach($portfolio_brandings as $portfolio_branding)--}}
{{--                        <div class="col-md-3 mb-4">--}}
{{--                            <div class="port-img">--}}
{{--                                @if(is_null($portfolio_branding->main_link))--}}
{{--                                    <a href="{{asset('images/cms/'.$portfolio_branding->preview_image)}}"--}}
{{--                                       data-fancybox="allportfolio" rel="ligthbox" tabindex="0">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_branding->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @else--}}
{{--                                    <a href="{{$portfolio_branding->main_link}}" target="_blank">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_branding    ->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="tab-pane fade " id="logo" role="tabpanel" data-aos="zoom-in-up" data-aos-duration="1500"--}}
{{--                 aria-labelledby="pills-contact-tab">--}}
{{--                <div class="row port-slider">--}}
{{--                    @foreach($portfolio_logos as $portfolio_logo)--}}
{{--                        <div class="col-md-3 mb-4">--}}
{{--                            <div class="port-img">--}}
{{--                                @if(is_null($portfolio_logo->main_link))--}}
{{--                                    <a href="{{asset('images/cms/'.$portfolio_logo->preview_image)}}"--}}
{{--                                       data-fancybox="allportfolio" rel="ligthbox" tabindex="0">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_logo->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @else--}}
{{--                                    <a href="{{$portfolio_logo->main_link}}" target="_blank">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_logo->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                    @endif--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="tab-pane fade" id="video" role="tabpanel" data-aos="zoom-in-up" data-aos-duration="1500"--}}
{{--                 aria-labelledby="pills-contact-tab">--}}
{{--                <div class="row port-slider">--}}
{{--                    @foreach($portfolio_animations as $portfolio_animation)--}}
{{--                        <div class="col-md-3 mb-4">--}}
{{--                            <div class="port-img">--}}
{{--                                @if(is_null($portfolio_animation->main_link))--}}
{{--                                <a href="{{asset('images/cms/'.$portfolio_animation->preview_image)}}"--}}
{{--                                   data-fancybox="allportfolio" rel="ligthbox" tabindex="0">--}}
{{--                                    <img src="{{asset('images/cms/'.$portfolio_animation->main_image)}}">--}}
{{--                                </a>--}}
{{--                            @else--}}
{{--                                <a href="{{$portfolio_animation->main_link}}" target="_blank">--}}
{{--                                    <img src="{{asset('images/cms/'.$portfolio_animation->main_image)}}">--}}
{{--                                </a>--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="tab-pane fade" id="nft" role="tabpanel" data-aos="zoom-in-up" data-aos-duration="1500"--}}
{{--                 aria-labelledby="pills-contact-tab">--}}
{{--                <div class="row port-slider">--}}
{{--                    @foreach($portfolio_nfts as $portfolio_nft)--}}
{{--                        <div class="col-md-3 mb-4">--}}
{{--                            <div class="port-img">--}}
{{--                                @if(is_null($portfolio_nft->main_link))--}}
{{--                                <a href="{{asset('images/cms/'.$portfolio_nft->preview_image)}}"--}}
{{--                                   data-fancybox="allportfolio" rel="ligthbox" tabindex="0">--}}
{{--                                    <img src="{{asset('images/cms/'.$portfolio_nft->main_image)}}">--}}
{{--                                </a>--}}
{{--                            @else--}}
{{--                                <a href="{{$portfolio_nft->main_link}}" target="_blank">--}}
{{--                                    <img src="{{asset('images/cms/'.$portfolio_nft->main_image)}}">--}}
{{--                                </a>--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="tab-pane fade" id="illustration" role="tabpanel" data-aos="zoom-in-up" data-aos-duration="1500"--}}
{{--                 aria-labelledby="pills-contact-tab">--}}
{{--                <div class="row port-slider">--}}
{{--                    @foreach($portfolio_illustrations as $portfolio_illustration)--}}
{{--                        <div class="col-md-3 mb-4">--}}
{{--                            <div class="port-img">--}}
{{--                                @if(is_null($portfolio_illustration->main_link))--}}
{{--                                    <a href="{{asset('images/cms/'.$portfolio_illustration->preview_image)}}"--}}
{{--                                       data-fancybox="allportfolio" rel="ligthbox" tabindex="0">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_illustration->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @else--}}
{{--                                    <a href="{{$portfolio_illustration->main_link}}" target="_blank">--}}
{{--                                        <img src="{{asset('images/cms/'.$portfolio_illustration->main_image)}}">--}}
{{--                                    </a>--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}

{{--        </div>--}}
{{--        <div class="banner-btn port-btn" data-aos="fade-up" data-aos-duration="1500">--}}
{{--            <a href="{{route('portfolio')}}" class="default-btn-2">{{!empty($home) ? ($data->portfolio_btn ?? '') : ''}}--}}
{{--                <i class="fas fa-angle-right"></i></a>--}}
{{--        </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($portfolio) ? (!empty($data->idea_image) ? asset('images/cms/'.$data->idea_image) : '') : ''}}"
                         alt="">
                </div>
                <div class="col-lg-7 col-md-8">
                    <h2 class="heading42">{{!empty($portfolio) ? ($data->idea_head1 ?? '') : '' }}
                        <span>{{!empty($portfolio) ? ($data->idea_head2 ?? '') : '' }}</span> {{!empty($portfolio) ? ($data->idea_head3 ?? '') : '' }}
                    </h2>
                    <p class="sec-para">{!! !empty($portfolio) ? (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($portfolio) ? ($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($portfolio) ? ($data->contact_title ?? '') : '' }}</h6>
                    <h2 class="heading42" data-aos="fade-right"
                        data-aos-duration="1500">{{!empty($portfolio) ? ($data->contact_head1 ?? '') : '' }}
                        <br> {{!empty($portfolio) ? ($data->contact_head2 ?? '') : '' }}
                    </h2>
                    <p class="sec-para" data-aos="fade-right"
                       data-aos-duration="1500">{{!empty($portfolio) ? ($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>
{{--                    </form>--}}
                </div>
            </div>
        </div>


    </section>

@endsection