feat: enhance curated card interactions with tap-to-toggle functionality for mobile and improved hover effects for desktop

index.html

@@ -18,37 +18,61 @@
         display: inline-block;
       }
 
-      /* Enhanced hover effects for curated cards */
+      /* Enhanced hover effects for curated cards (desktop/hoverable only) */
       .curated-card {
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         will-change: transform;
       }
-
+      @media (hover: hover) and (pointer: fine) {
         .curated-card:hover .curated-card-image {
           transform: scale(1.08) translateY(-12px);
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
+      }
+
+      /* Tap-to-toggle active state for mobile (mirrors hover styles) */
+      .curated-card.is-active .curated-card-image {
+        transform: scale(1.08) translateY(-12px);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      }
 
       .curated-card-image {
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         will-change: transform;
+        height: 24rem; /* h-96 */
+      }
+
+      @media (min-width: 768px) {
+        .curated-card-image {
+          height: 484px; /* md:h-[484px] for consistent desktop sizing */
+        }
       }
 
       .curated-card img {
         transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       }
-
+      @media (hover: hover) and (pointer: fine) {
         .curated-card:hover img {
           transform: scale(1.15);
         }
+      }
+
+      .curated-card.is-active img {
+        transform: scale(1.15);
+      }
 
       .curated-card-title {
         transition: color 0.3s ease;
       }
-
+      @media (hover: hover) and (pointer: fine) {
         .curated-card:hover .curated-card-title {
           color: #b8873f;
         }
+      }
+
+      .curated-card.is-active .curated-card-title {
+        color: #b8873f;
+      }
 
       /* Smooth scrolling for the entire page */
       html {
@@ -398,7 +422,7 @@
             <!-- Lounge Areas Card -->
             <div class="text-center cursor-pointer curated-card">
               <div
-                class="curated-card-image bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
+                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"
@@ -416,7 +440,7 @@
             <!-- Workstations Card -->
             <div class="text-center cursor-pointer curated-card">
               <div
-                class="curated-card-image bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
+                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"
@@ -434,7 +458,7 @@
             <!-- Conference Rooms Card -->
             <div class="text-center cursor-pointer curated-card">
               <div
-                class="curated-card-image bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
+                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"
@@ -453,25 +477,33 @@
       </section>
 
       <!-- Our Story Section -->
-      <section id="about" class="relative bg-white pt-8 pb-16">
+      <section
+        id="about"
+        class="relative bg-white pt-0 pb-4 lg:min-h-screen lg:py-0"
+      >
         <div class="max-w-7xl mx-auto px-5">
           <!-- Section Header -->
-          <div class="text-center mb-16">
+          <div class="text-center mb-8">
             <h2
-              class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black"
+              class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black mb-4"
             >
               Our Story
             </h2>
           </div>
 
           <!-- Main Content -->
-          <div class="grid grid-cols-1 lg:grid-cols-2 gap-28 items-center">
+          <div
+            class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-center lg:items-start"
+          >
             <!-- Left Side - Image -->
-            <div id="hero-image" class="relative order-2 lg:order-1">
+            <div
+              id="hero-image"
+              class="relative order-2 lg:order-1 h-96 lg:h-[70vh]"
+            >
               <img
                 src="assets/images/our_story.jpg"
                 alt="Modern office interior"
-                class="w-full h-auto rounded-lg transition-opacity duration-300"
+                class="w-full h-full object-cover rounded-lg transition-opacity duration-300"
               />
               <!-- Navigation Arrow -->
               <div class="absolute top-1/2 right-4 transform -translate-y-1/2">
@@ -523,9 +555,11 @@
             </div>
 
             <!-- Right Side - Text Content -->
-            <div class="space-y-16 order-1 lg:order-2">
+            <div
+              class="space-y-16 lg:space-y-10 order-1 lg:order-2 lg:self-center"
+            >
               <h3
-                class="font-playfair font-normal text-3xl md:text-4xl lg:text-5xl leading-loose text-black"
+                class="font-playfair font-normal text-3xl md:text-4xl lg:text-5xl leading-tight lg:leading-tight text-black"
               >
                 Rooted in Ghana. <br />
                 Inspired by beauty. <br />
@@ -533,7 +567,7 @@
               </h3>
 
               <p
-                class="font-playfair font-thin text-xl md:text-2xl lg:text-3xl leading-relaxed text-black max-w-lg"
+                class="font-playfair font-thin text-xl md:text-2xl lg:text-2xl leading-relaxed lg:leading-snug text-black max-w-lg"
               >
                 From our first collection to now, khy has remained dedicated to
                 artistry, quality, and Ghanaian-inspired sophistication.

scripts/main.js

@@ -1080,6 +1080,7 @@ if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", function () {
   initHeroCarousel();
   initMobileMenu();
+  initCuratedCardsTap();
 });
 
 // Hero Carousel Functionality
@@ -1099,15 +1100,6 @@ function initHeroCarousel() {
   ];
 
   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) {
@@ -1121,15 +1113,9 @@ function initHeroCarousel() {
         heroImage.src = carouselImages[newIndex];
         heroImage.alt = `Carousel image ${newIndex + 1}`;
 
-        // Apply original height to maintain uniformity
+        // Ensure image always fits its container uniformly
-        if (originalHeight && newIndex !== 0) {
+        heroImage.style.height = "100%";
-          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";
@@ -1172,12 +1158,7 @@ function initHeroCarousel() {
     }
   }
 
-  // Capture original height after image loads
+  // No dynamic height capture needed; CSS handles sizing
-  if (heroImage.complete) {
-    captureOriginalHeight();
-  } else {
-    heroImage.addEventListener("load", captureOriginalHeight);
-  }
 
   // Auto-advance carousel every 5 seconds
   setInterval(() => {
@@ -1186,6 +1167,36 @@ function initHeroCarousel() {
   }, 5000);
 }
 
+// Tap-to-toggle for curated cards on touch devices
+function initCuratedCardsTap() {
+  try {
+    const cards = document.querySelectorAll(".curated-card");
+    if (!cards || cards.length === 0) return;
+
+    // Only enable on coarse pointers (touch)
+    const isTouchLike = window.matchMedia(
+      "(hover: none), (pointer: coarse)"
+    ).matches;
+    if (!isTouchLike) return;
+
+    cards.forEach((card) => {
+      card.addEventListener("click", (e) => {
+        // Toggle active state; second tap removes it
+        card.classList.toggle("is-active");
+      });
+
+      // Optional: remove active when tapping outside the card
+      document.addEventListener("click", (evt) => {
+        if (!card.contains(evt.target)) {
+          card.classList.remove("is-active");
+        }
+      });
+    });
+  } catch (err) {
+    console.warn("Failed to init curated card tap behavior:", err);
+  }
+}
+
 // Mobile Menu Functionality
 function initMobileMenu() {
   const mobileMenuButton = document.getElementById("mobile-menu-button");

styles/main.css

@@ -1879,6 +1879,18 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2999,10 +3011,26 @@ video {
     height: 64px;
   }
 
+  .lg\:h-\[70vh\] {
+    height: 70vh;
+  }
+
+  .lg\:h-screen {
+    height: 100vh;
+  }
+
+  .lg\:max-h-screen {
+    max-height: 100vh;
+  }
+
   .lg\:min-h-\[64px\] {
     min-height: 64px;
   }
 
+  .lg\:min-h-screen {
+    min-height: 100vh;
+  }
+
   .lg\:w-36 {
     width: 9rem;
   }
@@ -3099,12 +3127,26 @@ video {
     gap: 1rem;
   }
 
+  .lg\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .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-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\:self-center {
+    align-self: center;
+  }
+
   .lg\:overflow-visible {
     overflow: visible;
   }
@@ -3114,6 +3156,11 @@ video {
     padding-right: 0px;
   }
 
+  .lg\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .lg\:pr-2 {
     padding-right: 0.5rem;
   }
@@ -3164,6 +3211,14 @@ video {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .lg\:leading-snug {
+    line-height: 1.375;
+  }
+
+  .lg\:leading-tight {
+    line-height: 1.25;
+  }
 }
 
 @media (min-width: 1280px) {