{{-- Part of tuesday_design project. --}}
@extends('front.layouts.app')

@section('style')
    <link href="{{ asset('css/home.css') }}" rel="stylesheet" charset="utf-8"/>
@stop

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
    <script>
        var scene = document.getElementById('parallax-scene');
        var parallaxInstance = new Parallax(scene);
    </script>
@stop

{{--Page Class--}}
@section('main-content')
    <div class="content">
        <div class="main-vision" id="parallax-scene">
            <img class="bg-part d-none d-md-block" data-depth="0.1" src="{{ asset('images/bg-home-01.png') }}" alt="">
            <img class="bg-part d-none d-md-block" data-depth="0.2" src="{{ asset('images/bg-home-02.png') }}" alt="">
            <img class="bg-part d-none d-md-block" data-depth="0.2" src="{{ asset('images/bg-home-03.png') }}" alt="">
            <img class="bg-part d-none d-md-block" data-depth="0.8" src="{{ asset('images/bg-home-04.png') }}" alt="">
            <img class="bg-part d-block d-md-none" src="{{ asset('images/bg-home-phone.png') }}" alt="">
        </div>
        <div class="cover">
            <h1 class="cover-img">
                Tuesday<br/>Design
            </h1>
            <div class="extract-links d-flex justify-content-center">
                <a href="{{ route('front.work') . '#介面設計' }}">網頁設計</a>
                <a href="{{ route('front.work') . '#前端工程' }}">前端工程</a>
                <a href="{{ route('front.work') . '#品牌規劃' }}">品牌規劃</a>
            </div>
        </div>
    </div>
@stop