@extends('app')
@section('content')
<style>
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
.i-plain.icon-ok{
    color: #0069b5 !important;
}
.i-plain.icon-comments{
    color: #0069b5 !important;
}
.i-plain.icon-suitcase{
    color: #0069b5 !important;
}
.i-plain.icon-edit{
    color: #0069b5 !important;
}
.testimonial{
	border: 0px solid rgba(0,0,0,0.1) !important;
	box-shadow: 0 0px 0px rgba(0,0,0,0.1) !important;
}
.testi-content > p {
    min-height: 220px !important;
	font-size: 18px !important;
    font-weight: normal !important;
    line-height: 28px !important;
}
.promo {
    padding: 0 !important;
    
}
.scale button {
    background:#292B2E !important;
}
.scale a button:hover {
    background:#0A426D !important;
    color:#FFF !important;
}
.promo a button:hover {
    background:#0A426D !important;
    color:#FFF !important;
}
.promo:hover {
    box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
    transform: scale(1.1);
	z-index:100;
}
.select {
     border: 2px solid #1bbc9d;
    border-radius: 8px;
    color: #1bbc9d;
    display: inline-block;
    font-size: 1.4rem;
    height: auto;
    letter-spacing: 2px;
    padding: 0.5em;
    position: static;
    text-indent: 0;
    text-transform: uppercase;
    transition: all 0.6s ease 0s;
    width: 43%;
    
}
.select:hover{
 	background:#1bbc9d!important;
   	 color:#FFF !important;
}
.scale {
  z-index:1 !important;
}
</style>
  <!-- Pricing Table Script
        ============================================= -->
	<link rel="stylesheet" href="pricing/css/normalize.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="pricing/css/style.css"> <!-- Resource style -->
	<script src="pricing/js/prefixfree.min.js"></script> <!-- Modernizr -->
<section id="slider" class="slider-parallax swiper_wrapper clearfix">

    <div class="swiper-container swiper-parent">
        <div class="swiper-wrapper">

            <div class="swiper-slide dark" style="background: url(images/landing/background.jpg);">
                <div class="container clearfix">
                    <div class="slider-caption slider-caption-center">
                        <h2 data-caption-animate="fadeInUp"
                            style="z-index: 3;font-family: Shadows Into Light Two, arial, verdana;">100%
                            Commission.</h2>
                        <p data-caption-animate="fadeInUp" data-caption-delay="200"
                           style="z-index: 3;font-family: Shadows Into Light Two, arial, verdana;">Earn more with No
                            Loopholes or Hidden Fees</p>

                    </div>


                </div>


            </div>

        </div>

    </div>

    <script>
        jQuery(document).ready(function ($) {
            var swiperSlider = new Swiper('.swiper-parent', {
                paginationClickable: false,
                slidesPerView: 1,
                grabCursor: true,
                onSwiperCreated: function (swiper) {
                    $('[data-caption-animate]').each(function () {
                        var $toAnimateElement = $(this);
                        var toAnimateDelay = $(this).attr('data-caption-delay');
                        var toAnimateDelayTime = 0;
                        if (toAnimateDelay) {
                            toAnimateDelayTime = Number(toAnimateDelay) + 750;
                        } else {
                            toAnimateDelayTime = 750;
                        }
                        if (!$toAnimateElement.hasClass('animated')) {
                            $toAnimateElement.addClass('not-animated');
                            var elementAnimation = $toAnimateElement.attr('data-caption-animate');
                            setTimeout(function () {
                                $toAnimateElement.removeClass('not-animated').addClass(elementAnimation + ' animated');
                            }, toAnimateDelayTime);
                        }
                    });
                },
                onSlideChangeStart: function (swiper) {
                    $('#slide-number-current').html(swiper.activeIndex + 1);
                    $('[data-caption-animate]').each(function () {
                        var $toAnimateElement = $(this);
                        var elementAnimation = $toAnimateElement.attr('data-caption-animate');
                        $toAnimateElement.removeClass('animated').removeClass(elementAnimation).addClass('not-animated');
                    });
                },
                onSlideChangeEnd: function (swiper) {
                    $('#slider .swiper-slide').each(function () {
                        if ($(this).find('video').length > 0) {
                            $(this).find('video').get(0).pause();
                        }
                    });
                    $('#slider .swiper-slide:not(".swiper-slide-active")').each(function () {
                        if ($(this).find('video').length > 0) {
                            if ($(this).find('video').get(0).currentTime != 0) $(this).find('video').get(0).currentTime = 0;
                        }
                    });
                    if ($('#slider .swiper-slide.swiper-slide-active').find('video').length > 0) {
                        $('#slider .swiper-slide.swiper-slide-active').find('video').get(0).play();
                    }

                    $('#slider .swiper-slide.swiper-slide-active [data-caption-animate]').each(function () {
                        var $toAnimateElement = $(this);
                        var toAnimateDelay = $(this).attr('data-caption-delay');
                        var toAnimateDelayTime = 0;
                        if (toAnimateDelay) {
                            toAnimateDelayTime = Number(toAnimateDelay) + 300;
                        } else {
                            toAnimateDelayTime = 300;
                        }
                        if (!$toAnimateElement.hasClass('animated')) {
                            $toAnimateElement.addClass('not-animated');
                            var elementAnimation = $toAnimateElement.attr('data-caption-animate');
                            setTimeout(function () {
                                $toAnimateElement.removeClass('not-animated').addClass(elementAnimation + ' animated');
                            }, toAnimateDelayTime);
                        }
                    });
                }
            });

            $('#slider-arrow-left').on('click', function (e) {
                e.preventDefault();
                swiperSlider.swipePrev();
            });

            $('#slider-arrow-right').on('click', function (e) {
                e.preventDefault();
                swiperSlider.swipeNext();
            });

            $('#slide-number-current').html(swiperSlider.activeIndex + 1);
            $('#slide-number-total').html(swiperSlider.slides.length);
        });
    </script>

</section>

<!-- Content
        ============================================= -->
<section id="content">
    <div class="content-wrap">
        <div class="container clearfix">
		
            <div id="section-features" class="title-center page-section">
                <h2 style="font-size:40px; text-transform: uppercase; font-weight: 700;letter-spacing: 1px;margin-bottom: 0;">
					100% Commission. Earn more with No Loopholes or Hidden Fees
				</h2>
                <div class=" pricing-extended bottommargin clearfix">
                    <p>The nation’s only true 100% commission real estate cloud brokerage. You can definitely find
                        many companies offering 100% commission and per transaction fee brokerage companies but most
                        are masked with hidden fees not allowing for real savings. Synre has 3 easy plans that will
                        amount to hundreds to thousands of dollars saved on your earned commission annually. </p>
                </div>
            </div>
        </div>
        <div class="clear"></div>
         <div class="content-wrap nopadding">
            <div id="section-features"
                 class="section parallax full-screen dark nomargin noborder heading-block title-center page-section"
                 style="background-image: url('images/content.jpg');" data-stellar-background-ratio="0.4">

                <h2 style="color:#FFF">Commission saving plans.</h2>

                 <div id="web_view" class="promos">  
					<div class="promo">
					  <div class="deal">
						<span>Core Plan</span>
						 
					  </div>
					  <span class="price">80/20</span>
					  <ul class="features">
						<li>80% commission you keep more!</li>
						<li>Is this plan for you?</li>
						<li>Click More to find out!</li>   
					  </ul>
					  <a href="{{url('agent-core-plan-80-20-split')}}" class="select"><b>More...</b></a>
					   
					</div>
					<div class="promo scale">
					  <div class="deal">
						<span>Growth Plan</span>
						 
					  </div>
					  <span class="price">90/10</span>
					  <ul class="features">
						<li>90% commission you keep more!</li>
						  <li>Is this plan for you?</li>
						<li>Click More to find out!</li>    
					  </ul>
					  <a href="{{url('agent-growth-plan-90-10-split')}}" class="select"><b>More...</b></a>
					 
					</div>
					<div class="promo">
					  <div class="deal">
						<span>Pro Plan</span>
						 
					  </div>
					  <span class="price">100%</span>
					  <ul class="features">
						<li>100% commission you keep more!</li>
						  <li>Is this plan for you?</li>
						<li>Click More to find out!</li>   
					  </ul>
					   <a href="{{url('agent-pro-plan-100-split')}}" class="select"><b>More...</b></a>
					 
					</div>
				</div>
			<!-- -->
		<div id="res_boxes">			
		 <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
         <link rel="stylesheet" href="http://thecommissionplan.com/css/box_style.css">
 			<div class="pricing-container">
				<ul class="pricing-list bounce-invert">
				<li style="border-radius:10px">
					<ul class="pricing-wrapper">
						<li data-type="monthly" class="is-visible">
							<header class="pricing-header">
								<h2>Core Plan</h2>
								<div class="price">
									<span class="currency"></span>
									<span class="value">80/10</span>
								 
								</div>
							</header>
							<div class="pricing-body">
								<ul class="pricing-features">
									<li>80% commission you keep more!</li>
									<li>Is this plan for you?</li>
									<li>Click More to find out!</li> 
								</ul>
							</div>
							<footer class="pricing-footer">
							<a class="select" href="{{url('agent-core-plan-80-20-split')}}"><b>More...</b></a>
							</footer>
						</li>
					 
					</ul>
				</li>
				<li>
					<ul class="pricing-wrapper">
						<li data-type="monthly" class="is-visible">
							<header class="pricing-header">
								<h2>Growth Plan</h2>
								<div class="price">
									<span class="currency"></span>
									<span class="value">90/10</span>
								 
								</div>
							</header>
							<div class="pricing-body">
								<ul class="pricing-features">
									<li>90% commission you keep more!</li>
									  <li>Is this plan for you?</li>
									<li>Click More to find out!</li>    
								 
								</ul>
							</div>
							<footer class="pricing-footer">
								<a class="select" href="{{url('agent-growth-plan-90-10-split')}}"><b>More...</b></a>
							</footer>
						</li>
						 
					</ul>
				</li>
				<li>
					<ul class="pricing-wrapper">
						<li data-type="monthly" class="is-visible">
							<header class="pricing-header">
								<h2>Pro Plan</h2>
								<div class="price">
									<span class="currency"></span>
									<span class="value">100%</span>
								
								</div>
							</header>
							<div class="pricing-body">
								<ul class="pricing-features">
									<li>100% commission you keep more!</li>
									  <li>Is this plan for you?</li>
									<li>Click More to find out!</li>
								  
								</ul>
							</div>
							<footer class="pricing-footer">
								<a class="select" href="{{url('agent-pro-plan-100-split')}}"><b>More...</b></a>
							</footer>
						</li>
						 
					</ul>
				</li>
			</ul>
			</div>
		</div>
		<!-- -->
            </div>
        </div>
        <div class="clear"></div>

        <div class="container clearfix"></div>
    </div>
</section>
<!-- #content end -->
@stop