khy_website/product-comparison.html
George Birikorang 0a4494bc44 feat: add "Request a Quote" section to product comparison page and enhance CSS styles
- Introduced a new section for "Request a Quote" in product-comparison.html, positioned after the warranty details for better visibility.
- Updated main.css with new utility classes for widths and padding to support the new layout and improve overall styling consistency.
2025-09-18 03:54:59 -07:00

681 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<!-- Centered Request a Quote (after Warranty, before Features) -->
<section class="bg-white pt-16 pb-2">
<div class="max-w-7xl mx-auto px-5">
<div class="mx-auto w-1/3 h-px bg-light-silver mb-6"></div>
<div class="flex justify-center">
<a
href="contact.html"
class="inline-flex items-center justify-center w-full md:w-auto px-8 h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-black hover:text-white hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap mb-2"
>
Request a Quote
</a>
</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"
>
MonFri: 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>