refactor: update image file extensions in index.html for product images to ensure consistency and compatibility

index.html

@@ -551,10 +551,6 @@
                   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>
 
@@ -625,8 +621,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 +632,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 +645,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 +656,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 +669,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 +680,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 +693,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.png"
+                    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.png"
+                    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.webp"
+                    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 +878,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 +896,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 +920,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 +944,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/occassional_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>

scripts/main.js

@@ -1093,11 +1093,10 @@ function initHeroCarousel() {
   // Carousel images array
   const carouselImages = [
     "assets/images/our_story/chair.jpg",
-    "assets/images/our_story/screen.jpg",
     "assets/images/our_story/booth.png",
+    "assets/images/our_story/screen.jpg",
     "assets/images/our_story/table.jpg",
     "assets/images/our_story/chair2.jpg",
-    "assets/images/our_story/storage.jpg",
   ];
 
   let currentImageIndex = 0;

styles/main.css

@@ -779,6 +779,10 @@ video {
   margin-top: 2.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-20 {
   margin-top: 5rem;
 }
@@ -787,18 +791,10 @@ video {
   margin-top: 0.75rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -887,22 +883,22 @@ video {
   height: 24rem;
 }
 
-.h-\[145px\] {
-  height: 145px;
+.h-\[22vh\] {
+  height: 22vh;
 }
 
-.h-\[301px\] {
-  height: 301px;
-}
-
-.h-\[446px\] {
-  height: 446px;
+.h-\[29vh\] {
+  height: 29vh;
 }
 
 .h-\[64px\] {
   height: 64px;
 }
 
+.h-\[6vh\] {
+  height: 6vh;
+}
+
 .h-auto {
   height: auto;
 }
@@ -919,54 +915,6 @@ video {
   height: 100vh;
 }
 
-.h-\[320px\] {
-  height: 320px;
-}
-
-.h-\[220px\] {
-  height: 220px;
-}
-
-.h-\[100px\] {
-  height: 100px;
-}
-
-.h-\[25vh\] {
-  height: 25vh;
-}
-
-.h-\[18vh\] {
-  height: 18vh;
-}
-
-.h-\[7vh\] {
-  height: 7vh;
-}
-
-.h-\[30vh\] {
-  height: 30vh;
-}
-
-.h-\[22vh\] {
-  height: 22vh;
-}
-
-.h-\[8vh\] {
-  height: 8vh;
-}
-
-.h-\[29vh\] {
-  height: 29vh;
-}
-
-.h-\[21vh\] {
-  height: 21vh;
-}
-
-.h-\[6vh\] {
-  height: 6vh;
-}
-
 .min-h-\[64px\] {
   min-height: 64px;
 }
@@ -1083,10 +1031,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1204,14 +1148,14 @@ video {
   gap: 1.5rem;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
 .gap-7 {
   gap: 1.75rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-x-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2.5rem * var(--tw-space-x-reverse));
@@ -1248,12 +1192,6 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.space-y-16 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
-}
-
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1636,10 +1574,6 @@ video {
   padding-right: 1.5rem;
 }
 
-.pt-0 {
-  padding-top: 0px;
-}
-
 .pt-12 {
   padding-top: 3rem;
 }
@@ -2307,90 +2241,18 @@ video {
     margin-left: 2rem;
   }
 
-  .lg\:mt-16 {
-    margin-top: 4rem;
-  }
-
   .lg\:mt-8 {
     margin-top: 2rem;
   }
 
-  .lg\:h-\[70vh\] {
-    height: 70vh;
-  }
-
-  .lg\:h-\[90vh\] {
-    height: 90vh;
-  }
-
-  .lg\:h-\[50vh\] {
-    height: 50vh;
-  }
-
-  .lg\:h-\[600px\] {
-    height: 600px;
-  }
-
-  .lg\:h-\[500px\] {
-    height: 500px;
-  }
-
-  .lg\:h-\[85vh\] {
-    height: 85vh;
-  }
-
-  .lg\:h-\[60vh\] {
-    height: 60vh;
-  }
-
   .lg\:h-\[65vh\] {
     height: 65vh;
   }
 
-  .lg\:min-h-screen {
-    min-height: 100vh;
-  }
-
-  .lg\:min-h-\[90vh\] {
-    min-height: 90vh;
-  }
-
-  .lg\:min-h-\[100vh\] {
-    min-height: 100vh;
-  }
-
-  .lg\:min-h-\[150vh\] {
-    min-height: 150vh;
-  }
-
-  .lg\:min-h-\[900px\] {
-    min-height: 900px;
-  }
-
-  .lg\:min-h-\[800px\] {
-    min-height: 800px;
-  }
-
-  .lg\:min-h-\[700px\] {
-    min-height: 700px;
-  }
-
-  .lg\:min-h-\[600px\] {
-    min-height: 600px;
-  }
-
-  .lg\:min-h-\[60vh\] {
-    min-height: 60vh;
-  }
-
   .lg\:min-h-\[65vh\] {
     min-height: 65vh;
   }
 
-  .lg\:min-h-\[80vh\] {
-    min-height: 80vh;
-  }
-
   .lg\:w-36 {
     width: 9rem;
   }
@@ -2427,18 +2289,6 @@ video {
     gap: 2rem;
   }
 
-  .lg\:space-y-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
-  }
-
-  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-  }
-
   .lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2462,11 +2312,6 @@ video {
     padding-top: 12rem;
   }
 
-  .lg\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -2487,11 +2332,6 @@ video {
     line-height: 1.75rem;
   }
 
-  .lg\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
   .lg\:leading-snug {
     line-height: 1.375;
   }