@extends('site.master', ['view' => 'home'])

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

@section('content')

    @include('site.components.hero')

    @if(1 == 1)

        <div class="l-grid  o-block">
            <div class="u-owl">
                @foreach($previewIcons as $previewIcon)
                    @continue($previewIcon == 'None')
                    @include('site.components.token', ['icon' => $previewIcon])
                    @include('site.components.token', ['icon' => $previewIcon, 'modifiers' => ['medium']])
                    @include('site.components.token', ['icon' => $previewIcon, 'modifiers' => ['large']])
                    <br>
                @endforeach
            </div>
        </div>
        <div class="l-grid  o-block">
            <div class="u-owl">
                @include('site.components.description')
                @include('site.components.description', ['modifiers' => ['equal']])
            </div>
        </div>

        <div class="c-body  o-blocks">
            <div class="l-grid  o-block">
                <div class="u-owl  s-text">
                    <h1>This is heading 1</h1>
                    <h2>This is heading 2</h2>
                    <h3>This is heading 3</h3>
                    <h4>This is heading 4</h4>
                    <h5>This is heading 5</h5>
                    <h6>This is heading 6</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium commodi
                        doloremque
                        fugiat, id nulla sapiente vel. Ab accusamus adipisci architecto consectetur culpa debitis dolor
                        dolorum
                        est eum explicabo laborum libero natus non praesentium quaerat quam reiciendis rem sapiente sunt
                        tempora
                        temporibus totam vitae, voluptatum. Consequatur consequuntur cumque deserunt repellat.
                    </p>
                    <ul>
                        <li>Kolimus hic ipsum iure molestias necessitatibus sequi sint tempora?</li>
                        <li>Otque, sit, soluta! Blanditiis eveniet laborum maxime nihil saepe tempore.</li>
                        <li>Morporis dolorem eum itaque necessitatibus neque obcaecati omnis.</li>
                        <li>Menim fugiat minus nostrum quam quis ullam, veritatis!</li>
                        <li>Abore mollitia recusandae sapiente sed. Explicabo, hic.</li>
                    </ul>
                </div>
            </div>

            {{--<div class="l-grid  o-block">--}}
                {{--<div>--}}
                    {{--@include('site.components.slider', ['sliderId' => 'user-story-slider' ])--}}
                {{--</div>--}}
            {{--</div>--}}

            <div class="l-grid  o-block">
                <div>
                    <div class="c-heading ">
                        <h2 class="c-heading__title">Discover the benefits</h2>
                    </div>
                </div>
            </div>

            <div class="l-grid  o-block">
                <div>

                    <div class="l-matrix" data-max-columns="2">
                        @for ($i = 1; $i <=7; $i++)
                            <div class="l-matrix__item">

                                <div class="c-card  c-card--usp">
                                    <h4 class="c-card__title">{{config('atomic.headingTitle') }}</h4>
                                    <div class="c-card__body">
                                        {{config('atomic.quoteText')}}
                                    </div>
                                </div>

                            </div>
                        @endfor
                    </div>

                </div>
            </div>

            <div class="l-grid  o-block">
                <div class="">
                    @include('site.components.form.switch')
                </div>
            </div>

            <div class="l-grid  o-block">
                <div class="">
                    @include('site.components.button')
                    @include('site.components.button', ['modifiers' => ['icon']])
                </div>
            </div>
            <div class="l-grid  o-block">
                <div class="">
                    @include('site.components.button', ['modifiers' => ['ghost']])
                    @include('site.components.button', ['modifiers' => ['ghost','icon']])
                </div>
            </div>
            <div class="l-grid  o-block-bg  u-bg-secondary">
                <div class="">
                    @include('site.components.button', ['modifiers' => ['ghost','on-dark']])
                    @include('site.components.button', ['modifiers' => ['ghost','on-dark','icon']])
                </div>
            </div>
            <div class="l-grid  o-block">
                <div class="">
                    @include('site.components.textButton')
                    @include('site.components.textButton', ['modifiers' => ['icon']])
                </div>
            </div>
            <div class="l-grid  o-block">
                <div>
                </div>
            </div>
            <div class="l-grid  o-block">
                <div>
                    @include('site.components.textButton', ['modifiers' => ['small']])
                </div>
            </div>
            <div class="l-grid  o-block">
                <div>
                    @include('site.components.textButton', ['modifiers' => ['icon','small']])
                </div>
            </div>

            <div class="l-grid  o-block">
                <div>
                    @include('site.components.heading', ['headingSubTitle' => 'Ab accusamus adipisci architecto consectetur culpa debitis dolor'])
                </div>
            </div>
            <div class="l-grid  o-block">
                <div>
                    @include('site.components.heading', ['modifiers' => ['is-inverted'], 'headingSubTitle' => 'Ab accusamus adipisci architecto consectetur culpa debitis dolor'])
                </div>
            </div>
            <div class="l-grid  o-block">
                <div>
                    @include('site.components.cta.cta', ['headingSubTitle' => 'consectetur culpa debitis dolor', 'buttonText' => 'Book a demo', 'buttonLink' => '#0'])
                </div>
            </div>
            <div class="l-grid  o-block-bg">
                <div>
                    @include('site.components.cta.cta--bar')
                </div>
            </div>

            <div class="l-grid  o-block-bg">
                <div class="l-matrix  l-matrix--dense">
                    <div class="l-matrix__item">
                        @include('site.components.card', ['modifiers' => ['box']])
                    </div>
                    <div class="l-matrix__item">
                        @include('site.components.card', ['modifiers' => ['box']])
                    </div>
                    <div class="l-matrix__item">
                        @include('site.components.card', ['modifiers' => ['box']])
                    </div>
                    <div class="l-matrix__item">
                        @include('site.components.card', ['modifiers' => ['box']])
                    </div>
                    <div class="l-matrix__item">
                        @include('site.components.card', ['modifiers' => ['box']])
                    </div>
                </div>
            </div>

            <div class="l-grid  o-block">
                @include('site.organisms.customerStories')
            </div>

            <div class="l-grid  o-block">
                <div>
                    @include('site.components.quote')
                </div>
            </div>
            <div class="l-grid  o-block-bg">
                <div>
                    @include('site.components.dataSecurity')
                </div>
            </div>
            <div class="l-grid  o-block-bg-top">
                <div>
                    @include('site.components.rating')
                </div>
            </div>
            <div class="l-grid  o-block">
                <div>
                    @include('site.components.listTable')
                </div>
            </div>
            <div class="l-grid  o-block-bg-bottom">
                <div>
                    @include('site.components.rating')
                </div>
            </div>

            <div class="l-grid  o-block-bg">
                <div class="l-bisection">
                    <div class="l-bisection__item">
                        <img class="u-box-shadow" src="https://dummyimage.com/640x360/fff/8592a6" alt="">
                    </div>
                    <div class="l-bisection__item">
                        @include('site.components.description')
                    </div>
                </div>
            </div>

            <div class="l-grid  o-block">
                <div class="l-bisection  l-bisection--reversed">
                    <div class="l-bisection__item">
                        <img class="u-box-shadow" src="https://dummyimage.com/640x360/fff/8592a6" alt="">
                    </div>
                    <div class="l-bisection__item">
                        @include('site.components.description')
                    </div>
                </div>
            </div>
        </div>

    @endif

    <div class="home__force-scroll"></div>


@endsection