index.html

@@ -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>
 
@@ -621,8 +625,8 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/training_tables.jpg"
+                    src="assets/images/lounge_chair.jpg"
-                    alt="Training Tables"
+                    alt="Lounge Chairs"
                     class="w-full h-full object-cover"
                   />
                 </div>
@@ -632,7 +636,7 @@
                   <h3
                     class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
                   >
-                    Training Tables
+                    Lounge Chairs
                   </h3>
                 </div>
               </div>
@@ -645,8 +649,8 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/screens.jpg"
+                    src="assets/images/office_chair.jpg"
-                    alt="Screens"
+                    alt="Office Chairs"
                     class="w-full h-full object-cover"
                   />
                 </div>
@@ -656,7 +660,7 @@
                   <h3
                     class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
                   >
-                    Screens
+                    Office Chairs
                   </h3>
                 </div>
               </div>
@@ -669,8 +673,8 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/executive_desks.jpg"
+                    src="assets/images/conference_rooms.jpg"
-                    alt="Executive Desks"
+                    alt="Conference Room"
                     class="w-full h-full object-cover"
                   />
                 </div>
@@ -680,7 +684,7 @@
                   <h3
                     class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
                   >
-                    Executive Desks
+                    Conference Room
                   </h3>
                 </div>
               </div>
@@ -693,175 +697,7 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/conference_chairs.jpg"
+                    src="assets/images/storage.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"
                   />
@@ -878,15 +714,15 @@
               </div>
             </a>
 
-            <!-- Product Card 12: Executive Desks -->
+            <!-- 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/training_chairs.jpg"
+                    src="assets/images/kitchen.jpg"
-                    alt="Training Chairs"
+                    alt="Kitchen"
                     class="w-full h-full object-cover"
                   />
                 </div>
@@ -896,21 +732,21 @@
                   <h3
                     class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
                   >
-                    Training Chairs
+                    Kitchen
                   </h3>
                 </div>
               </div>
             </a>
 
-            <!-- Product Card 13: Task Chairs -->
+            <!-- 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/task_chairs.jpg"
+                    src="assets/images/chairs.jpg"
-                    alt="Task Chairs"
+                    alt="Chairs"
                     class="w-full h-full object-cover"
                   />
                 </div>
@@ -920,21 +756,45 @@
                   <h3
                     class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
                   >
-                    Task Chairs
+                    Chairs
                   </h3>
                 </div>
               </div>
             </a>
 
-            <!-- Product Card 14: Work Station -->
+            <!-- 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 -->
             <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/meeting_tables.jpg"
+                    src="assets/images/potty.jpg"
-                    alt="Meeting Tables"
+                    alt="Potty"
                     class="w-full h-full object-cover"
                   />
                 </div>
@@ -944,31 +804,7 @@
                   <h3
                     class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
                   >
-                    Meeting Tables
+                    Potty
-                  </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,10 +1093,11 @@ function initHeroCarousel() {
   // Carousel images array
   const carouselImages = [
     "assets/images/our_story/chair.jpg",
-    "assets/images/our_story/booth.png",
     "assets/images/our_story/screen.jpg",
+    "assets/images/our_story/booth.png",
     "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,10 +779,6 @@ video {
   margin-top: 2.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-20 {
   margin-top: 5rem;
 }
@@ -791,10 +787,18 @@ 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;
 }
@@ -883,22 +887,22 @@ video {
   height: 24rem;
 }
 
-.h-\[22vh\] {
+.h-\[145px\] {
-  height: 22vh;
+  height: 145px;
 }
 
-.h-\[29vh\] {
+.h-\[301px\] {
-  height: 29vh;
+  height: 301px;
+}
+
+.h-\[446px\] {
+  height: 446px;
 }
 
 .h-\[64px\] {
   height: 64px;
 }
 
-.h-\[6vh\] {
-  height: 6vh;
-}
-
 .h-auto {
   height: auto;
 }
@@ -915,6 +919,54 @@ 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;
 }
@@ -1031,6 +1083,10 @@ video {
   max-width: 20rem;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1148,14 +1204,14 @@ video {
   gap: 1.5rem;
 }
 
-.gap-7 {
-  gap: 1.75rem;
-}
-
 .gap-8 {
   gap: 2rem;
 }
 
+.gap-7 {
+  gap: 1.75rem;
+}
+
 .space-x-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2.5rem * var(--tw-space-x-reverse));
@@ -1192,6 +1248,12 @@ 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)));
@@ -1574,6 +1636,10 @@ video {
   padding-right: 1.5rem;
 }
 
+.pt-0 {
+  padding-top: 0px;
+}
+
 .pt-12 {
   padding-top: 3rem;
 }
@@ -2241,18 +2307,90 @@ 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;
   }
@@ -2289,6 +2427,18 @@ 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)));
@@ -2312,6 +2462,11 @@ 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;
@@ -2332,6 +2487,11 @@ video {
     line-height: 1.75rem;
   }
 
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .lg\:leading-snug {
     line-height: 1.375;
   }