@extends('layouts.app')

@section('content')
      <div class="bg-primary dk intro">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 text-center">
          <div class="m-t-xl m-b-xl padder">
            <div class="h1 text-white font-thin l-h-2x">Online Contact Management App </div>
            <div class="carousel slide carousel-fade inline auto" data-interval="6000">
                <div class="carousel-inner">
                  <div class="item active">                    
                    <div class="h1 text-white font-thin l-h-2x">Made with <span class="text-u-c text-u-l text-black font-bold ">Laravel</span></div>
                  </div>
                  <div class="item">
                    <div class="h1 text-white font-thin l-h-2x">Easy to <span class="text-u-c text-u-l text-black font-bold ">Use</span> & <span class="text-u-c text-u-l text-black font-bold ">Extend</span></div>
                  </div>
  
                </div>
            </div>
          </div>
          <p class="text-center m-b-xl">
            <a href="https://codecanyon.net/item/laravel-contact-online-contact-management-app/19740647" target="_blank" class="btn b-2x btn-lg b-white btn-default btn-rounded m-sm">Get It Now</a>
            <a href="https://www.youtube.com/watch?v=SnqN6PldFZw/" target="_blank" class="btn btn-lg btn-white b-2x b-white btn-rounded bg-empty m-sm">Preview Demo</a>
          </p>
        </div>
      </div>
    </div>
    <div id="howitworks" class="bg-white-only">
      <div class="container">
        <div class="m-t-xl m-b-xl text-center wrapper">
          <h3 class="text-u-c text-dark"> <span class="b-b b-light">Absolute Contact Management </span> web application</h3>
          <p class="text-muted"> Complete CRUD application that helps you keep your address book updated, clean, and always available.</p>
        </div>
        <div class="row m-t-xl m-b-xl text-center">
          <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
            <p class="h3 m-b-lg">
              <i class="i i-cloud i-2x b b-dark rounded wrapper-lg"></i>
            </p>
            <div class="">
              <h4 class="m-t-none">Web Application</h4>
              <p class="text-muted m-t-lg">Laracontact is fully responsive, it can run on all the size of the screens. </p>
            </div>
          </div>
          <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="600">
            <p class="h3 m-b-lg">
              <i class="i i-stats i-2x b b-dark rounded wrapper-lg"></i>
            </p>         <div class="">
              <h4 class="m-t-none">Admin Dashboard</h4>
              <p class="text-muted m-t-lg">It has a clean  admin dashboard user interface.</p>
            </div>
          </div>
          <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="900">
            <p class="h3 m-b-lg">
              <i class="i i-screen i-2x b b-dark rounded wrapper-lg"></i>
            </p>
            <div class="">
              <h4 class="m-t-none">App Landing</h4>
              <p class="text-muted m-t-lg">The application comes with a  have a front end site that serves as a landing.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div id="features" class="bg-light">
      <div class="container">
        <div class="row m-t-xl m-b-xl">
          <div class="col-sm-6" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
            <div class="phone-img">
              <img src="{{ url('src/images/responsive.png')}}" class="img-responsive">
            </div>
          </div>
          <div class="col-sm-6 wrapper-xl">
            <h3 class="text-dark text-u-c">The <span class="b-b b-light">Features</span> You'll Love</h3>
            <p> Laravel contact app is fully responsive, it can run on all the size of the screens. </p>
            <ul class="list-unstyled  m-t-xl">

              <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">Complete CRUD Application</p>
               </li>
                 <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">User Management with Roles 
                 </p>
               </li>
               <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
               <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">Localization Feature [English , French , Spanish , Arabic , Chinese...]</p>
               </li>
              
               <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">Contacts Sorting | Search | Custom Tags | Custom Fields ...</p>
               </li>
             
                 <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">Auto Complete Feature</p>
               </li>
                <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg"> Login &amp; Registration System</p>
               </li>
              
               <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">Photo upload using laravel Storage</p>
               </li>
          
         
                <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                 <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                 <p class="clear m-b-lg">Pagination, Responsive and multiple layout ,Clean User Interface</p>
               </li>
               <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                <p class="clear m-b-lg">Custom 404 page</p>
                </li>
               
               <li data-ride="animated" data-animation="fadeInUp" data-delay="600">
                <i class=" b b-primary text-primary rounded wrapper pull-left m-r"></i>
                <p class="clear m-b-lg">Global System Configuration Section 
                  
                </p>
                </li>
        
            
         
                
               </ul>
          </div>
        </div>
      </div>
    </div> 

   
@endsection