Product Detail page

<section class="bg-gray-50 py-16">
  <div class="mx-auto max-w-7xl px-8 sm:px-12">
    <!-- Breadcrumb -->
    <nav>
      <ol role="list" class="flex items-center space-x-2 text-sm">
        <li>
          <a href="#" class="rounded-md p-1 font-medium text-gray-500 hover:text-gray-700 focus:text-gray-900 focus:ring-2 focus:ring-gray-900 focus:outline-none"> Home </a>
        </li>

        <li class="flex items-center">
          <svg class="mx-2 h-4 w-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <a href="#" class="rounded-md p-1 font-medium text-gray-500 hover:text-gray-700"> Products </a>
        </li>

        <li class="flex items-center">
          <svg class="mx-2 h-4 w-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <a href="#" class="p-1 font-medium text-gray-900"> CarityUI </a>
        </li>
      </ol>
    </nav>

    <!-- Main Grid -->
    <div class="mt-12 grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-2">
      <!-- Product Images -->
      <div class="lg:col-span-1">
        <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-100">
          <img src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/product-details/2/product-1.png" class="h-full w-full object-cover" />
        </div>

        <div class="mt-6 flex space-x-4">
          <button class="h-20 w-20 overflow-hidden rounded-lg border">
            <img class="h-full w-full object-cover" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/product-details/2/product-2.png" />
          </button>
          <button class="h-20 w-20 overflow-hidden rounded-lg border">
            <img class="h-full w-full object-cover" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/product-details/2/product-3.png" />
          </button>
          <button class="h-20 w-20 overflow-hidden rounded-lg border">
            <img class="h-full w-full object-cover" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/product-details/2/product-4.png" />
          </button>
          <button class="h-20 w-20 overflow-hidden rounded-lg border">
            <img class="h-full w-full object-cover" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/product-details/2/product-5.png" />
          </button>
        </div>
      </div>

      <!-- Product Details -->
      <div class="lg:col-span-1">
        <h1 class="text-3xl font-bold text-gray-900">Jenny’s Closets - The winter top for female, green</h1>

        <!-- Rating -->
        <div class="mt-4 flex items-center space-x-2">
          <div class="flex text-yellow-400">
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <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="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <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="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <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>
          <p class="text-sm text-gray-500">157 Reviews</p>
        </div>

        <!-- Price -->
        <div class="mt-4 flex items-center space-x-4 align-middle">
          <p class="text-3xl font-bold text-gray-900">$49</p>
          <del class="text-lg text-gray-500">$99</del>
        </div>
        <div class="mt-4 flex items-center space-x-2">
          <div class="flex">
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <p class="mt-2 flex items-center text-sm text-green-600">Save 50% right now</p>
        </div>
        <!-- Features -->
        <h2 class="mt-6 text-xl font-semibold">Features</h2>
        <ul class="mt-2 list-inside list-disc space-y-1 text-gray-600">
          <li>Made with full cotton</li>
          <li>Slim fit for any body</li>
          <li>Quality control by JC</li>
        </ul>

        <!-- Colors -->
        <h2 class="mt-6 text-xl font-semibold">Colors</h2>
        <div class="mt-3 flex items-center space-x-4">
          <span class="h-6 w-6 rounded-full border bg-green-600"></span>
          <span class="h-6 w-6 rounded-full border bg-red-600"></span>
          <span class="h-6 w-6 rounded-full border bg-blue-600"></span>
          <span class="h-6 w-6 rounded-full border bg-gray-600"></span>
        </div>

        <!-- Actions -->
        <div class="mt-8 flex items-center space-x-4">
          <button class="rounded-lg bg-black px-6 py-3 text-white hover:bg-gray-900">Add to cart</button>
          <button class="rounded-lg border p-3 text-gray-300 hover:bg-gray-100">❤️</button>
        </div>

        <!-- Guarantees -->
        <ul class="mt-6 list-disc space-y-2 space-x-2 text-sm text-gray-500">
          <li class="flex">
            <svg class="mx-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Free shipping worldwide
          </li>
          <li class="flex">
            <svg class="mx-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
            </svg>
            100% Secured Payment
          </li>
          <li class="flex">
            <svg class="mx-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
            Made by the Professionals
          </li>
        </ul>
      </div>
    </div>
    <!-- Reviews -->
    <div class="pt-12">
      <h2 class="mb-4 text-xl font-semibold">Reviews</h2>
      <p class="text-gray-600">Customer reviews content goes here (same layout as original).</p>
    </div>
  </div>
</section>