60 lines
No EOL
3.7 KiB
JavaScript
60 lines
No EOL
3.7 KiB
JavaScript
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);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}); |