first commit

2026-03-04 14:21:47 +00:00 · 2026-03-04 14:21:47 +00:00 · ebc307fe04
commit ebc307fe04
114 changed files with 7748 additions and 0 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -0,0 +1,31 @@
+kind: pipeline
+type: docker
+name: deploy
+
+steps:
+  - name: build
+    image: node:18-alpine
+    volumes:
+      - name: website-data
+        path: /host-target
+    commands:
+      - npm ci || npm install
+      - npm run build
+      - cp -a . /host-target
+      - chmod -R 777 /host-target
+
+  - name: sync-files
+    image: alpine:latest
+    volumes:
+      - name: website-data
+        path: /host-target
+    commands:
+      - ls -la /host-target
+      - ls -la /host-target/assets/images/
+      - ls -la /host-target/assets/icons/
+      - echo "Deployment completed successfully"
+
+volumes:
+  - name: website-data
+    host:
+      path: /root/kh3website/data/html
--- a/.gitattributes
+++ b/.gitattributes
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,67 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+dist/
+build/
+*.min.css
+*.min.js
+styles/main.css
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Temporary folders
+tmp/
+temp/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
--- a/README.md
+++ b/README.md
@ -0,0 +1,130 @@
+# KH3 Website
+
+A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS for KH3 - Building Inspiring Spaces.
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js (for Tailwind CSS CLI)
+- npm (comes with Node.js)
+
+### Setup Instructions
+
+1. **Clone or download the project**
+
+   ```bash
+   git clone <repository-url>
+   cd kh3_website
+   ```
+
+2. **Install Tailwind CSS**
+
+   ```bash
+   npm install
+   ```
+
+3. **Generate the optimized CSS**
+
+   ```bash
+   npm run build
+   ```
+
+4. **Open the website**
+   - Open `index.html` in your web browser
+   - Or serve it with a local server
+
+## Project Structure
+
+```
+kh3_website/
+├─ index.html          # Main website page
+├─ about.html          # About Us page
+├─ contact.html        # Contact page
+├─ src/
+│  └─ input.css        # Tailwind directives
+├─ styles/
+│  └─ main.css         # Generated optimized CSS
+├─ js/
+│  └─ main.js          # JavaScript functionality
+├─ assets/images/      # Image assets
+├─ tailwind.config.js  # Tailwind configuration
+├─ package.json        # Dependencies
+└─ README.md           # This file
+```
+
+## Development
+
+### For Active Development
+
+If you're making frequent changes to the HTML, you can use watch mode to automatically regenerate CSS:
+
+```bash
+npm run watch
+```
+
+Keep this running in a terminal while you work. It will automatically rebuild the CSS whenever you save changes to your HTML files.
+
+### Manual Regeneration
+
+If watch mode doesn't work or you prefer manual control:
+
+```bash
+# One-time build
+npm run build
+
+# Watch mode (auto-regenerate on changes)
+npm run watch
+```
+
+**Note:** If watch mode doesn't work, just run the one-time build command after each change.
+
+### What This Does
+
+- Scans your HTML files for used Tailwind classes
+- Generates only the CSS you need (purges unused styles)
+- Creates a tiny, optimized CSS file (~1KB vs ~3MB CDN)
+
+## Features
+
+- **Clean, minimal design** with Tailwind CSS
+- **Optimized performance** with purged CSS
+- **Responsive layout** that works on all devices
+- **No build tools required** for production
+- **Easy maintenance** with Tailwind utility classes
+- **Custom animations** for logo, menu grid, and buttons
+- **Auto-switching hero images with slide+zoom transitions**
+- **Staggered loading animations**
+- **Enhanced page transitions**
+- **Letter-by-letter menu animations**
+
+To add new Tailwind classes:
+
+1. Add the classes to your HTML
+2. Run the CSS generation command
+3. The new styles will be included in the output
+
+To modify the design:
+
+1. Change Tailwind classes in HTML files
+2. Regenerate CSS with the CLI command
+3. Refresh your browser to see changes
+
+## Custom Colors & Animations
+
+The website uses custom KH3 brand colors and animations defined in `tailwind.config.js`:
+
+- **Colors**: kh3-black, kh3-red, kh3-gold, kh3-darkGold, kh3-lightGold
+- **Animations**: logo-float, text-float, border-glow, menu-grid-cycle, fade-in variants
+
+## Production
+
+For production deployment:
+
+1. Run `npm run build` to generate the final CSS
+2. Upload all files to your web server
+3. The website will work without Node.js in production
+
+## License
+
+MIT License
--- a/about.html
+++ b/about.html
@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Why - KH3</title>
+    <link rel="stylesheet" href="styles/main.css" />
+    <meta name="description"
+        content="Learn about KH3 - Construction Project Management and Fit-out Services in Accra, Ghana. Building inspiring spaces since 2014." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
+        rel="stylesheet" />
+</head>
+
+<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
+
+
+    <!-- Navigation Menu (Standardized) -->
+    <div class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl" id="navMenu">
+        <div class="p-8 flex flex-col h-full">
+            <div class="flex items-center gap-3 mb-12">
+                <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+                    <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
+                </a>
+            </div>
+            <nav class="flex-1 relative">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="relative ml-8">
+                        <!-- Links are now vertically aligned and have no underline -->
+                        <div class="space-y-6">
+                            <a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
+                                <span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
+                                    class="nav-link-span">O</span><span class="nav-link-span">M</span><span
+                                    class="nav-link-span">E</span>
+                            </a>
+                            <a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                                data-anim-delay="200">
+                                <span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
+                                    class="nav-link-span">H</span><span class="nav-link-span">Y</span>
+                            </a>
+                            <a href="services.html" class="nav-link ml-0" data-trans="crossfade"
+                                data-anim="fade-in-left" data-anim-delay="350">
+                                <span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
+                                    class="nav-link-span">O</span><span class="nav-link-span">W</span>
+                            </a>
+                            <a href="projects.html" class="nav-link ml-0" data-trans="crossfade"
+                                data-anim="fade-in-left" data-anim-delay="550">
+                                <span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
+                                    class="nav-link-span">H</span><span class="nav-link-span">A</span><span
+                                    class="nav-link-span">T</span>
+                            </a>
+                            <a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                                data-anim-delay="650">
+                                <span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
+                                    class="nav-link-span">H</span><span class="nav-link-span">O</span>
+                            </a>
+                            <a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                                data-anim-delay="750">
+                                <span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
+                                    class="nav-link-span">O</span><span class="nav-link-span">N</span><span
+                                    class="nav-link-span">T</span><span class="nav-link-span">A</span><span
+                                    class="nav-link-span">C</span><span class="nav-link-span">T</span><span
+                                    class="nav-link-span">S</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+
+
+
+    <!-- Static Logo and Menu -->
+    <div class="fixed top-6 left-8 z-40">
+        <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+            <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
+        </a>
+    </div>
+
+    <!-- Menu Toggle -->
+    <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
+        <div class="cursor-pointer" id="menuToggle" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
+            <div class="relative inline-block hidden md:block" id="menuWrap">
+                <div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span
+                        class="wave"></span></div>
+                <div class="menu-outline" aria-hidden="true"></div>
+                <div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.png" alt="closed petal"
+                        class="w-6 h-6" /></div>
+                <div id="menuPetal"
+                    class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+                    <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
+                </div>
+            </div>
+            <div class="md:hidden">
+                <div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
+                    <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+                        <span class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span>
+                        <span class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span>
+                        <span class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="pt-20">
+        <section class="relative bg-kh3-black hero-section">
+            <div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
+                <div class="relative bg-kh3-black flex items-center">
+                    <div class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
+                        data-anim="fade-in-up" data-anim-delay="1200">
+                        <div class="w-px flex-1 bg-neutral-800"></div>
+                        <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+                        <div class="w-px flex-1 bg-neutral-800"></div>
+                        <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+                        <div class="w-px flex-1 bg-neutral-800"></div>
+                        <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+                        <div class="w-px flex-1 bg-neutral-800"></div>
+                    </div>
+                    <div class="pl-28 pr-6 w-full">
+                        <div class="flex items-center gap-6 opacity-0" data-anim="fade-in-up" data-anim-delay="1600">
+                            <div class="flex-1 h-px bg-white"></div>
+                            <h1 class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold">WHY</h1>
+                            <div class="flex-1 h-px bg-white"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="relative overflow-hidden">
+                    <img src="assets/images/room.webp" alt="About KH3"
+                        class="w-full h-full object-cover opacity-0 animate-[diagMaskReveal_1500ms_ease-out_300ms_forwards]" />
+                    <button id="aboutScrollArrow" aria-label="Scroll down"
+                        class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
+                        data-anim="fade-in-up" data-anim-delay="1900">
+                        <span class="text-xs tracking-widest mb-2">SCROLL</span>
+                        <svg class="w-5 h-5 animate-arrowPulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                        <div class="w-px h-8 bg-white/70"></div>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <section class="py-20 bg-kh3-black text-white relative dream-design-deliver hidden md:block">
+            <div class="container mx-auto px-8 max-w-6xl">
+                <div class="text-center">
+                    <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 opacity-0"
+                        data-anim="fade-in-up" data-anim-delay="800">
+                        <div class="flex items-center space-x-3">
+                            <h2 class="text-3xl md:text-4xl font-bold tracking-wider text-white">DREAM</h2>
+                            <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <h2 class="text-3xl md:text-4xl font-bold tracking-wider text-white">DESIGN</h2>
+                            <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <h2 class="text-3xl md:text-4xl font-bold tracking-wider text-white">DELIVER</h2>
+                        </div>
+                    </div>
+                    <div class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0" data-anim="fade-in-up"
+                        data-anim-delay="1200"></div>
+                </div>
+            </div>
+        </section>
+
+        <section class="py-32 bg-white text-kh3-black">
+            <div class="container mx-auto px-8 max-w-5xl">
+                <div class="text-center">
+                    <div class="text-xl leading-relaxed space-y-8 max-w-4xl mx-auto">
+                        <p class="opacity-0" data-anim="fade-in-up" data-anim-delay="200">KH3 is Ghana's leading
+                            Construction Project Management Firm with a focus on Interior Design and Fit-out. Founded in
+                            <span class="text-kh3-red font-semibold">2014</span> by a highly motivated team, KH3 is
+                            committed to being the standard of business excellence in Africa.
+                        </p>
+                        <p class="opacity-0" data-anim="fade-in-up" data-anim-delay="300">Our turnkey approach provides
+                            our clients with a single point of contact. This liberates them to refocus on their core
+                            business. Results: Exceptional projects completed within budget and on time!</p>
+                        <p class="opacity-0" data-anim="fade-in-up" data-anim-delay="400">Our forward thinking, highly
+                            sort after network of professionals, artisans, suppliers and subcontractors, makeup the
+                            power house that is the KH3 team.</p>
+                        <p class="opacity-0" data-anim="fade-in-up" data-anim-delay="500">Guided by our core values of
+                            Beauty, Integrity, Loyalty, Diligence, Excellence, Resilience and Studiousness, our team has
+                            executed over 20,000 square meters of office space for international and national brands
+                            such as <span class="text-kh3-red font-semibold">Google</span>, <span
+                                class="text-kh3-red font-semibold">Align</span>, <span
+                                class="text-kh3-red font-semibold">DBG</span> and <span
+                                class="text-kh3-red font-semibold">Enterprise Group Limited</span>.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
+            <div class="container mx-auto px-8 max-w-7xl">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
+                    <div class="relative group">
+                        <div
+                            class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        </div>
+                        <div
+                            class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        </div>
+                        <div
+                            class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float">
+                            <div
+                                class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl">
+                            </div>
+                            <div
+                                class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                            </div>
+                            <div class="absolute top-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse">
+                            </div>
+                            <div class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping">
+                            </div>
+                            <div class="relative text-center">
+                                <div
+                                    class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110">
+                                    <span class="text-white text-2xl font-bold drop-shadow-lg">01</span>
+                                </div>
+                                <h2
+                                    class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg transition-all duration-300">
+                                    VISION</h2>
+                                <div
+                                    class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500">
+                                </div>
+                                <p
+                                    class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300">
+                                    We will be the standard of global business excellence in Africa.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="relative group">
+                        <div
+                            class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        </div>
+                        <div
+                            class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        </div>
+                        <div
+                            class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float">
+                            <div
+                                class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl">
+                            </div>
+                            <div
+                                class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                            </div>
+                            <div class="absolute top-4 right-4 w-2 h-2 bg-kh3-red/60 rounded-full animate-pulse"></div>
+                            <div class="absolute bottom-6 left-6 w-1 h-1 bg-kh3-red/40 rounded-full animate-ping"></div>
+                            <div class="relative text-center">
+                                <div
+                                    class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110">
+                                    <span class="text-white text-2xl font-bold drop-shadow-lg">02</span>
+                                </div>
+                                <h2
+                                    class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg transition-all duration-300">
+                                    MISSION</h2>
+                                <div
+                                    class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500">
+                                </div>
+                                <p
+                                    class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300">
+                                    Out of the ordinary the Extraordinary that inspires the world.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- NEW Interactive Values Section -->
+        <section id="values-section" class="py-24 md:py-32 bg-white text-kh3-black">
+            <div class="container mx-auto px-8 max-w-6xl">
+                <div class="text-center mb-16 md:mb-20">
+                    <h2 class="text-5xl md:text-7xl font-bold opacity-0" data-anim="fade-in-up" data-anim-delay="200">
+                        VALUES
+                    </h2>
+                </div>
+
+                <!-- Main container for the interactive layout -->
+                <div class="relative md:grid md:grid-cols-3 md:gap-16 lg:gap-24">
+
+                    <!-- Left Column: Sticky List of Value Titles -->
+                    <div class="md:col-span-1 md:sticky top-32 self-start">
+                        <ul id="values-list"
+                            class="flex flex-wrap justify-center gap-x-4 gap-y-2 mb-12 md:flex-col md:flex-nowrap md:gap-4 md:mb-0">
+                            <!-- Value titles will be dynamically populated by JS -->
+                        </ul>
+                    </div>
+
+                    <!-- Right Column: Content Display Area -->
+                    <div id="values-content" class="md:col-span-2">
+                        <!-- Value descriptions will be dynamically populated by JS -->
+                    </div>
+
+                </div>
+            </div>
+        </section>
+
+
+    </main>
+
+
+    <div data-include="components/footer.html"></div>
+
+
+
+    <!-- Custom Cursor -->
+    <div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50" id="customCursor"></div>
+
+    <!-- Loading Screen -->
+    <div class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center" id="loadingScreen">
+        <div class="text-center">
+            <a href="index.html"
+                class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
+                <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
+            </a>
+            <div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
+                <div class="h-full bg-kh3-red rounded-full animate-pulse"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Global Scripts -->
+    <script src="js/include.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/about.js"></script>
+
+</body>
+
+</html>
--- a/assets/icons/closed_petal.png
+++ b/assets/icons/closed_petal.png
--- a/assets/icons/open_petal.png
+++ b/assets/icons/open_petal.png
--- a/assets/images/chair.webp
+++ b/assets/images/chair.webp
--- a/assets/images/contact.webp
+++ b/assets/images/contact.webp
--- a/assets/images/google.webp
+++ b/assets/images/google.webp
--- a/assets/images/kh3_logo.webp
+++ b/assets/images/kh3_logo.webp
--- a/assets/images/kh3_logo1.webp
+++ b/assets/images/kh3_logo1.webp
--- a/assets/images/kh3_logo2.webp
+++ b/assets/images/kh3_logo2.webp
--- a/assets/images/kh3_logo_darkk.webp
+++ b/assets/images/kh3_logo_darkk.webp
--- a/assets/images/projects/proj-001/master-001.webp
+++ b/assets/images/projects/proj-001/master-001.webp
--- a/assets/images/projects/proj-001/master-002.webp
+++ b/assets/images/projects/proj-001/master-002.webp
--- a/assets/images/projects/proj-001/master-003.webp
+++ b/assets/images/projects/proj-001/master-003.webp
--- a/assets/images/projects/proj-001/master-004.webp
+++ b/assets/images/projects/proj-001/master-004.webp
--- a/assets/images/projects/proj-001/master-005.webp
+++ b/assets/images/projects/proj-001/master-005.webp
--- a/assets/images/projects/proj-001/master-006.webp
+++ b/assets/images/projects/proj-001/master-006.webp
--- a/assets/images/projects/proj-002/align-001.webp
+++ b/assets/images/projects/proj-002/align-001.webp
--- a/assets/images/projects/proj-002/align-002.webp
+++ b/assets/images/projects/proj-002/align-002.webp
--- a/assets/images/projects/proj-002/align-003.webp
+++ b/assets/images/projects/proj-002/align-003.webp
--- a/assets/images/projects/proj-002/align-004.webp
+++ b/assets/images/projects/proj-002/align-004.webp
--- a/assets/images/projects/proj-002/align-005.webp
+++ b/assets/images/projects/proj-002/align-005.webp
--- a/assets/images/projects/proj-002/align-006.webp
+++ b/assets/images/projects/proj-002/align-006.webp
--- a/assets/images/projects/proj-003/calbank-00.webp
+++ b/assets/images/projects/proj-003/calbank-00.webp
--- a/assets/images/projects/proj-003/calbank-001.webp
+++ b/assets/images/projects/proj-003/calbank-001.webp
--- a/assets/images/projects/proj-003/calbank-003.webp
+++ b/assets/images/projects/proj-003/calbank-003.webp
--- a/assets/images/projects/proj-003/calbank-004.webp
+++ b/assets/images/projects/proj-003/calbank-004.webp
--- a/assets/images/projects/proj-003/calbank-005.webp
+++ b/assets/images/projects/proj-003/calbank-005.webp
--- a/assets/images/projects/proj-003/calbank-006.webp
+++ b/assets/images/projects/proj-003/calbank-006.webp
--- a/assets/images/projects/proj-004/google-001.webp
+++ b/assets/images/projects/proj-004/google-001.webp
--- a/assets/images/projects/proj-004/google-002.webp
+++ b/assets/images/projects/proj-004/google-002.webp
--- a/assets/images/projects/proj-004/google-003.webp
+++ b/assets/images/projects/proj-004/google-003.webp
--- a/assets/images/projects/proj-004/google-004.webp
+++ b/assets/images/projects/proj-004/google-004.webp
--- a/assets/images/projects/proj-004/google-005.webp
+++ b/assets/images/projects/proj-004/google-005.webp
--- a/assets/images/projects/proj-004/google-006.jpg
+++ b/assets/images/projects/proj-004/google-006.jpg
--- a/assets/images/projects/proj-005/norfund-001.webp
+++ b/assets/images/projects/proj-005/norfund-001.webp
--- a/assets/images/projects/proj-005/norfund-002.webp
+++ b/assets/images/projects/proj-005/norfund-002.webp
--- a/assets/images/projects/proj-005/norfund-003.webp
+++ b/assets/images/projects/proj-005/norfund-003.webp
--- a/assets/images/projects/proj-005/norfund-004.webp
+++ b/assets/images/projects/proj-005/norfund-004.webp
--- a/assets/images/projects/proj-005/norfund-005.webp
+++ b/assets/images/projects/proj-005/norfund-005.webp
--- a/assets/images/projects/proj-005/norfund-006.webp
+++ b/assets/images/projects/proj-005/norfund-006.webp
--- a/assets/images/projects/proj-006/devbank-001.webp
+++ b/assets/images/projects/proj-006/devbank-001.webp
--- a/assets/images/projects/proj-006/devbank-002.webp
+++ b/assets/images/projects/proj-006/devbank-002.webp
--- a/assets/images/projects/proj-006/devbank-003.webp
+++ b/assets/images/projects/proj-006/devbank-003.webp
--- a/assets/images/projects/proj-006/devbank-004.webp
+++ b/assets/images/projects/proj-006/devbank-004.webp
--- a/assets/images/projects/proj-006/devbank-006.webp
+++ b/assets/images/projects/proj-006/devbank-006.webp
--- a/assets/images/projects/proj-006/devbank-05.webp
+++ b/assets/images/projects/proj-006/devbank-05.webp
--- a/assets/images/projects/proj-007/oracle-001.webp
+++ b/assets/images/projects/proj-007/oracle-001.webp
--- a/assets/images/projects/proj-007/oracle-002.webp
+++ b/assets/images/projects/proj-007/oracle-002.webp
--- a/assets/images/projects/proj-007/oracle-003.webp
+++ b/assets/images/projects/proj-007/oracle-003.webp
--- a/assets/images/projects/proj-007/oracle-004.webp
+++ b/assets/images/projects/proj-007/oracle-004.webp
--- a/assets/images/projects/proj-007/oracle-005.webp
+++ b/assets/images/projects/proj-007/oracle-005.webp
--- a/assets/images/projects/proj-007/oracle-006.webp
+++ b/assets/images/projects/proj-007/oracle-006.webp
--- a/assets/images/projects/proj-008/elac-001.webp
+++ b/assets/images/projects/proj-008/elac-001.webp
--- a/assets/images/projects/proj-008/elac-002.webp
+++ b/assets/images/projects/proj-008/elac-002.webp
--- a/assets/images/projects/proj-008/elac-003.webp
+++ b/assets/images/projects/proj-008/elac-003.webp
--- a/assets/images/projects/proj-008/elac-004.webp
+++ b/assets/images/projects/proj-008/elac-004.webp
--- a/assets/images/projects/proj-008/elac-005.webp
+++ b/assets/images/projects/proj-008/elac-005.webp
--- a/assets/images/projects/proj-008/elac-006.webp
+++ b/assets/images/projects/proj-008/elac-006.webp
--- a/assets/images/projects/proj-009/ge-001.webp
+++ b/assets/images/projects/proj-009/ge-001.webp
--- a/assets/images/projects/proj-009/ge-002.webp
+++ b/assets/images/projects/proj-009/ge-002.webp
--- a/assets/images/projects/proj-009/ge-003.webp
+++ b/assets/images/projects/proj-009/ge-003.webp
--- a/assets/images/projects/proj-009/ge-004.webp
+++ b/assets/images/projects/proj-009/ge-004.webp
--- a/assets/images/projects/proj-009/ge-005.webp
+++ b/assets/images/projects/proj-009/ge-005.webp
--- a/assets/images/projects/proj-009/ge-006.webp
+++ b/assets/images/projects/proj-009/ge-006.webp
--- a/assets/images/projects/proj-010/8d-001.webp
+++ b/assets/images/projects/proj-010/8d-001.webp
--- a/assets/images/projects/proj-010/8d-002.webp
+++ b/assets/images/projects/proj-010/8d-002.webp
--- a/assets/images/projects/proj-010/8d-003.webp
+++ b/assets/images/projects/proj-010/8d-003.webp
--- a/assets/images/projects/proj-010/8d-004.webp
+++ b/assets/images/projects/proj-010/8d-004.webp
--- a/assets/images/projects/proj-010/8d-005.webp
+++ b/assets/images/projects/proj-010/8d-005.webp
--- a/assets/images/projects/proj-010/8d-006.webp
+++ b/assets/images/projects/proj-010/8d-006.webp
--- a/assets/images/room.webp
+++ b/assets/images/room.webp
--- a/assets/images/team/andrews.webp
+++ b/assets/images/team/andrews.webp
--- a/assets/images/team/claribel.webp
+++ b/assets/images/team/claribel.webp
--- a/assets/images/team/daniel.webp
+++ b/assets/images/team/daniel.webp
--- a/assets/images/team/dorothea.webp
+++ b/assets/images/team/dorothea.webp
--- a/assets/images/team/fauzia.webp
+++ b/assets/images/team/fauzia.webp
--- a/assets/images/team/female.png
+++ b/assets/images/team/female.png
--- a/assets/images/team/francis.webp
+++ b/assets/images/team/francis.webp
--- a/assets/images/team/google.webp
+++ b/assets/images/team/google.webp
--- a/assets/images/team/hanetta.webp
+++ b/assets/images/team/hanetta.webp
--- a/assets/images/team/helena.webp
+++ b/assets/images/team/helena.webp
--- a/assets/images/team/joyleen.webp
+++ b/assets/images/team/joyleen.webp
--- a/assets/images/team/kweku_hayford.webp
+++ b/assets/images/team/kweku_hayford.webp
--- a/assets/images/team/male.png
+++ b/assets/images/team/male.png
--- a/assets/images/team/michael.webp
+++ b/assets/images/team/michael.webp
--- a/assets/images/team/miranda.webp
+++ b/assets/images/team/miranda.webp
--- a/assets/images/team/moses.webp
+++ b/assets/images/team/moses.webp
--- a/assets/images/team/rebecca.webp
+++ b/assets/images/team/rebecca.webp
--- a/assets/images/team/siisi.webp
+++ b/assets/images/team/siisi.webp
--- a/assets/images/team/team_photo.webp
+++ b/assets/images/team/team_photo.webp
--- a/assets/images/team/yayra.webp
+++ b/assets/images/team/yayra.webp
--- a/components/footer.html
+++ b/components/footer.html
@ -0,0 +1,84 @@
+<footer class="bg-kh3-black text-white/70">
+    <!-- Section 1: Call to Action -->
+    <div class="py-20 px-8 bg-black">
+        <div class="container mx-auto max-w-6xl text-center">
+            <h2 class="text-3xl md:text-5xl font-bold text-white mb-6 opacity-0" data-anim="fade-in-up"
+                data-anim-delay="200">
+                Let's Build Something Inspiring Together
+            </h2>
+            <p class="text-lg md:text-xl text-neutral-400 max-w-3xl mx-auto mb-10 opacity-0" data-anim="fade-in-up"
+                data-anim-delay="300">
+                Ready to start your next project? We're here to turn your vision into a stunning reality.
+            </p>
+            <a href="contact.html"
+                class="inline-block bg-kh3-red text-white font-semibold uppercase tracking-wider px-8 py-4 rounded-md transition-transform transform hover:scale-105 hover:shadow-lg hover:shadow-red-500/30 opacity-0"
+                data-trans="crossfade" data-anim="fade-in-up" data-anim-delay="400">
+                Get In Touch
+            </a>
+        </div>
+    </div>
+
+    <!-- Section 2: Main Footer Content -->
+    <div class="py-16 px-8">
+        <div class="container mx-auto max-w-7xl">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 text-center md:text-left">
+
+                <!-- Column 1: Brand -->
+                <div class="opacity-0" data-anim="fade-in-up" data-anim-delay="200">
+                    <a href="index.html" class="inline-block mb-4">
+                        <img src="assets/images/kh3_logo.webp" alt="KH3 Logo" class="w-14 h-14 mx-auto md:mx-0">
+                    </a>
+                    <p class="text-sm leading-relaxed max-w-xs mx-auto md:mx-0">
+                        Building inspiring spaces through innovative construction and design solutions since 2014.
+                    </p>
+                </div>
+
+                <!-- Column 2: Navigate -->
+                <div class="opacity-0" data-anim="fade-in-up" data-anim-delay="300">
+                    <h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Navigate</h3>
+                    <ul class="space-y-3">
+                        <li><a href="index.html" class="hover:text-kh3-red transition-colors">Home</a></li>
+                        <li><a href="about.html" class="hover:text-kh3-red transition-colors">Why KH3</a></li>
+                        <li><a href="services.html" class="hover:text-kh3-red transition-colors">How We Work</a>
+                        </li>
+                        <li><a href="projects.html" class="hover:text-kh3-red transition-colors">Our What</a></li>
+                        <li><a href="who.html" class="hover:text-kh3-red transition-colors">Who We Are</a></li>
+                    </ul>
+                </div>
+
+                <!-- Column 3: Connect -->
+                <div class="opacity-0" data-anim="fade-in-up" data-anim-delay="400">
+                    <h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Connect</h3>
+                    <ul class="space-y-3">
+                        <li><a href="tel:+233303969970" class="hover:text-kh3-red transition-colors">+233 30 396
+                                9970</a></li>
+                        <li><a href="mailto:info@kh3group.com"
+                                class="hover:text-kh3-red transition-colors">info@kh3group.com</a></li>
+                    </ul>
+                    <!-- Social Icons (add your links) -->
+                    <div class="flex justify-center md:justify-start space-x-4 mt-6">
+                        <a href="https://linkedin.com" aria-label="LinkedIn"
+                            class="hover:text-kh3-red transition-colors">LinkedIn</a>
+                        <a href="https://instagram.com" aria-label="Instagram"
+                            class="hover:text-kh3-red transition-colors">Instagram</a>
+                    </div>
+                </div>
+
+                <!-- Column 4: Location -->
+                <div class="opacity-0" data-anim="fade-in-up" data-anim-delay="500">
+                    <h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Location</h3>
+                    <p class="text-sm leading-relaxed">29 Labone Crescent, Accra, Ghana</p>
+                    <div class="mt-4 rounded-lg overflow-hidden border border-neutral-800 h-32">
+                        <iframe title="KH3 Office Location" width="100%" height="100%"
+                            style="border:0; filter: invert(90%) grayscale(80%);" loading="lazy" allowfullscreen
+                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.835158882042!2d-0.1741!3d5.5898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9a7c0f1b4c6b%3A0x8f7c9e0f3b4c9a3!2s29%20Labone%20Cres%2C%20Accra%2C%20Ghana!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"></iframe>
+                    </div>
+                </div>
+
+            </div>
+            <div class="mt-16 pt-8 border-t border-neutral-800 text-center text-sm text-neutral-500">
+                <p>&copy; <span id="current-year"></span> KH3 Group. All Rights Reserved.</p>
+            </div>
+        </div>
+    </div>
+</footer>
--- a/contact.html
+++ b/contact.html
@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact Us - KH3 | Building Inspiring Spaces</title>
+    <link rel="stylesheet" href="styles/main.css" />
+    <meta name="description"
+        content="Get in touch with KH3 for your construction and project management needs. Contact us today for a consultation." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
+        rel="stylesheet" />
+</head>
+
+<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
+
+    <!-- Navigation Menu (Standardized) -->
+    <div class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl" id="navMenu">
+        <div class="p-8 flex flex-col h-full">
+            <div class="flex items-center gap-3 mb-12">
+                <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+                    <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
+                </a>
+            </div>
+            <nav class="flex-1 relative">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="relative ml-8">
+                        <!-- Links are now vertically aligned and have no underline -->
+                        <div class="space-y-6">
+                            <a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
+                                <span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
+                                    class="nav-link-span">O</span><span class="nav-link-span">M</span><span
+                                    class="nav-link-span">E</span>
+                            </a>
+                            <a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                                data-anim-delay="200">
+                                <span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
+                                    class="nav-link-span">H</span><span class="nav-link-span">Y</span>
+                            </a>
+                            <a href="services.html" class="nav-link ml-0" data-trans="crossfade"
+                                data-anim="fade-in-left" data-anim-delay="350">
+                                <span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
+                                    class="nav-link-span">O</span><span class="nav-link-span">W</span>
+                            </a>
+                            <a href="projects.html" class="nav-link ml-0" data-trans="crossfade"
+                                data-anim="fade-in-left" data-anim-delay="550">
+                                <span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
+                                    class="nav-link-span">H</span><span class="nav-link-span">A</span><span
+                                    class="nav-link-span">T</span>
+                            </a>
+                            <a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                                data-anim-delay="650">
+                                <span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
+                                    class="nav-link-span">H</span><span class="nav-link-span">O</span>
+                            </a>
+                            <a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                                data-anim-delay="750">
+                                <span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
+                                    class="nav-link-span">O</span><span class="nav-link-span">N</span><span
+                                    class="nav-link-span">T</span><span class="nav-link-span">A</span><span
+                                    class="nav-link-span">C</span><span class="nav-link-span">T</span><span
+                                    class="nav-link-span">S</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+
+
+
+    <!-- Static Logo and Menu -->
+    <div class="fixed top-6 left-8 z-40">
+        <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+            <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
+        </a>
+    </div>
+
+    <!-- Menu Toggle -->
+    <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
+        <div class="cursor-pointer" id="menuToggle" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
+            <div class="relative inline-block hidden md:block" id="menuWrap">
+                <div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span
+                        class="wave"></span></div>
+                <div class="menu-outline" aria-hidden="true"></div>
+                <div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.png" alt="closed petal"
+                        class="w-6 h-6" /></div>
+                <div id="menuPetal"
+                    class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+                    <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
+                </div>
+            </div>
+            <div class="md:hidden">
+                <div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
+                    <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+                        <span class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span>
+                        <span class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span>
+                        <span class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span><span
+                            class="w-1 h-1 bg-white rounded-full"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <main>
+        <section class="relative min-h-screen flex items-center py-24 px-8 contact-form-section">
+            <div class="absolute inset-0">
+                <img src="assets/images/contact.webp" alt="Office Background" class="w-full h-full object-cover" />
+                <div class="absolute inset-0 bg-kh3-black/80 backdrop-blur-sm"></div>
+            </div>
+            <div class="relative z-10 w-full container mx-auto max-w-7xl">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+                    <!-- Left Column: Information -->
+                    <div class="text-white space-y-8 lg:sticky top-24 self-start">
+                        <h1 class="text-5xl md:text-7xl font-bold text-white opacity-0" data-anim="fade-in-up"
+                            data-anim-delay="200">Get In Touch</h1>
+                        <p class="text-lg leading-relaxed text-white/80 max-w-lg opacity-0" data-anim="fade-in-up"
+                            data-anim-delay="300">Ready to start your next project? We'd love to hear from you. Fill out
+                            the form and we'll get back to you within 24 hours.</p>
+                        <div class="space-y-6 pt-4 border-t border-neutral-800">
+                            <div class="flex items-start space-x-4 opacity-0" data-anim="fade-in-up"
+                                data-anim-delay="400">
+                                <span class="text-kh3-red text-2xl mt-1">📍</span>
+                                <div>
+                                    <h3 class="text-xl font-semibold mb-1 text-white">Address</h3>
+                                    <p class="text-white/80">29 Labone Crescent, Accra, Ghana</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-4 opacity-0" data-anim="fade-in-up"
+                                data-anim-delay="500">
+                                <span class="text-kh3-red text-2xl mt-1">📞</span>
+                                <div>
+                                    <h3 class="text-xl font-semibold mb-1 text-white">Phone</h3>
+                                    <p class="text-white/80">+233 30 396 9970</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-4 opacity-0" data-anim="fade-in-up"
+                                data-anim-delay="600">
+                                <span class="text-kh3-red text-2xl mt-1">✉️</span>
+                                <div>
+                                    <h3 class="text-xl font-semibold mb-1 text-white">Email</h3>
+                                    <p class="text-white/80">Info@KH3group.com</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Right Column: Contact Form -->
+                    <div class="bg-black/30 border border-neutral-800 p-8 rounded-lg shadow-xl opacity-0"
+                        data-anim="fade-in-up" data-anim-delay="400">
+                        <form class="space-y-6" id="contactForm">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div><label for="name" class="block text-sm font-semibold mb-2 text-white/80">Full Name
+                                        *</label><input type="text" id="name" name="name" required class="form-input" />
+                                </div>
+                                <div><label for="email" class="block text-sm font-semibold mb-2 text-white/80">Email
+                                        Address *</label><input type="email" id="email" name="email" required
+                                        class="form-input" /></div>
+                                <div><label for="phone" class="block text-sm font-semibold mb-2 text-white/80">Phone
+                                        Number</label><input type="tel" id="phone" name="phone" class="form-input" />
+                                </div>
+                                <div><label for="company"
+                                        class="block text-sm font-semibold mb-2 text-white/80">Company</label><input
+                                        type="text" id="company" name="company" class="form-input" /></div>
+                                <div><label for="service" class="block text-sm font-semibold mb-2 text-white/80">Service
+                                        Interest</label><select id="service" name="service" class="form-input">
+                                        <option value="">Select a service</option>
+                                        <option value="design">Interior Design</option>
+                                        <option value="build">Construction & Build</option>
+                                        <option value="furnish">Furnishing</option>
+                                        <option value="full-service">Full Service</option>
+                                    </select></div>
+                                <div><label for="budget" class="block text-sm font-semibold mb-2 text-white/80">Project
+                                        Budget</label><select id="budget" name="budget" class="form-input">
+                                        <option value="">Select budget range</option>
+                                        <option value="under-100k">Under 100K GHS</option>
+                                        <option value="100k-500k">100K - 500K GHS</option>
+                                        <option value="500k-1m">500K - 1M GHS</option>
+                                        <option value="over-1m">Over 1M GHS</option>
+                                    </select></div>
+                            </div>
+                            <div><label for="message" class="block text-sm font-semibold mb-2 text-white/80">Project
+                                    Details *</label><textarea id="message" name="message" rows="5" required
+                                    placeholder="Tell us about your project..."
+                                    class="form-input resize-none"></textarea></div>
+                            <button type="submit"
+                                class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-red-700 transition-all duration-300 flex items-center justify-center space-x-2 font-semibold transform hover:scale-105">
+                                <span>Send Message</span><svg class="w-5 h-5" fill="none" stroke="currentColor"
+                                    viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 5l7 7-7 7"></path>
+                                </svg>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="py-24 bg-kh3-black text-white map-section">
+            <div class="container mx-auto px-8 max-w-6xl">
+                <h2 class="text-4xl font-bold text-center mb-12 opacity-0" data-anim="fade-in-up" data-anim-delay="200">
+                    Find Us</h2>
+                <div class="w-full overflow-hidden rounded-lg opacity-0" data-anim="fade-in-up" data-anim-delay="300"
+                    style="aspect-ratio: 16 / 9;">
+                    <iframe title="KH3 Office Location Map" width="100%" height="100%"
+                        style="border: 0; filter: invert(90%) grayscale(80%);" loading="lazy" allowfullscreen
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.984985386326!2d-0.1718516!3d5.5692366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9a990cd70313%3A0x5840c14e17196791!2sKH3%20LTD!5e0!3m2!1sen!2sgh!4v1770816892376!5m2!1sen!2sgh"></iframe>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <div data-include="components/footer.html"></div>
+    <div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
+        id="customCursor"></div>
+
+    <script src="js/include.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/carousel.js"></script>
+
+</body>
+
+</html>
--- a/data/projects.json
+++ b/data/projects.json
@ -0,0 +1,246 @@
+[
+  {
+    "id": "proj-001",
+    "name": "Mastercard Foundation Office",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "RAZOR.KH3 acted as Design & Build Contractor for the new Mastercard Foundation office at Stanbic Heights, Airport City, Accra. Scope covered design and construction management including partitioning works, mechanical, electrical and plumbing (MEP), flooring and furniture installations.",
+    "client": "Mastercard Foundation",
+    "typeOfWork": "Design & Build; design and construction management; partitioning, MEP, flooring, furniture installations",
+    "size": "1,807 SQM",
+    "completionDate": "2024",
+    "images": [
+      "assets/images/projects/proj-001/master-001.webp",
+      "assets/images/projects/proj-001/master-002.webp",
+      "assets/images/projects/proj-001/master-003.webp",
+      "assets/images/projects/proj-001/master-004.webp",
+      "assets/images/projects/proj-001/master-005.webp",
+      "assets/images/projects/proj-001/master-006.webp"
+    ],
+    "highlights": [
+      "Modern open-plan design",
+      "Collaborative workspace zones",
+      "Premium materials and finishes",
+      "Integrated technology systems"
+    ]
+  },
+  {
+    "id": "proj-002",
+    "name": "Align Technology Company Ltd",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "RAZOR.KH3 delivered the Accra office for Align Technology Company Ltd as Design & Build Contractor at the Grand Oyeeman, Airport City. Scope included design & construction management with partitioning works, mechanical, electrical & plumbing (MEP), flooring and furniture installations.",
+    "client": "Align Technology Company Ltd",
+    "typeOfWork": "Design & Build; design & construction management; partitioning, MEP, flooring, furniture installations",
+    "size": "200 SQM",
+    "completionDate": "2022",
+    "images": [
+      "assets/images/projects/proj-002/align-001.webp",
+      "assets/images/projects/proj-002/align-002.webp",
+      "assets/images/projects/proj-002/align-003.webp",
+      "assets/images/projects/proj-002/align-004.webp",
+      "assets/images/projects/proj-002/align-005.webp",
+      "assets/images/projects/proj-002/align-006.webp"
+    ],
+    "highlights": [
+      "Design & Build by RAZOR.KH3",
+      "Located at Grand Oyeeman, Airport City",
+      "Scope: partitioning, MEP, flooring, furniture"
+    ]
+  },
+  {
+    "id": "proj-003",
+    "name": "Cal Bank Learning Centre",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "RAZOR.KH3 served as Interior Design & Build Contractor. Space optimisation Design & Build to include evaluation of existing space and design optimisation to align with client accommodation needs. Works include partitioning works, mechanical, electrical & plumbing (MEP) works, flooring and joinery installations.",
+    "client": "Cal Bank",
+    "typeOfWork": "Design & Build; space evaluation & optimisation; partitioning, MEP, flooring, joinery",
+    "size": "292 SQM",
+    "completionDate": "2022",
+    "images": [
+      "assets/images/projects/proj-003/calbank-001.webp",
+      "assets/images/projects/proj-003/calbank-002.webp",
+      "assets/images/projects/proj-003/calbank-003.webp",
+      "assets/images/projects/proj-003/calbank-004.webp",
+      "assets/images/projects/proj-003/calbank-005.webp",
+      "assets/images/projects/proj-003/calbank-006.webp"
+    ],
+    "highlights": [
+      "Interior design and construction",
+      "Partitioning, MEP, flooring",
+      "Furniture installations"
+    ]
+  },
+  {
+    "id": "proj-004",
+    "name": "Google Accra Office Fit-out",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "RAZOR.KH3 served as General Contractor implementing the design by Boogermart & MultiCAD. Scope included partitioning works, mechanical, electrical and plumbing (MEP), flooring and joinery installations. The project was managed by Mace PTY (South Africa).",
+    "client": "Google",
+    "typeOfWork": "General contracting; partitioning, MEP, flooring, joinery installations",
+    "size": "925 SQM",
+    "completionDate": "2022",
+    "images": [
+      "assets/images/projects/proj-004/google-001.webp",
+      "assets/images/projects/proj-004/google-002.webp",
+      "assets/images/projects/proj-004/google-003.webp",
+      "assets/images/projects/proj-004/google-004.webp",
+      "assets/images/projects/proj-004/google-005.webp",
+      "assets/images/projects/proj-004/google-006.webp"
+    ],
+    "highlights": [
+      "RAZOR.KH3 as General Contractor",
+      "Design by Boogermart & MultiCAD",
+      "Project management by Mace PTY (South Africa)",
+      "Scope: partitioning, MEP, flooring, joinery"
+    ]
+  },
+  {
+    "id": "proj-005",
+    "name": "Norfund West Africa",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "RAZOR.KH3 served as Design & Build Contractor for the Norfund West‑Africa office at One Airport Square, Airport City, Accra. KH3 Produkts Ltd provided supply and installation. Scope included design & construction management, partitioning works, mechanical, electrical & plumbing (MEP), flooring and furniture installations.",
+    "client": "Norfund West‑Africa",
+    "typeOfWork": "Design & Build; design & construction management; partitioning, MEP, flooring, furniture installations",
+    "size": "200 SQM",
+    "completionDate": "2022",
+    "images": [
+      "assets/images/projects/proj-005/norfund-001.webp",
+      "assets/images/projects/proj-005/norfund-002.webp",
+      "assets/images/projects/proj-005/norfund-003.webp",
+      "assets/images/projects/proj-005/norfund-004.webp",
+      "assets/images/projects/proj-005/norfund-005.webp",
+      "assets/images/projects/proj-005/norfund-006.webp"
+    ],
+    "highlights": [
+      "RAZOR.KH3 as Design & Build Contractor",
+      "KH3 Produkts Ltd as supply & installation vendor",
+      "Scope: partitioning, MEP, flooring, furniture"
+    ]
+  },
+  {
+    "id": "proj-006",
+    "name": "Development Bank, Ghana",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "RAZOR.KH3 and rhayCAD served as Design & Build Contractors for the Development Bank Ghana office fit-out. The engagement included space evaluation and optimisation to align with accommodation needs and philosophy, followed by construction of the optimised design. Works included partitioning, mechanical, electrical & plumbing (MEP), flooring and joinery installations.",
+    "client": "Development Bank Ghana",
+    "typeOfWork": "Design & Build; space optimisation; partitioning, MEP, flooring, joinery",
+    "size": "973 SQM",
+    "completionDate": "2021",
+    "images": [
+      "assets/images/projects/proj-006/devbank-001.webp",
+      "assets/images/projects/proj-006/devbank-002.webp",
+      "assets/images/projects/proj-006/devbank-003.webp",
+      "assets/images/projects/proj-006/devbank-004.webp",
+      "assets/images/projects/proj-006/devbank-005.webp",
+      "assets/images/projects/proj-006/devbank-006.webp"
+    ],
+    "highlights": [
+      "Design & Build by RAZOR.KH3 and rhayCAD",
+      "Space optimisation to align with client needs",
+      "Scope: partitioning, MEP, flooring, joinery"
+    ]
+  },
+  {
+    "id": "proj-007",
+    "name": "Oracle Office",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "KH3 served as Design & Build Contractor for the Oracle office fit-out. Scope included space planning and delivery of partitioning works, mechanical, electrical & plumbing (MEP), flooring and joinery installations.",
+    "client": "Oracle",
+    "typeOfWork": "Design & Build; partitioning, MEP, flooring, joinery",
+    "size": "130 SQM",
+    "completionDate": "2020",
+    "images": [
+      "assets/images/projects/proj-007/oracle-001.webp",
+      "assets/images/projects/proj-007/oracle-002.webp",
+      "assets/images/projects/proj-007/oracle-003.webp",
+      "assets/images/projects/proj-007/oracle-004.webp",
+      "assets/images/projects/proj-007/oracle-005.webp",
+      "assets/images/projects/proj-007/oracle-006.webp"
+    ],
+    "highlights": [
+      "Historic preservation",
+      "Modern hospitality fit-outs",
+      "Restaurant and bar renovations",
+      "Premium guest amenities"
+    ]
+  },
+  {
+    "id": "proj-008",
+    "name": "Enterprise Group Head Office",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "KH3 and rhayCAD delivered the Enterprise Group Head Office fit‑out at Advantage Place, Ridge, Accra as Design & Build Contractors. Scope covered design and construction management including interior design, partitioning works, mechanical, electrical & plumbing (MEP), flooring and furniture installations.",
+    "client": "Enterprise Group",
+    "typeOfWork": "Design & Build; design & construction management; interior design, partitioning, MEP, flooring, furniture installations",
+    "size": "1,800 SQM",
+    "completionDate": "2019",
+    "images": [
+      "assets/images/projects/proj-008/elac-001.webp",
+      "assets/images/projects/proj-008/elac-002.webp",
+      "assets/images/projects/proj-008/elac-003.webp",
+      "assets/images/projects/proj-008/elac-004.webp",
+      "assets/images/projects/proj-008/elac-005.webp",
+      "assets/images/projects/proj-008/elac-006.webp"
+    ],
+    "highlights": [
+      "Design & Build by KH3 and rhayCAD",
+      "Interior design and space partitioning",
+      "Scope: MEP, flooring, furniture installations"
+    ]
+  },
+  {
+    "id": "proj-009",
+    "name": "General Electric Head Office Fit-out",
+    "category": "Corporate",
+    "location": "Accra, Ghana",
+    "description": "KH3 and rhayCAD served as General Contractors implementing the design by Paragon Interiors (South Africa) for the General Electric head office. Works included partitioning, mechanical, electrical & plumbing (MEP), flooring and joinery installations, delivered in collaboration with Lerumo PTY (South Africa) and ARG1 Africa.",
+    "client": "General Electric",
+    "typeOfWork": "General contracting; implementation of Paragon Interiors design; partitioning, MEP, flooring, joinery",
+    "size": "965 SQM",
+    "completionDate": "",
+    "images": [
+      "assets/images/projects/proj-009/ge-001.webp",
+      "assets/images/projects/proj-009/ge-002.webp",
+      "assets/images/projects/proj-009/ge-003.webp",
+      "assets/images/projects/proj-009/ge-004.webp",
+      "assets/images/projects/proj-009/ge-005.webp",
+      "assets/images/projects/proj-009/ge-006.webp"
+    ],
+    "highlights": [
+      "General Contractors: KH3 & rhayCAD",
+      "Design by Paragon Interiors (South Africa)",
+      "Collaboration with Lerumo PTY and ARG1 Africa",
+      "Scope: partitioning, MEP, flooring, joinery"
+    ]
+  },
+  {
+    "id": "proj-010",
+    "name": "8D – Accra Office Fit-Out",
+    "category": "Corporate",
+    "location": "One Airport Square, Airport, Ghana",
+    "description": "Interior Design & Build Contractor. Space optimisation Design & Build to include evaluation of existing space and design optimisation to align with client accommodation needs. Works include partitioning works, mechanical, electrical & plumbing (MEP) works, flooring and joinery installations. Delivered by KH3.",
+    "client": "8D Ghana",
+    "typeOfWork": "Interior Design & Build Contractor; space evaluation & optimisation; partitioning, MEP, flooring, joinery",
+    "size": "250 SQM",
+    "completionDate": "October 2018",
+    "images": [
+      "assets/images/projects/proj-010/8d-001.webp",
+      "assets/images/projects/proj-010/8d-002.webp",
+      "assets/images/projects/proj-010/8d-003.webp",
+      "assets/images/projects/proj-010/8d-004.webp",
+      "assets/images/projects/proj-010/8d-005.webp",
+      "assets/images/projects/proj-010/8d-006.webp"
+    ],
+    "highlights": [
+      "Design–Build Contractor",
+      "250 m² office fit‑out",
+      "Delivered at One Airport Square"
+    ]
+  }
+]
--- a/data/team.json
+++ b/data/team.json
@ -0,0 +1,146 @@
+[
+  {
+    "id": 1,
+    "name": [
+      "Kweku",
+      "HAYFORD"
+    ],
+    "title": "Director",
+    "image": "assets/images/team/kweku_hayford.webp"
+  },
+  {
+    "id": 2,
+    "name": [
+      "Hanetta",
+      "HAYFORD"
+    ],
+    "title": "Managing Director, KHY",
+    "image": "assets/images/team/hanetta.webp"
+  },
+  {
+    "id": 3,
+    "name": [
+      "Yayra",
+      "NUMETU"
+    ],
+    "title": "Head, Finance & Administration",
+    "image": "assets/images/team/yayra.webp"
+  },
+  {
+    "id": 4,
+    "name": [
+      "Fauzia",
+      "CLOTTEY"
+    ],
+    "title": "Managing Director, Produkts",
+    "image": "assets/images/team/fauzia.webp"
+  },
+  {
+    "id": 5,
+    "name": [
+      "Miranda",
+      "LARYEA"
+    ],
+    "title": "Business Development Manager",
+    "image": "assets/images/team/miranda.webp"
+  },
+  {
+    "id": 6,
+    "name": [
+      "Helena",
+      "NTIRI AMANKWAH"
+    ],
+    "title": "Procurement Specialist",
+    "image": "assets/images/team/helena.webp"
+  },
+  {
+    "id": 7,
+    "name": [
+      "Michael",
+      "LARTEY"
+    ],
+    "title": "Construction Project Coordinator",
+    "image": "assets/images/team/michael.webp"
+  },
+  {
+    "id": 8,
+    "name": [
+      "Francis",
+      "OPARE"
+    ],
+    "title": "Finance Officer",
+    "image": "assets/images/team/francis.webp"
+  },
+  {
+    "id": 9,
+    "name": [
+      "Andrews Amon",
+      "KOTEY"
+    ],
+    "title": "Project Design Coordinator",
+    "image": "assets/images/team/andrews.webp"
+  },
+  {
+    "id": 10,
+    "name": [
+      "Dorothea",
+      "ADJETEY"
+    ],
+    "title": "Operations & Branding Officer",
+    "image": "assets/images/team/dorothea.webp"
+  },
+  {
+    "id": 11,
+    "name": [
+      "Joyleen",
+      "Therson-COFFIE"
+    ],
+    "title": "Assistant Project Design Coordinator",
+    "image": "assets/images/team/joyleen.webp"
+  },
+  {
+    "id": 12,
+    "name": [
+      "Rebecca",
+      "SAM"
+    ],
+    "title": "Finance Assistant",
+    "image": "assets/images/team/rebecca.webp"
+  },
+  {
+    "id": 13,
+    "name": [
+      "Daniel",
+      "THOMPSON"
+    ],
+    "title": "Assistant Project Coordinator",
+    "image": "assets/images/team/daniel.webp"
+  },
+  {
+    "id": 14,
+    "name": [
+      "Albert",
+      "ANKU"
+    ],
+    "title": "3D Visualizer and Graphic Designer",
+    "image": "assets/images/team/male.png"
+  },
+  {
+    "id": 15,
+    "name": [
+      "Yvan",
+      "YAWSON-SACKEY"
+    ],
+    "title": "Assistant Project Design Coordinator",
+    "image": "assets/images/team/male.png"
+  },
+  {
+    "id": 16,
+    "name": [
+      "Sitsofe Akosua",
+      "ASAFOH"
+    ],
+    "title": "IT Consultant",
+    "image": "assets/images/team/female.png"
+  }
+]
--- a/index.html
+++ b/index.html
@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>KH3 - Building Inspiring Spaces</title>
+  <!-- Standardized CSS Link -->
+  <link rel="stylesheet" href="styles/main.css" />
+  <meta name="description"
+    content="KH3 - Construction Project Management and Fit-out Services in Accra, Ghana. Building inspiring spaces since 2014." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet" />
+</head>
+
+<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
+  <!-- Navigation Menu (Standardized) -->
+  <div class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl" id="navMenu">
+    <div class="p-8 flex flex-col h-full">
+      <div class="flex items-center gap-3 mb-12">
+        <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+          <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
+        </a>
+      </div>
+      <nav class="flex-1 relative">
+        <div class="absolute inset-0 flex items-center">
+          <div class="relative ml-8">
+            <!-- Links are now vertically aligned and have no underline -->
+            <div class="space-y-6">
+              <a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
+                <span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
+                  class="nav-link-span">O</span><span class="nav-link-span">M</span><span class="nav-link-span">E</span>
+              </a>
+              <a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                data-anim-delay="200">
+                <span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
+                  class="nav-link-span">H</span><span class="nav-link-span">Y</span>
+              </a>
+              <a href="services.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                data-anim-delay="350">
+                <span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
+                  class="nav-link-span">O</span><span class="nav-link-span">W</span>
+              </a>
+              <a href="projects.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                data-anim-delay="550">
+                <span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
+                  class="nav-link-span">H</span><span class="nav-link-span">A</span><span class="nav-link-span">T</span>
+              </a>
+              <a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                data-anim-delay="650">
+                <span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
+                  class="nav-link-span">H</span><span class="nav-link-span">O</span>
+              </a>
+              <a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
+                data-anim-delay="750">
+                <span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
+                  class="nav-link-span">O</span><span class="nav-link-span">N</span><span
+                  class="nav-link-span">T</span><span class="nav-link-span">A</span><span
+                  class="nav-link-span">C</span><span class="nav-link-span">T</span><span class="nav-link-span">S</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+  </div>
+
+  <!-- Main Layout -->
+  <div class="min-h-screen relative">
+    <section class="relative h-[100svh] md:min-h-screen flex flex-col md:flex-row hero-section">
+
+      <!-- KH3 Logo -->
+      <div class="absolute top-6 md:top-8 left-8 z-20 opacity-0" data-anim="fade-in-left" data-anim-delay="200">
+        <a href="index.html"
+          class="flex flex-col items-start gap-2 animate-logo-float hover:opacity-80 transition-opacity">
+          <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
+          <h1 class="text-lg md:text-xl font-semibold text-white">KH3 Group</h1>
+        </a>
+      </div>
+
+      <!-- Menu Toggle -->
+      <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
+        <div class="cursor-pointer" id="menuToggle" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
+          <div class="relative inline-block hidden md:block" id="menuWrap">
+            <div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span
+                class="wave"></span></div>
+            <div class="menu-outline" aria-hidden="true"></div>
+            <div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.webp" alt="closed petal"
+                class="w-6 h-6" /></div>
+            <div id="menuPetal"
+              class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+              <img src="assets/icons/open_petal.webp" alt="petal" class="w-8 h-8" />
+            </div>
+          </div>
+          <div class="md:hidden">
+            <div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
+              <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+                <span class="w-1 h-1 bg-white rounded-full"></span><span
+                  class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span>
+                <span class="w-1 h-1 bg-white rounded-full"></span><span
+                  class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span>
+                <span class="w-1 h-1 bg-white rounded-full"></span><span
+                  class="w-1 h-1 bg-white rounded-full"></span><span class="w-1 h-1 bg-white rounded-full"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- LEFT COLUMN -->
+      <div class="w-full md:w-1/3 bg-kh3-black flex h-[20vh] md:h-auto shrink-0 opacity-0" data-anim="fade-in-left"
+        data-anim-delay="800">
+      </div>
+
+      <!-- RIGHT COLUMN -->
+      <div class="w-full md:w-2/3 relative overflow-hidden flex-1 min-h-0 md:flex-none" data-anim="fade-in-right"
+        data-anim-delay="300">
+        <div class="relative h-full md:h-full">
+          <div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
+          <img id="currentImg" src="assets/images/room.webp" alt="Sample interior fit-out by KH3"
+            class="absolute inset-0 w-full h-full object-cover" />
+          <img id="nextImg" src="assets/images/chair.webp" alt="Sample interior fit-out by KH3"
+            class="absolute inset-0 w-full h-full object-cover opacity-0" />
+
+          <!-- Mobile CTA bar on image -->
+          <div class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0" data-anim="fade-in-up"
+            data-anim-delay="1200" style="bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);">
+            <div class="flex items-center gap-4">
+              <a href="about.html" data-trans=""
+                class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none">Why</a>
+              <a href="contact.html" data-trans=""
+                class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none">Contacts</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:flex items-center gap-4"
+        data-anim="fade-in-up" data-anim-delay="1200">
+        <a href="about.html" data-trans="crossfade"
+          class="inline-block uppercase tracking-wider px-6 py-3 text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-md animate-border-glow">
+          Why KH3
+        </a>
+        <a href="who.html" data-trans="crossfade"
+          class="inline-block uppercase tracking-wider px-6 py-3 text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-md animate-border-glow">
+          Who We Are
+        </a>
+      </div>
+
+    </section>
+  </div>
+
+  <div data-include="components/footer.html"></div>
+
+  <!-- Custom Cursor -->
+  <div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
+    id="customCursor"></div>
+
+  <!-- Loading Screen -->
+  <div class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center" id="loadingScreen">
+    <div class="text-center">
+      <a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
+        <img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
+      </a>
+      <div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
+        <div class="h-full bg-kh3-red rounded-full animate-pulse"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Script Files -->
+  <script src="js/include.js"></script>
+  <script src="js/main.js"></script>
+  <script src="js/carousel.js"></script>
+
+</body>
+
+</html>
--- a/Show more
+++ b/Show more