fix: update product link and improve dropdown layout in HeaderClient

app/(website)/contact/page.tsx

@@ -11,25 +11,7 @@ import {
 } from "react-icons/fa"; // Using Fa icons for consistency
 import { COLORS } from "@/constants"; // Using COLORS constant
 import ContactForm from "@/components/ContactForm";
-import { Metadata } from "next"
-// Metadata for the Contact page
 
-export const metadata: Metadata = {
-  title: "Contact Us | Owethu Managed Services",
-  description: "Get in touch with Owethu Managed Services for expert IT solutions, resource augmentation, and project management. We're here to help you succeed.",
-  keywords: [
-    "contact OMS",
-    "Price",
-    "Managed IT services",
-    "Resource augmentation",
-    "Project management",
-    "Bank statement reader",
-    "OBSE",
-    "Centurion",
-    
-  ]
-
-};
 
 // Define the structure for FAQ items
 interface FAQItem {

components/HeaderClient.tsx

@@ -13,6 +13,7 @@ import {
   FiUsers,
   FiCpu,
   FiBox,
+  FiLayers
 } from "react-icons/fi";
 import ThemeToggle from "./ThemeToggle";
 
@@ -265,15 +266,16 @@ const HeaderClient = () => {
                     </div>
                   </div>
                 </div>
+
                 {/* Products */}
                 <div
-                  className={`group ${isActive("/obse") ? "active" : ""}`} // Add active class to group
+                  className={`group ${isActive("/products") ? "active" : ""}`} // Add active class to group
                   onMouseEnter={handleProductsMouseEnter}
                   onMouseLeave={handleProductsMouseLeave}
                 >
                   <button
                     className={`${megaMenuTriggerClasses} ${
-                      isActive("/obse") ? "after:w-full" : ""
+                      isActive("/products") ? "after:w-full" : ""
                     }`}
                   >
                     {" "}
@@ -283,7 +285,7 @@ const HeaderClient = () => {
                   </button>
                   <div
                     className={`
-                      absolute left-0 top-full w-full shadow-lg z-1000
+                      absolute left-0 top-full w-full shadow-lg z-40
                       bg-card border-x border-b border-border rounded-b-lg
                       opacity-0 invisible translate-y-[-10px]
                       ${
@@ -295,7 +297,7 @@ const HeaderClient = () => {
                     `}
                   >
                     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
-                      <div className="max-w-md">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
                         <Link
                           href="/obse"
                           className={`${megaMenuItemClasses} ${
@@ -309,17 +311,28 @@ const HeaderClient = () => {
                             <p className={megaMenuTitleClasses}>
                                    
                               OBSE Platform
-                            
 
                             </p>
                           </div>
                         </Link>
-                       
-
-                      </div>
-
-                      <div className="max-w-md">
+                        {/* Add more service links here 
                         <Link
+                          href="/services/project-management"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/services/project-management")
+                              ? "text-primary"
+                              : ""
+                          }`} // Apply active class
+                        >
+                          <FiBriefcase className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                              Project Management
+                            </p>
+                          </div>
+                        </Link>
+                        */}
+                         <Link
                           href="https://cvevolve.com/"
                           target="_blank"
                           className={`${megaMenuItemClasses} ${
@@ -328,20 +341,16 @@ const HeaderClient = () => {
                         >
                           {" "}
                           {/* Apply active class */}
-                          <FiBox className={megaMenuIconClasses} />
+                          <FiLayers className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
                             <p className={megaMenuTitleClasses}>
                                    
                               CVEvolve
                             
-
                             </p>
                           </div>
                         </Link>
-                       
-
                       </div>
-
                     </div>
                   </div>
                 </div>