@php
    $imageColumn =
        '
        <div class="col-lg-6 col-md-12 col-12">
            <div class="about-hero-img">
                <img class="w-auto" src="' .
        $data->image(theme_asset('img/illustrations/i8.png')) .
        '" alt="' .
        $data->title .
        '" />
            </div>
         </div>
    ';

    $items = [];

    if ($children) {
        $comps = $children->getComponents();
        if (count($comps)) {
            foreach ($comps as $c) {
                $cd = $c->data;
                $items[] = $cd;
            }
        }
    }
@endphp
<!-- about hero start -->
<div class="about-hero mt-100">
    <div class="container">
        <div class="row">
            @if ($data->image_side != 'right')
                {!! $imageColumn !!}
            @endif
            <div class="col-lg-6 col-md-12 col-12">
                <div class="about-hero-content">
                    <h2 class="about-hero-title">{{ $data->title('We Provide Expert Service and aim to have a long term with you') }}</h2>
                    <p class="about-hero-subtitle">{{ $data->description('>We provide a full range of front end mechanical repairs for all makes and models of cars, no matter') }}</p>
                    <ul class="about-hero-action p-0">
                        @if ($items)
                            @foreach ($items as $item)
                                <li class="action-item d-flex">
                                    <div class="action-count">0{{ $loop->index + 1 }}</div>
                                    <div class="action-content">
                                        <h4 class="action-title"><a href="{{ $item->link }}">{{ $item->title }}</a></h4>
                                        <p class="action-subtitle">{{ $item->description }}</p>
                                    </div>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
            @if ($data->image_side == 'right')
                {!! $imageColumn !!}
            @endif

        </div>
    </div>
</div>
<!-- about hero end -->