{{-- Feature Cards Section - Promotional Highlights --}}
<section class="py-12 bg-white dark:bg-zinc-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-3 gap-6">
            {{-- Feature Card 1 - Cameras --}}
            <a href="#inventory" class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-zinc-800 dark:to-zinc-700 p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                <div class="relative z-10">
                    <span class="text-xs font-semibold text-indigo-600 dark:text-indigo-400 uppercase tracking-wide">Featured</span>
                    <h3 class="text-xl font-bold text-zinc-900 dark:text-white mt-2 mb-1">Pro Cameras</h3>
                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">DSLR & Mirrorless</p>
                    <span class="inline-flex items-center text-sm font-semibold text-indigo-600 dark:text-indigo-400 group-hover:translate-x-1 transition-transform">
                        Shop Now
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </div>
                {{-- Icon/Image --}}
                <div class="absolute right-4 bottom-4 w-24 h-24 opacity-20 group-hover:opacity-30 transition-opacity">
                    <svg class="w-full h-full text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 9a3 3 0 100 6 3 3 0 000-6z"/>
                        <path fill-rule="evenodd" d="M9.828 3h4.344a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 6H19a3 3 0 013 3v9a3 3 0 01-3 3H5a3 3 0 01-3-3V9a3 3 0 013-3h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 3h-.242zm2.172 4a5 5 0 100 10 5 5 0 000-10z" clip-rule="evenodd"/>
                    </svg>
                </div>
                {{-- Decorative gradient --}}
                <div class="absolute inset-0 bg-gradient-to-br from-transparent to-indigo-200/50 dark:to-indigo-500/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </a>

            {{-- Feature Card 2 - Lenses --}}
            <a href="#inventory" class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-purple-50 to-pink-100 dark:from-zinc-800 dark:to-zinc-700 p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                <div class="relative z-10">
                    <span class="text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wide">Premium</span>
                    <h3 class="text-xl font-bold text-zinc-900 dark:text-white mt-2 mb-1">Quality Lenses</h3>
                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Prime & Zoom</p>
                    <span class="inline-flex items-center text-sm font-semibold text-purple-600 dark:text-purple-400 group-hover:translate-x-1 transition-transform">
                        Explore
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </div>
                {{-- Icon/Image --}}
                <div class="absolute right-4 bottom-4 w-24 h-24 opacity-20 group-hover:opacity-30 transition-opacity">
                    <svg class="w-full h-full text-purple-600 dark:text-purple-400" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 3a7 7 0 100 14 7 7 0 000-14zm0 2a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd"/>
                    </svg>
                </div>
                {{-- Decorative gradient --}}
                <div class="absolute inset-0 bg-gradient-to-br from-transparent to-purple-200/50 dark:to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </a>

            {{-- Feature Card 3 - Accessories --}}
            <a href="#inventory" class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-zinc-800 dark:to-zinc-700 p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                <div class="relative z-10">
                    <span class="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wide">Essential</span>
                    <h3 class="text-xl font-bold text-zinc-900 dark:text-white mt-2 mb-1">Accessories</h3>
                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">Tripods & More</p>
                    <span class="inline-flex items-center text-sm font-semibold text-emerald-600 dark:text-emerald-400 group-hover:translate-x-1 transition-transform">
                        Browse All
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </div>
                {{-- Icon/Image --}}
                <div class="absolute right-4 bottom-4 w-24 h-24 opacity-20 group-hover:opacity-30 transition-opacity">
                    <svg class="w-full h-full text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" clip-rule="evenodd"/>
                    </svg>
                </div>
                {{-- Decorative gradient --}}
                <div class="absolute inset-0 bg-gradient-to-br from-transparent to-emerald-200/50 dark:to-emerald-500/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </a>
        </div>
    </div>
</section>