@extends('app.master')

@section('seo')
	@include('app.inc.seo', [
		'title'       => 'Afiliado i360',
		'description' => 'Aumente seus rendimentos oferecendo o iPABX i360 aos seus clientes',
		'route'       => route('affiliates'),
	])
@stop

@section('styles')
	@parent
	<link rel="stylesheet" type="text/css" href="{{ Asset::v('assets/css/sections/partners.css') }}">
@stop

@section('content')
	<section class="section section-banner p-0 text-center">
		<div class="banner-item">
			<div class="banner-item-image">
				<img src="{{ asset('assets/images/tmp/banners/05.png') }}" alt="Fácil de usar, rápido de configurar e gera resultados para sua empresa que vão dar o que falar.">
			</div>
			{{-- /banner-item-image --}}

			<div class="banner-item-description d-none d-lg-block">
				<h2 class="banner-title">
					Dê Voz aos seus Rendimentos: fácil de usar, rápido de instalar e gera resultados para você que vão dar o que falar.
				</h2>

				<div class="banner-description">
					<p>
						Conheça os benefícios de representar o PABX na nuvem que irá revolucionar a sua maneira de fazer negócios.
					</p>
				</div>
				{{-- /banner-description --}}

				<a href="#section-differentials" class="btn btn-secundary btn-anchor" title="Conheça os benefícios">Conheça os benefícios</a>
			</div>
			{{-- /banner-item-description --}}
		</div>
		{{-- /banner-item --}}
	</section>
	{{-- /section --}}

	<section id="section-differentials" class="section section-differentials text-center">
		<svg class="detail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.76 19.22"><defs></defs><path class="cls-1" d="M960.66,985.76h-1.32A19.5,19.5,0,0,0,943,994.57h0A23.55,23.55,0,0,1,926.62,1005h66.76A23.55,23.55,0,0,1,977,994.57h0A19.5,19.5,0,0,0,960.66,985.76Z" transform="translate(-926.62 -985.76)"/></svg>

		<div class="container">
			<div class="section-content">
				<h2 class="section-title white">Conheça todas as vantagens<br class="d-block d-lg-block" /> <strong>de ser um afiliado i360</strong></h2>

				<div class="section-description white">
					{!! $aboutAffiliates->description !!}
				</div>
				{{-- /section-description --}}

				<div class="row row-blocks justify-content-center">
					@foreach($aboutAffiliates->awards as $item)
					<div class="col-6 col-md-3 col-lg-3 col-blocks">
						<div class="block-differential text-center">
							<div class="block-differential-image">
								<div class="table">
									<div class="centraliza">
										<img src="{{ $item->present->picture(100,82,'fill') }}" alt="{{ strip_tags($item->title) }}">
									</div>
									{{-- /centraliza --}}
								</div>
								{{-- /table --}}
							</div>
							{{-- /block-differential-image --}}

							<h3 class="block-differential-title mb-0">
								{!! strip_tags($item->title,'<br><strong>') !!}
							</h3>
						</div>
						{{-- /block-differential --}}
					</div>
					@endforeach
					{{-- /col --}}

				</div>
				{{-- /row --}}
			</div>
			{{-- /section-content --}}
		</div>
		{{-- /container --}}
	</section>
	{{-- /section --}}

	@include('app.modules.section-ipabx')
	{{-- /section --}}


	<section class="section section-phases text-center">
		<div class="container">
			<div class="section-content">
				<h3 class="section-title">Como ser um afiliado i360</h3>

				<div class="section-description">
					<p>
						Evolua de Nível de acordo com o acúmulo de ramais que você indicar e contratarem o i360 e ganhe bonificações. Faça seu cadastro que nossa equipe entrará em contato com você.
					</p>
				</div>
				{{-- /section-description --}}

				<div class="block-phases">
					<svg class="detail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.76 19.22"><defs></defs><path class="cls-1" d="M959.34,2633.08h1.32a19.48,19.48,0,0,0,16.31-8.82h0a23.53,23.53,0,0,1,16.41-10.4H926.62a23.53,23.53,0,0,1,16.41,10.4h0A19.48,19.48,0,0,0,959.34,2633.08Z" transform="translate(-926.62 -2613.86)"/></svg>

					<div class="block-phases-content">
						<div class="swiper-container swiper-steps">
							<div class="swiper-wrapper">
								<div class="swiper-slide step-item text-left">
									<div class="row row-blocks">
										<div class="col-lg-3 col-blocks col-image">
											<div class="block-step-image">
												<div class="table">
													<div class="centraliza">
														<img src="{{ asset('assets/images/tmp/cadastro.png') }}" alt="Cadastro">
													</div>
													{{-- /centraliza --}}
												</div>
												{{-- /table --}}
											</div>
											{{-- /block-step-image --}}
										</div>
										{{-- /col --}}

										<div class="col-lg-8 col-blocks mt-4 mt-lg-0">
											<div class="step-content">
												<!--div class="step-number">Passo 1</div-->

												<div class="section-title white">Cadastro</div>

												<div class="step-description white">
													<p>
														Realize o cadastro clicando no botão abaixo e preenchendo com todos os seus dados.
													</p>
												</div>

												<a href="javascript:void(0);" class="btn btn-primary" title="Faça seu cadastro" data-toggle="modal" data-target="#modal-affiliates">
													Faça seu cadastro
												</a>
											</div>
											{{-- /step-content --}}
										</div>
										{{-- /col --}}
									</div>
									{{-- /row --}}
								</div>
								{{-- /swiper-item --}}
							</div>
							{{-- /swiper-wrapper --}}
						</div>
						{{-- /swiper-container --}}
					</div>
					{{-- /block-phases-content --}}

					<div class="swiper-button swiper-button-prev swiper-steps-prev d-none"></div>
					<div class="swiper-button swiper-button-next swiper-steps-next d-none"></div>
					{{-- /block-phases-content --}}
				</div>
				{{-- /block-phases --}}
			</div>
			{{-- /section-content --}}
		</div>
		{{-- /container --}}
	</section>
	{{-- /section --}}

	@include('app.modules.section-contact')
	{{-- /section --}}
@stop