feat: add product comparison page

This commit is contained in:
George Birikorang 2025-08-26 01:08:37 -04:00
parent a3689ca143
commit ec844c6c88
12 changed files with 2108 additions and 86 deletions

View file

@ -187,32 +187,32 @@
</h3>
<div class="grid grid-cols-6 gap-2" id="size-buttons-container">
<button
class="w-8 h-8 bg-uc-gold text-white font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
class="w-8 h-8 bg-uc-gold text-white font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
L
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
XL
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
XS
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
S
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
M
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
2XL
</button>
@ -269,6 +269,7 @@
Add To Quote
</button>
<button
id="compare-products-btn"
class="inline-flex items-center justify-center w-[440px] h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-black hover:text-white hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap"
>
Compare Products
@ -282,57 +283,57 @@
<div class="space-y-4">
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
class="font-playfair font-normal text-base text-quick-silver w-20"
>Model No.</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
class="font-playfair font-normal text-base text-quick-silver"
>SS001</span
>
</div>
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
class="font-playfair font-normal text-base text-quick-silver w-20"
>Category</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
class="font-playfair font-normal text-base text-quick-silver"
>Sofas</span
>
</div>
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
class="font-playfair font-normal text-base text-quick-silver w-20"
>Tags</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
class="font-playfair font-normal text-base text-quick-silver"
>Sofa, Chair, Home, Shop</span
>
</div>
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
class="font-playfair font-normal text-base text-quick-silver w-20"
>Dimension</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
class="font-playfair font-normal text-base text-quick-silver"
>180cm x 85cm x 75cm</span
>
</div>
@ -587,6 +588,6 @@
</div>
</footer>
<script src="scripts/main.js"></script>
<script src="scripts/main.js?v=1.1"></script>
</body>
</html>