@extends('layout.app')

@section('content')
<section id="home-inicio" class="parallax">
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-6 col-sm-8 col-sm-offset-4 col-xs-12">
				<h1 class="home-inicio-title">
					<span>
						Pasión por la
						<em>Creatividad</em>
					</span>
					<span>
						<span>las mejores ideas /</span>
						<span>estamos aquí para ayudarte</span>
					</span>
				</h1>
			</div>
		</div>
	</div>
</section>
<section id="home-proyectos" class="parallax">
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-6 col-sm-8 col-sm-offset-4 col-xs-12">
				<h2 class="home-section-title clearfix text-right">
					<span>01</span>
					<span>proyectos</span>
					<hr>
				</h2>
				<p class="intro-text">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis accusamus facere quasi, eos quaerat quisquam ex, in et ab enim quo aut alias! Voluptas, fugit, id. Eaque similique omnis totam!
				</p>
			</div>
		</div>
	</div>
	<div class="container proyectos-slider-wrap">
		<div class="row">
			<div class="col-lg-10 col-lg-offset-1 col-xs-12">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li class="active"><a href="#" data-filter="">todos</a></li>
					<li ><a href="#" data-filter="web">web</a></li>
					<li ><a href="#" data-filter="apps">apps</a></li>
					<li ><a href="#" data-filter="consultoria">consultoría</a></li>
					<li ><a href="#" data-filter="diseno">diseño</a></li>
				</ul>				
			</div>
		</div>
	</div>
	<div class="container proyectos-slider-wrap">
		<div id="proyectos-slider-main">
			<img src="img/proyectos-bg-todos.png" id="proyectos-bg" alt="">
			<img src="img/icon-carousel-prev.png" class="prev" alt="">
			<img src="img/icon-carousel-next.png" class="next" alt="">
			<ul class="proyectos-slider">
				<li class="web consultoria"><img src="img/proyecto-1.jpg" /></li>
				<li class="apps consultoria"><img src="img/proyecto-2.jpg" /></li>
				<li class="web apps"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=3&w=700&h=395" /></li>
				<li class="diseno consultoria"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=4&w=700&h=395" /></li>
				<li class="web apps"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=5&w=700&h=395" /></li>
				<li class="diseno"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=6&w=700&h=395" /></li>
				<li class="web app"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=7&w=700&h=395" /></li>
				<li class="diseno consultoria"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=8&w=700&h=395" /></li>
				<li class="web"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=9&w=700&h=395" /></li>
				<li class="diseno"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=10&w=700&h=395" /></li>
				<li class="web apps"><img src="img/proyecto-7.jpg" /></li>
			</ul>
		</div>
	</div>
</section>
<section id="home-nosotros" class="parallax">
	<div class="container absolute-section-title">
		<div class="row">
			<div class="col-sm-6 col-xs-12">
				<h2 class="home-section-title clearfix text-left">
					<span>02</span>
					<span>nosotros</span>
					<hr>
				</h2>
			</div>
		</div>
	</div>
	<div class="container h100">
		<div class="row h100">
			<ul id="nosotros-carousel-top" class="h100">
				<li class="dude clearfix h100">
					<div class="col-sm-6 col-xs-12">
						<div class="dude-data-wrap">
							<h4>Nancy Mejía</h4>
							<h5>front-end developer</h5>
							<p class="intro-text">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta consequatur, nobis! Tempore rerum totam ipsa quo nobis ducimus, laboriosam atque quasi earum hic asperiores excepturi mollitia. Mollitia officiis aspernatur quae.
							</p>
							<span class="nosotros-contacto">contactame en:</span>
							<ul class="dude-social list-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6 col-xs-12">
						<div class="dude-selfie-wrap">
							<img src="img/nosotros-dude-nancy.png" alt="" class="dude-selfie">
						</div>
					</div>
				</li>
				<li class="dude">
					<div class="col-sm-6 col-xs-12">
						<div class="dude-data-wrap">
							<h4>Nancy Mejía 2</h4>
							<h5>front-end developer</h5>
							<p class="intro-text">
								Beatae, totam itaque odio architecto error perspiciatis adipisci laborum iste. Suscipit dicta consequatur qui laborum modi, sed in recusandae ipsum. Minima ullam magni voluptate quaerat! Corporis porro laborum sapiente aliquam.
							</p>
							<span class="nosotros-contacto">contactame en:</span>
							<ul class="dude-social list-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6 col-xs-12">
						<div class="dude-selfie-wrap">
							<img src="img/nosotros-dude-nancy.png" alt="" class="dude-selfie">
						</div>
					</div>
				</li>
				<li class="dude">
					<div class="col-sm-6 col-xs-12">
						<div class="dude-data-wrap">
							<h4>Nancy Mejía 3</h4>
							<h5>front-end developer</h5>
							<p class="intro-text">
								Enim nihil iste minima sed aliquid, saepe dolorem, earum dicta nulla, ipsam maiores dolores! Repudiandae, culpa, iste, dolor impedit libero porro ab quis odio aliquid eaque amet sint quas adipisci.
							</p>
							<span class="nosotros-contacto">contactame en:</span>
							<ul class="dude-social list-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6 col-xs-12">
						<div class="dude-selfie-wrap">
							<img src="img/nosotros-dude-nancy.png" alt="" class="dude-selfie">
						</div>
					</div>
				</li>
				<li class="dude">
					<div class="col-sm-6 col-xs-12">
						<div class="dude-data-wrap">
							<h4>Nancy Mejía 4</h4>
							<h5>front-end developer</h5>
							<p class="intro-text">
								Enim nihil iste minima sed aliquid, saepe dolorem, earum dicta nulla, ipsam maiores dolores! Repudiandae, culpa, iste, dolor impedit libero porro ab quis odio aliquid eaque amet sint quas adipisci.
							</p>
							<span class="nosotros-contacto">contactame en:</span>
							<ul class="dude-social list-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6 col-xs-12">
						<div class="dude-selfie-wrap">
							<img src="img/nosotros-dude-nancy.png" alt="" class="dude-selfie">
						</div>
					</div>
				</li>
				<li class="dude">
					<div class="col-sm-6 col-xs-12">
						<div class="dude-data-wrap">
							<h4>Nancy Mejía 5</h4>
							<h5>front-end developer</h5>
							<p class="intro-text">
								Enim nihil iste minima sed aliquid, saepe dolorem, earum dicta nulla, ipsam maiores dolores! Repudiandae, culpa, iste, dolor impedit libero porro ab quis odio aliquid eaque amet sint quas adipisci.
							</p>
							<span class="nosotros-contacto">contactame en:</span>
							<ul class="dude-social list-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6 col-xs-12">
						<div class="dude-selfie-wrap">
							<img src="img/nosotros-dude-nancy.png" alt="" class="dude-selfie">
						</div>
					</div>
				</li>
				<li class="dude">
					<div class="col-sm-6 col-xs-12">
						<div class="dude-data-wrap">
							<h4>Nancy Mejía 6</h4>
							<h5>front-end developer</h5>
							<p class="intro-text">
								Enim nihil iste minima sed aliquid, saepe dolorem, earum dicta nulla, ipsam maiores dolores! Repudiandae, culpa, iste, dolor impedit libero porro ab quis odio aliquid eaque amet sint quas adipisci.
							</p>
							<span class="nosotros-contacto">contactame en:</span>
							<ul class="dude-social list-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6 col-xs-12">
						<div class="dude-selfie-wrap">
							<img src="img/nosotros-dude-nancy.png" alt="" class="dude-selfie">
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="container" id="absolute-nosotros-carousel-bottom">
		<div class="row">
			<div class="col-sm-5 col-xs-12" id="nosotros-carousel-bottom-wrap">
				<ul id="nosotros-carousel-bottom">
					<li><img src="img/nosotros-dude-avatar-nancy.png" alt="" class="dude-avatar"></li>
					<li><img src="img/nosotros-dude-avatar-nancy.png" alt="" class="dude-avatar"></li>
					<li><img src="img/nosotros-dude-avatar-nancy.png" alt="" class="dude-avatar"></li>
					<li><img src="img/nosotros-dude-avatar-nancy.png" alt="" class="dude-avatar"></li>
					<li><img src="img/nosotros-dude-avatar-nancy.png" alt="" class="dude-avatar"></li>
					<li><img src="img/nosotros-dude-avatar-nancy.png" alt="" class="dude-avatar"></li>
				</ul>
			</div>
		</div>
	</div>
</section>
<section id="home-servicios" class="parallax">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-sm-offset-6 col-xs-12">
				<h2 class="home-section-title clearfix text-right">
					<span>03</span>
					<span>servicios</span>
					<hr>
				</h2>
				<p class="intro-text">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repellat dolor sit ipsum suscipit obcaecati molestiae est aliquid. Quos quidem possimus laboriosam officia beatae eveniet modi, vitae qui aperiam cumque.
				</p>
			</div>
		</div>
		<div class="row servicios">
			<div class="col-xs-12">
				<div class="row">
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="servicio">
							<div class="servicio-img-wrap">
								<img src="img/icon-servicio-house.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
							<h3 class="servicio-title">
								desarrollo in house
							</h3>
							<p class="intro-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam quos eos sapiente minus nam modi.</p>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="servicio">
							<div class="servicio-img-wrap">
								<img src="img/icon-servicio-app.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
							<h3 class="servicio-title">
								desarrollo de apps
							</h3>
							<p class="intro-text">Doloribus ad nisi sed quas et quo quia voluptatibus, libero officia incidunt accusamus, molestiae in.</p>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="servicio">
							<div class="servicio-img-wrap">
								<img src="img/icon-servicio-diseno.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
							<h3 class="servicio-title">
								diseño web
							</h3>
							<p class="intro-text">Nobis porro ab mollitia distinctio odio pariatur iste praesentium suscipit, dicta placeat non dolorum? Consequuntur.</p>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="servicio">
							<div class="servicio-img-wrap">
								<img src="img/icon-servicio-video.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
							<h3 class="servicio-title">
								videos <i class="separator"></i> animaciones
							</h3>
							<p class="intro-text">Omnis architecto non ratione cupiditate ipsa nobis perferendis, obcaecati consequatur, porro dolorem libero ipsum esse!</p>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="servicio">
							<div class="servicio-img-wrap">
								<img src="img/icon-servicio-imagen.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
							<h3 class="servicio-title">
								imagen corporativa
							</h3>
							<p class="intro-text">Magni quasi esse quod ullam maiores. Ipsum voluptatum iusto necessitatibus error veniam ratione sapiente expedita!</p>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="servicio">
							<div class="servicio-img-wrap">
								<img src="img/icon-servicio-programacion.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
							<h3 class="servicio-title">
								programación
							</h3>
							<p class="intro-text">Debitis, eum quisquam nisi inventore quo explicabo sunt nihil a veniam, qui dolor consectetur ipsam.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="home-clientes" class="parallax">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-xs-12">
				<h2 class="home-section-title clearfix text-left">
					<span>04</span>
					<span>clientes</span>
					<hr>
				</h2>
			</div>
		</div>
	</div>
	<ul id="clientes-slider">
		<li><img src="img/icon-client-banamex.png" /></li>
		<li><img src="img/icon-client-banorte.png" /></li>
		<li><img src="img/icon-client-cinepolis.png" /></li>
		<li><img src="img/icon-client-coca.png" /></li>
		<li><img src="img/icon-client-profuturo.png" /></li>
		<li><img src="img/icon-client-santander.png" /></li>
		<li><img src="img/icon-client-zurich.png" /></li>
	</ul>
	<ul id="clientes-slider-nav" class="container">
		<li><img src="img/icon-client-banamex-off.png" /></li>
		<li><img src="img/icon-client-banorte-off.png" /></li>
		<li><img src="img/icon-client-cinepolis-off.png" /></li>
		<li><img src="img/icon-client-coca-off.png" /></li>
		<li><img src="img/icon-client-profuturo-off.png" /></li>
		<li><img src="img/icon-client-santander-off.png" /></li>
		<li><img src="img/icon-client-zurich-off.png" /></li>
	</ul>
</section>
<section id="home-contacto" class="parallax">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-xs-12">
				<h2 class="home-section-title clearfix text-right">
					<span>05</span>
					<span>contacto</span>
					<hr>
				</h2>
				<div class="contacto-horario text-right">
					<h4>Horarios</h4>
					<p class="important">
						Lunes a Viernes 9:00 - 20:00
					</p>
				</div>
				<div class="contacto-maneras">
					<div class="row">
						<div class="col-md-9 col-sm-10 col-xs-8 info-wrap">
							<h5>teléfono</h5>
							<p class="info">+52 1 55 7572 2506</p>
						</div>
						<div class="col-md-3 col-sm-2 col-xs-4">
							<div class="contact-img-wrap">
								<img src="img/icon-contacto-telefono.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-9 col-sm-10 col-xs-8 info-wrap">
							<h5>e-mail</h5>
							<p class="info">info@softcodemx.com</p>
						</div>
						<div class="col-md-3 col-sm-2 col-xs-4">
							<div class="contact-img-wrap">
								<img src="img/icon-contacto-email.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-9 col-sm-10 col-xs-8 info-wrap">
							<h5>dirección</h5>
							<p class="info">Av Renato Leduc, Toriello Guerra, Ciudad de México, D.F.</p>
						</div>
						<div class="col-md-3 col-sm-2 col-xs-4">
							<div class="contact-img-wrap">
								<img src="img/icon-contacto-direccion.png" alt="">
								<img src="img/icon-spinner.png" alt="" class="js-spinner">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-xs-12">
				<div class="map-wrap">
					<img src="img/contacto-bg-map.png" alt="">
					<div id="main-map"></div>
				</div>
				<div class="contacto-form">
					<h4>¡te estamos esperando</h4>
					<form class="row">
						<div class="form-group col-sm-6 col-xs-12">
							<label class="sr-only" for="nombre">Nombre</label>
							<input type="text" class="form-control" id="nombre" placeholder="NOMBRE">
						</div>
						<div class="form-group col-sm-6 col-xs-12">
							<label class="sr-only" for="correo">E-Mail</label>
							<input type="email" class="form-control" id="correo" placeholder="E-MAIL">
						</div>
						<div class="col-xs-12">
							<textarea class="form-control" rows="3" placeholder="MENSAJE"></textarea>
						</div>
						<div class="text-center submit-wrap col-xs-12">
							<button type="submit" class="btn btn-primary">ENVIAR</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection