@extends('layouts.app')

@section('head')
@endsection

@section('content')
    <!-- <div class="modal fade" id="modal-exitshow" tabindex="-1" role="dialog" data-exitshow="body" data-delay="1000">
        <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content bg-img" style="background-image: url(assets/img/bg/8.jpg)">
        <div class="modal-body text-white1 py-8">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <div class="row">
            <div class="col-md-8 col-xl-6">
              <h3>Limited Time Offer</h3>
              <p class="lead mb-5">You can purchase our Income and Expenses Software with 40% discount. This is a limited offer and ends soon!</p>
              <small>Use Coupon Code - IncogIsLove </small>
              <br>
              <a class="btn btn-lg1 btn-danger" href="#">Shop Now</a>
            </div>
          </div>
        </div>

        </div>
        </div>
    </div> -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-stick-dark" data-navbar="sticky">
      <div class="container">
        <div class="navbar-left">
          <button class="navbar-toggler" type="button">☰</button>
          <a class="navbar-brand" href="{{url('/')}}">
            <img class="logo-dark" src="assets/img/logo_dark.png" alt="logo">
            <img class="logo-light" src="assets/img/logo_light.png" alt="logo">
          </a>
        </div>

        <section class="navbar-mobile">
          <nav class="nav nav-navbar mr-auto">
            <a class="nav-link active" href="{{url('/')}}">Home</a>
            <a class="nav-link" href="{{url('/solutions')}}">Solutions</a>
            <a class="nav-link" href="{{url('/about')}}">About</a>
            <a class="nav-link" href="{{url('/contact')}}">Contact Us</a>
          </nav>
        </section>

        <!-- <a class="btn btn-xs btn-round btn-success" href="#" data-toggle="modal" data-target="#modal-login-3">Login</a> -->

      </div>
    </nav>
    <header id="home" class="header text-white h-fullscreen text-center text-lg-left" style="background-color: rgba(255,255,255,0.3)">
      <canvas class="constellation" data-color="#24292e" width="1280" height="332"></canvas>
      <div class="container">
        <div class="row align-items-center h-100">

          <div class="col-lg-6">
            <h1 class="text-dark display-4 fw-500"><span class="text-dark fw-400 pl-2" data-typing="Hack your growth, Build a brand!, Create an online presence.,Grow exponentially., Level up your game!  " data-type-speed="80"></span></h1>
            <p class="lead mt-5 mb-8 text-dark">At Incogtech, we are dedicated to providing result oriented branding and web development solutions for micro, small and medium enterprises which helps them grow exponentially in a short period and a small budget.</p>
            <p class="gap-xy">
              <a class="btn btn-round btn-outline-dark mw-150" href="{{url('solutions')}}">Learn more</a>
              <!-- <a class="btn btn-round btn-dark mw-150" href="{{ route('register') }}">Sign up</a> -->
            </p>
          </div>

          <div class="col-lg-5 ml-auto">
            <img class="mt-5" src="{{asset('assets/img/front-icon.png') }}" alt="img">
          </div>
          <!-- <div class="col-auto align-self-end mx-auto">
            <div class="media align-items-center">
              <div class="mr-4">
                <a class="btn btn-xs btn-circle btn-dark" href="https://www.youtube.com/embed/h924kiLlvA0" data-provide="lightbox"><i class="fa fa-play"></i></a>
              </div>
              <div class="media-body text-dark opacity-60">2:53 minutes</div>
            </div>
          </div> -->

        </div>
      </div>
    </header>

    
        <div class="container">
          <header class="section-header">
            <h2>Basics</h2>
            <hr>
            <p>Setup your shuffle component as easy as setting few data attributes.</p>
          </header>


          <div data-provide="shuffle">

            <nav class="nav nav-center nav-pills mb-7" data-shuffle="filter">
              <a class="nav-link active" href="#" data-shuffle="button">All</a>
              <a class="nav-link" href="#" data-shuffle="button" data-group="bag">Bag</a>
              <a class="nav-link" href="#" data-shuffle="button" data-group="box">Box</a>
              <a class="nav-link" href="#" data-shuffle="button" data-group="book">Book</a>
              <a class="nav-link" href="#" data-shuffle="button" data-group="bottle">Bottle</a>
            </nav>


            <div class="row gap-y gap-2 shuffle" data-shuffle="list" style="position: relative; overflow: hidden; height: 430.25px; transition: height 500ms cubic-bezier(0.4, 0, 0.2, 1) 0s;">

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="bag,box" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity; transform: translate(0px, 0px) scale(1);">
                <img src="assets/img/portfolio/1.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="book" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(282px, 0px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/2.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="box" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(563px, 0px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/3.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="bottle" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(845px, 0px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/4.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="bottle" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 215px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/5.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="bag" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(282px, 215px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/6.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="bottle" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(563px, 215px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/7.jpg" alt="screenshot">
              </div>

              <div class="col-6 col-lg-3 shuffle-item shuffle-item--visible" data-shuffle="item" data-groups="book" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(845px, 215px) scale(1); transition-duration: 500ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
                <img src="assets/img/portfolio/8.jpg" alt="screenshot">
              </div>

            </div>
          </div>


        </div>
      </section>

    <!-- Register -->
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
          <div class="row gap-y align-items-center">

            <div class="col-md-6 text-center text-md-left">
              <small>© Incogtech 2019, All rights reserved.</small>
            </div>

            <div class="col-md-6 text-center text-md-right">
              <div class="social">
               <!-- <a class="social-twitter" href="#"><i class="fa fa-twitter"></i></a> -->
               <a class="social-facebook" href="https://www.facebook.com/incogtech/"><i class="fa fa-facebook"></i></a>
                <a class="social-instagram" href="https://instagram.com/incogtech"><i class="fa fa-instagram"></i></a>
                <a class="social-dribbble" href="https://www.linkedin.com/company/19208566"><i class="fa fa-dribbble"></i></a>
              </div>
            </div>

          </div>
        </div>
    </footer>
    <button class="btn btn-primary btn-lg" type="hidden" id="btnTrigger" data-toggle="popup" data-target="#popup-thankyou"></button>
    <div id="popup-thankyou" class="popup col-6 col-md-4" data-animation="slide-up" data-autohide="3000">
      <button type="button" class="close" data-dismiss="popup" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <div class="media">
        <img class="avatar mr-5" src="assets/img/avatar/1.jpg" alt="avatar">
        <div class="media-body">
          <h5 id="thankyou-h">Thank You</h5>
          <p class="mb-0" id="thankyou-p">Thank For Subscribing</p>
        </div>
      </div>
    </div>
    <!-- /.footer -->
      

@endsection

@section('foot')
<script>

</script>
@endsection