📄 index.blade.php

<x-app-layout>
    <x-slot name="title">All Categories</x-slot>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 class="section-title mb-2">Shop by Category</h1>
        <p class="section-subtitle">Browse our wide selection</p>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
            @foreach($categories as $category)
                <a href="{{ route('categories.show', $category->slug) }}"
                   class="card card-body flex flex-col items-center text-center hover:shadow-md hover:border-primary-200 transition-all group p-4">
                    @if($category->thumbnail_url)
                        <img src="{{ $category->thumbnail_url }}" alt="{{ $category->name }}" class="w-16 h-16 object-cover rounded-full mb-3 group-hover:scale-110 transition-transform">
                    @else
                        <div class="w-16 h-16 bg-primary-50 rounded-full flex items-center justify-center mb-3 text-primary-400">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                        </div>
                    @endif
                    <span class="text-sm font-medium text-gray-800 group-hover:text-primary-600">{{ $category->name }}</span>
                    <span class="text-xs text-gray-400 mt-1">{{ $category->products_count ?? 0 }} items</span>
                </a>
            @endforeach
        </div>
    </div>
</x-app-layout>