@extends('layouts.front')

@section('content')

    <div id="page" data-barba="container">

        <!-- Page Content -->
        <div id="content" class="page-content">

            <!--Section-->
            <div class="section no-margin">

                <!--Wrapper-->
                <div class="wrapper no-margin">

                    <span class="a-empty-space" style="height: 150px"></span>

                    <!--Column-->
                    <div class="c-col-4"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-8">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h5 class="has-anim" data-stagger="0.1" data-duration="1" data-delay=".1" data-animation="linesUp" style="color: rgba(25,27,29,.6)">
                                About the agency
                            </h5>

                            <h1 class="has-anim big-title" data-stagger="0.01" data-duration="1.5" data-delay="0" data-animation="charsUp">
                                We are a flexible creative team that believes in functional design and visual communication.
                            </h1>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <span class="a-empty-space" style="height: 100px"></span>

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

            <!--Section-->
            <div class="section" style="background: #ebebeb">

                <!--Wrapper-->
                <div class="wrapper-full no-gap no-margin">

                    <!--Column-->
                    <div class="c-col-2"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-10 no-gap has-parallax" data-parallax-strength="0.15" data-parallax-direction="up">

                        <!--Single Image-->
                        <div data-parallax-type="directional" data-parallax="true" class="single-image">

                            <img alt="Stigma About Banner Parallax" src="{{ asset('assets/img/banners/about-1.jpg') }}">

                        </div>
                        <!--/Single Image-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

                <!--Wrapper-->
                <div class="wrapper no-margin">

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-9">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h4 class="has-anim" data-stagger="0.1" data-duration="1.5" data-delay=".1" data-animation="linesUp">
                                We place great importance on the emotional connection between brand and audience. To this end, we successfully provide you with appropriate advice through extensive research, collaboratively discover your identity and clarify branded content.
                            </h4>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->


                </div>
                <!--/Wrapper-->


                <!--Wrapper-->
                <div class="wrapper no-margin">

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-9">

                        <!--Seperator-->
                        <span data-color="rgba(25,27,29,.6)" data-anim="true" class="alioth-seperator"></span>
                        <!--/Seperator-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 class="has-anim" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="charsUp">
                                Branding / Rebranding
                            </h2>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-5">

                        <!--Alioth List-->
                        <div class="alioth-list">

                            <ul>
                                <li>Naming</li>
                                <li>Logo design</li>
                                <li>Stationary</li>
                                <li>Colour palette</li>
                                <li>Content Creation</li>
                                <li>Catalogues</li>
                                <li>Brochures</li>
                            </ul>

                        </div>
                        <!--/Alioth List-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->


                <!--Wrapper-->
                <div class="wrapper no-margin">

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-9">

                        <!--Seperator-->
                        <span data-color="rgba(25,27,29,.6)" data-anim="true" class="alioth-seperator"></span>
                        <!--/Seperator-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 class="has-anim" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="charsUp">
                                Digital Branding
                            </h2>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-5">

                        <!--Alioth List-->
                        <div class="alioth-list">
                            <ul>
                                <li>Online presence survey</li>
                                <li>Web design</li>
                                <li>Content creation</li>
                                <li>Digital marketing</li>
                                <li>Social media strategy</li>
                                <li>Newsletters</li>
                            </ul>

                        </div>
                        <!--/Alioth List-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

                <!--Wrapper-->
                <div class="wrapper no-margin">

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-9">

                        <!--Seperator-->
                        <span data-color="rgba(25,27,29,.6)" data-anim="true" class="alioth-seperator"></span>
                        <!--/Seperator-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 class="has-anim" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="charsUp">
                                Packaging
                            </h2>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-5">

                        <!--Alioth List-->
                        <div class="alioth-list">
                            <ul>
                                <li>Product identity</li>
                                <li>Logo design</li>
                                <li>Colour palette</li>
                                <li>Product packaging</li>
                                <li>Delivery packaging</li>
                                <li>HORECA</li>
                                <li>E-shop packaging</li>
                            </ul>

                        </div>
                        <!--/Alioth List-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

                                <!--Wrapper-->
                <div class="wrapper no-margin">

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-9">

                        <!--Seperator-->
                        <span data-color="rgba(25,27,29,.6)" data-anim="true" class="alioth-seperator"></span>
                        <!--/Seperator-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-3"></div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 class="has-anim" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="charsUp">
                                Signage
                            </h2>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-5">

                        <!--Alioth List-->
                        <div class="alioth-list">

                            <ul>
                                <li>Survey</li>
                                <li>Signage design</li>
                                <li>Wayfinding</li>
                                <li>Corporate vehicles</li>
                                <li>Banners</li>
                                <li>Outdoor</li>
                                <li>Exhibition stands</li>
                            </ul>

                        </div>
                        <!--/Alioth List-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

                <!--Wrapper-->
                <div class="wrapper no-margin">


                    <!--Column-->
                    <div class="c-col-12 align-center">

                        <div class="a-button style_1">

                            <!-- Button URL-->
                            <a href="{{ route('front.services') }}">Services</a>
                            <!--/ Button URL-->

                            <!-- Button Icon-->
                            <i class="icofont-arrow-right"></i>
                            <!--/ Button Icon-->

                        </div>

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

                <!--Wrapper-->
                <div class="wrapper-full no-gap no-margin">

                    <!--Column-->
                    <div class="c-col-10 no-gap has-parallax" data-parallax-strength="0.15" data-parallax-direction="down">

                        <!--Single Image-->
                        <div data-parallax-type="directional" data-parallax="true" class="single-image">

                            <img alt="Stigma About Banner Parallax" src="{{ asset('assets/img/banners/about-2.jpg') }}">

                        </div>
                        <!--/Single Image-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-2"></div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

            <!--Section-->
            <div class="section">

                <!--Wrapper-->
                <div class="wrapper-full no-margin">

                    <span class="a-empty-space" style="height: 70px"></span>

                    <!--Column-->
                    <div class="c-col-12">

                        <!--Text Wrapper-->
                        <div class="scrollable-text">

                            <h1 class="big-title">
                                Unique and influential brands that endure over time.
                            </h1>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

                <!--Wrapper-->
                <div class="wrapper no-margin">


                    <!--Column-->
                    <div class="c-col-12 align-center">

                        <!--Clients-->
                        <div data-anim="true" class="alioth-clients column-4">

                            @foreach($clients as $client)
                            <div class="a-client">
                                @if(!empty($client->link)) <a href="{{$client->link}}"> @else <a href="#.">@endif
                                    <img alt="{{ $client->name }}" src="{{ asset('storage/'. $client->image) }}" style="max-width: 200px;">
                                </a>
                            </div>
                            @endforeach

                        </div>
                        <!--/Clients-->

                        <div class="a-button style_1">

                            <!-- Button URL-->
                            <a href="{{ route('front.clients') }}">Check our full client list</a>
                            <!--/ Button URL-->

                            <!-- Button Icon-->
                            <i class="icofont-arrow-right"></i>
                            <!--/ Button Icon-->

                        </div>

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->


                @if(!$testimonials->isEmpty())
                <div class="wrapper-small">

                    <!--Column-->
                    <div class="c-col-12">

                        <!--Testimonials-->
                        <div class="a-testimonials autoplay">

                            <!--Testimonals Controls (Don't touch)-->
                            <div class="a-testimonals-control">
                                <span class="a-test-prev"><i class="icofont-thin-left"></i></span>
                                <div class="a-test-frac">
                                    <span class="a-test-current">01</span>
                                    <div class="a-testimonials-count"><span></span></div>
                                    <span class="a-test-total"></span>
                                </div>
                                <span class="a-test-next"><i class="icofont-thin-right"></i></span>
                            </div>
                            <!--/Testimonals Controls (Don't touch)-->

                            <!--Testimonals Wrapper-->
                            <div class="a-testimonials-wrapper">

                                @foreach($testimonials as $testimonial)
                                <div class="a-testimonial">

                                    <!--Testimonal Text-->
                                    <div class="testimonial-text">“{{ $testimonial->text }}”</div>
                                    <!--/Testimonal Text-->

                                    <!--Testimonal Meta-->
                                    <div class="testimonial-meta">

                                        <!--Testimonial Name-->
                                        <div class="testimonial-name">{{ $testimonial->name }}</div>
                                        <!--/Testimonial Name-->

                                    </div>
                                    <!--/Testimonal Meta-->

                                </div>
                                @endforeach

                            </div>
                            <!--/Testimonals Wrapper-->

                        </div>
                        <!--/Testimonials-->

                    </div>
                    <!--/Column-->

                </div>
                @endif

            </div>
            <!--/Section -->

            <!--Section -->
            <div class="section">

                <!--Wrapper-->
                <div class="wrapper-full no-margin">

                    <!--Column-->
                    <div class="c-col-12 no-gap no-margin">

                        <!-- Page Nav -->
                        <div class="alioth-page-nav" style="background-color: #f1f1f1">

                            <!--Page URL-->
                            <a href="{{ route('front.projects') }}">

                                <!-- Page Title -->
                                <div class="page-title">Our Projects</div>
                                <!-- /Page Title -->

                                <!-- Page Sub-Title -->
                                <div class="page-sub-title">See the latest works.</div>
                                <!-- /Page Sub-Title -->

                            </a>

                        </div>
                        <!-- /Page Nav -->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

        </div>
        <!-- /Page Content -->

    </div>

@endsection