@extends('layouts.web')

@section('title', webText('aboutUs.pageTitle'))
@section('class', 'page--about')

@section('content')

    <section class="teaser teaser--small" style="background-image: url({{ asset('images/teaser-o-nas.jpg') }});">

        <div class="container d-flex align-items-center justify-content-center justify-content-lg-between">
            <h1 class="teaser__title">{{ webText('aboutUs.pageTitle') }}</h1>
        </div>

    </section>

    @include('layouts.includes.nav')

    <section class="section">

        <!-- Circle -->
        <img data-src="{{ asset('images/circle.svg') }}" alt="" class="circle lazy">

        <div class="container text-center text-lg-left">

            <h2 c-lass="h2">{{ webText('aboutUs.whatDoWeDo.title') }}</h2>

            <ul class="list list--custom space-m-b-50">
                <li class="list__item">{{ webText('aboutUs.whatDoWeDo.subtitle') }}</li>
            </ul>

            {!! webText('aboutUs.whatDoWeDo.text') !!}


            <!-- Images -->
            <div class="boxes d-flex flex-column flex-lg-row-reverse space-m-t-80">

                <div class="space-m-b-50">
                    <div class="box box--right box--image">
                        <img class="lazy" data-src="{{ asset('images/about-2.png') }}" alt="">
                    </div>
                </div>

                <div>
                    <div class="box box--left box--image box--wide">
                        <img class="lazy" data-src="{{ asset('images/about-1.png') }}" alt="">
                    </div>
                </div>

            </div>

        </div>

    </section>

    <section class="section section--grey space-m-b-0">
        <div class="container text-center text-lg-left">
            <h2 class="h2">{{ webText('aboutUs.whatDidWeDo.title') }}</h2>
            <h3 class="h3">{{ webText('aboutUs.whatDidWeDo.subtitle') }}</h3>
            {!! webText('aboutUs.whatDidWeDo.text') !!}
        </div>
    </section>

    <section class="section section--projects space-p-t-0 space-p-b-80">

        <div class="container">
            @foreach($projectsStart as $project)
                @include('web.includes.projectBox', ['project' => $project, 'loop' => $loop])
            @endforeach

            @if($projectsMore->count())
            <div class="project-btn text-center space-m-t-80">
                <a href="javascript:expandProjects()" id="btn-expand-projects" class="btn btn--gradient">{{ webText('aboutUs.whatDidWeDo.loadMore') }}</a>
            </div>

            <div id="projects-expanded" style="display: none">
                @foreach($projectsMore as $project)
                    @include('web.includes.projectBox', ['project' => $project, 'loop' => $loop])
                @endforeach
            </div>
            @endif

            <script>
                var expandProjects = function() {
                    $('#btn-expand-projects').parent().hide();
                    $('#projects-expanded').show();
                };
            </script>
        </div>

    </section>

    <section class="section section--certificate space-p-t-0">
        <div class="container text-center text-lg-left">
            <div class="row">
                <div class="col-lg-6 space-m-b-30">
                    <h3 class="h3">
                        {{ webText('aboutUs.certificate.title') }}
                    </h3>

                    {!! webText('aboutUs.certificate.text') !!}

                </div>
                <div class="col-lg-6">
                    <figure>
                        <img class="lazy" data-src="{{ asset('images/zastupujeme-1.png') }}" alt="">
                    </figure>
                    <figure class="certificate">
                        <img class="lazy" data-src="{{ asset('images/certificate2.png') }}" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>


    <!-- Logos -->
    @include('web.includes.logos')

@endsection