@extends('site.basic')

@section('title', 'Under construction | Stafa')
@section('meta_description', 'Under construction | Stafa')

@section('content')

    <div class="o-hero">
        <div class="u-bg-triangle-primary"></div>
        <div class="o-hero__main">
            <div class="o-hero__figure">
                <img src="/img/home/home-hero-360.jpg"
                     srcset="/img/home/home-hero-672.png 672w,
                                 /img/home/home-hero-600.png 600w,
                                 /img/home/home-hero-487.png 487w,
                                 /img/home/home-hero-360.png 360w"
                     sizes="(min-width: 1344px) 672px, (min-width: 1152px) 50vw, (min-width: 840px) 40vw, 100vw"/>
            </div>
            <div class="o-hero__content">
                <p class="o-hero__title">Under construction</p>
                <h1 class="o-hero__header">We are working hard on our new website</h1>
                <p class="o-hero__text">75,000 standard parts. Special fasteners. Parts designed from drawings. Each and every one of them a high-quality part that can be relied upon whatever the circumstances: Stafa’s fasteners have been proving their durability since 1977.
                    <br>
                    <br>
                    To show that, we are going for a powerful, new look to the outside world. Behind the scenes we are working hard on our new website, but that has no consequences for our services. Our people are in the starting blocks to provide a tailored service.
                </p>

                <div class="o-hero__action">
                    <a class="c-scroll-button  js-scroll-to-target" href="#intro">
                        <i class="c-scroll-button__icon">@include('site.components.icons.arrow')</i>
                        <span class="c-scroll-button__text">scroll</span>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <div class="o-body">

        <div class="u-bg-wrapper">
            <div class="u-ornament-triangle"></div>

            <div class="l-contain">

                <div class="o-ci  o-ci--is-indented">
                    <div class="o-ci__content">
                        <h2 id="intro">Webshop</h2>
                        <p>Quickly ordered, delivered on time. Our webshop offers access to the full range of Stafa products. Select by category or use the search function. Need help? Our customer service is here to support you.
                        </p>
                        <div class="o-ci__action">
                            @include('site.components.button', [
                                'modifiers' => ['icon'],
                                'buttonText' => 'To the webshop',
                                'buttonLink' => 'http://eshop.stafa.nl/'
                            ])
                        </div>
                    </div>
                    <div class="o-ci__image">
                        <div class="c-hex-shape  c-hex-shape--ornament" data-pos="right">
                            <img class="c-hex-shape__image" src="https://picsum.photos/id/1/480/560" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <div class="u-bg-wrapper  u-bg-neutral--100">
                <div class="l-contain">
                    <div class="o-ci  o-ci--is-indented  o-ci--is-reversed">
                        <div class="o-ci__content">
                            <h2>Feel free to <br>contact us</h2>
                            <p>
                                {{ config('site.company.address') }}<br>
                                {{ config('site.company.postal_code') }} {{ config('site.company.city') }}<br>
                                @lang('site/global.netherlands')<br>
                            </p>
                            <div class="c-data">
                                <a class="c-data__link" data-icon="phone"
                                   title="@lang('site/global.phoneNumber')"
                                   href="tel:{{ config('site.company.phone.call') }}">{{ config('site.company.phone.display') }}</a>
                                <a class="c-data__link" data-icon="mail"
                                   title="@lang('site/global.emailAddress')"
                                   href="mailto:{{ config('site.company.email') }}">{{ config('site.company.email') }}</a>
                            </div>
                            <p>
                                {{ config('site.company.mailbox.address') }} <br>
                                {{ config('site.company.mailbox.postal_code') }} {{ config('site.company.mailbox.city') }}
                            </p>
                            <p>
                                CoC. {{ config('site.company.chamber_of_commerce') }}
                            </p>

                        </div>
                        <div class="o-ci__image">
                            <div class="c-hex-shape  c-hex-shape--ornament" data-pos="left">
                                <img class="c-hex-shape__image" src="https://picsum.photos/id/160/480/560" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="o-callout-bar  on-dark"  data-ornament-type="filled">
            <div class="u-bg-triangle-primary"></div>
            <div class="o-callout-bar__main">

                <div class="o-callout-bar__icon">
                    @include('site.components.icons.vacancy')
                </div>

                <h3 class="o-callout-bar__body">
                    Looking for a job?<br/>
                    Become part of a solution.<br/>
                    <span class="u-fw-bold">Join the Stafa family.</span>
                </h3>

                <div class="o-callout-bar__action">
                    @include('site.components.button', [
                        'buttonText' => 'See our vacancies',
                        'buttonLink' => 'https://werkenbijstafa.nl',
                        'modifiers' => ['icon'],
                    ])
                </div>
            </div>
        </div>


        <div class="o-block  l-contain">
            <div class="c-servicepoint  @modifiers('c-servicepoint')">
                <img class="c-servicepoint__image  is-small" src="/img/ivo.png?v=2" alt="Image"/>

                <div class="c-servicepoint__content">
                    <p class="c-servicepoint__intro">Would you like to receive more information?<br>I'll be happy to help you.</p>
                    <div class="c-servicepoint__info">
                        <a href="tel:{{ config('site.company.phone.call') }}" class="c-servicepoint__data" data-icon="phone">{{ config('site.company.phone.display') }}</a>
                        <a href="mailto:ivovangool@stafa.nl" class="c-servicepoint__data" data-icon="mail">ivovangool@stafa.nl</a>
                    </div>
                    <div class="c-servicepoint__person">
                        <p class="c-servicepoint__name">Ivo van Gool</p>
                        <p class="c-servicepoint__function">Sales Director</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection