refactor: update image paths in index.html, remove obsolete images, and enhance CSS with new utility classes for improved layout and responsiveness

index.html

@@ -425,7 +425,7 @@
                 class="curated-card-image bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm mx-auto"
               >
                 <img
-                  src="assets/images/google_accra.jpg"
+                  src="assets/images/space/google_accra.jpg"
                   alt="Lounge Areas"
                   class="w-full h-full object-cover"
                 />
@@ -443,7 +443,7 @@
                 class="curated-card-image bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm mx-auto"
               >
                 <img
-                  src="assets/images/workstation.jpg"
+                  src="assets/images/space/workstation.jpg"
                   alt="Workstations"
                   class="w-full h-full object-cover"
                 />
@@ -461,7 +461,7 @@
                 class="curated-card-image bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm mx-auto"
               >
                 <img
-                  src="assets/images/conference_room.jpg"
+                  src="assets/images/space/conference_room.jpg"
                   alt="Conference Rooms"
                   class="w-full h-full object-cover"
                 />
@@ -501,7 +501,7 @@
               class="relative order-2 lg:order-1 h-80 lg:h-[65vh]"
             >
               <img
-                src="assets/images/our_story.jpg"
+                src="assets/images/our_story/chair.jpg"
                 alt="Modern office interior"
                 class="w-full h-full object-cover rounded-lg transition-opacity duration-300"
               />
@@ -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>
 
@@ -838,7 +842,7 @@
               <!-- Norfund -->
               <div class="w-40 md:w-44 lg:w-48 flex-shrink-0">
                 <img
-                  src="assets/images/norfund.png"
+                  src="assets/images/brands/norfund.png"
                   alt="Norfund"
                   class="w-full h-auto object-contain"
                 />
@@ -847,7 +851,7 @@
               <!-- Glico -->
               <div class="w-56 md:w-60 lg:w-64 flex-shrink-0">
                 <img
-                  src="assets/images/glico.png"
+                  src="assets/images/brands/glico.png"
                   alt="Glico"
                   class="w-full h-auto object-contain"
                 />
@@ -856,7 +860,7 @@
               <!-- Standard Bank -->
               <div class="w-28 md:w-32 lg:w-36 flex-shrink-0">
                 <img
-                  src="assets/images/stanbic.png"
+                  src="assets/images/brands/stanbic.png"
                   alt="Stanbic Bank"
                   class="w-full h-auto object-contain"
                 />
@@ -865,7 +869,7 @@
               <!-- GROW ENGINEERING -->
               <div class="w-36 md:w-40 lg:w-44 flex-shrink-0">
                 <img
-                  src="assets/images/grow.png"
+                  src="assets/images/brands/grow.png"
                   alt="GROW ENGINEERING"
                   class="w-full h-auto object-contain"
                 />
@@ -874,7 +878,7 @@
               <!-- DBG -->
               <div class="w-36 md:w-40 lg:w-44 flex-shrink-0">
                 <img
-                  src="assets/images/dbg.png"
+                  src="assets/images/brands/dbg.png"
                   alt="DBG"
                   class="w-full h-auto object-contain"
                 />

scripts/main.js

@@ -1092,11 +1092,12 @@ function initHeroCarousel() {
 
   // Carousel images array
   const carouselImages = [
-    "assets/images/our_story.jpg",
-    "assets/images/first_homepage.jpg",
-    "assets/images/conference_room.jpg",
-    "assets/images/lounge_chair.jpg",
-    "assets/images/kitchen.JPG",
+    "assets/images/our_story/chair.jpg",
+    "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;