@props([
    'heading',
    'text',
    'nextPageUrl' => null,
    'anotherWebPageUrl' => null,
    'buttonName' => 'Get a quote',
    'img' => null
])

<div class="introductionCardWrapper mx-auto">

    <div class="textContainer">

        <div class="maxWidth">

            <h1 class="jumboText text-capitalize">
                {{ $heading }}
            </h1>

            <p class="mt-2 text-capitalize">
                {{ $text }}
            </p>

            @if($nextPageUrl || $anotherWebPageUrl)

                <a
                    href="{{ $anotherWebPageUrl ?: route($nextPageUrl) }}"
                    class="btn btn-primary px-5 fw-bold"
                >
                    {{ $buttonName }}
                    <i class="fas fa-chevron-right"></i>
                </a>

            @endif

        </div>

    </div>


    @if($img)

        <div class="imgContainer">

            <img
                src="{{ asset($img) }}"
                class="w-50"
                alt="{{ $heading }}"
                loading="lazy"
            >

        </div>

    @endif

</div>