<section class="home-intro">

    <div class="line-background">
        <div class="grid-row">
            @for($i=0;$i<4;$i++)
                <div class="grid-col col-3"></div>
            @endfor
        </div>
    </div>



    <div class="content-block">

        <svg class="dots" width="69" height="110">
            <use href="./img/dots.svg#dots"></use>
        </svg>

        <div class="grid-row">
            <div class="kms-content">
                @if(isset($page->translation->header))
                    {!! $page->translation->header->description !!}
                @endif

                <a class="scroll-to-target read-more" href="#home-about">
                    @lang('site/global.readMore')
                    <span class="arrow">
                        <svg width="19" height="14">
                            <use href="/img/arrow.svg#arrow"></use>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="drawing-block">
        {{--    show different images depending on site id    --}}
        @if($page->site_id === 1)
            <img src="./img/anvil-drawing.png" alt="">
        @elseif($page->site_id === 6)
            <img src="./img/rols-drawing.png" alt="">
        @elseif($page->site_id === 11)
            <img src="./img/valk_hero.webp" alt="">
        @elseif($page->site_id === 8)
            <img src="./img/jansen-drawing.png" alt="">
        @elseif($page->site_id === 9)
            <img src="./img/job-drawing.png" alt="">
        @endif
    </div>

</section>