@props([
    'title' => '',
    'description' => null,
])

@php
    $onlyTitle = !$description && !$includer;
@endphp

<div class="relative flex flex-col justify-center px-10 border border-[#262626] space-y-6
    {{ $onlyTitle ? 'py-10' : 'pt-16 pb-10 xl:py-16' }}">
    
    <div class="relative z-10 flex flex-col justify-center space-y-4 text-start max-w-4xl">
        <h1 class="font-semibold {{ $onlyTitle ? 'text-lg md:text-2xl xl:text-3xl' : 'text-xl md:text-3xl' }} text-zinc-100">
            {{ $title }}
        </h1>

        @if ($description)
            <p class="text-sm text-zinc-400 font-light">
                {{ $description }}
            </p>
        @endif
    </div>

    <div class="py-2 px-4 bg-[#262626] text-base rounded-md text-zinc-300 whitespace-nowrap w-fit">
        Our {{ strtolower($title ?? '') }} services include:
    </div>

</div>