refactor: update product images and titles in index.html, remove obsolete image files, and add new product cards for enhanced catalog presentation

This commit is contained in:
George Birikorang 2025-09-17 13:12:48 -07:00
parent e8027ebe7e
commit 660771b62f
12 changed files with 214 additions and 46 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 584 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

View file

@ -625,8 +625,8 @@
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/lounge_chair.jpg"
alt="Lounge Chairs"
src="assets/images/products/covers/training_tables.jpg"
alt="Training Tables"
class="w-full h-full object-cover"
/>
</div>
@ -636,7 +636,7 @@
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Lounge Chairs
Training Tables
</h3>
</div>
</div>
@ -649,8 +649,8 @@
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/office_chair.jpg"
alt="Office Chairs"
src="assets/images/products/covers/screens.jpg"
alt="Screens"
class="w-full h-full object-cover"
/>
</div>
@ -660,7 +660,7 @@
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Office Chairs
Screens
</h3>
</div>
</div>
@ -673,8 +673,8 @@
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/conference_rooms.jpg"
alt="Conference Room"
src="assets/images/products/covers/executive_desks.jpg"
alt="Executive Desks"
class="w-full h-full object-cover"
/>
</div>
@ -684,7 +684,7 @@
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Conference Room
Executive Desks
</h3>
</div>
</div>
@ -697,7 +697,175 @@
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/storage.jpg"
src="assets/images/products/covers/conference_chairs.jpg"
alt="Conference Chairs"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Conference Chairs
</h3>
</div>
</div>
</a>
<!-- Product Card 5: Kitchen -->
<a href="product-catalog.html?category=workspace" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/visitors_chair.jpg"
alt="Visitors Chair"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Visitors Chair
</h3>
</div>
</div>
</a>
<!-- Product Card 6: Chairs -->
<a href="product-catalog.html?category=seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/soft_seating.jpg"
alt="Soft seating"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Soft seating
</h3>
</div>
</div>
</a>
<!-- Product Card 7: Pods -->
<a href="product-catalog.html?category=seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/barstools.jpg"
alt="Barstools"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Barstools
</h3>
</div>
</div>
</a>
<!-- Product Card 8: Potty -->
<a href="product-catalog.html?category=workspace" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/work_station.jpg"
alt="Work Station"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Work Station
</h3>
</div>
</div>
</a>
<!-- Product Card 9: Executive Task Chair -->
<a href="product-catalog.html?category=seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/executive_task_chair.jpg"
alt="Executive Task Chair"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Executive Task Chair
</h3>
</div>
</div>
</a>
<!-- Product Card 10: Storage -->
<a href="product-catalog.html?category=tables" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/canteen_chairs.jpg"
alt="Canteen Chairs"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Canteen Chairs
</h3>
</div>
</div>
</a>
<!-- Product Card 11: Storage -->
<a href="product-catalog.html?category=seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/storage.jpg"
alt="Storage"
class="w-full h-full object-cover"
/>
@ -714,15 +882,15 @@
</div>
</a>
<!-- Product Card 5: Kitchen -->
<!-- Product Card 12: Executive Desks -->
<a href="product-catalog.html?category=workspace" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/kitchen.jpg"
alt="Kitchen"
src="assets/images/products/covers/training_chairs.jpg"
alt="Training Chairs"
class="w-full h-full object-cover"
/>
</div>
@ -732,21 +900,21 @@
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Kitchen
Training Chairs
</h3>
</div>
</div>
</a>
<!-- Product Card 6: Chairs -->
<!-- Product Card 13: Task Chairs -->
<a href="product-catalog.html?category=seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/chairs.jpg"
alt="Chairs"
src="assets/images/products/covers/task_chairs.jpg"
alt="Task Chairs"
class="w-full h-full object-cover"
/>
</div>
@ -756,45 +924,21 @@
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Chairs
Task Chairs
</h3>
</div>
</div>
</a>
<!-- Product Card 7: Pods -->
<a href="product-catalog.html?category=seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/pods.jpg"
alt="Pods"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Pods
</h3>
</div>
</div>
</a>
<!-- Product Card 8: Potty -->
<!-- Product Card 14: Work Station -->
<a href="product-catalog.html?category=workspace" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/potty.jpg"
alt="Potty"
src="assets/images/products/covers/meeting_tables.jpg"
alt="Meeting Tables"
class="w-full h-full object-cover"
/>
</div>
@ -804,7 +948,31 @@
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Potty
Meeting Tables
</h3>
</div>
</div>
</a>
<!-- Product Card 15: Occasional Tables -->
<a href="product-catalog.html?category=tables" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<img
src="assets/images/products/covers/occasional_tables.jpg"
alt="Occasional Tables"
class="w-full h-full object-cover"
/>
</div>
<div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
>
Occasional Tables
</h3>
</div>
</div>