refactor: remove unused carousel indicator and obsolete image file, update image paths in main.js for improved carousel functionality

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>
 

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