Spectral Component Card code

@props([
    'category',
    'description',
    'icon',
    'title',
])

<article {{ $attributes->merge(['class' => 'spectral-collection-card group flex min-h-[23rem] flex-col border p-5 sm:p-6']) }}>
    <header class="flex items-center justify-between gap-4">
        <span class="spectral-eyebrow text-[0.65rem] font-bold uppercase tracking-[0.24em]">{{ $category }}</span>
        <x-ui.icon :name="$icon" size="lg" class="spectral-muted transition-transform duration-300 group-hover:-translate-y-1" />
    </header>

    <div class="spectral-card-stage mt-8 flex flex-1 items-center justify-center border p-4 sm:p-5">
        {{ $preview }}
    </div>

    <div class="mt-7">
        <h3 class="spectral-ink text-xl font-semibold tracking-[-0.035em]">{{ $title }}</h3>
        <p class="spectral-muted mt-2 max-w-sm text-sm leading-6">{{ $description }}</p>
    </div>
</article>