@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="o-body">
        <div class="o-hero  o-hero--focus-on-image">
            <div class="u-bg-triangle-primary"></div>
            <div class="o-hero__main  o-hero__main--focus-on-image">

                <div class="o-hero__figure">
                    <img src="/img/home/home-hero-360.png"
                         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"
                         alt=""/>
                </div>

                <div class="o-hero__content">
                    @if(!empty($page->translation->hero_title))
                        <h1 class="o-hero__header">{{$page->translation->hero_title}}</h1>
                    @endif

                    @if(!empty($page->translation->hero_description))
                        <p class="o-hero__text">{{$page->translation->hero_description}}</p>
                    @endif

                    <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">@lang('site/global.scroll')</span>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="u-bg-wrapper">
            <div class="u-ornament-triangle"></div>
            @include('site.organisms.intro')


            <div class="u-bg-wrapper">
                <div class="u-bg-triangle-neutral"></div>
                @include('site.organisms.components')
            </div>

            @include('site.organisms.cardGrid', [
                'headerTitle' => __('site/global.featured.cardGrid.title'),
                'headerLinkLabel' => __('site/global.featured.cardGrid.linkToAllLabel'),
                'parentLink' => $links->projects->route ?? '',
                'cardButtonLabel' => __('site/global.featured.cardGrid.buttonLabel'),
                'cards' => $featuredProjects,
                'showOrnament' => true
            ])


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

            <div class="o-block  l-contain">
                @include('site.components.servicepoint', [
                    'servicepoint' => $servicepoint,
                    'servicepointText' => __('site/home.servicepoint.text'),
                    'servicepointButtonText' => __('site/home.servicepoint.buttonText'),
                    'servicepointButtonLink' => $links->quotation->route ?? '',
                    'alternate' => false,
                ])
            </div>

        </div>
    </div>
@endsection