khy_website/product-detail.html
George Birikorang 195286e6c8
All checks were successful
continuous-integration/drone/push Build is passing
Update product data, fix icon paths, improve carousel, and increase product card heights
- Added products 50-88 to products.json with complete details
- Fixed icon paths after moving phone2.png and mail.png to icons folder
- Updated carousel to support 6 images with proper indicators
- Renamed first_homepage.jpg to index_hero.jpg and updated all references
- Increased product card heights from 29vh to 32vh for better visual presence
- Removed unused icon files (admin.png, calendar.png, search.png, tag.png)
- Added storage.jpg to our_story carousel images
2025-09-17 17:34:11 -07:00

653 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 Detail - 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;
}
}
</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">
<!-- Product Details Section -->
<section class="relative w-full bg-white py-6">
<div class="max-w-7xl mx-auto px-5">
<div class="flex items-center">
<h1
class="font-playfair font-normal text-base text-quick-silver"
id="product-details-title"
>
Product Details
</h1>
</div>
</div>
</section>
<!-- Main Product Section -->
<section class="relative w-full bg-white py-8">
<div class="max-w-7xl mx-auto px-5">
<div class="flex flex-col md:flex-row gap-8">
<!-- Left Section - Product Images -->
<div class="flex flex-col-reverse md:flex-row gap-4">
<!-- Thumbnails -->
<div
class="flex flex-row md:flex-col gap-3 md:gap-4 w-full md:w-32 overflow-x-auto md:overflow-visible"
>
<div
class="w-32 h-32 bg-floral-white rounded-lg overflow-hidden cursor-pointer"
>
<img
src="assets/images/outdoor_sofa_set.png"
alt="Outdoor sofa set"
class="w-full h-full object-cover"
/>
</div>
<div
class="w-32 h-32 bg-floral-white rounded-lg overflow-hidden cursor-pointer"
>
<img
src="assets/images/outdoor_sofa_set.png"
alt="Outdoor sofa set 2"
class="w-full h-full object-cover"
/>
</div>
<div
class="w-32 h-32 bg-floral-white rounded-lg overflow-hidden cursor-pointer"
>
<img
src="assets/images/outdoor_sofa_set.png"
alt="Stuart sofa"
class="w-full h-full object-cover"
/>
</div>
<div
class="w-32 h-32 bg-floral-white rounded-lg overflow-hidden cursor-pointer"
>
<img
src="assets/images/outdoor_sofa_set.png"
alt="Maya sofa three seater"
class="w-full h-full object-cover"
/>
</div>
</div>
<!-- Main Product Image -->
<div
class="w-full h-80 md:w-[500px] md:h-[500px] bg-floral-white rounded-lg overflow-hidden"
>
<img
src="assets/images/asgaard_sofa.png"
alt="Asgaard sofa"
class="w-full h-full object-cover"
/>
</div>
</div>
<!-- Right Section - Product Details -->
<div class="w-full md:w-[500px]">
<!-- Product Title -->
<h1 class="font-playfair font-normal text-4xl text-black mb-8">
Asgaard sofa
</h1>
<!-- Product Description -->
<p
class="font-playfair font-normal text-sm text-black mb-12 max-w-md"
>
Setting the bar as one of the loudest speakers in its class, the
Kilburn is a compact, stout-hearted hero with a well-balanced
audio which boasts a clear midrange and extended highs for a
sound.
</p>
<!-- Size Options -->
<div class="mb-8">
<h3
class="font-playfair font-normal text-sm text-quick-silver mb-4"
>
Size
</h3>
<div class="grid grid-cols-6 gap-2" id="size-buttons-container">
<button
class="w-8 h-8 bg-uc-gold text-white font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
L
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
XL
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
XS
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
S
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
M
</button>
<button
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
>
2XL
</button>
</div>
</div>
<!-- Color Options -->
<div class="mb-8">
<h3
class="font-playfair font-normal text-sm text-quick-silver mb-4"
>
Color
</h3>
<div class="flex gap-4">
<button
class="w-8 h-8 bg-purple-500 rounded-full border-2 border-black"
></button>
<button class="w-8 h-8 bg-black rounded-full"></button>
<button class="w-8 h-8 bg-uc-gold rounded-full"></button>
</div>
</div>
<!-- Quantity and Action Buttons -->
<div class="flex flex-col md:flex-row gap-4 md:gap-6 mb-8">
<!-- Quantity Selector -->
<div
class="inline-flex items-center justify-between w-[180px] h-[64px] min-h-[64px] bg-white border border-quick-silver rounded-[15px] px-4 box-border shadow-sm hover:shadow-md transition-all duration-200"
>
<button
id="qty-decr"
aria-label="Decrease quantity"
class="font-playfair font-light text-[20px] leading-none text-black w-8 h-8 flex items-center justify-center rounded-lg hover:bg-light-bg transition-colors cursor-pointer"
>
-
</button>
<span
id="qty-value"
class="font-playfair font-light text-[20px] leading-none text-black"
>1</span
>
<button
id="qty-incr"
aria-label="Increase quantity"
class="font-playfair font-light text-[20px] leading-none text-black w-8 h-8 flex items-center justify-center rounded-lg hover:bg-light-bg transition-colors cursor-pointer"
>
+
</button>
</div>
<!-- Action Buttons -->
<a
href="contact.html"
class="inline-flex items-center justify-center w-full md:w-[440px] 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-4"
>
Request a Quote
</a>
<button
id="compare-products-btn"
class="inline-flex items-center justify-center w-full md:w-[440px] 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"
>
Compare Products
</button>
</div>
<!-- Divider -->
<div class="w-full h-px bg-light-silver mb-8"></div>
<!-- Product Metadata -->
<div class="space-y-4">
<div class="flex items-center">
<span
class="font-playfair font-normal text-base text-quick-silver w-20"
>Model No.</span
>
<span
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-playfair font-normal text-base text-quick-silver"
>SS001</span
>
</div>
<div class="flex items-center">
<span
class="font-playfair font-normal text-base text-quick-silver w-20"
>Category</span
>
<span
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-playfair font-normal text-base text-quick-silver"
>Sofas</span
>
</div>
<div class="flex items-center">
<span
class="font-playfair font-normal text-base text-quick-silver w-20"
>Tags</span
>
<span
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-playfair font-normal text-base text-quick-silver"
>Sofa, Chair, Home, Shop</span
>
</div>
<div class="flex items-center">
<span
class="font-playfair font-normal text-base text-quick-silver w-20"
>Dimension</span
>
<span
class="font-playfair font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-playfair font-normal text-base text-quick-silver"
>180cm x 85cm x 75cm</span
>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product Detail Tabs Section -->
<section id="product-tabs" class="w-full bg-white">
<div class="border-t border-light-silver"></div>
<div class="max-w-7xl mx-auto px-5 py-10">
<!-- Tabs -->
<div class="flex justify-center gap-12 mb-8">
<button class="font-playfair text-2xl text-black">
Description
</button>
</div>
<!-- Copy -->
<div class="max-w-5xl mx-auto space-y-6">
<p
class="font-playfair text-base leading-6 text-[#333333] text-justify"
>
Embodying the raw, wayward spirit of rock n roll, the Kilburn
portable active stereo speaker takes the unmistakable look and
sound of Marshall, unplugs the chords, and takes the show on the
road.
</p>
<p
class="font-playfair text-base leading-6 text-[#333333] text-justify"
>
Weighing in under 7 pounds, the Kilburn is a lightweight piece of
vintage styled engineering. Setting the bar as one of the loudest
speakers in its class, the Kilburn is a compact, stout-hearted
hero with a well-balanced audio which boasts a clear midrange and
extended highs for a sound that is both articulate and pronounced.
The analogue knobs allow you to fine tune the controls to your
personal preferences while the guitar-influenced leather strap
enables easy and stylish travel.
</p>
</div>
<!-- Images -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-10">
<div class="rounded-[10px] bg-floral-white p-6">
<img
src="assets/images/asgaard_sofa.png"
alt="Sofa variant left"
class="w-full h-80 object-contain mx-auto"
/>
</div>
<div class="rounded-[10px] bg-floral-white p-6">
<img
src="assets/images/asgaard_sofa.png"
alt="Sofa variant right"
class="w-full h-80 object-contain mx-auto"
/>
</div>
</div>
</div>
</section>
<!-- full-width divider before related products -->
<div class="w-full border-t border-light-silver"></div>
<!-- Related Products Section -->
<section id="related-products" class="w-full bg-white py-14">
<div class="max-w-7xl mx-auto px-5">
<h2
class="font-playfair text-4xl font-medium text-center text-black mb-10"
>
Related Products
</h2>
<div
id="related-grid"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"
>
<!-- Related items will be injected here -->
</div>
<div class="mt-10 flex justify-center">
<button
id="related-show-more"
class="w-[245px] h-12 border border-uc-gold rounded-md bg-white font-playfair font-semibold text-base text-uc-gold hover:bg-uc-gold hover:text-white transition-colors"
>
Show More
</button>
</div>
</div>
</section>
<!-- full-width divider after related products -->
<div class="w-full border-t border-light-silver"></div>
</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.5"></script>
</body>
</html>