feat: update hero section with carousel functionality and styling enhancements

scripts/main.js

@@ -661,23 +661,6 @@ function initSite() {
       });
     });
   }
-  // Story arrow button functionality
-  const storyArrowButton = document.getElementById("story-arrow-button");
-  if (storyArrowButton) {
-    storyArrowButton.addEventListener("click", function () {
-      // You can customize this action - for now, let's scroll to the products section
-      const productsSection = document.getElementById("products");
-      if (productsSection) {
-        const headerHeight = 112;
-        const targetPosition = productsSection.offsetTop - headerHeight;
-
-        window.scrollTo({
-          top: targetPosition,
-          behavior: "smooth",
-        });
-      }
-    });
-  }
 
   // Product detail page functionality
   (async function initProductDetail() {
@@ -1737,6 +1720,111 @@ if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", function () {
   initQuoteBadge();
   initAddToQuote();
+  initHeroCarousel();
 });
 
-// Version: 4.2 - Moved Show Less button to end of blog post content
+// Hero Carousel Functionality
+function initHeroCarousel() {
+  const arrowButton = document.getElementById("story-arrow-button");
+  const heroImage = document.querySelector("#hero-image img");
+
+  if (!arrowButton || !heroImage) return;
+
+  // 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",
+  ];
+
+  let currentImageIndex = 0;
+  let originalHeight = null;
+
+  // Function to capture original image height on first load
+  function captureOriginalHeight() {
+    if (!originalHeight) {
+      originalHeight = heroImage.offsetHeight;
+      console.log("Original image height captured:", originalHeight + "px");
+    }
+  }
+
+  // Function to update image with fade transition
+  function updateImage(newIndex) {
+    const newImage = new Image();
+    newImage.onload = function () {
+      // Fade out current image
+      heroImage.style.opacity = "0";
+
+      setTimeout(() => {
+        // Change image source
+        heroImage.src = carouselImages[newIndex];
+        heroImage.alt = `Carousel image ${newIndex + 1}`;
+
+        // Apply original height to maintain uniformity
+        if (originalHeight && newIndex !== 0) {
+          heroImage.style.height = originalHeight + "px";
+          heroImage.style.objectFit = "cover";
+        } else if (newIndex === 0) {
+          // Reset to original for the first image
+          heroImage.style.height = "auto";
+          heroImage.style.objectFit = "initial";
+        }
+
+        // Fade in new image
+        heroImage.style.opacity = "1";
+
+        // Update indicators
+        updateIndicators(newIndex);
+      }, 300);
+    };
+    newImage.src = carouselImages[newIndex];
+  }
+
+  // Function to update carousel indicators
+  function updateIndicators(activeIndex) {
+    for (let i = 0; i < 5; i++) {
+      const indicator = document.getElementById(`carousel-indicator-${i}`);
+      if (indicator) {
+        indicator.style.opacity = i === activeIndex ? "1" : "0.5";
+      }
+    }
+  }
+
+  // Arrow button click handler
+  arrowButton.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
+    updateImage(currentImageIndex);
+  });
+
+  // Indicator click handlers
+  for (let i = 0; i < 5; i++) {
+    const indicator = document.getElementById(`carousel-indicator-${i}`);
+    if (indicator) {
+      indicator.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        currentImageIndex = i;
+        updateImage(currentImageIndex);
+      });
+    }
+  }
+
+  // Capture original height after image loads
+  if (heroImage.complete) {
+    captureOriginalHeight();
+  } else {
+    heroImage.addEventListener("load", captureOriginalHeight);
+  }
+
+  // Auto-advance carousel every 5 seconds
+  setInterval(() => {
+    currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
+    updateImage(currentImageIndex);
+  }, 5000);
+}
+
+// Version: 4.7 - Use original image height as standard for carousel uniformity