support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-07-02 07:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: adjust layout and styling in index.html and main.css for improved responsiveness and visual consistency
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-09-16 23:06:02 -07:00
parent 60ffd31b68
commit 49a823959e
2 changed files with 234 additions and 988 deletions
Download patch file Download diff file Expand all files Collapse all files

152
index.html
View file

@ -479,13 +479,13 @@
<!-- Our Story Section --> <!-- Our Story Section -->
<section <section
id="about" id="about"
class="relative bg-white pt-0 pb-4 lg:min-h-screen lg:py-0" class="relative bg-white pt-20 pb-4 lg:min-h-[65vh] lg:py-0"
> >
<div class="max-w-7xl mx-auto px-5"> <div class="max-w-7xl mx-auto px-5">
<!-- Section Header --> <!-- Section Header -->
<div class="text-center mb-8"> <div class="text-center mb-8">
<h2 <h2
class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black mb-4" class="font-playfair font-bold text-2xl md:text-2xl lg:text-3xl leading-tight text-black mb-2"
> >
Our Story Our Story
</h2> </h2>
@ -498,7 +498,7 @@
<!-- Left Side - Image --> <!-- Left Side - Image -->
<div <div
id="hero-image" id="hero-image"
class="relative order-2 lg:order-1 h-96 lg:h-[70vh]" class="relative order-2 lg:order-1 h-80 lg:h-[65vh]"
> >
<img <img
src="assets/images/our_story.jpg" src="assets/images/our_story.jpg"
@ -556,10 +556,10 @@
<!-- Right Side - Text Content --> <!-- Right Side - Text Content -->
<div <div
class="space-y-16 lg:space-y-10 order-1 lg:order-2 lg:self-center" class="space-y-4 lg:space-y-4 order-1 lg:order-2 lg:self-center"
> >
<h3 <h3
class="font-playfair font-normal text-3xl md:text-4xl lg:text-5xl leading-tight lg:leading-tight text-black" class="font-playfair font-normal text-2xl md:text-3xl lg:text-4xl leading-tight lg:leading-tight text-black"
> >
Rooted in Ghana. <br /> Rooted in Ghana. <br />
Inspired by beauty. <br /> Inspired by beauty. <br />
@ -567,7 +567,7 @@
</h3> </h3>
<p <p
class="font-playfair font-thin text-xl md:text-2xl lg:text-2xl leading-relaxed lg:leading-snug text-black max-w-lg" class="font-playfair font-thin text-lg md:text-xl lg:text-xl leading-relaxed lg:leading-snug text-black max-w-lg"
> >
From our first collection to now, khy has remained dedicated to From our first collection to now, khy has remained dedicated to
artistry, quality, and Ghanaian-inspired sophistication. artistry, quality, and Ghanaian-inspired sophistication.
@ -578,15 +578,11 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</section>
<!-- End-to-End Solutions Section --> <!-- End-to-End Solutions Text -->
<section class="relative bg-white pt-4 pb-16"> <div class="text-center mt-6 lg:mt-8">
<div class="max-w-7xl mx-auto px-5">
<div class="text-center max-w-5xl mx-auto">
<p <p
class="font-playfair font-normal text-2xl md:text-3xl lg:text-3xl leading-tight tracking-wider text-axolotl" class="font-playfair font-normal text-lg md:text-xl lg:text-xl leading-tight tracking-wider text-axolotl max-w-5xl mx-auto"
> >
At Khy, we provide end-to-end solutions: interior design, bespoke At Khy, we provide end-to-end solutions: interior design, bespoke
manufacturing, furniture supply, professional installation, and manufacturing, furniture supply, professional installation, and
@ -600,14 +596,14 @@
<section id="products" class="relative bg-white pt-12 pb-20"> <section id="products" class="relative bg-white pt-12 pb-20">
<div class="max-w-7xl mx-auto px-5"> <div class="max-w-7xl mx-auto px-5">
<!-- Section Header --> <!-- Section Header -->
<div class="text-center mb-16"> <div class="text-center mb-4">
<h2 <h2
class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black mb-8" class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black mb-4"
> >
Our Products Our Products
</h2> </h2>
<p <p
class="font-playfair font-normal text-lg md:text-xl lg:text-xl leading-tight tracking-wider text-black" class="font-playfair font-normal text-lg md:text-xl lg:text-xl leading-tight tracking-wider text-black mb-8"
> >
Browse our collections - designed to optimize space while Browse our collections - designed to optimize space while
balancing quality, aesthetics, and value balancing quality, aesthetics, and value
@ -616,31 +612,28 @@
<!-- Product Grid --> <!-- Product Grid -->
<div <div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-7 mb-8"
> >
<!-- Product Card 1: Lounge Chairs --> <!-- Product Card 1: Lounge Chairs -->
<a href="product-catalog.html?category=seating" class="block"> <a href="product-catalog.html?category=seating" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/lounge_chair.jpg" src="assets/images/lounge_chair.jpg"
alt="Lounge Chairs" alt="Lounge Chairs"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Lounge Chairs Lounge Chairs
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Stylish cafe chair
</p>
</div> </div>
</div> </div>
</a> </a>
@ -648,26 +641,23 @@
<!-- Product Card 2: Office Chairs --> <!-- Product Card 2: Office Chairs -->
<a href="product-catalog.html?category=seating" class="block"> <a href="product-catalog.html?category=seating" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/office_chair.jpg" src="assets/images/office_chair.jpg"
alt="Office Chairs" alt="Office Chairs"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Office Chairs Office Chairs
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Luxury big sofa
</p>
</div> </div>
</div> </div>
</a> </a>
@ -675,26 +665,23 @@
<!-- Product Card 3: Conference Room --> <!-- Product Card 3: Conference Room -->
<a href="product-catalog.html?category=tables" class="block"> <a href="product-catalog.html?category=tables" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/conference_rooms.jpg" src="assets/images/conference_rooms.jpg"
alt="Conference Room" alt="Conference Room"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Conference Room Conference Room
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Tables
</p>
</div> </div>
</div> </div>
</a> </a>
@ -702,26 +689,23 @@
<!-- Product Card 4: Storage --> <!-- Product Card 4: Storage -->
<a href="product-catalog.html?category=storage" class="block"> <a href="product-catalog.html?category=storage" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/storage.jpg" src="assets/images/storage.jpg"
alt="Storage" alt="Storage"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Storage Storage
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Outdoor bar table and stool
</p>
</div> </div>
</div> </div>
</a> </a>
@ -729,26 +713,23 @@
<!-- Product Card 5: Kitchen --> <!-- Product Card 5: Kitchen -->
<a href="product-catalog.html?category=workspace" class="block"> <a href="product-catalog.html?category=workspace" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/kitchen.jpg" src="assets/images/kitchen.jpg"
alt="Kitchen" alt="Kitchen"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Kitchen Kitchen
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Night lamp
</p>
</div> </div>
</div> </div>
</a> </a>
@ -756,26 +737,23 @@
<!-- Product Card 6: Chairs --> <!-- Product Card 6: Chairs -->
<a href="product-catalog.html?category=seating" class="block"> <a href="product-catalog.html?category=seating" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/chairs.jpg" src="assets/images/chairs.jpg"
alt="Chairs" alt="Chairs"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Chairs Chairs
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Small mug
</p>
</div> </div>
</div> </div>
</a> </a>
@ -783,26 +761,23 @@
<!-- Product Card 7: Pods --> <!-- Product Card 7: Pods -->
<a href="product-catalog.html?category=seating" class="block"> <a href="product-catalog.html?category=seating" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/pods.jpg" src="assets/images/pods.jpg"
alt="Pods" alt="Pods"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Pods Pods
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Cute bed set
</p>
</div> </div>
</div> </div>
</a> </a>
@ -810,33 +785,30 @@
<!-- Product Card 8: Potty --> <!-- Product Card 8: Potty -->
<a href="product-catalog.html?category=workspace" class="block"> <a href="product-catalog.html?category=workspace" class="block">
<div <div
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]" class="product-card bg-light-bg rounded-lg overflow-hidden h-[29vh]"
> >
<div class="product-card-image h-[301px] bg-gray-200"> <div class="product-card-image h-[22vh] bg-gray-200">
<img <img
src="assets/images/potty.jpg" src="assets/images/potty.jpg"
alt="Potty" alt="Potty"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
</div> </div>
<div class="p-4 h-[145px] flex flex-col justify-center"> <div
class="p-4 h-[6vh] flex flex-col justify-center items-center"
>
<h3 <h3
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2" class="product-card-title font-poppins font-semibold text-xl text-gray-800 text-center"
> >
Potty Potty
</h3> </h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Minimalist flower pot
</p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<!-- Call to Action Button --> <!-- Call to Action Button -->
<div class="text-center"> <div class="text-center mt-2">
<a href="product-catalog.html"> <a href="product-catalog.html">
<button <button
class="bg-white border border-uc-gold text-uc-gold font-playfair font-semibold text-base px-8 py-3 rounded-lg hover:bg-uc-gold hover:text-white transition-all" class="bg-white border border-uc-gold text-uc-gold font-playfair font-semibold text-base px-8 py-3 rounded-lg hover:bg-uc-gold hover:text-white transition-all"

1070
styles/main.css
View file

File diff suppressed because it is too large Load diff