georgebiri/khy_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add product catalog and product detail pages

Browse source
This commit is contained in:
George Birikorang 2025-08-22 07:40:59 -04:00
parent 9a3a106fca
commit 0d5fd84762
13 changed files with 4256 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

592
product-detail.html Normal file
View file

@ -0,0 +1,592 @@
<!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" />
<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="absolute w-full 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">
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm"
/>
</div>
<!-- Navigation -->
<ul class="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#projects-button"
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Clients</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>
<li>
<a
href="blog.html"
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Quote</a
>
</li>
</ul>
</div>
</nav>
</header>
<main class="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">
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 gap-8">
<!-- Left Section - Product Images -->
<div class="flex gap-4">
<!-- Thumbnails -->
<div class="flex flex-col gap-4 w-32">
<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-[500px] 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-[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-poppins 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-poppins 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-poppins 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-poppins 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-poppins 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-poppins 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 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 -->
<button
class="inline-flex items-center justify-center w-[380px] 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-uc-gold hover:text-white hover:border-uc-gold hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap"
>
Add To Quote
</button>
<button
class="inline-flex items-center justify-center 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-poppins font-normal text-base text-quick-silver w-20"
>Model No.</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
>SS001</span
>
</div>
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
>Category</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
>Sofas</span
>
</div>
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
>Tags</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins font-normal text-base text-quick-silver"
>Sofa, Chair, Home, Shop</span
>
</div>
<div class="flex items-center">
<span
class="font-poppins font-normal text-base text-quick-silver w-20"
>Dimension</span
>
<span
class="font-poppins font-medium text-base text-quick-silver mx-2"
>:</span
>
<span
class="font-poppins 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>
<button class="font-playfair text-2xl text-quick-silver">
Additional Information
</button>
<button class="font-playfair text-2xl text-quick-silver">
Reviews [5]
</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-8">
<!-- 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/images/phone.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/images/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-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Newsletter
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
>
Subscribe
</button>
</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"></script>
</body>
</html>