feat: added more sections for homepage
This commit is contained in:
parent
da0e2bc733
commit
a0738b7f9b
6 changed files with 511 additions and 1 deletions
BIN
assets/images/conference_room.jpg
Normal file
BIN
assets/images/conference_room.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
BIN
assets/images/google_accra.jpg
Normal file
BIN
assets/images/google_accra.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
assets/images/our_story.jpg
Normal file
BIN
assets/images/our_story.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
BIN
assets/images/workstation.jpg
Normal file
BIN
assets/images/workstation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
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 -->
|
||||
|
|
|
|||
329
styles/main.css
329
styles/main.css
|
|
@ -582,6 +582,14 @@ video {
|
|||
top: 20rem;
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.top-1\/2 {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -599,6 +607,22 @@ video {
|
|||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.mb-16 {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -607,6 +631,10 @@ video {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
|
@ -623,6 +651,22 @@ video {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -631,6 +675,14 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.max-w-6xl {
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
|
@ -639,15 +691,44 @@ video {
|
|||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.max-w-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.max-w-5xl {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
@ -664,16 +745,80 @@ video {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-8 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-12 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-16 {
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.gap-24 {
|
||||
gap: 6rem;
|
||||
}
|
||||
|
||||
.gap-28 {
|
||||
gap: 7rem;
|
||||
}
|
||||
|
||||
.space-x-10 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(3rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(4rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
|
|
@ -694,6 +839,16 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-blue-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-opacity-70 {
|
||||
--tw-bg-opacity: 0.7;
|
||||
}
|
||||
|
|
@ -728,10 +883,77 @@ video {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-20 {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-16 {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.px-24 {
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pt-32 {
|
||||
padding-top: 8rem;
|
||||
}
|
||||
|
||||
.pb-20 {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.pt-16 {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.pt-12 {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pb-12 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pb-16 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pt-24 {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -754,6 +976,16 @@ video {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.font-extralight {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
|
@ -766,10 +998,34 @@ video {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -794,6 +1050,15 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-axolotl {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(111 119 107 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-opacity-90 {
|
||||
--tw-text-opacity: 0.9;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
|
|
@ -811,6 +1076,16 @@ video {
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-80:hover {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
||||
.hover\:text-gray-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -821,6 +1096,14 @@ video {
|
|||
top: 24rem;
|
||||
}
|
||||
|
||||
.md\:h-\[484px\] {
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:pr-0 {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
|
@ -838,6 +1121,21 @@ video {
|
|||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.md\:text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.md\:text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
|
|
@ -845,6 +1143,22 @@ video {
|
|||
top: 29rem;
|
||||
}
|
||||
|
||||
.lg\:col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.lg\:col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
|
@ -862,4 +1176,19 @@ video {
|
|||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lg\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.lg\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.lg\:text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue