<div class="max-w-4xl mx-auto my-16">
<!-- Basic Breadcrumb with RTL Support -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
<nav aria-label="Breadcrumb" class="flex items-center space-x-2 rtl:space-x-reverse rtl:space-x-0 rtl:space-x-reverse text-sm">
<a href="/" class="text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center">
<svg class="w-4 h-4 mr-1 rtl:mr-0 rtl:ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 12 2-2m0 0 7-7 7 7M5 10v10a1 1 0 0 0 1 1h3m10-11 2 2m-2-2v10a1 1 0 0 1-1 1h-3m-6 0a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1m-6 0h6"></path>
</svg>
Home
</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<a href="/products" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">Products</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<a href="/products/electronics" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">Electronics</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<a href="/products/electronics/smartphones" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">Smartphones</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<span class="text-gray-500 font-medium" aria-current="page">iPhone 15 Pro</span>
</nav>
</div>
</div>