From 71e2a8489e669f324851b8b57f210c6aa4fde455 Mon Sep 17 00:00:00 2001
From: George Birikorang <george.fleef@gmail.com>
Date: Mon, 15 Sep 2025 03:06:44 -0700
Subject: [PATCH] feat: wrap logo images in anchor tags for improved navigation
 and add hover effects across multiple pages

---
 contact.html            | 29 +++++++++++++++++++----------
 index.html              | 12 +++++++-----
 product-catalog.html    | 29 +++++++++++++++++++----------
 product-comparison.html | 12 +++++++-----
 product-detail.html     | 12 +++++++-----
 styles/main.css         |  4 ++++
 6 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/contact.html b/contact.html
index 84cc6a4..101bbd8 100644
--- a/contact.html
+++ b/contact.html
@@ -47,11 +47,13 @@
         >
           <!-- Logo Section -->
           <div class="flex items-center">
-            <img
-              src="assets/images/khy_logo.png"
-              alt="KHY Logo"
-              class="h-12 sm:h-20 w-auto drop-shadow-sm"
-            />
+            <a href="index.html" class="cursor-pointer">
+              <img
+                src="assets/images/khy_logo.png"
+                alt="KHY Logo"
+                class="h-12 sm:h-20 w-auto drop-shadow-sm hover:opacity-80 transition-opacity"
+              />
+            </a>
           </div>
 
           <!-- Desktop Navigation -->
@@ -616,11 +618,18 @@
           <div class="space-y-2">
             <!-- Logo -->
             <div class="w-16 h-20">
-              <img
-                src="assets/images/khy_logo.png"
-                alt="khy"
-                class="w-full h-full object-contain"
-              />
+              <a
+                href="index.html"
+                aria-label="Go to KHY home"
+                title="KHY Home"
+                class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
+              >
+                <img
+                  src="assets/images/khy_logo.png"
+                  alt="khy"
+                  class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
+                />
+              </a>
             </div>
 
             <!-- Address -->
diff --git a/index.html b/index.html
index 4678cb8..6504d23 100644
--- a/index.html
+++ b/index.html
@@ -184,11 +184,13 @@
         >
           <!-- Logo Section -->
           <div class="flex items-center">
-            <img
-              src="assets/images/khy_logo.png"
-              alt="KHY Logo"
-              class="h-12 sm:h-20 w-auto drop-shadow-sm"
-            />
+            <a href="index.html" class="cursor-pointer">
+              <img
+                src="assets/images/khy_logo.png"
+                alt="KHY Logo"
+                class="h-12 sm:h-20 w-auto drop-shadow-sm hover:opacity-80 transition-opacity"
+              />
+            </a>
           </div>
 
           <!-- Desktop Navigation -->
diff --git a/product-catalog.html b/product-catalog.html
index 99de2e0..f948275 100644
--- a/product-catalog.html
+++ b/product-catalog.html
@@ -30,12 +30,14 @@
         >
           <!-- Logo Section -->
           <div class="flex items-center">
-            <img
-              src="assets/images/khy_logo.png"
-              alt="KHY Logo"
-              class="h-12 sm:h-20 w-auto drop-shadow-sm"
+            <a href="index.html" class="cursor-pointer">
+              <img
+                src="assets/images/khy_logo.png"
+                alt="KHY Logo"
+                class="h-12 sm:h-20 w-auto drop-shadow-sm hover:opacity-80 transition-opacity"
               />
-            </div>
+            </a>
+          </div>
 
           <!-- Desktop Navigation -->
           <ul class="hidden sm:flex space-x-10">
@@ -357,11 +359,18 @@
           <div class="space-y-2">
             <!-- Logo -->
             <div class="w-16 h-20">
-              <img
-                src="assets/images/khy_logo.png"
-                alt="khy"
-                class="w-full h-full object-contain"
-              />
+              <a
+                href="index.html"
+                aria-label="Go to KHY home"
+                title="KHY Home"
+                class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
+              >
+                <img
+                  src="assets/images/khy_logo.png"
+                  alt="khy"
+                  class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
+                />
+              </a>
             </div>
 
             <!-- Address -->
diff --git a/product-comparison.html b/product-comparison.html
index 60dd742..8756ff3 100644
--- a/product-comparison.html
+++ b/product-comparison.html
@@ -39,11 +39,13 @@
         >
           <!-- Logo Section -->
           <div class="flex items-center">
-            <img
-              src="assets/images/khy_logo.png"
-              alt="KHY Logo"
-              class="h-12 sm:h-20 w-auto drop-shadow-sm"
-            />
+            <a href="index.html" class="cursor-pointer">
+              <img
+                src="assets/images/khy_logo.png"
+                alt="KHY Logo"
+                class="h-12 sm:h-20 w-auto drop-shadow-sm hover:opacity-80 transition-opacity"
+              />
+            </a>
           </div>
 
           <!-- Desktop Navigation -->
diff --git a/product-detail.html b/product-detail.html
index ba61271..dd15eae 100644
--- a/product-detail.html
+++ b/product-detail.html
@@ -32,11 +32,13 @@
         >
           <!-- Logo Section -->
           <div class="flex items-center">
-            <img
-              src="assets/images/khy_logo.png"
-              alt="KHY Logo"
-              class="h-12 sm:h-20 w-auto drop-shadow-sm"
-            />
+            <a href="index.html" class="cursor-pointer">
+              <img
+                src="assets/images/khy_logo.png"
+                alt="KHY Logo"
+                class="h-12 sm:h-20 w-auto drop-shadow-sm hover:opacity-80 transition-opacity"
+              />
+            </a>
           </div>
 
           <!-- Desktop Navigation -->
diff --git a/styles/main.css b/styles/main.css
index 8e8e588..d1151f9 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -2394,6 +2394,10 @@ video {
           text-decoration-line: underline;
 }
 
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
+
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);