support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-07-02 06:13:30 +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 -->
<section
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">
<!-- Section Header -->
<div class="text-center mb-8">
<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
</h2>
@ -498,7 +498,7 @@
<!-- Left Side - Image -->
<div
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
src="assets/images/our_story.jpg"
@ -556,10 +556,10 @@
<!-- Right Side - Text Content -->
<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
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 />
Inspired by beauty. <br />
@ -567,7 +567,7 @@
</h3>
<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
artistry, quality, and Ghanaian-inspired sophistication.
@ -578,15 +578,11 @@
</p>
</div>
</div>
</div>
</section>
<!-- End-to-End Solutions Section -->
<section class="relative bg-white pt-4 pb-16">
<div class="max-w-7xl mx-auto px-5">
<div class="text-center max-w-5xl mx-auto">
<!-- End-to-End Solutions Text -->
<div class="text-center mt-6 lg:mt-8">
<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
manufacturing, furniture supply, professional installation, and
@ -600,14 +596,14 @@
<section id="products" class="relative bg-white pt-12 pb-20">
<div class="max-w-7xl mx-auto px-5">
<!-- Section Header -->
<div class="text-center mb-16">
<div class="text-center mb-4">
<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
</h2>
<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
balancing quality, aesthetics, and value
@ -616,31 +612,28 @@
<!-- Product Grid -->
<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 -->
<a href="product-catalog.html?category=seating" class="block">
<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
src="assets/images/lounge_chair.jpg"
alt="Lounge Chairs"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Stylish cafe chair
</p>
</div>
</div>
</a>
@ -648,26 +641,23 @@
<!-- Product Card 2: Office Chairs -->
<a href="product-catalog.html?category=seating" class="block">
<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
src="assets/images/office_chair.jpg"
alt="Office Chairs"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Luxury big sofa
</p>
</div>
</div>
</a>
@ -675,26 +665,23 @@
<!-- Product Card 3: Conference Room -->
<a href="product-catalog.html?category=tables" class="block">
<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
src="assets/images/conference_rooms.jpg"
alt="Conference Room"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Tables
</p>
</div>
</div>
</a>
@ -702,26 +689,23 @@
<!-- Product Card 4: Storage -->
<a href="product-catalog.html?category=storage" class="block">
<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
src="assets/images/storage.jpg"
alt="Storage"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Outdoor bar table and stool
</p>
</div>
</div>
</a>
@ -729,26 +713,23 @@
<!-- Product Card 5: Kitchen -->
<a href="product-catalog.html?category=workspace" class="block">
<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
src="assets/images/kitchen.jpg"
alt="Kitchen"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Night lamp
</p>
</div>
</div>
</a>
@ -756,26 +737,23 @@
<!-- Product Card 6: Chairs -->
<a href="product-catalog.html?category=seating" class="block">
<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
src="assets/images/chairs.jpg"
alt="Chairs"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Small mug
</p>
</div>
</div>
</a>
@ -783,26 +761,23 @@
<!-- Product Card 7: Pods -->
<a href="product-catalog.html?category=seating" class="block">
<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
src="assets/images/pods.jpg"
alt="Pods"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Cute bed set
</p>
</div>
</div>
</a>
@ -810,33 +785,30 @@
<!-- Product Card 8: Potty -->
<a href="product-catalog.html?category=workspace" class="block">
<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
src="assets/images/potty.jpg"
alt="Potty"
class="w-full h-full object-cover"
/>
</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
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
</h3>
<p
class="product-card-description font-poppins font-medium text-sm text-gray-500"
>
Minimalist flower pot
</p>
</div>
</div>
</a>
</div>
<!-- Call to Action Button -->
<div class="text-center">
<div class="text-center mt-2">
<a href="product-catalog.html">
<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"

1070
styles/main.css
View file

File diff suppressed because it is too large Load diff