Clean initial commit

.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

.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

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

about.html

@@ -0,0 +1,423 @@
+<!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.png" 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.png" 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">
+            <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.png" alt="About KH3"
+                        class="w-full h-full object-cover opacity-0 animate-[diagMaskReveal_1500ms_ease-out_300ms_forwards]" />
+                    <button id="aboutScrollArrow"
+                        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>
+
+
+    <!-- NEW Signature Footer -->
+    <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.png" 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="#" aria-label="LinkedIn"
+                                class="hover:text-kh3-red transition-colors"><!-- SVG for LinkedIn --></a>
+                            <a href="#" aria-label="Instagram"
+                                class="hover:text-kh3-red transition-colors"><!-- SVG for 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>
+
+
+
+    <!-- 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.png" 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/main.js"></script>
+    <script src="js/about.js"></script>
+
+</body>
+
+</html>