ui enhancements

src/js/about.js

@@ -0,0 +1,60 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    // --- Interactive Values Section Logic ---
+    const valuesData = [
+        { title: "Beauty", description: "We treat all stake holders with politeness, dignity and civility that equals the outward beauty of our environment and the environments we create." },
+        { title: "Innovation", description: "We challenge the status quo. We seek better, smarter and more beautiful ways to solve problems and deliver value. When ideas fall short, we learn, adapt and try again- never settling, always solving." },
+        { title: "Loyalty", description: "We are faithful to our mission and vision and that of our stakeholders and the organizations they represent." },
+        { title: "Diligence", description: "We give our utmost attention to all our projects. We do this in earnest and with precision." },
+        { title: "Excellence", description: "We are committed to delivering exceptional results in every area of our operations." },
+        { title: "Resilience", description: "In the face of daunting challenges, setbacks and failures; we learn and document lessons, bounce back and persist in the pursuit of goals, targets, objectives and deadlines. We do this with focused optimism." },
+        { title: "Studiousness", description: "We are committed to learning and advancing our services, products, and tools to best serve our stakeholders." }
+    ];
+
+    const valuesListContainer = document.getElementById('values-list');
+    const valuesContentContainer = document.getElementById('values-content');
+    const valuesSection = document.getElementById('values-section');
+
+    if (valuesListContainer && valuesContentContainer && valuesSection) {
+        
+        // Populate the list and content blocks
+        valuesListContainer.innerHTML = valuesData.map((value, index) => `
+            <li class="value-item ${index === 0 ? 'active' : ''}" data-index="${index}">
+                ${value.title}
+            </li>
+        `).join('');
+
+        valuesContentContainer.innerHTML = valuesData.map((value, index) => `
+            <div class="value-content-block ${index === 0 ? 'active' : ''}" data-index="${index}">
+                <!-- Background Number -->
+                <div class="absolute -top-4 -left-4 text-8xl md:text-9xl font-extrabold text-neutral-100 -z-10">0${index + 1}</div>
+                <!-- Title for mobile view -->
+                <h3 class="text-3xl font-bold text-kh3-red mb-4 md:hidden">${value.title}</h3>
+                <!-- Description -->
+                <p class="text-lg md:text-xl text-neutral-600 leading-relaxed">${value.description}</p>
+            </div>
+        `).join('');
+
+        const valueItems = valuesListContainer.querySelectorAll('.value-item');
+        const contentBlocks = valuesContentContainer.querySelectorAll('.value-content-block');
+
+        // Function to update the active state
+        const updateActiveValue = (index) => {
+            valueItems.forEach(item => item.classList.remove('active'));
+            contentBlocks.forEach(block => block.classList.remove('active'));
+
+            valuesListContainer.querySelector(`.value-item[data-index='${index}']`).classList.add('active');
+            valuesContentContainer.querySelector(`.value-content-block[data-index='${index}']`).classList.add('active');
+        };
+
+        // Add hover event listeners for desktop
+        valueItems.forEach((item, index) => {
+            item.addEventListener('mouseenter', () => {
+                // Only trigger on hover if not a touch device (basic check)
+                if (window.matchMedia('(hover: hover)').matches) {
+                    updateActiveValue(index);
+                }
+            });
+        });
+    }
+});