Update 'about.html' to correct team member numbering and enhance 'index.html' with preloading of critical resources, optimized images, and deferred script loading for improved performance. Modify 'package.json' to include minification in the build script and enable JIT mode in 'tailwind.config.js'.

js/hero-animations.js

@@ -0,0 +1,67 @@
+// Hero image transitions and animations
+document.addEventListener("DOMContentLoaded", function () {
+  // Enhanced slide + zoom hero image transitions
+  const imgs = [
+    "assets/images/optimized/room_optimized.jpg",
+    "assets/images/optimized/chair_optimized.jpg",
+    "assets/images/optimized/google_optimized.jpg",
+  ];
+
+  const currentImg = document.getElementById("currentImg");
+  const nextImg = document.getElementById("nextImg");
+
+  if (currentImg && nextImg) {
+    let currentIndex = 0;
+    let isTransitioning = false;
+
+    // Alternate slide directions for dynamic effect
+    const slideDirections = ["left", "right"];
+    let slideIndex = 0;
+
+    function performSlideZoomTransition() {
+      if (isTransitioning) return;
+      isTransitioning = true;
+
+      // Get next image index
+      const nextIndex = (currentIndex + 1) % imgs.length;
+      const slideDirection =
+        slideDirections[slideIndex % slideDirections.length];
+      slideIndex++;
+
+      // Set up next image
+      nextImg.src = imgs[nextIndex];
+      nextImg.style.opacity = "1";
+
+      // Apply animations based on slide direction
+      if (slideDirection === "left") {
+        // Current slides out left, next zooms in from right
+        currentImg.style.animation = "slideOutLeft 1s ease-in-out forwards";
+        nextImg.style.animation = "zoomInFromRight 1s ease-in-out forwards";
+      } else {
+        // Current slides out right, next zooms in from left
+        currentImg.style.animation = "slideOutRight 1s ease-in-out forwards";
+        nextImg.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
+      }
+
+      // After animation completes, swap the images
+      setTimeout(() => {
+        // Swap the images
+        currentImg.src = imgs[nextIndex];
+        currentImg.style.animation = "";
+        currentImg.style.transform = "";
+        currentImg.style.opacity = "1";
+
+        // Reset next image
+        nextImg.style.animation = "";
+        nextImg.style.transform = "";
+        nextImg.style.opacity = "0";
+
+        currentIndex = nextIndex;
+        isTransitioning = false;
+      }, 1000); // Match animation duration
+    }
+
+    // Start the transition cycle
+    setInterval(performSlideZoomTransition, 10000); // Every 10 seconds for better viewing
+  }
+});