Update product data, fix icon paths, improve carousel, and increase product card heights

- Added products 50-88 to products.json with complete details
- Fixed icon paths after moving phone2.png and mail.png to icons folder
- Updated carousel to support 6 images with proper indicators
- Renamed first_homepage.jpg to index_hero.jpg and updated all references
- Increased product card heights from 29vh to 32vh for better visual presence
- Removed unused icon files (admin.png, calendar.png, search.png, tag.png)
- Added storage.jpg to our_story carousel images
This commit is contained in:
George Birikorang 2025-09-17 17:34:11 -07:00
parent 8b8f08908b
commit 195286e6c8
25 changed files with 613 additions and 210 deletions

View file

@ -351,7 +351,7 @@
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img
src="assets/images/first_homepage.jpg"
src="assets/images/index_hero.jpg"
alt="Modern interior design space"
class="w-full h-full object-cover object-top"
/>
@ -551,6 +551,10 @@
id="carousel-indicator-4"
class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
></div>
<div
id="carousel-indicator-5"
class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
></div>
</div>
</div>
@ -620,9 +624,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/training_tables.jpg"
alt="Training Tables"
@ -644,9 +648,9 @@
<!-- Product Card 2: Screens -->
<a href="product-catalog.html?category=screens" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/screens.jpg"
alt="Screens"
@ -671,9 +675,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/executive_desks.jpg"
alt="Executive Desks"
@ -698,9 +702,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/conference_chairs.jpg"
alt="Conference Chairs"
@ -725,9 +729,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/visitors_chair.jpg"
alt="Visitors Chair"
@ -749,9 +753,9 @@
<!-- Product Card 6: Soft seating -->
<a href="product-catalog.html?category=soft-seating" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/soft_seating.jpg"
alt="Soft seating"
@ -773,9 +777,9 @@
<!-- Product Card 7: Barstools -->
<a href="product-catalog.html?category=barstools" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/barstools.png"
alt="Barstools"
@ -797,9 +801,9 @@
<!-- Product Card 8: Work Station -->
<a href="product-catalog.html?category=work-station" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/work_station.jpg"
alt="Work Station"
@ -824,9 +828,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/executive_task_chair.png"
alt="Executive Task Chair"
@ -851,9 +855,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/canteen_chairs.webp"
alt="Canteen Chairs"
@ -875,9 +879,9 @@
<!-- Product Card 11: Storage -->
<a href="product-catalog.html?category=storage" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/storage.jpg"
alt="Storage"
@ -902,9 +906,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/training_chairs.jpg"
alt="Training Chairs"
@ -926,9 +930,9 @@
<!-- Product Card 13: Task Chairs -->
<a href="product-catalog.html?category=task-chairs" class="block">
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/task_chairs.jpg"
alt="Task Chairs"
@ -953,9 +957,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/meeting_tables.jpg"
alt="Meeting Tables"
@ -980,9 +984,9 @@
class="block"
>
<div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
class="product-card bg-light-bg rounded-lg overflow-hidden h-[32vh]"
>
<div class="product-card-image h-[22vh] bg-gray-200">
<div class="product-card-image h-[25vh] bg-gray-200">
<img
src="assets/images/products/covers/occassional_tables.jpg"
alt="Occasional Tables"
@ -1116,7 +1120,7 @@
<!-- Phone -->
<div class="flex items-center space-x-3 -mt-1">
<img
src="assets/images/phone.png"
src="assets/icons/phone2.png"
alt="Phone"
class="w-4 h-4"
/>
@ -1127,7 +1131,7 @@
<!-- Email -->
<div class="flex items-center space-x-3 -mt-1">
<img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
<img src="assets/icons/mail.png" alt="Email" class="w-4 h-4" />
<span class="font-playfair font-normal text-base text-gray-800">
design@khyltd.com
</span>