mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 07:03:33 +00:00
George Birikorang
4d901448eb
All checks were successful
continuous-integration/drone/push Build is passing
- Renamed sections in product-comparison.html for better alignment with product details, changing "Sales Package" to "Materials", "Model Number" to "Design", and "Secondary Material" to "Use Cases". - Removed redundant product and dimensions sections from the HTML as per request to streamline the comparison layout. - Updated main.js to reflect changes in the HTML, limiting the sections updated in the comparison table to "general" and "warranty" only, and adjusted data retrieval to match new section names.
666 lines
23 KiB
HTML
666 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Product Comparison - KHY</title>
|
||
<link rel="stylesheet" href="styles/main.css" />
|
||
<style>
|
||
/* Force responsive behavior */
|
||
@media (min-width: 640px) {
|
||
.sm\:hidden {
|
||
display: none !important;
|
||
}
|
||
.sm\:flex {
|
||
display: flex !important;
|
||
}
|
||
}
|
||
/* Prevent horizontal scroll on mobile */
|
||
@media (max-width: 639px) {
|
||
html,
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
}
|
||
</style>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
</head>
|
||
<body class="bg-white font-sans text-gray-800">
|
||
<!-- Header -->
|
||
<header
|
||
class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
|
||
>
|
||
<nav class="h-full">
|
||
<div
|
||
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
|
||
>
|
||
<!-- Logo Section -->
|
||
<div class="flex items-center">
|
||
<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 -->
|
||
<ul class="hidden sm:flex space-x-10">
|
||
<li>
|
||
<a
|
||
href="index.html"
|
||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||
>Home</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="index.html#products"
|
||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||
>Products</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="index.html#about"
|
||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||
>About</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||
>Contact</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Mobile Hamburger -->
|
||
<div class="sm:hidden flex items-center">
|
||
<!-- Hamburger Button -->
|
||
<button
|
||
id="mobile-menu-button"
|
||
class="text-black hover:text-gray-600 transition-colors"
|
||
aria-label="Open mobile menu"
|
||
>
|
||
<svg
|
||
class="w-7 h-7"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M4 6h16M4 12h16M4 18h16"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Mobile Menu Overlay -->
|
||
<div
|
||
id="mobile-menu-overlay"
|
||
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
|
||
></div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div
|
||
id="mobile-menu"
|
||
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
|
||
>
|
||
<!-- Mobile Menu Header -->
|
||
<div class="flex items-center justify-end p-5 border-b border-gray-200">
|
||
<button
|
||
id="mobile-menu-close"
|
||
class="p-2 text-black hover:text-gray-600 transition-colors"
|
||
aria-label="Close mobile menu"
|
||
>
|
||
<svg
|
||
class="w-6 h-6"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M6 18L18 6M6 6l12 12"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Mobile Menu Items -->
|
||
<nav class="p-5">
|
||
<ul class="flex flex-col space-y-4">
|
||
<li>
|
||
<a
|
||
href="index.html"
|
||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||
>Home</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="index.html#products"
|
||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||
>Products</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="index.html#about"
|
||
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||
>About</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
|
||
>Contact</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<main class="pt-20 sm:pt-28">
|
||
<!-- Hero Section -->
|
||
<section class="relative h-80">
|
||
<!-- Background Image -->
|
||
<div class="absolute inset-0 w-full h-full">
|
||
<img
|
||
src="assets/images/prod-comparison.jpg"
|
||
alt="Product comparison background"
|
||
class="w-full h-full object-cover object-center"
|
||
style="filter: blur(3px)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- White Overlay -->
|
||
<div class="absolute inset-0 bg-white bg-opacity-60"></div>
|
||
|
||
<!-- Overlay Content -->
|
||
<div
|
||
class="absolute z-10 inset-0 flex items-center justify-center text-center text-black"
|
||
>
|
||
<h1
|
||
class="font-playfair font-medium text-3xl md:text-4xl lg:text-5xl leading-tight"
|
||
>
|
||
Product Comparison
|
||
</h1>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Product Selection Section -->
|
||
<section class="bg-white py-12">
|
||
<div class="max-w-7xl mx-auto px-5">
|
||
<div
|
||
class="flex flex-col md:flex-row md:items-center justify-between gap-8"
|
||
>
|
||
<!-- Column 1: Navigation Prompt -->
|
||
<div class="flex-1 text-center order-1 md:order-1 w-full">
|
||
<h3 class="font-playfair font-semibold text-2xl text-black mb-4">
|
||
Go to Product page for more Products
|
||
</h3>
|
||
<a
|
||
href="product-catalog.html?returnTo=comparison&slot=2"
|
||
class="font-playfair font-medium text-lg text-gray-600 underline hover:text-gray-800 transition-colors"
|
||
>
|
||
View More
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Products Row: side-by-side on mobile, unchanged on desktop -->
|
||
<div
|
||
class="order-3 md:order-2 w-full flex gap-4 justify-center md:gap-8 md:justify-between md:contents"
|
||
>
|
||
<!-- Column 2: Product 1 Card -->
|
||
<div
|
||
class="text-center w-1/2 md:w-auto md:order-2 product-card-1"
|
||
>
|
||
<div
|
||
class="bg-linen rounded-lg mb-3 w-40 h-40 md:w-80 md:h-80 flex items-center justify-center mx-auto"
|
||
>
|
||
<div
|
||
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
|
||
>
|
||
Select Product
|
||
</div>
|
||
</div>
|
||
<p class="font-playfair font-medium text-2xl text-black">
|
||
Select Product
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Column 3: Product 2 Card -->
|
||
<div
|
||
class="text-center w-1/2 md:w-auto md:order-3 product-card-2"
|
||
>
|
||
<div
|
||
class="bg-linen rounded-lg mb-3 w-40 h-40 md:w-80 md:h-80 flex items-center justify-center mx-auto"
|
||
>
|
||
<div
|
||
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
|
||
>
|
||
Select Product
|
||
</div>
|
||
</div>
|
||
<p class="font-playfair font-medium text-2xl text-black">
|
||
Select Product
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Column 4: Add Product Dropdown -->
|
||
<div class="flex-1 text-center order-2 md:order-4 w-full">
|
||
<h3 class="font-playfair font-semibold text-2xl text-black mb-4">
|
||
Add A Product
|
||
</h3>
|
||
<div class="relative w-full max-w-xs mx-auto">
|
||
<select
|
||
id="product-dropdown"
|
||
class="w-full px-4 py-3 bg-uc-gold text-white font-playfair font-semibold text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent border border-uc-gold appearance-none pr-10"
|
||
>
|
||
<option value="">Choose a Product</option>
|
||
</select>
|
||
<div
|
||
class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
|
||
>
|
||
<svg
|
||
class="w-5 h-5 text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M19 9l-7 7-7-7"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Comparison Table Section -->
|
||
<section class="bg-white border-t border-gray-200 comparison-table">
|
||
<div class="max-w-7xl mx-auto px-5">
|
||
<!-- General Section Header -->
|
||
<div class="py-6 border-b border-gray-100 general-section">
|
||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||
General
|
||
</h4>
|
||
</div>
|
||
|
||
<!-- General Section Table -->
|
||
<div class="space-y-4 py-4">
|
||
<!-- Materials Row -->
|
||
<div class="flex items-center">
|
||
<div
|
||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||
>
|
||
Materials
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||
>
|
||
Select a product
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||
>
|
||
Select a product
|
||
</div>
|
||
<div class="flex-1 border-l border-gray-200"></div>
|
||
</div>
|
||
|
||
<!-- Design Row -->
|
||
<div class="flex items-center">
|
||
<div
|
||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||
>
|
||
Design
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||
>
|
||
-
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||
>
|
||
-
|
||
</div>
|
||
<div class="flex-1 border-l border-gray-200"></div>
|
||
</div>
|
||
|
||
<!-- Use Cases Row -->
|
||
<div class="flex items-center">
|
||
<div
|
||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||
>
|
||
Use Cases
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||
>
|
||
-
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||
>
|
||
-
|
||
</div>
|
||
<div class="flex-1 border-l border-gray-200"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product section removed per request -->
|
||
|
||
<!-- Dimensions section removed per request -->
|
||
|
||
<!-- Warranty Section Header -->
|
||
<div class="py-6 border-b border-gray-100 warranty-section">
|
||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||
Warranty
|
||
</h4>
|
||
</div>
|
||
|
||
<!-- Warranty Section Table -->
|
||
<div class="space-y-4 py-4">
|
||
<!-- Warranty Summary Row -->
|
||
<div class="flex items-center">
|
||
<div
|
||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||
>
|
||
Warranty Summary
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||
>
|
||
-
|
||
</div>
|
||
<div
|
||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||
>
|
||
-
|
||
</div>
|
||
<div class="flex-1 border-l border-gray-200"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Action Buttons Section -->
|
||
<div class="max-w-7xl mx-auto px-5">
|
||
<div class="flex items-stretch py-8 ml-8">
|
||
<!-- Column 1: Empty space -->
|
||
<div class="flex-1"></div>
|
||
|
||
<!-- Column 2: Empty for spacing -->
|
||
<div class="flex-1 px-6 border-l border-gray-200">
|
||
<div class="text-center">
|
||
<!-- Reserved for future functionality -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Column 3: Empty for spacing -->
|
||
<div class="flex-1 px-6 border-l border-gray-200 ml-8">
|
||
<div class="text-center">
|
||
<!-- Reserved for future functionality -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Column 4: Empty space to align with dropdown -->
|
||
<div class="flex-1 px-6 border-l border-gray-200">
|
||
<!-- Empty space to maintain alignment -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features Section -->
|
||
<section class="relative bg-floral-white py-16">
|
||
<div class="max-w-7xl mx-auto px-5">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<!-- High Quality -->
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12">
|
||
<img
|
||
src="assets/icons/trophy.png"
|
||
alt="Trophy"
|
||
class="w-full h-full object-contain"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h3
|
||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||
>
|
||
High Quality
|
||
</h3>
|
||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||
crafted from top materials
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Warranty Protection -->
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12">
|
||
<img
|
||
src="assets/icons/warranty.png"
|
||
alt="Guarantee"
|
||
class="w-full h-full object-contain"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h3
|
||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||
>
|
||
Warranty Protection
|
||
</h3>
|
||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||
Over 2 years
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Free Shipping -->
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12">
|
||
<img
|
||
src="assets/icons/shipping.png"
|
||
alt="Shipping"
|
||
class="w-full h-full object-contain"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h3
|
||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||
>
|
||
Free Shipping
|
||
</h3>
|
||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||
Order over 150 $
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 24/7 Support -->
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-12 h-12">
|
||
<img
|
||
src="assets/icons/support.png"
|
||
alt="Support"
|
||
class="w-full h-full object-contain"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h3
|
||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||
>
|
||
24 / 7 Support
|
||
</h3>
|
||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||
Dedicated support
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Main content will go here -->
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-white border-t border-black border-opacity-20">
|
||
<!-- Main Footer Content -->
|
||
<div class="max-w-7xl mx-auto px-5 py-16">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- Company Information -->
|
||
<div class="space-y-1">
|
||
<!-- Logo -->
|
||
<div class="w-16 h-20 -mt-6">
|
||
<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 logo"
|
||
loading="lazy"
|
||
class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
|
||
/>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Address -->
|
||
<p
|
||
class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
|
||
>
|
||
5 Labone Crescent, Greater Accra, Ghana
|
||
</p>
|
||
|
||
<!-- Contact Info -->
|
||
<div class="space-y-1 -mt-2">
|
||
<!-- Phone -->
|
||
<div class="flex items-center space-x-3 -mt-1">
|
||
<img
|
||
src="assets/icons/phone2.png"
|
||
alt="Phone"
|
||
class="w-4 h-4"
|
||
/>
|
||
<span class="font-playfair font-normal text-base text-gray-800">
|
||
+233 (555) 76677
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Email -->
|
||
<div class="flex items-center space-x-3 -mt-1">
|
||
<img src="assets/icons/mail.png" alt="Email" class="w-4 h-4" />
|
||
<span class="font-playfair font-normal text-base text-gray-800">
|
||
design@khyltd.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links -->
|
||
<div class="space-y-4 md:ml-6 lg:ml-8">
|
||
<h3
|
||
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
|
||
>
|
||
Quick Links
|
||
</h3>
|
||
<div class="space-y-4">
|
||
<a
|
||
href="index.html"
|
||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
|
||
>
|
||
Home
|
||
</a>
|
||
<a
|
||
href="product-catalog.html"
|
||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
|
||
>
|
||
Products
|
||
</a>
|
||
<a
|
||
href="#about"
|
||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
|
||
>
|
||
About
|
||
</a>
|
||
<a
|
||
href="contact.html"
|
||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
|
||
>
|
||
Contact Us
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Company / Hours / Social -->
|
||
<div class="space-y-4">
|
||
<h3
|
||
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
|
||
>
|
||
Company
|
||
</h3>
|
||
<div class="space-y-4">
|
||
<p
|
||
class="font-playfair font-normal text-base leading-relaxed text-gray-900"
|
||
>
|
||
Mon–Fri: 9AM – 5PM · Accra, Ghana
|
||
</p>
|
||
<div class="flex items-center space-x-6">
|
||
<a
|
||
href="#"
|
||
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
|
||
>Instagram</a
|
||
>
|
||
<a
|
||
href="#"
|
||
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
|
||
>LinkedIn</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Copyright Section -->
|
||
<div class="border-t border-light-silver">
|
||
<div class="max-w-7xl mx-auto px-5 py-4">
|
||
<p
|
||
class="font-playfair font-normal text-xs leading-relaxed text-davys-grey"
|
||
>
|
||
© 2025 khy. All rights reserved.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="scripts/main.js?v=3.0"></script>
|
||
</body>
|
||
</html>
|