{% extends 'base.twig' %}

{% block content %}
	<section class="Single-colaborative _cabecalho">
		<div class="Container _flex _flex-column _items-center">
			{% if post.meta.logo %}
				<img src="{{Image(post.meta.logo).src}}" alt="Logo {{post.title}}" width="{{post.meta.logo.width}}" height="{{post.meta.logo.height}}">
			{% endif %}

			{% if post.texto %}
				<div class="Body _text-center">{{post.texto|wpautop}}</div>
			{% endif %}
		</div>
	</section>

	{# Geral #}
	<section class="Single-colaborative _instrucoes _pt-md _pb-md">
		<div class="Container">
			<div class="cabecalho">
				<h2 class="Title _sm _text-center">Faça seu cadastro</h2>
				<p class="Body _text-center">Siga os passos abaixo para criar sua conta de forma rápida e segura</p>
			</div>
			<div class="Row _gutters-x">
				<div class="col-4">
					<div class="number _show-mb">1</div>
					<img src="{{asset('images/lp/cadastro.png')}}" alt="Cadastro">
					<div class="item">
						<div class="number _hide-mb">1</div>
						<h3 class="Title _xs">Preencha o formulário</h3>
						<p class="Body">
							<a href="{{ option('links_colaborative').cadastro }}" target="_blank" style="font-weight: bold;">Clique aqui</a>
							e cadastre-se rapidamente informando seu nome, documento, data de nascimento e celular.</p>
					</div>
				</div>
				<div class="col-4">
					<div class="number _show-mb">2</div>
					<img src="{{asset('images/lp/autenticacao.png')}}" alt="Autenticação">
					<div class="item">
						<div class="number _hide-mb">2</div>
						<h3 class="Title _xs">Autenticação segura</h3>
						<p class="Body">Confirme seu número de celular através do código de verificação enviado por SMS.</p>
					</div>
				</div>
				<div class="col-4">
					<div class="number _show-mb">3</div>
					<img src="{{asset('images/lp/seguranca.png')}}" alt="Segurança">
					<div class="item _3">
						<div class="number _hide-mb">3</div>
						<h3 class="Title _xs">Segurança dos seus dados</h3>
						<p class="Body">Crie uma senha segura para proteger seu acesso e manter suas informações confidenciais.</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	{# Acesso #}
	<section class="Single-colaborative _acesso _pt-md _pb-md _bg-gray">
		<div class="Container">
			<div class="cabecalho">
				<h2 class="Title _sm">Acompanhe tudo de onde estiver</h2>
				<p class="Body">O Colaborative foi desenvolvido para oferecer praticidade e acesso rápido às informações importantes para os colaboradores.
				</p>
			</div>

			<div class="Row _gutters-x _reversed">
				<div class="col-6 _flex _flex-column _white">
					<div class="content">
						<h2 class="Title _sm">Pelo seu celular</h2>
						<p class="Body">Com o aplicativo do Colaborative, você pode acessar suas informações a qualquer hora e em qualquer lugar, diretamente do seu celular Android ou iPhone. Baixe o app, faça login e aproveite todas as funcionalidades na palma da sua mão.</p>
						<div class="links _flex _items-center">
							<a href="{{option('links_colaborative').google_play}}" target="_blank"><img src="{{asset('images/google-play.png')}}" alt="Google play"></a>
							<a href="{{option('links_colaborative').apple_store}}" target="_blank"><img src="{{asset('images/app-store.png')}}" alt="App store"></a>
						</div>
					</div>

					<img class="image" src="{{asset('images/colaborative/app.png')}}" alt="Celular">
				</div>
				<div class="col-6 _flex _flex-column _dark">
					<div class="content">
						<h2 class="Title _sm">Pelo seu navegador</h2>
						<p class="Body">Acesse a plataforma diretamente pelo navegador do seu computador, seja em casa ou no escritório, com conexão à internet. Basta entrar no site, fazer login e ter acesso a todos os recursos disponíveis.
						</p>
						<a href="{{ option('links_colaborative').aplicacao }}" target="_blank" class="Button _black">Acessar portal web</a>
					</div>

					<img class="image" src="{{asset('images/colaborative/portal-web.png')}}" alt="Notebook">
				</div>
			</div>
		</div>
	</section>

	{# FAQ #}
	{% if faq|length > 0 %}
		<section class="_pt-xl _pb-md">
			<div class="Container">
				<h2 class="Title _pb-70 _sm">{{post.meta('faq').titulo}}</h2>

				{% include "componentes/lista-expansivel.twig" with {items: faq} only %}
			</div>
		</section>
	{% endif %}
{% endblock %}