refactor: update product images and titles in index.html, remove obsolete image files, and add new product cards for enhanced catalog presentation
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 12 KiB |
BIN
assets/images/products/covers/conference_chairs.jpg
Normal file
|
After Width: | Height: | Size: 376 KiB |
BIN
assets/images/products/covers/executive_desks.jpg
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/images/products/covers/screens.jpg
Normal file
|
After Width: | Height: | Size: 361 KiB |
BIN
assets/images/products/covers/soft_seating.jpg
Normal file
|
After Width: | Height: | Size: 217 KiB |
BIN
assets/images/products/covers/training_tables.jpg
Normal file
|
After Width: | Height: | Size: 584 KiB |
BIN
assets/images/products/covers/visitors_chair.jpg
Normal file
|
After Width: | Height: | Size: 322 KiB |
260
index.html
|
|
@ -625,8 +625,8 @@
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<img
|
||||||
src="assets/images/lounge_chair.jpg"
|
src="assets/images/products/covers/training_tables.jpg"
|
||||||
alt="Lounge Chairs"
|
alt="Training Tables"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -636,7 +636,7 @@
|
||||||
<h3
|
<h3
|
||||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
||||||
>
|
>
|
||||||
Lounge Chairs
|
Training Tables
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -649,8 +649,8 @@
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<img
|
||||||
src="assets/images/office_chair.jpg"
|
src="assets/images/products/covers/screens.jpg"
|
||||||
alt="Office Chairs"
|
alt="Screens"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -660,7 +660,7 @@
|
||||||
<h3
|
<h3
|
||||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
||||||
>
|
>
|
||||||
Office Chairs
|
Screens
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -673,8 +673,8 @@
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<img
|
||||||
src="assets/images/conference_rooms.jpg"
|
src="assets/images/products/covers/executive_desks.jpg"
|
||||||
alt="Conference Room"
|
alt="Executive Desks"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -684,7 +684,7 @@
|
||||||
<h3
|
<h3
|
||||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
||||||
>
|
>
|
||||||
Conference Room
|
Executive Desks
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -697,7 +697,175 @@
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<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"
|
alt="Storage"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
|
|
@ -714,15 +882,15 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Product Card 5: Kitchen -->
|
<!-- Product Card 12: Executive Desks -->
|
||||||
<a href="product-catalog.html?category=workspace" class="block">
|
<a href="product-catalog.html?category=workspace" class="block">
|
||||||
<div
|
<div
|
||||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
|
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<img
|
||||||
src="assets/images/kitchen.jpg"
|
src="assets/images/products/covers/training_chairs.jpg"
|
||||||
alt="Kitchen"
|
alt="Training Chairs"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -732,21 +900,21 @@
|
||||||
<h3
|
<h3
|
||||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
||||||
>
|
>
|
||||||
Kitchen
|
Training Chairs
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Product Card 6: Chairs -->
|
<!-- Product Card 13: Task Chairs -->
|
||||||
<a href="product-catalog.html?category=seating" class="block">
|
<a href="product-catalog.html?category=seating" class="block">
|
||||||
<div
|
<div
|
||||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
|
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<img
|
||||||
src="assets/images/chairs.jpg"
|
src="assets/images/products/covers/task_chairs.jpg"
|
||||||
alt="Chairs"
|
alt="Task Chairs"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -756,45 +924,21 @@
|
||||||
<h3
|
<h3
|
||||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
||||||
>
|
>
|
||||||
Chairs
|
Task Chairs
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Product Card 7: Pods -->
|
<!-- Product Card 14: Work Station -->
|
||||||
<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 -->
|
|
||||||
<a href="product-catalog.html?category=workspace" class="block">
|
<a href="product-catalog.html?category=workspace" class="block">
|
||||||
<div
|
<div
|
||||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
|
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
|
||||||
>
|
>
|
||||||
<div class="product-card-image h-[22vh] bg-gray-200">
|
<div class="product-card-image h-[22vh] bg-gray-200">
|
||||||
<img
|
<img
|
||||||
src="assets/images/potty.jpg"
|
src="assets/images/products/covers/meeting_tables.jpg"
|
||||||
alt="Potty"
|
alt="Meeting Tables"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -804,7 +948,31 @@
|
||||||
<h3
|
<h3
|
||||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
|
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>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||