Feature Tile code

@props([
    'title',
    'points' => [],
    'link' => null,
    'linkLabel' => 'Learn more',
])

@php
    /*
    | Bento cell with corner ticks, a heading, body copy (slot), an optional
    | checklist and a trailing "Explore →" link, plus a visual in the `media`
    | slot. Built to tile in a 2-column grid separated by hairlines (the framed
    | Laravel Cloud bento look).
    |
    | Usage:
    |   <x-ui.feature-tile
    |       title="Local to live in seconds"
    |       :points="['Full control via dashboard or CLI', 'Add databases and workers instantly']"
    |       link="#" link-label="Explore Cloud"
    |   >
    |       Autoscale under load and hibernate when idle.
    |       <x-slot:media>…</x-slot:media>
    |   </x-ui.feature-tile>
    */
    $cornerBase = 'pointer-events-none absolute h-1.5 w-1.5 bg-brand-500/70';
@endphp

<div {{ $attributes->merge(['class' => 'group/tile relative flex flex-col p-8 sm:p-10']) }}>
    {{-- Corner ticks --}}
    <span aria-hidden="true" class="{{ $cornerBase }} left-0 top-0"></span>
    <span aria-hidden="true" class="{{ $cornerBase }} right-0 top-0"></span>
    <span aria-hidden="true" class="{{ $cornerBase }} left-0 bottom-0"></span>
    <span aria-hidden="true" class="{{ $cornerBase }} right-0 bottom-0"></span>

    <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-gray-900 dark:text-white text-balance">{{ $title }}</h3>

    <div class="mt-3 max-w-md text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        {{ $slot }}
    </div>

    @if (count($points))
        <ul class="mt-5 space-y-2.5">
            @foreach ($points as $point)
                <li class="flex items-start gap-2.5 text-sm text-gray-700 dark:text-gray-300">
                    <x-ui.icon name="check" weight="bold" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                    <span>{{ $point }}</span>
                </li>
            @endforeach
        </ul>
    @endif

    @if ($link)
        <div class="mt-6">
            <a href="{{ $link }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:border-brand-300 hover:text-brand-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-brand-700 dark:hover:text-brand-300">
                {{ $linkLabel }}
                <x-ui.icon name="arrow-up-right" weight="bold" size="sm" class="text-gray-400 transition group-hover/tile:translate-x-0.5 group-hover/tile:-translate-y-0.5" />
            </a>
        </div>
    @endif

    @isset($media)
        <div class="relative mt-8 flex-1">
            {{ $media }}
        </div>
    @endisset
</div>