Card Frame code

@props([
    'index' => null,
    'eyebrow' => null,
    'title',
    'footnote' => null,
])

@php
    /*
    | Drafting-sheet card: sharp corners, registration marks in each corner
    | and an index number — reads like a page from a technical spec rather
    | than another rounded panel. Marks pick up the brand colour on hover.
    |
    | Usage:
    |   <x-ui.card-frame index="02" eyebrow="Infrastructure" title="Edge caching">
    |       Static assets served from 28 points of presence.
    |   </x-ui.card-frame>
    */
    // Anchored inside the padding box: negative offsets can poke sub-pixels
    // past an overflow container when grid columns land on fractional widths.
    $marks = [
        'left-0 top-0 border-l-2 border-t-2',
        'right-0 top-0 border-r-2 border-t-2',
        'bottom-0 left-0 border-b-2 border-l-2',
        'bottom-0 right-0 border-b-2 border-r-2',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'group/frame relative min-w-0 border border-gray-200 bg-white p-6 transition-colors dark:border-gray-800 dark:bg-gray-900']) }}>
    @foreach ($marks as $mark)
        <span class="pointer-events-none absolute h-3.5 w-3.5 border-gray-300 transition-colors duration-300 group-hover/frame:border-brand-500 dark:border-gray-700 {{ $mark }}" aria-hidden="true"></span>
    @endforeach

    <div class="flex items-baseline justify-between gap-3">
        @if ($eyebrow)
            <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-400 dark:text-gray-500">{{ $eyebrow }}</p>
        @endif
        @if ($index)
            <span class="font-mono text-xs font-semibold tabular-nums text-gray-300 dark:text-gray-600">{{ $index }}</span>
        @endif
    </div>

    <h3 class="mt-3 text-base font-semibold tracking-tight text-gray-900 dark:text-white">{{ $title }}</h3>

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

    @if ($footnote)
        <p class="mt-5 border-t border-gray-100 pt-3 font-mono text-[11px] uppercase tracking-wider text-gray-400 dark:border-gray-800 dark:text-gray-500">{{ $footnote }}</p>
    @endif
</div>