@extends('layouts.app')

@section('head')
	<title>{{ trans('commons.about_title') }} | {{ env('APP_NAME') }}</title>
	<meta name="description" content="{{ trans('commons.about_metadescription') }}">

	<meta property="og:type" content="article" />
	<meta property="og:url" content="{{ route(trans('url.about')) }}" />
	<meta property="og:title" content="{{ trans('commons.about_title') }}" />
	<meta property="og:image" content="{{ url('/img/nosotros-img.jpg') }}" />
	<meta property="og:description" content="{{ trans('commons.about_metadescription') }}" />
@endsection

@section('content')
	<section id="portfolioHome">
		<div class="container">
			<div class="row">
				<div class="col main-title">
					<h1>{!! trans('commons.about_subtitle_1') !!}</h1>
					<hr>
				</div>
			</div>
			<div class="row">
				<div class="col-md-7">
					<img src="/img/nosotros-img.jpg" class="img-fluid">
				</div>
				<div class="col-md-5">
					<div class="about__bg">
						<p style="font-size: 23px;color: #444242;"><strong>{{ trans('commons.about_subtitle_2') }} <span style="font-size: 25px;">Scenic Studios</span> y <span style="font-size: 25px;">Sarao Events</span>.</strong></p>
						<p style="color: #848484;font-family: 'Montserrat';font-size: 14px;line-height: 25px;">{{ trans('commons.about_text_1') }}</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<img src="/img/pleca-diagonal.png" class="img-fluid" style="margin-top: 60px;">
	<section id="misionContainer">
		<div class="container">
			<div class="row">
				<div class="col">
					<p style="margin-bottom: 0"><small>{{ trans('commons.about_subtitle_3') }}</small></p>
					<p class="h1 font-title">{{ trans('commons.our_mission') }}</p>
					<hr style="width: 100px; border-color: black;display: inline-block;border-width: 3px;margin: 30px 0px;margin-bottom: 45px">
					<p style="color: #848484;font-family: 'Montserrat';font-size: 14px;line-height: 25px;">{{ trans('commons.our_mission_text') }}</p>
				</div>
			</div>
			<div class="row" id="misionWrapper">
				<div class="col">
					<img src="/img/fase-01.png">
					<p class="misionWrapperTitle"><strong>1° {{ trans('commons.phase') }}</strong></p>
					<p class="misionWrapperText">{{ trans('commons.phase_1') }}</p>
					<hr style="border-color: #c3d445;">
				</div>
				<div class="col">
					<img src="/img/fase-02.png">
					<p class="misionWrapperTitle"><strong>2° {{ trans('commons.phase') }}</strong></p>
					<p class="misionWrapperText">{{ trans('commons.phase_2') }}</p>
					<hr style="border-color: #c80988;">
				</div>
				<div class="col">
					<img src="/img/fase-03.png">
					<p class="misionWrapperTitle"><strong>3° {{ trans('commons.phase') }}</strong></p>
					<p class="misionWrapperText">{{ trans('commons.phase_3') }}</p>
					<hr style="border-color: #4477ba;">
				</div>
				<div class="col">
					<img src="/img/fase-04.png">
					<p class="misionWrapperTitle"><strong>4° {{ trans('commons.phase') }}</strong></p>
					<p class="misionWrapperText">{{ trans('commons.phase_4') }}</p>
					<hr style="border-color: black;">
				</div>
			</div>
		</div>
	</section>
	<img src="/img/pleca-diagonal-black.png" class="img-fluid" style="padding-top: 30px;background-color: #f6f6f6;">

	<section id="teamContainer">
		<div class="container">
			<div class="row">
				<div class="col">
					<p style="margin-bottom: 0;color: white;"><small>ALGUNOS DE NUESTROS EXPERTOS EN</small></p>
					<p class="h1 font-title" style="color: white;">{{ trans('commons.team') }}</p>
					<hr style="width: 100px; border-color: white;display: inline-block;border-width: 3px;margin: 30px 0px;margin-bottom: 45px">
				</div>
			</div>
			<div class="row">
				<div class="col-md-3" style="margin-bottom: 30px;">
					<img src="/img/team-01.jpg" class="img-fluid">
					<p class="teamName"><strong>ARQ. BLAINE VALLADARES</strong> <br> <small style="font-family: 'Montserrat';font-size: 13px;">DIRECCION DE DISEÑO</small></p>
				</div>
				<div class="col-md-3" style="margin-bottom: 30px;">
					<img src="/img/team-03.jpg" class="img-fluid">
					<p class="teamName"><strong>ARQ. ABEL CARDOZ</strong> <br> <small style="font-family: 'Montserrat';font-size: 13px;">DISEÑADOR</small></p>
				</div>
				<div class="col-md-3" style="margin-bottom: 30px;">
					<img src="/img/team-04.jpg" class="img-fluid">
					<p class="teamName"><strong>DI. DEMETRIO IBARRA</strong> <br> <small style="font-family: 'Montserrat';font-size: 13px;">DISEÑADOR INDUSTRIAL</small></p>
				</div>
				<div class="col-md-3" style="margin-bottom: 30px;">
					<img src="/img/team-02.jpg" class="img-fluid">
					<p class="teamName"><strong>ARQ. MONTSERRATH ZAVALA</strong> <br> <small style="font-family: 'Montserrat';font-size: 13px;">ARQUITECTO</small></p>
				</div>
				<div class="col-md-3" style="margin-bottom: 30px;">
					<img src="/img/team-07.jpg" class="img-fluid">
					<p class="teamName"><strong>DI. ITZEL MARTINEZ</strong> <br> <small style="font-family: 'Montserrat';font-size: 13px;">DISEÑADOR INDUSTRIAL</small></p>
				</div>
			</div>
		</div>
	</section>

	<section id="spiritContainer">
		<div class="container">
			<div class="row">
				<div class="col text-center">
					<p style="margin-bottom: 0"><small>{{ trans('commons.brain') }}</small></p>
					<p class="h1 font-title">{{ trans('commons.spirit') }}</p>
					<hr style="width: 100px; border-color: black;border-width: 3px;margin: 30px auto;margin-bottom: 35px;">
					<p style="color: #848484;font-family: 'Montserrat';font-size: 14px;line-height: 25px;">{{ trans('commons.spirit_text') }}</p>
				</div>
			</div>
		</div>
	</section>

	<section id="galleryTeamContainer">
		<div class="container-fluid">
			<div class="row">
				<div style="background-image: url('/img/our-atika-01.jpg');"></div>
				<div style="background-image: url('/img/our-atika-02.jpg');"></div>
				<div style="background-image: url('/img/our-atika-03.jpg');"></div>
			</div>
		</div>
	</section>

	<section id="partnersContainer">
		<div class="container">
			<div class="row">
				<div class="col" id="partnersBorder">
					<p style="margin-bottom: 0; color: white"><small></small></p>
					<p class="h1 font-title">{{ trans('commons.aliances') }}</p>
				</div>
				<div class="col">
					<a target="_blank" href="https://www.scenic.mx"><img src="/img/scenic.png" style="width: 90%;"></a>
				</div>
				<div class="col">
					<a target="_blank" href="https://www.sarao.com.mx"><img src="/img/sarao.png" style="width: 90%;"></a>
				</div>
			</div>
		</div>
	</section>
@endsection