@push('styles')
	<style media="screen">
		.whatsapp-1{
			background: #076056;
			color: #ffffff;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.whatsapp-1 .logo{
			width: 150px;
			height: 150px;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #ccc;
			margin: 0 auto;
			border-radius: 50%;
			margin-bottom: 10px;
		}
		.whatsapp-1 .social-icons{
			margin-top: 10px;
			margin-bottom: 20px;
		}
		.whatsapp-1 .social-icons i{
			font-size: 25px;
			margin-right: 15px;
			color: #333333;
		}
		.whatsapp-1 .btn.link{
			background: #ffffff;
			border: 2px solid #000000;
			color: #000000;
		}
		.whatsapp-1 .btn.link:hover,
		.whatsapp-1 .btn.link:active,
		.whatsapp-1 .btn.link:checked,
		.whatsapp-1 .btn.link.active{
			background: #333333;
			border: 2px solid #000000;
			color: #ffffff;
		}
		.whatsapp-1 em{
			font-style: normal;
		}
	</style>
@endpush
<div class="container-fluid whatsapp-1">
	<div class="main box">
		<div class="logo" style="background-image: url('{{$pagina->imagem}}')"></div>
		<p class="text-center"><b>{{$pagina->titulo1}}</b></p>
		<p class="text-center mb-4">
			<em>{!!$pagina->descricao!!}</em>
		</p>
		<div class="d-grid gap-2">
			@foreach ($pagina->botoes as $key => $botao)
				<a href="{{$botao->link}}" class="btn btn-lg link btn-outline-light"><i class="fa fa-whatsapp"></i> {{$botao->texto}}</a>
			@endforeach
		</div>
	</div>
</div>