ui enhancements

src/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>

src/components/nav.html

@@ -0,0 +1,89 @@
+<!-- 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="why.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="how.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="what.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>

src/contact.html

@@ -0,0 +1,143 @@
+<!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 data-include="components/nav.html"></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>

src/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"
+    ]
+  }
+]

src/data/team.json

@@ -0,0 +1,164 @@
+[
+  {
+    "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/albert.webp"
+  },
+  {
+    "id": 15,
+    "name": [
+      "Libby",
+      "ROSELYN ANDERSON"
+    ],
+    "title": "Business Development Officer",
+    "image": "assets/images/team/libby.webp"
+  },
+  {
+    "id": 16,
+    "name": [
+      "Yvan",
+      "YAWSON-SACKEY"
+    ],
+    "title": "Assistant Project Design Coordinator",
+    "image": "assets/images/team/yvan.webp"
+  },
+  {
+    "id": 17,
+    "name": [
+      "Sitsofe Akosua",
+      "ASAFOH"
+    ],
+    "title": "Personal Assistant",
+    "image": "assets/images/team/sitso.webp"
+  },
+  {
+    "id": 18,
+    "name": [
+      "Niniwa",
+      "OFFEI"
+    ],
+    "title": "Finance Assistant",
+    "image": "assets/images/team/niniwa.webp"
+  }
+]