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>
 
@@ -765,7 +769,7 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/barstools.png"
+                    src="assets/images/products/covers/barstools.jpg"
                     alt="Barstools"
                     class="w-full h-full object-cover"
                   />
@@ -813,7 +817,7 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/executive_task_chair.png"
+                    src="assets/images/products/covers/executive_task_chair.jpg"
                     alt="Executive Task Chair"
                     class="w-full h-full object-cover"
                   />
@@ -837,7 +841,7 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/canteen_chairs.webp"
+                    src="assets/images/products/covers/canteen_chairs.jpg"
                     alt="Canteen Chairs"
                     class="w-full h-full object-cover"
                   />
@@ -957,7 +961,7 @@
               >
                 <div class="product-card-image h-[22vh] bg-gray-200">
                   <img
-                    src="assets/images/products/covers/occassional_tables.jpg"
+                    src="assets/images/products/covers/occasional_tables.jpg"
                     alt="Occasional Tables"
                     class="w-full h-full object-cover"
                   />

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;
   }