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

feat: enhance curated card interactions with tap-to-toggle functionality for mobile and improved hover effects for desktop

Browse source
This commit is contained in:
George Birikorang 2025-09-16 01:03:42 -07:00
parent 4baf19983a
commit 60ffd31b68
3 changed files with 140 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

66
index.html
View file

@ -18,13 +18,20 @@
display: inline-block;
}
/* Enhanced hover effects for curated cards */
/* Enhanced hover effects for curated cards (desktop/hoverable only) */
.curated-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.curated-card:hover .curated-card-image {
transform: scale(1.08) translateY(-12px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
}
.curated-card:hover .curated-card-image {
/* Tap-to-toggle active state for mobile (mirrors hover styles) */
.curated-card.is-active .curated-card-image {
transform: scale(1.08) translateY(-12px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@ -32,21 +39,38 @@
.curated-card-image {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
height: 24rem; /* h-96 */
}
@media (min-width: 768px) {
.curated-card-image {
height: 484px; /* md:h-[484px] for consistent desktop sizing */
}
}
.curated-card img {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
.curated-card:hover img {
transform: scale(1.15);
}
}
.curated-card:hover img {
.curated-card.is-active img {
transform: scale(1.15);
}
.curated-card-title {
transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.curated-card:hover .curated-card-title {
color: #b8873f;
}
}
.curated-card:hover .curated-card-title {
.curated-card.is-active .curated-card-title {
color: #b8873f;
}
@ -398,7 +422,7 @@
<!-- Lounge Areas Card -->
<div class="text-center cursor-pointer curated-card">
<div
class="curated-card-image bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
class="curated-card-image bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm mx-auto"
>
<img
src="assets/images/google_accra.jpg"
@ -416,7 +440,7 @@
<!-- Workstations Card -->
<div class="text-center cursor-pointer curated-card">
<div
class="curated-card-image bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
class="curated-card-image bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm mx-auto"
>
<img
src="assets/images/workstation.jpg"
@ -434,7 +458,7 @@
<!-- Conference Rooms Card -->
<div class="text-center cursor-pointer curated-card">
<div
class="curated-card-image bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
class="curated-card-image bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm mx-auto"
>
<img
src="assets/images/conference_room.jpg"
@ -453,25 +477,33 @@
</section>
<!-- Our Story Section -->
<section id="about" class="relative bg-white pt-8 pb-16">
<section
id="about"
class="relative bg-white pt-0 pb-4 lg:min-h-screen lg:py-0"
>
<div class="max-w-7xl mx-auto px-5">
<!-- Section Header -->
<div class="text-center mb-16">
<div class="text-center mb-8">
<h2
class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black"
class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black mb-4"
>
Our Story
</h2>
</div>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-28 items-center">
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-center lg:items-start"
>
<!-- Left Side - Image -->
<div id="hero-image" class="relative order-2 lg:order-1">
<div
id="hero-image"
class="relative order-2 lg:order-1 h-96 lg:h-[70vh]"
>
<img
src="assets/images/our_story.jpg"
alt="Modern office interior"
class="w-full h-auto rounded-lg transition-opacity duration-300"
class="w-full h-full object-cover rounded-lg transition-opacity duration-300"
/>
<!-- Navigation Arrow -->
<div class="absolute top-1/2 right-4 transform -translate-y-1/2">
@ -523,9 +555,11 @@
</div>
<!-- Right Side - Text Content -->
<div class="space-y-16 order-1 lg:order-2">
<div
class="space-y-16 lg:space-y-10 order-1 lg:order-2 lg:self-center"
>
<h3
class="font-playfair font-normal text-3xl md:text-4xl lg:text-5xl leading-loose text-black"
class="font-playfair font-normal text-3xl md:text-4xl lg:text-5xl leading-tight lg:leading-tight text-black"
>
Rooted in Ghana. <br />
Inspired by beauty. <br />
@ -533,7 +567,7 @@
</h3>
<p
class="font-playfair font-thin text-xl md:text-2xl lg:text-3xl leading-relaxed text-black max-w-lg"
class="font-playfair font-thin text-xl md:text-2xl lg:text-2xl 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.