@extends('layouts.app')


@section('content')
    <section class="main-banner home-banner">
        <div class="video-overlay"></div>
        <div class="bannerImg">
            <video playsinline="" muted="" loop="" preload="auto" autoplay="">
                <source src={{asset('"#"')}} type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="container">
            <div class="home_banner_content" data-aos="zoom-in-up" data-aos-duration="1500">
                <h2>{{!empty($home) ? ($data->banner_title1 ?? '') : ''}}
                    <br><span>{{!empty($home) ? ($data->banner_title2 ?? '') : ''}}</span></h2>
                <div id="banner_typewriter"></div>
                <div class="banner-btn">
                    <a href="Javascript:;"
                       class="default-btn popup-open">{{!empty($home) ? ($data->banner_btn ?? '') : ''}} <i
                            class="fas fa-angle-right"></i></a>
                </div>
            </div>
            <div class="home_banner_social">
                <ul>
                    {{--                    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>--}}
                    <li><a href="{{$gs->facebook == '' ? 'javascript:;' : $gs->facebook}}" target="_blank"><i
                                class="fab fa-facebook-square"></i></a></li>

                    <li><a href="{{$gs->insta == '' ? 'javascript:;' : $gs->insta}}" target="_blank"><i
                                class="fab fa-instagram"></i></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- portfolio sec start -->
    @include('front.partials.portfolio')


    <section class="about-us">
        <div class="container">
            <div class="row no-gutters justify-content-between">
                <div class="col-lg-5 col-md-6">
                    <h6 class="sec-sm-heading" data-aos="fade-right"
                        data-aos-duration="1500">{{!empty($home) ? ($data->about_title ?? '') : ''}}</h6>
                    <h2 class="heading42" data-aos="fade-right"
                        data-aos-duration="1500">{{!empty($home) ? ($data->about_content ?? '') : ''}}
                    </h2>
                    <div class="banner-btn about-btn" data-aos="fade-right" data-aos-duration="1500">
                        <a href="Javascript:;"
                           class="default-btn-2 popup-open">{{!empty($home) ? ($data->about_btn ?? '') : ''}} <i
                                class="fas fa-angle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6">
                    {!! !empty($home) ? ($data->about_image_content ?? '') : '' !!}
                </div>
            </div>
        </div>
        <img class="img-fluid about-img"
             src="{{ !empty($home) ? (!empty($data->about_image) ? asset('images/cms/'.$data->about_image) : asset('images/about-img.jpg') ) : asset('images/about-img.jpg')}}"
             alt="">
    </section>
    <section class="services sec-pad">
        <div class="container">
            <h6 class="sec-sm-heading" data-aos="fade-down"
                data-aos-duration="1500">{{!empty($home) ? ($data->service_title ?? '') : ''}}</h6>
            <h2 class="heading42" data-aos="fade-down"
                data-aos-duration="1500">{{!empty($home) ? ($data->service_heading1 ?? '') : ''}}
                <br> {{!empty($home) ? ($data->service_heading2 ?? '') : ''}}
            </h2>
            <div class="animation-slider-wrap">
                <div class="animation-slider">
                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($logo) ? asset('images/cms/'.$logo->icon) : 'noimage!'}}" alt=""
                                     class="img-fluid">
                                <h3>{!! ($logo->category) ?? '' !!}</h3>
                            </div>
                            <p>{!! $logo->description ?? '' !!}
                            </p>
                            <a href="{{route('logo')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($website) ? asset('images/cms/'.$website->icon)  : 'no-image'}}"
                                     alt="" class="img-fluid">
                                <h3>{!! $website->category ?? '' !!}</h3>
                            </div>
                            <p>{!! $website->description ?? '' !!}
                            </p>
                            <a href="{{route('website')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($branding) ? asset('images/cms/'.$branding->icon) : 'no-image'}}"
                                     alt="" class="img-fluid">
                                <h3>{!! $branding->category ?? '' !!}</h3>
                            </div>
                            <p>{!! $branding->description ?? '' !!}
                            </p>
                            <a href="{{route('branding')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($animation) ? asset('images/cms/'.$animation->icon) : 'no-image'}}"
                                     alt="" class="img-fluid">
                                <h3>{!! $animation->category ?? ''!!}</h3>
                            </div>
                            <p>{!! $animation->description ?? '' !!}
                            </p>
                            <a href="{{route('animation')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                    @if(!empty($nft)){
                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($nft) ? asset('images/cms/'.$nft->icon) : 'no-image'}}" alt=""
                                     class="img-fluid">
                                <h3>{!! $nft->category ?? ''!!}</h3>
                            </div>
                            <p>{!! $nft->description ?? '' !!}
                            </p>
                            <a href="{{route('nft-design')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                }
                    @else{
                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($branding) ? asset('images/cms/'.$branding->icon) : 'no-image'}}"
                                     alt="" class="img-fluid">
                                <h3>{!! $branding->category ?? '' !!}</h3>
                            </div>
                            <p>{!! $branding->description ?? '' !!}
                            </p>
                            <a href="{{route('branding')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                    }
                @endif

                    <div class="animation-slider-item">
                        <div class="animation-slider-box">
                            <div class="animation-box-head">
                                <img src="{{isset($mobile) ? asset('images/cms/'.$mobile->icon) : 'no-image!'}}" alt=""
                                     class="img-fluid">
                                <h3>{!! $mobile->category ?? '' !!}</h3>
                            </div>
                            <p>{!! $mobile->description ?? '' !!}
                            </p>
                            <a href="{{route('mobile-app')}}"><span>Read More >></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner-btn port-btn serv-btn" data-aos="zoom-in" data-aos-duration="1500">
                <a href="Javascript:;"
                   class="default-btn popup-open">{{!empty($home) ? ($data->service_btn ?? '') : ''}} <i
                        class="fas fa-angle-right"></i></a>
            </div>
        </div>
    </section>
    @include('front.partials.pricing')


    <section class="reliable">
        <div class="container">
            <div class="row align-items-center justify-content-between ">
                <div class="col-lg-3">
                    <h2 class="heading42" data-aos="fade-right"
                        data-aos-duration="1500">{{!empty($home) ? ($data->reliable_heading1 ?? '') : ''}}
                        <br>{{!empty($home) ? ($data->reliable_heading2 ?? '') : ''}}</h2>
                </div>
                <div class="col-lg-9">
                    <img class="img-fluid reliable-img"
                         src="{{ !empty($home) ? (!empty($data->reliable_image) ? asset('images/cms/'.$data->reliable_image) : asset('images/reliable-img.png') ) : asset('images/reliable-img.png')}}"
                         alt=""
                         data-aos="fade-left" data-aos-duration="1500">
                </div>
            </div>
        </div>
    </section>
    <section class="think-create sec-pad">
        <div class="container">
            <div class="col-lg-6 col-md-7">
                <h6 class="sec-sm-heading" data-aos="fade-right"
                    data-aos-duration="1500">{{!empty($home) ? ($data->think_title ?? '') : ''}}</h6>
                <h2 class="heading42" data-aos="fade-right"
                    data-aos-duration="1500">{!! !empty($home) ? ($data->think_heading1 ?? '') : '' !!}
                    <span>{!! !empty($home) ? ($data->think_heading2 ?? '') : '' !!}</span>
                    <br>{!! !empty($home) ? ($data->think_heading3 ?? '') : '' !!}
                </h2>
                <p class="sec-para" data-aos="fade-right"
                   data-aos-duration="1500">{!! !empty($home) ? ($data->think_content ?? '') : '' !!}
                </p>
                <div class="banner-btn about-btn create-btn" data-aos="fade-right" data-aos-duration="1500">
                    <a href="Javascript:;"
                       class="default-btn-2 popup-open">{{!empty($home) ? ($data->think_btn ?? '') : ''}} <i
                            class="fas fa-angle-right"></i></a>
                </div>
            </div>
        </div>
        <img class="img-fluid create-img"
             src="{{ !empty($home) ? (!empty($data->think_image) ? asset('images/cms/'.$data->think_image) : asset('images/create-img.png') ) : asset('images/create-img.png')}}"
             alt="" data-aos="fade-left"
             data-aos-duration="1500">
    </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($home) ? (!empty($data->idea_image) ? asset('images/cms/'.$data->idea_image) : asset('images/cta-img1.png') ) : asset('images/cta-img1.png')}}"
                         alt="">
                </div>
                <div class="col-lg-7 col-md-8">
                    <h2 class="heading42" data-aos="fade-down"
                        data-aos-duration="1500">{!! !empty($home) ? ($data->idea_heading1 ?? '') : '' !!}
                        <span>{!! !empty($home) ? ($data->idea_heading2 ?? '') : '' !!}</span> {!! !empty($home) ? ($data->idea_heading3 ?? '') : '' !!}
                    </h2>
                    {!! !empty($home) ? ($data->idea_content ?? '') : ''  !!}
                    <div class="banner-btn cta-btns justify-content-start">
                        <a href="Javascript:;" class="default-btn popup-open" data-aos="fade-right"
                           data-aos-duration="1500">{!! !empty($home) ? ($data->idea_btn1 ?? '') : '' !!} <i
                                class="fas fa-angle-right"></i></a>
                        <a href="Javascript:;" class="default-btn-2 chat ml-2" data-aos="zoom-in"
                           data-aos-duration="1500">{!! !empty($home) ? ($data->idea_btn2 ?? '') : '' !!} <i
                                class="fas fa-angle-right"></i></a>
                        @if($gs->phone)
                            <a href="tel:{{($gs->phone ?? '')}}" class="default-btn" data-aos="fade-left"
                               data-aos-duration="1500">{{($gs->phone ?? '')}}</a> @endif

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="digital-platform sec-pad">
        <div class="container">
            <h6 class="sec-sm-heading" data-aos="fade-down"
                data-aos-duration="1500">{{!empty($home) ? ($data->digital_title ?? '') : ''}}</h6>
            <h2 class="heading42" data-aos="fade-down"
                data-aos-duration="1500">{{!empty($home) ? ($data->digital_heading ?? '') : ''}}</h2>
            <div class="row digital-serv">
                <div class="col-lg-4">
                    <div class="m-top designing-wrapper" data-aos="fade-right" data-aos-duration="1500">
                        {!! !empty($home) ? ($data->digital_content1 ?? '') : '' !!}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="designing-wrapper" data-aos="zoom-in-up" data-aos-duration="1500">
                        {!! !empty($home) ? ($data->digital_content2 ?? '') : '' !!}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="m-top designing-wrapper" data-aos="fade-left" data-aos-duration="1500">
                        {!! !empty($home) ? ($data->digital_content3 ?? '') : '' !!}
                    </div>
                </div>
            </div>
            <div class="banner-btn port-btn serv-btn" data-aos="fade-up" data-aos-duration="1500">
                <a href="Javascript:;" class="default-btn-2 popup-open">Let's Start <i
                        class="fas fa-angle-right"></i></a>
            </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($home) ? ($data->contact_title ?? '') : '' !!}</h6>
                    <h2 class="heading42" data-aos="fade-right"
                        data-aos-duration="1500">{!! !empty($home) ? ($data->contact_heading1 ?? '') : '' !!}
                        <br> {!! !empty($home) ? ($data->contact_heading2 ?? '') : '' !!}
                    </h2>
                    <p class="sec-para" data-aos="fade-right"
                       data-aos-duration="1500">{!! !empty($home) ? ($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">{{!empty($home) ? ($data->contact_btn ?? '') : ''}} <i
                                            class="fas fa-angle-right"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    @if(session()->has('message'))
        <script>
            Swal.fire(
                'Done',
                '{{ session()->get('message') }}',
                'success'
            )
        </script>
    @endif
    @if(session()->has('discount'))
        <script>
            Swal.fire(
                'Done',
                '{{ session()->get('discount') }}',
                'success'
            )
        </script>
    @endif

    @if(session()->has('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: '{{ session()->get('error') }}',
            })
        </script>
    @endif

    @if(session()->has('contact'))
        <script>
            Swal.fire(
                'Success',
                '{{ session()->get('contact') }}',
                'success'
            )
        </script>
    @endif

    <script>
        if ($("#banner_typewriter").length != 0) {
            console.log('working')
            var banner_typewriter = document.getElementById('banner_typewriter');
            var typewriter = new Typewriter(banner_typewriter, {
                loop: true
            });


            typewriter
                .typeString('{{!empty($home) ? ($data->animation1 ?? '') : ''}}')
                .pauseFor(1500)
                .deleteAll()
                .typeString('{{!empty($home) ? ($data->animation2 ?? '') : ''}}')
                .pauseFor(1500)
                .deleteAll()
                .typeString('{{!empty($home) ? ($data->animation3 ?? '') : ''}}')
                .pauseFor(1500)
                .deleteAll()
                .typeString('{{!empty($home) ? ($data->animation4 ?? '') : ''}}')
                .pauseFor(1500)
                .start();
        }
    </script>
@endsection