mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-10-16 19:51:49 +00:00
feat: added more sections for homepage
This commit is contained in:
parent
da0e2bc733
commit
a0738b7f9b
6 changed files with 511 additions and 1 deletions
183
index.html
183
index.html
|
|
@ -10,7 +10,7 @@
|
|||
/>
|
||||
<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@200;300;400;500;600;700&display=swap"
|
||||
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&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
|
@ -131,6 +131,187 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section class="relative bg-white py-20">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="text-center max-w-6xl mx-auto">
|
||||
<p
|
||||
class="font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider text-black text-opacity-90"
|
||||
>
|
||||
At Khy, we design and furnish office environments where people
|
||||
thrive. From enterprise headquarters to coworking spaces, we
|
||||
create workspaces that balance function, comfort, and design
|
||||
excellence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Curated by Space Section -->
|
||||
<section class="relative bg-white pt-4 pb-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h2
|
||||
class="font-playfair font-bold text-2xl md:text-2xl lg:text-3xl leading-tight mb-8 text-black"
|
||||
>
|
||||
Curated by Space
|
||||
</h2>
|
||||
<p
|
||||
class="font-playfair font-normal text-md md:text-lg lg:text-xl leading-tight text-black"
|
||||
>
|
||||
Explore our collection of timeless, curated designs by room
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Image Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Lounge Areas Card -->
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
>
|
||||
<img
|
||||
src="assets/images/google_accra.jpg"
|
||||
alt="Lounge Areas"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
|
||||
>
|
||||
Lounge Areas
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Workstations Card -->
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
>
|
||||
<img
|
||||
src="assets/images/workstation.jpg"
|
||||
alt="Workstations"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
|
||||
>
|
||||
Workstations
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Conference Rooms Card -->
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
>
|
||||
<img
|
||||
src="assets/images/conference_room.jpg"
|
||||
alt="Conference Rooms"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
|
||||
>
|
||||
Conference Rooms
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Our Story Section -->
|
||||
<section class="relative bg-white pt-8 pb-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-16">
|
||||
<h2
|
||||
class="font-playfair font-bold text-xl md:text-2xl lg:text-3xl leading-tight text-black"
|
||||
>
|
||||
Our Story
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-28 items-center">
|
||||
<!-- Left Side - Image -->
|
||||
<div class="relative">
|
||||
<img
|
||||
src="assets/images/our_story.jpg"
|
||||
alt="Modern office interior"
|
||||
class="w-full h-auto rounded-lg"
|
||||
/>
|
||||
<!-- Navigation Arrow -->
|
||||
<div class="absolute top-1/2 right-4 transform -translate-y-1/2">
|
||||
<div
|
||||
class="bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="#B88E2F"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side - Text Content -->
|
||||
<div class="space-y-16">
|
||||
<h3
|
||||
class="font-playfair font-normal text-3xl md:text-4xl lg:text-5xl leading-loose text-black"
|
||||
>
|
||||
Rooted in Ghana. <br />
|
||||
Inspired by beauty. <br />
|
||||
Timeless by design.
|
||||
</h3>
|
||||
|
||||
<p
|
||||
class="font-playfair font-thin text-xl md:text-2xl lg:text-3xl leading-relaxed text-black max-w-lg"
|
||||
>
|
||||
From our first collection to now, khy has remained dedicated to
|
||||
artistry, quality, and Ghanaian-inspired sophistication.
|
||||
<br />
|
||||
<br />
|
||||
Khy brings timeless, curated furniture and decor to offices that
|
||||
tell a story.
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm"
|
||||
>
|
||||
Explore past projects
|
||||
</button>
|
||||
</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">
|
||||
<p
|
||||
class="font-playfair font-normal text-2xl md:text-3xl lg:text-3xl leading-tight tracking-wider text-axolotl"
|
||||
>
|
||||
At Khy, we provide end-to-end solutions: interior design, bespoke
|
||||
manufacturing, furniture supply, professional installation, and
|
||||
dedicated after-sales care — all under one roof.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue