@props([
'name',
'role',
'email',
'phone',
'image'
])

<a href="#" class="col-lg-6">
    <div class="expert-card position-relative">
        <img class="object-fit-cover" src="{{asset('assets/images/experts/'.$image)}}" alt="{{env('APP_NAME')}}">
        <div class="eb position-absolute bottom-0 z-3 text-white">
            <div class="d-flex gap-2 flex-column">
                <div>
                    <h5 class="m-0">{{$name}}</h5>
                    <p class="small m-0"><i>{{$role}}</i></p>
                </div>
                <div class="border-bottom"></div>
                <ul class="small">
                    <li class="d-flex gap-3">
                        <span><strong>{{'Email'}}</strong></span>
                        <span>{{$email}}</span>
                    </li>
                    <li class="d-flex gap-3">
                        <span><strong>{{'Phone'}}</strong></span>
                        <span>{{$phone}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</a>