@extends('template.main-emka')

@section('content')
<!--hero section start-->

<section id="home" class="fullscreen-banner banner p-0" data-bg-img="{{ asset('soft/images/pattern/01.png') }}">
    <div class="hero-bg">
      <img class="img-fluid" src="{{ asset('soft/images/bg/04.png') }}" alt="">
    </div>
    <div class="align-center p-0" style="top: 40%;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-7 col-md-12 img-side">
            <img class="img-center" loading="lazy" src="{{ $content->section_1_image ? asset('media/' . $content->section_1_image) : asset('soft/images/mackbook/01.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_1_image) }}">
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-5 col-md-12 md-mt-5 ml-auto">
            {{--
            <h1 class="mb-4 font-weight-normal wow fadeInUp" data-wow-duration="1.5s">A Complete <span class="font-weight-bold text-uppercase">Software</span> Based Website</h1>
            --}}
            <h1 class="mb-4 font-weight-normal wow fadeInUp" data-wow-duration="1.5s">{!! $content->section_1_big_title !!}</h1>
            <p class="lead mb-4 wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.3s">{!! $content->section_1_small_title !!}</p>
            <a class="btn btn-theme wow fadeInUp" data-wow-duration="3s" data-wow-delay="0.5s" href="{{ $content->section_1_1_link ?? '#' }}" data-text="{{ $content->section_1_1_text }}">
                @if($content->section_1_1_text)
                @for($i = 0; $i <= strlen($content->section_1_1_text) - 1; $i++)
                <span>{{ $content->section_1_1_text[$i] }}</span>
                @endfor
                @endif
            </a>
            <a class="btn btn-dark wow fadeInUp" data-wow-duration="3s" data-wow-delay="0.5s" href="{{ $content->section_1_2_link ?? '#' }}" data-text="{{ $content->section_1_2_text }}"> 
                @if($content->section_1_2_text)
                @for($i = 0; $i <= strlen($content->section_1_2_text) - 1; $i++)
                <span>{{ $content->section_1_2_text[$i] }}</span>
                @endfor
                @endif
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="round-shape"></div>
</section>
  
  <!--hero section end-->
  
  <section class="pos-r o-hidden">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-12 ml-auto mr-auto text-center">
          <div class="section-title">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-btc"></i>
            </div>
            <h2 class="title">{!! $content->section_12_big_title !!}</h2>
            <p class="mb-2">{!! $content->section_12_small_title !!}</p>
          </div>
        </div>
      </div>
      <div class="row">
        
      <div class="col-md-8 mb-4" style="margin-left: 150px;">
          <div class="item">
            <div class="post style-2">
              <div class="post-image">
                <img class="img-fluid h-100 w-100" loading="lazy" src="{{ asset('media/' . $content->section_12_image) }}" alt="{{ \app\Http\Controllers\TemplateController::checkAltMedia($content->section_12_image) }}">
              </div>
              <div class="post-desc"> <a class="post-categories" href="{{ $content->section_12_link }}" target="_blank">Demo</a>
                <div class="post-title">
                  <h4><a href="{{ $content->section_12_link }}">{{ $content->section_12_btn }}</a></h4>
                </div>
              </div>
            </div>
          </div>
      </div>

      <div class="col-12 text-center mt-3">
        <a class="btn btn-theme btn-circle" href="{{ $content->section_12_link ? $content->section_12_link : '#' }}" data-text="{{ $content->section_12_btn }}">
          @if($content->section_12_btn)
          @for($i = 0; $i <= strlen($content->section_12_btn) - 1; $i++)
          <span>{{ $content->section_12_btn[$i] }}</span>
          @endfor
          @endif
        </a>
      </div>

      </div>
    </div>
</section>
  <!--body content start-->
  
  <div class="page-content">
  
  <!--about start-->
  
  <section id="about">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 col-md-12 order-lg-12">
          <img class="img-fluid w-100" loading="lazy" src="{{ $content->section_2_image ? asset('media/' . $content->section_2_image) : asset('soft/images/svg/08.svg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_2_image) }}">
        </div>
        <div class="col-lg-6 col-md-12 md-mt-5 order-lg-1">
          <div class="section-title mb-3">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-info"></i>
            </div>
            <h2>{!! $content->section_2_big_title !!}</h2>
          </div>
          <p class="lead">{!! $content->section_2_small_title !!}</p>
          <a class="btn btn-theme btn-circle" href="{{ $content->section_2_1_link ?? '#' }}" data-text="{{ $content->section_2_1_text }}"> 
            @if($content->section_2_1_text)
            @for($i = 0; $i <= strlen($content->section_2_1_text) - 1; $i++)
            <span>{{ $content->section_2_1_text[$i] }}</span>
            @endfor
            @endif
          </a>
          <a class="btn btn-dark btn-circle" href="{{ $content->section_2_2_link ?? '#' }}" data-text="{{ $content->section_2_2_text }}"> 
            @if($content->section_2_2_text)
            @for($i = 0; $i <= strlen($content->section_2_2_text) - 1; $i++)
            <span>{{ $content->section_2_2_text[$i] }}</span>
            @endfor
            @endif
          </a>
        </div>
      </div>
    </div>
  </section>
  
  <!--about end-->
  
  
  <!--about start-->
  
  <section class="bg-effect pos-r">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-5 col-md-12 image-column">
          <div class="blink-img">
            <img class="img-fluid blinkblink" src="{{ asset('soft/images/pattern/04.png') }}" alt="">
          </div>
          <img class="img-fluid" loading="lazy" src="{{ $content->section_3_image ? asset('media/' . $content->section_3_image) : asset('soft/images/about/02.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_3_image) }}">
        </div>
        <div class="col-lg-6 col-md-12 md-mt-5 ml-auto">
          <div class="section-title mb-3">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-info"></i>
            </div>
            <h2>{!! $content->section_3_big_title !!}</h2>
          </div>
          <p class="lead">{!! $content->section_3_small_title !!}</p>

        </div>
      </div>
    </div>
  </section>
  
  <!--about end-->

  <section id="about">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 col-md-12 order-lg-12">
          <img class="img-fluid w-100" loading="lazy" src="{{ $content->section_10_image ? asset('media/' . $content->section_10_image) : asset('soft/images/svg/08.svg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_10_image) }}">
        </div>
        <div class="col-lg-6 col-md-12 md-mt-5 order-lg-1">
          <div class="section-title mb-3">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-info"></i>
            </div>
            <h2>{!! $content->section_10_big_title !!}</h2>
          </div>
          <p class="lead">{!! $content->section_10_small_title !!}</p>
          <a class="btn btn-theme btn-circle" href="{{ $content->section_10_1_link ?? '#' }}" data-text="{{ $content->section_10_1_text }}"> 
            @if($content->section_10_1_text)
            @for($i = 0; $i <= strlen($content->section_10_1_text) - 1; $i++)
            <span>{{ $content->section_10_1_text[$i] }}</span>
            @endfor
            @endif
          </a>
          <a class="btn btn-dark btn-circle" href="{{ $content->section_10_2_link ?? '#' }}" data-text="{{ $content->section_10_2_text }}"> 
            @if($content->section_10_2_text)
            @for($i = 0; $i <= strlen($content->section_10_2_text) - 1; $i++)
            <span>{{ $content->section_10_2_text[$i] }}</span>
            @endfor
            @endif
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-effect pos-r">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-5 col-md-12 image-column">
          <div class="blink-img">
            <img class="img-fluid blinkblink" src="{{ asset('soft/images/pattern/04.png') }}" alt="">
          </div>
          <img class="img-fluid" loading="lazy" src="{{ $content->section_11_image ? asset('media/' . $content->section_11_image) : asset('soft/images/about/02.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_11_image) }}">
        </div>
        <div class="col-lg-6 col-md-12 md-mt-5 ml-auto">
          <div class="section-title mb-3">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-info"></i>
            </div>
            <h2>{!! $content->section_11_big_title !!}</h2>
          </div>
          <p class="lead">{!! $content->section_11_small_title !!}</p>
          {{-- <ul class="custom-li list-unstyled list-icon-2 d-inline-block">
            @php
            $points = json_decode($content->section_11_point, true);
            @endphp
            @if($points)
            @for($i = 0; $i <= count($points) - 1; $i++)
            <li>{{ $points[$i] }}</li>
            @endfor
            @endif
          </ul> --}}
        </div>
      </div>
    </div>
  </section>
  
  
  <!--feature start-->
  
  <section id="service" class="pos-r o-hidden text-center">
    <div class="bg-animation">
      <img class="zoom-fade" src="{{ asset('soft/images/pattern/03.png') }}" alt="">
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-12 ml-auto mr-auto">
          <div class="section-title">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-cubes"></i>
            </div>
            <h2 class="title">{!! $content->section_4_big_title !!}</h2>
            <p>{!! $content->section_4_small_title !!}</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" src="{{ $content->section_4_1_image ? asset('media/' . $content->section_4_1_image) : asset('soft/images/feature/06.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_4_1_image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $content->section_4_1_title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $content->section_4_1_desc !!}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 sm-mt-5">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" src="{{ $content->section_4_2_image ? asset('media/' . $content->section_4_2_image) : asset('soft/images/feature/07.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_4_2_image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $content->section_4_2_title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $content->section_4_2_desc !!}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 md-mt-5">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" src="{{ $content->section_4_3_image ? asset('media/' . $content->section_4_3_image) : asset('soft/images/feature/08.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_4_3_image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $content->section_4_3_title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $content->section_4_3_desc !!}</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg-4 col-md-6" style="margin-top: 50px;">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" src="{{ $content->section_4_4_image ? asset('media/' . $content->section_4_4_image) : asset('soft/images/feature/06.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_4_4_image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $content->section_4_4_title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $content->section_4_4_desc !!}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 sm-mt-5" style="margin-top: 50px;">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" src="{{ $content->section_4_5_image ? asset('media/' . $content->section_4_5_image) : asset('soft/images/feature/07.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_4_5_image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $content->section_4_5_title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $content->section_4_5_desc !!}</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 md-mt-5" style="margin-top: 50px;">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" src="{{ $content->section_4_6_image ? asset('media/' . $content->section_4_6_image) : asset('soft/images/feature/08.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($content->section_4_6_image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $content->section_4_6_title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $content->section_4_6_desc !!}</p>
            </div>
          </div>
        </div>
        <div class="col-12 text-center mt-5">
            <a class="btn btn-theme btn-circle" href="{{ route('template.emka.feature') }}" data-text="See All Features">
              <span>S</span>
              <span>e</span>
              <span>e</span>
              <span> </span>
              <span>A</span>
              <span>l</span>
              <span>l</span>
              <span> </span>
              <span>F</span>
              <span>e</span>
              <span>a</span>
              <span>t</span>
              <span>u</span>
              <span>r</span>
              <span>e</span>
              <span>s</span>
            </a>
          </div>
      </div>
    </div>
  </section>
  
  <!--feature end-->
    
  
  <!--team start-->
  
  <section id="team" class="pos-r o-hidden bg-effect">
    <div class="container-fluid p-0">
      <div class="row align-items-center">
        <div class="col-xl-4 col-lg-4 col-md-12 ml-auto lg-pl-5">
          <div class="section-title mb-3">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-users"></i>
            </div>
            <h2 class="title">{!! $content->section_6_big_title !!}</h2> 
            <p class="mb-0">{!! $content->section_6_small_title !!}</p>
          </div>
        </div>
        <div class="col-xl-7 col-lg-8 col-md-12">
          <div class="owl-carousel owl-theme no-pb owl-nav2" data-dots="false" data-nav="true" data-items="2" data-sm-items="1" data-autoplay="true">
            @if(!empty($teams))
            @foreach($teams as $t)
            <div class="item">
              <div class="team-member style-2">
                <div class="team-images">
                  <img class="img-fluid radius box-shadow" loading="lazy" src="{{ $t->image ? asset('media/' . $t->image) : asset('soft/images/team/01.jpg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($t->image) }}"> <a class="team-link" href="{{ route('template.team-detail', ['slug' => $t->slug]) }}"><i class="la la-external-link"></i></a>
                </div>
                <div class="team-description"> <span>{{ $t->position }}</span>
                  <h5>{{ $t->name }}</h5> 
                  <div class="social-icons social-colored circle team-social-icon">
                    <ul>
                      <li class="social-facebook"><a href="{{ $t->facebook ?? '#' }}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                      </li>
                      <li class="social-twitter"><a href="{{ $t->twitter ?? '#' }}" target="_blank"><i class="fab fa-twitter"></i></a>
                      </li>
                      <li class="social-gplus"><a href="{{ $t->google_plus ?? '#' }}" target="_blank"><i class="fab fa-google-plus-g"></i></a>
                      </li>
                      <li class="social-linkedin"><a href="{{ $t->linkedin ?? '#' }}"><i class="fab fa-linkedin-in"></i></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            @endforeach
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!--team end-->
  
  
  <!--testimonial start-->
  
  <section class="pos-r o-hidden text-center">
    <canvas id="confetti"></canvas>
    <div class="container">
      <div class="row">
        <div class="col-xl-6 col-lg-8 col-md-10 ml-auto mr-auto">
          <div class="section-title">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-question-circle"></i>
            </div>
            <h2 class="title">{!! $content->section_7_title !!}</h2> 
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="testimonial-2" class="testimonial-carousel carousel slide testimonial-2" data-ride="carousel" data-interval="2500">
            <!-- Wrapper for slides -->
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto">
                  <div class="carousel-inner">
                    @if(!empty($testimonials))
                    @php
                        $no = 0;
                    @endphp
                    @foreach($testimonials as $t)
                    <div class="carousel-item {{ $no == 0 ? 'active' : '' }}">
                      <div class="testimonial style-2">
                        <div class="testimonial-img">
                          <img class="img-center zoom-fade" loading="lazy" src="{{ $t->image ? asset('media/' . $t->image) : asset('soft/images/testimonial/01.jpg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($t->image) }}">
                        </div>
                        <div class="testimonial-content">
                          <div class="testimonial-quote"><i class="la la-quote-left"></i>
                          </div>
                          <p>{{ $t->testimonial }}</p>
                          <div class="testimonial-caption">
                            <h5>{{ $t->name }}</h5>
                            <label>{{ $t->job }}</label>
                          </div>
                        </div>
                      </div>
                    </div>
                    @php
                        $no++;
                    @endphp
                    @endforeach
                    @endif
                    <!-- End Item -->
                  </div>
                  <!-- End Carousel Inner -->
                </div>
              </div>
              <div class="controls">
                <ul class="nav">
                  @if(!empty($testimonials))
                  @php
                      $no = 0;
                  @endphp
                  @foreach($testimonials as $ta)
                  <li data-target="#testimonial-2" data-slide-to="{{ $no }}" class="{{ $no == 0 ? 'active' : '' }}">
                    <a href="#">
                      <img class="img-fluid" loading="lazy" src="{{ $ta->image ? asset('media/'.  $ta->image) : asset('soft/images/testimonial/01.jpg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($ta->image) }}">
                    </a>
                  </li>
                  @php
                      $no++;
                  @endphp
                  @endforeach
                  @endif
                </ul>
              </div>
          </div>
          <!-- End Carousel -->
        </div>
      </div>
    </div>
  </section>
  
  <!--testimonial end-->
  
  
  <!--counter start-->
  
  <section class="pos-r">
    <div class="hexagon-bg">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="counter">
            <div class="counter-icon">
            <img class="img-center" src="{{ asset('soft/images/counter/01.png') }}" alt="">
          </div>
          <div class="counter-desc">
           <span class="count-number" data-to="{{ $content->section_8_1_num }}" data-speed="10000">{{ $content->section_8_1_num }}</span>
            <h5>{!! $content->section_8_1_title !!}</h5>
          </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 sm-mt-5">
          <div class="counter">
            <div class="counter-icon">
            <img class="img-center" src="{{ asset('soft/images/counter/02.png') }}" alt="">
          </div>
          <div class="counter-desc">
           <span class="count-number" data-to="{{ $content->section_8_2_num }}" data-speed="10000">{{ $content->section_8_2_num }}</span>
            <h5>{!! $content->section_8_2_title !!}</h5>
          </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 md-mt-5">
          <div class="counter">
            <div class="counter-icon">
            <img class="img-center" src="{{ asset('soft/images/counter/03.png') }}" alt="">
          </div>
          <div class="counter-desc">
           <span class="count-number" data-to="{{ $content->section_8_3_num }}" data-speed="10000">{{ $content->section_8_3_num }}</span>
            <h5>{!! $content->section_8_3_title !!}</h5>
          </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 md-mt-5">
          <div class="counter">
            <div class="counter-icon">
            <img class="img-center" src="{{ asset('soft/images/counter/04.png') }}" alt="">
          </div>
          <div class="counter-desc">
           <span class="count-number" data-to="{{ $content->section_8_4_num }}" data-speed="10000">{{ $content->section_8_4_num }}</span>
            <h5>{!! $content->section_8_4_title !!}</h5>
          </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!--counter end-->
  
  
  <!--blog start-->
  
  <section id="blog" class="pos-r o-hidden">
    <div class="container">
      <div class="row text-center">
        <div class="col-lg-8 col-md-12 ml-auto mr-auto">
          <div class="section-title">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-btc"></i>
            </div>
            <h2 class="title">{!! $content->section_9_big_title !!}</h2>
            <p>{!! $content->section_9_small_title !!}</p>
          </div>
        </div>
      </div>
      <div class="row">
        @if(!empty($blogs))
        @foreach($blogs as $b)
        <div class="col-lg-4 col-md-12 md-mt-5">
          <div class="post">
            <div class="post-image">
              <img class="img-fluid h-100 w-100" loading="lazy" src="{{ $b->image ? asset('media/' . $b->image) : asset('soft/images/blog/02.jpg') }}" alt="{{ \app\Http\Controllers\TemplateController::checkALtMedia($b->image) }}">
              <a class="post-categories" href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}">{{ $b->category->name }}</a>
            </div>
            <div class="post-desc">
                <div class="post-meta">
                <ul class="list-inline">
                  <li><i class="la la-calendar mr-1"></i> {{ date('d M, Y', strtotime($b->post)) }}</li>
                  <li><i class="la la-user mr-1"></i> By {{ $b->user->name }}</li>
                </ul>
              </div>
              <div class="post-title">
                <h4><a href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}">{{ $b->title }}</a></h4>
              </div>
             <a class="icon-btn mt-4" href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}"> <i class="la la-angle-right"></i>
              </a>
            </div>
          </div>
        </div>
        @endforeach
        @endif
      </div>
    </div>
  </section>
  
  <!--blog end-->
  
  </div>
  
  <!--body content end--> 
@endsection