@extends('layouts.app')

@section('title', 'Shop Smart QR Tags | OneQRScan')

@section('content')

    <div class="relative bg-[#32445a] pt-32 pb-20 overflow-hidden border-b border-[#32445a] shadow-2xl">
        <div class="absolute inset-0 overflow-hidden pointer-events-none z-0">
            <div
                class="absolute -top-24 right-10 w-[500px] h-[500px] bg-[#f5b11c] rounded-full mix-blend-screen filter blur-[150px] opacity-15 animate-pulse">
            </div>
            <div
                class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-400 rounded-full mix-blend-multiply filter blur-[120px] opacity-20">
            </div>
            <div
                class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] opacity-50">
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

            <nav class="mb-8 flex">
                <ol
                    class="inline-flex items-center space-x-2 text-sm font-semibold text-slate-300 bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20 shadow-lg">
                    <li><a href="/" class="hover:text-white transition-colors duration-200">Home</a></li>
                    <li>
                        <svg class="w-3.5 h-3.5 text-slate-400" 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"></path>
                        </svg>
                    </li>
                    <li class="text-[#f5b11c] font-bold tracking-wide">Shop Smart Tags</li>
                </ol>
            </nav>

            <div class="max-w-3xl">
                <h1 class="font-sans text-5xl md:text-6xl font-black tracking-tighter text-white mb-6 leading-tight">
                    Shop All <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#f5b11c] to-yellow-200">Smart
                        Tags</span>
                </h1>
                <p class="text-lg md:text-xl text-slate-300 font-medium tracking-tight leading-relaxed max-w-2xl">
                    Secure, waterproof identity tags for your daily needs. Permanently linked to your secure cloud profile.
                </p>
            </div>

        </div>
    </div>

    <section class="py-12 bg-slate-50/50 min-h-screen">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            <div class="flex flex-col lg:flex-row gap-10">

                <aside class="hidden lg:block w-64 flex-shrink-0">
                    <div class="sticky top-28 pr-4">
                        <div class="flex items-center gap-2 mb-8 pb-4 border-b border-slate-200/60">
                            <svg class="w-5 h-5 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z">
                                </path>
                            </svg>
                            <h3 class="font-sans text-lg font-bold text-slate-900">Filters</h3>
                        </div>

                        <div class="mb-10">
                            <h4 class="font-semibold text-slate-900 mb-4 uppercase tracking-widest text-[11px]">Categories
                            </h4>
                            <div class="space-y-3.5">
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox" checked
                                        class="w-4 h-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span
                                        class="text-sm text-slate-600 group-hover:text-slate-900 font-medium transition-colors">All
                                        Tags (24)</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox"
                                        class="w-4 h-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span
                                        class="text-sm text-slate-600 group-hover:text-slate-900 transition-colors">Vehicle
                                        & Fleet (8)</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox"
                                        class="w-4 h-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span class="text-sm text-slate-600 group-hover:text-slate-900 transition-colors">Pets &
                                        Animals (4)</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox"
                                        class="w-4 h-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span
                                        class="text-sm text-slate-600 group-hover:text-slate-900 transition-colors">Student
                                        & Kids (5)</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox"
                                        class="w-4 h-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span class="text-sm text-slate-600 group-hover:text-slate-900 transition-colors">Elder
                                        Care (3)</span>
                                </label>
                            </div>
                        </div>

                        <div class="mb-10">
                            <h4 class="font-semibold text-slate-900 mb-4 uppercase tracking-widest text-[11px]">Price</h4>
                            <div class="space-y-3.5">
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="radio" name="price"
                                        class="w-4 h-4 border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span class="text-sm text-slate-600 group-hover:text-slate-900 transition-colors">Under
                                        ₹150</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="radio" name="price" checked
                                        class="w-4 h-4 border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span
                                        class="text-sm text-slate-600 font-medium group-hover:text-slate-900 transition-colors">₹150
                                        - ₹250</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="radio" name="price"
                                        class="w-4 h-4 border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <span class="text-sm text-slate-600 group-hover:text-slate-900 transition-colors">₹250 &
                                        Above</span>
                                </label>
                            </div>
                        </div>

                        <div class="mb-10">
                            <h4 class="font-semibold text-slate-900 mb-4 uppercase tracking-widest text-[11px]">Customer
                                Rating</h4>
                            <div class="space-y-3.5">
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox" checked
                                        class="w-4 h-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900 accent-slate-900 transition-all">
                                    <div class="flex items-center text-[#f5b11c]">
                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <span
                                            class="text-sm text-slate-600 ml-2 font-medium group-hover:text-slate-900 transition-colors">&
                                            Up</span>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </aside>

                <div class="w-full flex-1">

                    <div
                        class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 bg-white p-3 rounded-2xl ring-1 ring-slate-900/5 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)]">
                        <div class="flex items-center justify-between w-full sm:w-auto gap-4 px-2">
                            <button
                                class="lg:hidden flex items-center gap-2 text-slate-900 font-semibold bg-slate-50 px-4 py-2 rounded-xl ring-1 ring-slate-900/10">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
                                    </path>
                                </svg>
                                Filters
                            </button>
                            <p class="text-sm text-slate-500"><span class="font-semibold text-slate-900">1-8</span> of 24
                                results</p>
                        </div>

                        <div class="flex items-center gap-3">
                            <span class="text-sm font-medium text-slate-500 hidden sm:block">Sort by</span>
                            <div class="relative min-w-[160px]">
                                <select
                                    class="appearance-none bg-slate-50 ring-1 ring-slate-900/5 text-slate-900 text-sm rounded-xl focus:ring-slate-900 focus:bg-white block w-full pl-4 pr-10 py-2.5 font-semibold cursor-pointer outline-none transition-all">
                                    <option selected>Featured</option>
                                    <option value="bestseller">Best Selling</option>
                                    <option value="price-low">Price: Low to High</option>
                                    <option value="price-high">Price: High to Low</option>
                                </select>
                                <div
                                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-400">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

                        <div
                            class="bg-white rounded-3xl ring-1 ring-slate-900/5 overflow-hidden hover:ring-slate-900/10 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] transition-all duration-500 ease-out group flex flex-col relative">

                            <div
                                class="absolute top-4 left-4 z-10 bg-red-50 text-red-600 ring-1 ring-red-500/20 text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
                                33% OFF
                            </div>

                            <div
                                class="relative bg-slate-100 aspect-[4/3] flex items-center justify-center overflow-hidden">
                                <img src="{{ asset('assets/images/products/1.png') }}" alt="Vehicle Tag"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out">
                            </div>

                            <div class="p-6 flex flex-col flex-grow">
                                <div class="text-[11px] font-semibold text-slate-400 mb-2 uppercase tracking-widest">
                                    Vehicle & Fleet</div>
                                <h3
                                    class="text-slate-900 font-semibold text-lg leading-snug mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
                                    <a href="#">Smart Vehicle Contact & Parking Keychain</a>
                                </h3>

                                <div class="flex items-center gap-1.5 mb-5">
                                    <div class="flex text-[#f5b11c]">
                                        <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                        <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                    </div>
                                    <span class="text-[11px] font-medium text-slate-400">(420)</span>
                                </div>

                                <div class="flex-grow"></div>

                                <div class="flex items-end justify-between mt-2 pt-5 border-t border-slate-100">
                                    <div class="flex flex-col">
                                        <span
                                            class="text-[11px] font-semibold text-slate-400 line-through mb-0.5">₹800</span>
                                        <span
                                            class="text-2xl font-extrabold tracking-tight text-slate-900 leading-none">₹499</span>
                                    </div>
                                    <button
                                        class="bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm py-2 px-4 rounded-full transition-all duration-300 flex items-center gap-1.5 shadow-sm hover:shadow-md">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                            </path>
                                        </svg>
                                        <span>Add</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div
                            class="bg-white rounded-3xl ring-1 ring-slate-900/5 overflow-hidden hover:ring-slate-900/10 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] transition-all duration-500 ease-out group flex flex-col relative">

                            <div
                                class="absolute top-4 left-4 z-10 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full shadow-sm">
                                #1 Best Seller
                            </div>

                            <div
                                class="relative bg-slate-100 aspect-[4/3] flex items-center justify-center overflow-hidden">
                                <img src="{{ asset('assets/images/products/3.png') }}" alt="Pet Tag"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out">
                            </div>

                            <div class="p-6 flex flex-col flex-grow">
                                <div class="text-[11px] font-semibold text-slate-400 mb-2 uppercase tracking-widest">Pets &
                                    Animals</div>
                                <h3
                                    class="text-slate-900 font-semibold text-lg leading-snug mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
                                    <a href="#">Smart Pet Collar Recovery Tag (GPS Alert)</a>
                                </h3>

                                <div class="flex items-center gap-1.5 mb-5">
                                    <div class="flex text-[#f5b11c]">
                                        @for ($i = 0; $i < 4; $i++)
                                            <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                                <path
                                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                                </path>
                                            </svg>
                                        @endfor
                                        <svg class="w-3.5 h-3.5 text-slate-200 fill-current" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                            </path>
                                        </svg>
                                    </div>
                                    <span class="text-[11px] font-medium text-slate-400">(312)</span>
                                </div>

                                <div class="flex-grow"></div>
                                <div class="flex items-end justify-between mt-2 pt-5 border-t border-slate-100">
                                    <div class="flex flex-col">
                                        <span
                                            class="text-[11px] font-semibold text-slate-400 line-through mb-0.5">₹800</span>
                                        <span
                                            class="text-2xl font-extrabold tracking-tight text-slate-900 leading-none">₹499</span>
                                    </div>
                                    <button
                                        class="bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm py-2 px-4 rounded-full transition-all duration-300 flex items-center gap-1.5 shadow-sm hover:shadow-md">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                            </path>
                                        </svg>
                                        <span>Add</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div
                            class="bg-white rounded-3xl ring-1 ring-slate-900/5 overflow-hidden hover:ring-slate-900/10 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] transition-all duration-500 ease-out group flex flex-col relative">

                            <div
                                class="absolute top-4 left-4 z-10 bg-emerald-50 text-emerald-600 ring-1 ring-emerald-500/20 text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
                                New Arrival
                            </div>

                            <div
                                class="relative bg-slate-100 aspect-[4/3] flex items-center justify-center overflow-hidden">
                                <img src="{{ asset('assets/images/products/4.png') }}" alt="Student Tag"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out">
                            </div>

                            <div class="p-6 flex flex-col flex-grow">
                                <div class="text-[11px] font-semibold text-slate-400 mb-2 uppercase tracking-widest">
                                    Students & Kids</div>
                                <h3
                                    class="text-slate-900 font-semibold text-lg leading-snug mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
                                    <a href="#">Student Safety ID Keychain</a>
                                </h3>

                                <div class="flex items-center gap-1.5 mb-5">
                                    <div class="flex text-[#f5b11c]">
                                        @for ($i = 0; $i < 5; $i++)
                                            <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                                <path
                                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                                </path>
                                            </svg>
                                        @endfor
                                    </div>
                                    <span class="text-[11px] font-medium text-slate-400">(185)</span>
                                </div>

                                <div class="flex-grow"></div>
                                <div class="flex items-end justify-between mt-2 pt-5 border-t border-slate-100">
                                    <div class="flex flex-col">
                                        <span
                                            class="text-[11px] font-semibold text-slate-400 line-through mb-0.5">₹800</span>
                                        <span
                                            class="text-2xl font-extrabold tracking-tight text-slate-900 leading-none">₹499</span>
                                    </div>
                                    <button
                                        class="bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm py-2 px-4 rounded-full transition-all duration-300 flex items-center gap-1.5 shadow-sm hover:shadow-md">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                            </path>
                                        </svg>
                                        <span>Add</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div
                            class="bg-white rounded-3xl ring-1 ring-slate-900/5 overflow-hidden hover:ring-slate-900/10 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] transition-all duration-500 ease-out group flex flex-col relative">

                            <div
                                class="relative bg-slate-100 aspect-[4/3] flex items-center justify-center overflow-hidden">
                                <img src="{{ asset('assets/images/products/2.png') }}" alt="Elder Tag"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out">
                            </div>

                            <div class="p-6 flex flex-col flex-grow">
                                <div class="text-[11px] font-semibold text-slate-400 mb-2 uppercase tracking-widest">Elder
                                    Care</div>
                                <h3
                                    class="text-slate-900 font-semibold text-lg leading-snug mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
                                    <a href="#">Elderly Medical ID & Emergency Tag</a>
                                </h3>

                                <div class="flex items-center gap-1.5 mb-5">
                                    <div class="flex text-[#f5b11c]">
                                        @for ($i = 0; $i < 5; $i++)
                                            <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                                <path
                                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                                </path>
                                            </svg>
                                        @endfor
                                    </div>
                                    <span class="text-[11px] font-medium text-slate-400">(95)</span>
                                </div>

                                <div class="flex-grow"></div>
                                <div class="flex items-end justify-between mt-2 pt-5 border-t border-slate-100">
                                    <div class="flex flex-col">
                                        <span
                                            class="text-[11px] font-semibold text-slate-400 line-through mb-0.5">₹800</span>
                                        <span
                                            class="text-2xl font-extrabold tracking-tight text-slate-900 leading-none">₹499</span>
                                    </div>
                                    <button
                                        class="bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm py-2 px-4 rounded-full transition-all duration-300 flex items-center gap-1.5 shadow-sm hover:shadow-md">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                            </path>
                                        </svg>
                                        <span>Add</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="mt-14 flex items-center justify-center gap-2.5">
                        <button
                            class="w-10 h-10 rounded-full ring-1 ring-slate-900/10 flex items-center justify-center text-slate-400 hover:text-slate-900 hover:ring-slate-900/20 hover:bg-white transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>
                        <button
                            class="w-10 h-10 rounded-full bg-slate-900 text-white font-semibold flex items-center justify-center shadow-sm">1</button>
                        <button
                            class="w-10 h-10 rounded-full ring-1 ring-slate-900/10 text-slate-600 font-medium hover:bg-white hover:ring-slate-900/20 hover:text-slate-900 transition-all">2</button>
                        <button
                            class="w-10 h-10 rounded-full ring-1 ring-slate-900/10 text-slate-600 font-medium hover:bg-white hover:ring-slate-900/20 hover:text-slate-900 transition-all">3</button>
                        <span class="text-slate-400 mx-1">...</span>
                        <button
                            class="w-10 h-10 rounded-full ring-1 ring-slate-900/10 flex items-center justify-center text-slate-600 hover:text-slate-900 hover:ring-slate-900/20 hover:bg-white transition-all">
                            <svg class="w-4 h-4" 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">
                                </path>
                            </svg>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </section>

    {{-- <section class="py-12 bg-white border-t border-slate-200/60">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div
                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">

                <div class="flex items-start gap-4 px-4 pt-4 sm:pt-0">
                    <div
                        class="w-10 h-10 rounded-xl bg-slate-50 ring-1 ring-slate-900/5 shadow-sm flex items-center justify-center text-slate-900 flex-shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-semibold text-slate-900 text-sm">Fast Delivery</h4>
                        <p class="text-[13px] text-slate-500 mt-1">Shipping across India</p>
                    </div>
                </div>

                <div class="flex items-start gap-4 px-4 pt-4 sm:pt-0">
                    <div
                        class="w-10 h-10 rounded-xl bg-slate-50 ring-1 ring-slate-900/5 shadow-sm flex items-center justify-center text-slate-900 flex-shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-semibold text-slate-900 text-sm">Secure Checkout</h4>
                        <p class="text-[13px] text-slate-500 mt-1">100% protected payments</p>
                    </div>
                </div>

                <div class="flex items-start gap-4 px-4 pt-4 sm:pt-0">
                    <div
                        class="w-10 h-10 rounded-xl bg-slate-50 ring-1 ring-slate-900/5 shadow-sm flex items-center justify-center text-slate-900 flex-shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-semibold text-slate-900 text-sm">Cloud Protected</h4>
                        <p class="text-[13px] text-slate-500 mt-1">AES-256 data encryption</p>
                    </div>
                </div>

                <div class="flex items-start gap-4 px-4 pt-4 sm:pt-0">
                    <div
                        class="w-10 h-10 rounded-xl bg-slate-50 ring-1 ring-slate-900/5 shadow-sm flex items-center justify-center text-slate-900 flex-shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-semibold text-slate-900 text-sm">Premium Quality</h4>
                        <p class="text-[13px] text-slate-500 mt-1">Durable & waterproof tags</p>
                    </div>
                </div>

            </div>
        </div>
    </section> --}}

@endsection