@extends('master')


@section('title', Lang::get('home.meta_title'))

@section('description', Lang::get('home.meta_description'))


@section('content')

    @parent

    <header id="top" class="site-header">

    	<div class="site-header-wrapper">

			<svg class="site-logo" viewBox="0 0 30 60" aria-label="Devrage Studio inc logo">
				<use xlink:href="{{ asset('assets/icons/icons.svg') }}#logo"></use>
			</svg>

			<section class="block-tagline">
				
				<p class="tagline heading-1">{!! Lang::get('home.title-1') !!}</p>
				<p class="subtitle heading-3">{!! Lang::get('home.title-2') !!}</p>

			</section>


    		<a class="anchor" href="#strategy">
				<svg class="arrow-down" viewBox="0 0 24 40" aria-label="Scroll down">
					<use xlink:href="{{ asset('assets/icons/icons.svg') }}#arrow-down"></use>
				</svg>
			</a>


	    	<nav class="navigation">

	    		<div class="navigation-wrapper">

		    		<a class="link active anchor" href="#strategy">Services</a>
		    		<span class="spacer"></span>
		    		<a class="link" href="mailto:{{ Lang::get('home.hello-email') }}">Contact</a>
					<span class="spacer"></span>
					@if( App::getLocale() == 'en' )
					    <a class="link" href="{{ route('switchLocale', ['language' => 'fr']) }}" title="{{ Lang::get('home.language-toggle-title') }}">{{ Lang::get('home.language-toggle') }}</a>
					@else
					    <a class="link" href="{{ route('switchLocale', ['language' => 'en']) }}" title="{{ Lang::get('home.language-toggle-title') }}">{{ Lang::get('home.language-toggle') }}</a>
					@endif

				</div>
	    	
	    	</nav>

    	</div>

    </header>


    <section id="strategy" class="skill-panel skill-panel-1">
    	
        <div class="mask"></div>

    	<div class="skill-panel-wrapper">

    		<h2 class="skill-title heading-2">{{ Lang::get('home.title-3-a') }}</h2>

    		<ul class="skill-list">
    			<li class="skill">{{ Lang::get('home.strategy-1') }}</li>
    			<li class="skill">{{ Lang::get('home.strategy-2') }}</li>
    			<li class="skill">{{ Lang::get('home.strategy-3') }}</li>
    			<li class="skill">{{ Lang::get('home.strategy-4') }}</li>
    		</ul>

    		<a class="anchor" href="#design">
				<svg class="arrow-down" viewBox="0 0 24 40" aria-label="Scroll down">
					<use xlink:href="{{ asset('assets/icons/icons.svg') }}#arrow-down"></use>
				</svg>
			</a>

    	</div>

    </section>


    <section id="design" class="skill-panel skill-panel-2">
    	
        <div class="mask"></div>

       	<div class="skill-panel-wrapper">
    		
    		<h2 class="skill-title heading-2">{!! Lang::get('home.title-3-b') !!}</h2>

    		<ul class="skill-list">
                <li class="skill">{{ Lang::get('home.design-1') }}</li>
                <li class="skill">{{ Lang::get('home.design-2') }}</li>
                <li class="skill">{{ Lang::get('home.design-3') }}</li>
                <li class="skill">{{ Lang::get('home.design-4') }}</li>
    		</ul>

    		<a class="anchor" href="#technology">
				<svg class="arrow-down" viewBox="0 0 24 40" aria-label="Scroll down">
					<use xlink:href="{{ asset('assets/icons/icons.svg') }}#arrow-down"></use>
				</svg>
			</a>

    	</div> 	
    	
    </section>


    <section id="technology" class="skill-panel skill-panel-3">
    	
        <div class="mask"></div>
        
       	<div class="skill-panel-wrapper">
    		
    		<h2 class="skill-title heading-2">{{ Lang::get('home.title-3-c') }}</h2>

    		<ul class="skill-list">
                <li class="skill">{{ Lang::get('home.technology-1') }}</li>
                <li class="skill">{{ Lang::get('home.technology-2') }}</li>
                <li class="skill">{{ Lang::get('home.technology-3') }}</li>
                <li class="skill">{{ Lang::get('home.technology-4') }}</li>
    		</ul>

    		<a class="anchor" href="#contact">
				<svg class="arrow-down" viewBox="0 0 24 40" aria-label="Scroll down">
					<use xlink:href="{{ asset('assets/icons/icons.svg') }}#arrow-down"></use>
				</svg>
			</a>

    	</div>	
    	
    </section>


    <footer id="contact" class="site-footer">
    	
    	<h2 class="contact-title">{{ Lang::get('home.title-4') }}</h2>

    	<div class="contacts">

    		<div class="block-contact">
    			
    			<h3 class="heading heading-4">{{ Lang::get('home.title-4-a') }}</h3>

    			<a class="link email" href="mailto:{{ Lang::get('home.hello-email') }}">{{ Lang::get('home.hello-email') }}</a>

    		</div>

    		<div class="block-contact">

    			<h3 class="heading heading-4">{{ Lang::get('home.title-4-b') }}</h3>

    			<a class="link email" href="mailto:{{ Lang::get('home.job-email') }}">{{ Lang::get('home.job-email') }}</a>
    			
    		</div>

	    	<nav class="socials">

	    		<h3 class="heading heading-4">{{ Lang::get('home.title-4-c') }}</h3>

				<a class="icon" href="https://www.instagram.com/devragestudio/" title="{{ Lang::get('home.instagram_title') }}" target="_blank">
		    		<svg viewBox="0 0 40 40" class="icon" aria-label="Instagram Icon">
		    			<use xlink:href="{{ asset('assets/icons/icons.svg') }}#instagram"></use>
		    		</svg>
				</a>

				<a class="icon" href="https://www.facebook.com/devragestudio/" title="{{ Lang::get('home.facebook_title') }}" target="_blank">
		    		<svg viewBox="0 0 40 40" class="icon" aria-label="Facebook Icon">
		    			<use xlink:href="{{ asset('assets/icons/icons.svg') }}#facebook"></use>
		    		</svg>
				</a>

				<a class="icon" href="https://twitter.com/devragestudio" title="{{ Lang::get('home.twitter_title') }}" target="_blank">
		    		<svg viewBox="0 0 40 40" class="icon" aria-label="Twitter Icon">
		    			<use xlink:href="{{ asset('assets/icons/icons.svg') }}#twitter"></use>
		    		</svg>
				</a>

	    	</nav>

    	</div>


        <div class="arrow-top">

            <a class="anchor" href="#top">
                <svg class="icon" viewBox="0 0 24 40" aria-label="{{ Lang::get('home.scroll-top') }}">
                    <use xlink:href="{{ asset('assets/icons/icons.svg') }}#arrow-top"></use>
                </svg>
            </a>

            <a class="label anchor" href="#top">{{ Lang::get('home.scroll-top') }}</a>
        </div>


    	<p class="copyright reading-text">&copy; Devrage Studio inc.</p>

    </footer>

@stop


@section('js')
	<script src="{{ asset('assets/js/app.js') }}"></script>
@stop