<div class="o-bubbles">

    <ul class="o-bubbles__list">

        @foreach(__('site/global.bubbleLinks') as $key => $item)
            <li class="o-bubbles__item" data-kal="fade" style="--kal-delay: {{($loop->index % 3)*0.15}}s">
                <a class="o-bubbles__link" href="{{$links->{$item['codeName']}->route}}">
                    <span class="o-bubbles__icon">@includeIf('components.icons.'.$item["codeName"])</span>
                    <span class="o-bubbles__content">
                        <span class="o-bubbles__title">{{$item['title']}}</span>
                        @include('components.textButton', [
                            'tagName' => 'span',
                            'buttonText' => $item['buttonText'],
                        ])
                    </span>
                </a>
            </li>
        @endforeach

    </ul>
</div>