Header updated and achievements added

app/achievements/_data/achievementsDefaults.ts

@@ -0,0 +1,158 @@
+// /app/achievements/_data/achievementsDefaults.ts (or similar)
+
+export interface Award {
+  id: string | number;
+  name: string;
+  year: number | string;
+  awardingBody: string;
+  description?: string;
+  imageUrl?: string; // URL for an award logo or image
+}
+
+export interface Certification {
+  id: string | number;
+  name: string;
+  issuingBody: string;
+  logoUrl?: string;
+  details?: string;
+}
+
+export interface Partner {
+  id: string | number;
+  name: string;
+  logoUrl: string; // Partner logo is usually essential
+  websiteUrl?: string;
+  description?: string;
+}
+
+export interface GalleryImage {
+  id: string | number;
+  imageUrl: string;
+  caption?: string;
+  alt: string;
+  event?: string; // Optional: Name of the event
+  date?: string; // Optional: Date of the event/photo
+}
+
+export interface Milestone {
+  id: string | number;
+  description: string;
+  date: string; // e.g., "Q4 2023", "June 2022"
+}
+
+// --- Default Placeholder Data ---
+
+export const defaultAwards: Award[] = [
+  {
+    id: 1,
+    name: "Top BEE Level 1 Contributor",
+    year: 2023,
+    awardingBody: "SANAS Accreditation Body",
+    description:
+      "Recognized for commitment to Broad-Based Black Economic Empowerment.",
+    imageUrl: "/images/awards/bee-level1.png",
+  }, // Replace with actual paths
+  {
+    id: 2,
+    name: "Supplier Development Excellence",
+    year: 2022,
+    awardingBody: "Absa Enterprise Development",
+    description:
+      "Acknowledged for impactful participation in the Absa supplier development program.",
+    imageUrl: "/images/awards/absa-supplier.png",
+  },
+  // Add more awards...
+];
+
+export const defaultCertifications: Certification[] = [
+  {
+    id: 1,
+    name: "Salesforce Certified Partner",
+    issuingBody: "Salesforce",
+    logoUrl: "/images/certs/salesforce-partner.png",
+  },
+  {
+    id: 2,
+    name: "ISO 9001:2015 (Pending/In Progress)",
+    issuingBody: "Relevant Body",
+    details:
+      "Actively working towards certification for quality management systems.",
+  }, // Example of in-progress
+  // Add more certifications
+];
+
+export const defaultPartners: Partner[] = [
+  {
+    id: 1,
+    name: "Absa Bank",
+    logoUrl: "/clients/absa-logo.png",
+    websiteUrl: "https://www.absa.co.za/",
+  }, // Using client logos for partners
+  {
+    id: 2,
+    name: "Salesforce",
+    logoUrl: "/images/certs/salesforce-partner.png",
+    websiteUrl: "https://www.salesforce.com/",
+  },
+  {
+    id: 3,
+    name: "Sybrin",
+    logoUrl: "/clients/sybrin-logo.png",
+    websiteUrl: "https://www.sybrin.com/",
+  },
+  // Add other key strategic partners if distinct from clients
+];
+
+export const defaultGalleryImages: GalleryImage[] = [
+  {
+    id: 1,
+    imageUrl: "/images/gallery/team-event-1.jpg",
+    caption: "Annual Team Building Day 2023",
+    alt: "OMS Team at Annual Event",
+    event: "Team Building",
+    date: "Nov 2023",
+  },
+  {
+    id: 2,
+    imageUrl: "/images/gallery/award-ceremony-1.jpg",
+    caption: "Receiving the Supplier Development Award",
+    alt: "OMS receiving award",
+    event: "Absa Awards Night",
+    date: "Oct 2022",
+  },
+  {
+    id: 3,
+    imageUrl: "/images/gallery/office-launch.jpg",
+    caption: "Celebrating our new Centurion office opening",
+    alt: "OMS new office launch",
+    event: "Office Launch",
+    date: "May 2023",
+  },
+  {
+    id: 4,
+    imageUrl: "/images/gallery/client-workshop.jpg",
+    caption: "Collaborative workshop session with a key client",
+    alt: "OMS client workshop",
+    event: "Client Workshop",
+    date: "Sep 2023",
+  },
+  // Add more gallery images
+];
+
+export const defaultMilestones: Milestone[] = [
+  { id: 1, description: "Established Owethu Managed Services", date: "2019" }, // Adjust start date if needed
+  {
+    id: 2,
+    description: "Joined Absa Supplier Development Programme",
+    date: "2020",
+  },
+  { id: 3, description: "Became an official Salesforce Partner", date: "2022" },
+  { id: 4, description: "Launched the OBSE Product", date: "Q1 2023" },
+  { id: 5, description: "Achieved BEE Level 1 Status", date: "Q3 2023" },
+  {
+    id: 6,
+    description: "Opened new Head Office in Centurion",
+    date: "May 2023",
+  },
+  // Add more significant milestones
+];

app/achievements/page.tsx

@@ -0,0 +1,366 @@
+// /app/achievements/page.tsx
+import Image from "next/image";
+import { Metadata } from "next";
+import {
+  FaAward,
+  FaCertificate,
+  FaHandshake,
+  FaCamera,
+  FaTrophy,
+  FaStar,
+  FaExternalLinkAlt,
+} from "react-icons/fa";
+import { COLORS } from "@/constants"; // Assuming COLORS is available
+// import HeroSection from "../_components/HeroSection"; // Reuse HeroSection component
+
+// Import the placeholder data
+import {
+  defaultAwards,
+  defaultCertifications,
+  defaultPartners,
+  defaultGalleryImages,
+  defaultMilestones,
+  Award, // Import interfaces if needed within component
+  Certification,
+  Partner,
+  GalleryImage,
+  Milestone,
+} from "./_data/achievementsDefaults"; // Adjust path as needed
+import CallToActionSection from "../(website)/_components/CallToActionSection";
+
+// SEO Metadata
+export const metadata: Metadata = {
+  title: "Achievements & Recognition | Owethu Managed Services (OMS)",
+  description:
+    "Explore the awards, certifications, partnerships, and milestones achieved by OMS. See our commitment to excellence and empowerment.",
+  keywords: [
+    "OMS achievements",
+    "Owethu Managed Services awards",
+    "BEE Level 1",
+    "Salesforce Partner",
+    "company milestones",
+    "IT company recognition",
+    "supplier development program",
+    "South Africa IT awards",
+    "OMS gallery",
+    "OMS partnerships",
+  ],
+  openGraph: {
+    title: "Achievements & Recognition | OMS",
+    description:
+      "Discover OMS's journey of success, awards, and key partnerships.",
+    url: "https://oms.cvevolve.com/achievements", // Update with the final URL
+    // Add an appropriate OG image URL if available
+    // images: [{ url: '/images/oms-achievements-og.png', width: 1200, height: 630, alt: 'OMS Achievements' }],
+    locale: "en_ZA",
+    type: "website",
+  },
+  // Add twitter card if desired
+};
+
+export default function AchievementsPage() {
+  // In a real app, fetch data here using functions like getAchievements(), getAwards(), etc.
+  const awards = defaultAwards;
+  const certifications = defaultCertifications;
+  const partners = defaultPartners;
+  const galleryImages = defaultGalleryImages;
+  const milestones = defaultMilestones;
+
+  return (
+    <>
+      {/* 1. Hero Section */}
+      {/* <HeroSection
+        title={
+          <>
+            Our Journey & <br className="hidden md:block" />
+            Recognition
+          </>
+        }
+        subtitle="Celebrating our milestones, awards, and the partnerships that drive our success."
+        // Optional button:
+        // buttonText="Explore Our Services"
+        // buttonHref="/services"
+        imageUrl="/images/hero/achievements-hero.jpg" // Replace with a suitable hero image (e.g., abstract success, team celebration)
+      /> */}
+
+      {/* 2. Introduction (Optional) */}
+      <section className="py-12 md:py-16 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6 text-center">
+          <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
+            At Owethu Managed Services, we are proud of the progress we&apos;ve
+            made and the recognition we&apos;ve earned. These achievements
+            reflect our commitment to excellence, empowerment, and delivering
+            value to our clients and community.
+          </p>
+        </div>
+      </section>
+
+      {/* 3. Awards Section */}
+      {awards && awards.length > 0 && (
+        <section className="py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
+          <div className="container mx-auto px-6">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
+              <FaAward
+                className="inline-block mr-3 mb-1"
+                style={{ color: COLORS.primary }}
+              />{" "}
+              Awards & Accolades
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {awards.map((award) => (
+                <div
+                  key={award.id}
+                  className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex flex-col items-center text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
+                >
+                  {award.imageUrl && (
+                    <div className="relative h-20 w-20 mb-4">
+                      <Image
+                        src={award.imageUrl}
+                        alt={`${award.name} Logo`}
+                        layout="fill"
+                        objectFit="contain"
+                      />
+                    </div>
+                  )}
+                  {!award.imageUrl && (
+                    <FaTrophy
+                      className="text-4xl mb-4"
+                      style={{ color: COLORS.primary }}
+                    />
+                  )}
+                  <h3 className="text-xl font-semibold mb-1 font-poppins text-gray-900 dark:text-white">
+                    {award.name}
+                  </h3>
+                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+                    {award.awardingBody} - {award.year}
+                  </p>
+                  {award.description && (
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      {award.description}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* 4. Certifications & Partnerships Section */}
+      {((certifications && certifications.length > 0) ||
+        (partners && partners.length > 0)) && (
+        <section className="py-16 md:py-20 bg-white dark:bg-gray-900">
+          <div className="container mx-auto px-6">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
+              <FaCertificate
+                className="inline-block mr-3 mb-1"
+                style={{ color: COLORS.primary }}
+              />{" "}
+              Certifications &{" "}
+              <FaHandshake
+                className="inline-block ml-2 mr-3 mb-1"
+                style={{ color: COLORS.primary }}
+              />{" "}
+              Partnerships
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
+              {/* Certifications Column */}
+              {certifications && certifications.length > 0 && (
+                <div>
+                  <h3 className="text-2xl font-semibold font-poppins text-gray-800 dark:text-gray-100 mb-6 text-center md:text-left">
+                    Our Certifications
+                  </h3>
+                  <div className="space-y-6">
+                    {certifications.map((cert) => (
+                      <div
+                        key={cert.id}
+                        className="flex items-center bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm"
+                      >
+                        {cert.logoUrl && (
+                          <div className="relative h-12 w-16 mr-4 flex-shrink-0">
+                            <Image
+                              src={cert.logoUrl}
+                              alt={`${cert.name} Logo`}
+                              layout="fill"
+                              objectFit="contain"
+                            />
+                          </div>
+                        )}
+                        {!cert.logoUrl && (
+                          <FaCertificate
+                            className="text-2xl mr-4 flex-shrink-0"
+                            style={{ color: COLORS.primary }}
+                          />
+                        )}
+                        <div>
+                          <h4 className="font-semibold text-gray-900 dark:text-white">
+                            {cert.name}
+                          </h4>
+                          <p className="text-sm text-gray-500 dark:text-gray-400">
+                            {cert.issuingBody}
+                          </p>
+                          {cert.details && (
+                            <p className="text-xs text-gray-600 dark:text-gray-300 mt-1">
+                              {cert.details}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {/* Partnerships Column */}
+              {partners && partners.length > 0 && (
+                <div>
+                  <h3 className="text-2xl font-semibold font-poppins text-gray-800 dark:text-gray-100 mb-6 text-center md:text-left">
+                    Key Partners
+                  </h3>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-6 items-center">
+                    {partners.map((partner) => (
+                      <div key={partner.id} className="text-center group">
+                        <a
+                          href={partner.websiteUrl || "#"}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={`relative block h-16 md:h-20 filter grayscale group-hover:grayscale-0 transition duration-300 ${
+                            !partner.websiteUrl ? "cursor-default" : ""
+                          }`}
+                          title={partner.name}
+                        >
+                          <Image
+                            src={partner.logoUrl}
+                            alt={`${partner.name} Logo`}
+                            layout="fill"
+                            objectFit="contain"
+                          />
+                        </a>
+                        {partner.websiteUrl && (
+                          <a
+                            href={partner.websiteUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-xs text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inline-flex items-center mt-1"
+                          >
+                            Visit <FaExternalLinkAlt className="ml-1 w-2 h-2" />
+                          </a>
+                        )}
+                        {!partner.websiteUrl && (
+                          <span className="text-xs text-gray-500 dark:text-gray-400 mt-1 inline-block">
+                            {partner.name}
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                  {partners.length > 6 && (
+                    <p className="text-center text-sm text-gray-500 dark:text-gray-400 mt-4">
+                      And more...
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* 5. Milestones Section */}
+      {milestones && milestones.length > 0 && (
+        <section className="py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
+          <div className="container mx-auto px-6 max-w-3xl">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
+              <FaStar
+                className="inline-block mr-3 mb-1"
+                style={{ color: COLORS.primary }}
+              />{" "}
+              Key Milestones
+            </h2>
+            <div
+              className="relative pl-8 border-l-2 border-gold-500 dark:border-gold-400"
+              style={{ borderColor: COLORS.primary }}
+            >
+              {milestones.map((milestone, index) => (
+                <div key={milestone.id} className="mb-8 relative">
+                  <div
+                    className="absolute -left-[1.6rem] top-1 w-6 h-6 bg-gold-500 rounded-full border-4 border-white dark:border-gray-800 dark:bg-gold-400"
+                    style={{
+                      backgroundColor: COLORS.primary,
+                      borderColor:
+                        bgColor === "dark"
+                          ? "#1f2937"
+                          : "#f9fafb" /* Adjust based on actual dark/light bg */,
+                    }}
+                  ></div>
+                  <p
+                    className="text-sm font-semibold text-gold-600 dark:text-gold-400"
+                    style={{ color: COLORS.primary }}
+                  >
+                    {milestone.date}
+                  </p>
+                  <p className="text-md text-gray-700 dark:text-gray-300">
+                    {milestone.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* 6. Gallery Section */}
+      {galleryImages && galleryImages.length > 0 && (
+        <section className="py-16 md:py-20 bg-white dark:bg-gray-900">
+          <div className="container mx-auto px-6">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
+              <FaCamera
+                className="inline-block mr-3 mb-1"
+                style={{ color: COLORS.primary }}
+              />{" "}
+              Moments & Memories
+            </h2>
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+              {galleryImages.map((image) => (
+                <div
+                  key={image.id}
+                  className="group relative aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
+                >
+                  {/* Consider adding a Lightbox library here for better image viewing */}
+                  <Image
+                    src={image.imageUrl}
+                    alt={image.alt}
+                    layout="fill"
+                    objectFit="cover"
+                    className="transform transition-transform duration-300 group-hover:scale-110"
+                  />
+                  {/* Overlay for caption */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3 md:p-4">
+                    <p className="text-white text-xs md:text-sm font-semibold line-clamp-2">
+                      {image.caption || image.alt}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* 7. Optional CTA Section */}
+      <CallToActionSection
+        title="Partner with Proven Expertise"
+        subtitle="Let our recognized capabilities help you achieve your technology goals."
+        buttonText="Discuss Your Project"
+        buttonHref="/contact"
+      />
+    </>
+  );
+}
+
+// Helper function to determine background color for milestone border (if needed)
+// This is a simplified check, adjust based on how you handle theme toggling
+const bgColor =
+  typeof window !== "undefined" &&
+  document.documentElement.classList.contains("dark")
+    ? "dark"
+    : "light";

components/HeaderClient.tsx

@@ -4,23 +4,25 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-// Use usePathname only if needed for active state logic not shown here
-// import { usePathname } from "next/navigation";
 import {
   FiChevronDown,
   FiClipboard,
   FiArrowRight,
   FiMenu,
   FiX,
-  FiLogIn, // Import the login icon
+  FiLogIn,
+  FiUsers, // Resource Augmentation
+  FiBriefcase, // Project Management
+  FiCpu, // Product Development
+  FiBox, // OBSE
+  FiFileText, // Vacancies
+  FiUserCheck, // Recruitment Portal
 } from "react-icons/fi";
-import ThemeToggle from "./ThemeToggle"; // Assuming ThemeToggle component exists
+import ThemeToggle from "./ThemeToggle";
-import type { Session } from "@auth/core/types"; // Import Session type for props
+import type { Session } from "@auth/core/types";
 
-const omsLogoUrl = "/oms-logo.svg"; // Ensure this is in your /public folder
+const omsLogoUrl = "/oms-logo.svg";
 
-// --- Basic Dropdown Component ---
-// (Keep the DropdownMenu and DropdownLink component definitions here as before)
 type DropdownMenuProps = {
   trigger: React.ReactNode;
   children: React.ReactNode;
@@ -31,7 +33,6 @@ const DropdownMenu = ({
   children,
   menuClasses = "w-48",
 }: DropdownMenuProps) => (
-  // Using group-focus-within for better keyboard/touch accessibility
   <div className="relative group">
     <button className="flex items-center space-x-1 text-sm font-medium focus:outline-none inherit-color group">
       {trigger}
@@ -40,8 +41,9 @@ const DropdownMenu = ({
     <div
       className={`
         absolute left-0 mt-2 ${menuClasses} origin-top-left rounded-md shadow-lg z-50
-        bg-card border border-border {/* USE SEMANTIC VARS */}
+        bg-card border border-border
-        opacity-0 invisible group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible transition-all duration-200
+        opacity-0 invisible group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible
+        transition-all duration-200
       `}
     >
       <div className="py-1">{children}</div>
@@ -52,101 +54,100 @@ const DropdownMenu = ({
 type DropdownLinkProps = {
   href: string;
   children: React.ReactNode;
-  onClick?: () => void; // Added onClick for mobile menu closure
+  onClick?: () => void;
 };
 const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => (
   <Link
     href={href}
-    onClick={onClick} // Call onClick if provided
+    onClick={onClick}
-    className="block w-full text-left px-4 py-2 text-sm text-card-foreground hover:bg-secondary hover:text-primary" // USE SEMANTIC VARS
+    className="block w-full text-left px-4 py-2 text-sm text-card-foreground hover:bg-secondary hover:text-primary transition-colors duration-150"
   >
     {children}
   </Link>
 );
-// --- End Dropdown Component ---
 
-// --- Define Props for the Client Component ---
 type HeaderClientProps = {
-  session: Session | null; // Accept session from the server component
+  session: Session | null;
-  handleSignIn: () => void; // Pass sign-in handler
+  handleSignIn: () => void;
-  handleSignOut: () => void; // Pass sign-out handler
+  handleSignOut: () => void;
 };
 
-// --- The Main Client Component ---
 const HeaderClient = ({
   session,
   handleSignIn,
   handleSignOut,
 }: HeaderClientProps) => {
-  // --- Client-side state and hooks ---
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  // const pathname = usePathname() || "/"; // Uncomment if needed
-  // const isActive = (path: string) => pathname === path; // Uncomment if needed
-
   const toggleMenu = () => setIsMenuOpen((open) => !open);
   const handleMobileLinkClick = () => setIsMenuOpen(false);
 
-  const currentLogo = omsLogoUrl;
+  const megaMenuTriggerClasses = `
+    relative inline-flex items-center text-sm font-medium text-primary-foreground group
+    hover:opacity-90 transition-opacity duration-150 ease-in-out pb-1
+    after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[2px]
+    after:w-0 after:bg-primary-foreground/80 after:transition-all after:duration-300 after:ease-out
+    group-hover:after:w-full group-focus-within:after:w-full
+  `;
+
+  const megaMenuItemClasses = `
+    flex items-center p-3 -m-3 rounded-lg
+    hover:bg-secondary transition-colors duration-150 ease-in-out group
+  `;
+  const megaMenuIconClasses = `flex-shrink-0 h-6 w-6 text-primary group-hover:text-primary-focus mr-4`;
+  const megaMenuTextWrapperClasses = `text-sm`;
+  const megaMenuTitleClasses = `font-semibold text-card-foreground`;
 
   return (
-    // Use semantic variables for header background and border
     <header className="sticky top-0 z-50 shadow-md bg-background border-b border-border">
       {/* Top Row */}
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
-          {/* Logo */}
           <Link
             href="/"
             className="flex items-center space-x-2"
             title="OMS Home"
           >
             <Image
-              src={currentLogo}
+              src={omsLogoUrl}
               alt="OMS Logo"
               width={40}
               height={40}
               priority
             />
-            {/* Use semantic variable for text color */}
             <span className="text-xl font-bold text-foreground hidden sm:inline">
               Owethu Managed Services
             </span>
           </Link>
 
-          {/* Desktop Navigation */}
           <nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
-            {/* Use semantic variables for text, hover uses primary */}
             <Link
               href="/"
-              className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
+              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
             >
               Home
             </Link>
             <Link
               href="/tech-talk"
-              className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
+              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
             >
               Tech Talk
             </Link>
             <Link
               href="/about"
-              className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
+              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
             >
               About Us
             </Link>
             <Link
               href="/contact"
-              className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
+              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
             >
               Contact Us
             </Link>
           </nav>
 
-          {/* Desktop Utilities */}
           <div className="hidden md:flex items-center space-x-4">
             <ThemeToggle />
-
-            {/* Request Demo Button */}
             <Link
               href="/request-demo"
               className="flex items-center text-sm font-medium bg-primary text-primary-foreground px-3 py-1.5 rounded-lg hover:bg-opacity-90 transition-colors"
@@ -156,39 +157,34 @@ const HeaderClient = ({
               Request OBSE Demo
             </Link>
 
-            {/* --- Auth Section --- */}
             {session?.user ? (
-              // Logged In: User Dropdown
               <DropdownMenu
-                menuClasses="w-40 right-0 left-auto" // Align dropdown to the right
+                menuClasses="w-40 right-0 left-auto"
                 trigger={
                   <div className="flex items-center space-x-2 cursor-pointer hover:opacity-80 transition">
                     <Image
-                      src={session.user.image || "/default-avatar.png"} // Provide a fallback avatar
+                      src={session.user.image || "/default-avatar.png"}
                       alt={session.user.name || "User"}
                       width={32}
                       height={32}
-                      className="rounded-full ring-1 ring-primary ring-offset-2 ring-offset-background" // Added offset
+                      className="rounded-full ring-1 ring-primary ring-offset-2 ring-offset-background"
                     />
-                    {/* Optionally hide name on smaller desktop screens */}
                     <span className="text-sm font-medium text-foreground hidden lg:inline">
                       {session.user.name?.split(" ")[0]}
                     </span>
                   </div>
                 }
               >
-                {/* Sign Out inside the dropdown */}
                 <button
-                  onClick={() => handleSignOut()}
+                  onClick={handleSignOut}
-                  className="block w-full text-left px-4 py-2 text-sm text-destructive hover:bg-secondary hover:text-destructive transition" // Destructive color
+                  className="block w-full text-left px-4 py-2 text-sm text-destructive hover:bg-secondary hover:text-destructive transition"
                 >
                   Sign Out
                 </button>
               </DropdownMenu>
             ) : (
-              // Logged Out: Icon Button to Sign In
               <button
-                onClick={() => handleSignIn()}
+                onClick={handleSignIn}
                 className="p-2 rounded-full text-foreground/70 hover:text-primary hover:bg-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors"
                 title="Sign In"
                 aria-label="Sign In"
@@ -196,15 +192,13 @@ const HeaderClient = ({
                 <FiLogIn className="w-5 h-5" />
               </button>
             )}
-            {/* --- End Auth Section --- */}
           </div>
 
-          {/* Mobile Buttons */}
           <div className="md:hidden flex items-center">
-            <ThemeToggle /> {/* Theme toggle remains */}
+            <ThemeToggle />
             <button
               onClick={toggleMenu}
-              className="text-foreground/60 hover:text-primary focus:outline-none ml-3" // Use semantic muted color, hover primary
+              className="text-foreground/60 hover:text-primary focus:outline-none ml-3"
               aria-label="Toggle menu"
               aria-expanded={isMenuOpen}
               aria-controls="mobile-menu"
@@ -219,39 +213,144 @@ const HeaderClient = ({
         </div>
       </div>
 
-      {/* Secondary Row (Desktop Only) */}
+      {/* Secondary Row w/ Mega Menus */}
-      <div className="bg-primary">
+      <div className="bg-primary relative">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8">
           <div className="hidden md:flex justify-between items-center h-12">
-            <nav className="flex items-center space-x-6 lg:space-x-8 text-primary-foreground">
+            <nav className="flex items-center space-x-8 lg:space-x-10">
-              <div className="hover:text-opacity-80 transition-opacity">
+              {/* Services */}
-                <DropdownMenu trigger={<span>Services</span>}>
+              <div className="group">
-                  <DropdownLink href="/services/resource-augmentation">
+                <button className={megaMenuTriggerClasses}>
-                    Resource Augmentation
+                  Services
-                  </DropdownLink>
+                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
-                  <DropdownLink href="/services/project-management">
+                </button>
-                    Project Management
+                <div
-                  </DropdownLink>
+                  className={`
-                  <DropdownLink href="/services/product-development">
+                    absolute left-0 top-full w-full shadow-lg z-40
-                    Product Development
+                    bg-card border-x border-b border-border rounded-b-lg
-                  </DropdownLink>
+                    opacity-0 invisible translate-y-[-10px]
-                </DropdownMenu>
+                    group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
+                    transition-all duration-300 ease-out transform
+                  `}
+                >
+                  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
+                      <Link
+                        href="/services/resource-augmentation"
+                        className={megaMenuItemClasses}
+                      >
+                        <FiUsers className={megaMenuIconClasses} />
+                        <div className={megaMenuTextWrapperClasses}>
+                          <p className={megaMenuTitleClasses}>
+                            Resource Augmentation
+                          </p>
+                        </div>
+                      </Link>
+                      <Link
+                        href="/services/project-management"
+                        className={megaMenuItemClasses}
+                      >
+                        <FiBriefcase className={megaMenuIconClasses} />
+                        <div className={megaMenuTextWrapperClasses}>
+                          <p className={megaMenuTitleClasses}>
+                            Project Management
+                          </p>
+                        </div>
+                      </Link>
+                      <Link
+                        href="/services/product-development"
+                        className={megaMenuItemClasses}
+                      >
+                        <FiCpu className={megaMenuIconClasses} />
+                        <div className={megaMenuTextWrapperClasses}>
+                          <p className={megaMenuTitleClasses}>
+                            Product Development
+                          </p>
+                        </div>
+                      </Link>
+                    </div>
+                    <div className="mt-6 pt-4 border-t border-border flex justify-end">
+                      <Link
+                        href="/services"
+                        className="flex items-center text-sm font-medium text-primary hover:underline"
+                      >
+                        Explore All Services
+                        <FiArrowRight className="w-4 h-4 ml-1" />
+                      </Link>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div className="hover:text-opacity-80 transition-opacity">
+              {/* Products */}
-                <DropdownMenu trigger={<span>Products</span>}>
+              <div className="group">
-                  <DropdownLink href="/obse">OBSE</DropdownLink>
+                <button className={megaMenuTriggerClasses}>
-                </DropdownMenu>
+                  Products
+                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
+                </button>
+                <div
+                  className={`
+                    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]
+                    group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
+                    transition-all duration-300 ease-out transform
+                  `}
+                >
+                  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                    <div className="max-w-md">
+                      <Link href="/obse" className={megaMenuItemClasses}>
+                        <FiBox className={megaMenuIconClasses} />
+                        <div className={megaMenuTextWrapperClasses}>
+                          <p className={megaMenuTitleClasses}>OBSE Platform</p>
+                        </div>
+                      </Link>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div className="hover:text-opacity-80 transition-opacity">
+              {/* Join Our Team */}
-                <DropdownMenu trigger={<span>Join Our Team</span>}>
+              <div className="group">
-                  <DropdownLink href="/vacancies">Vacancies</DropdownLink>
+                <button className={megaMenuTriggerClasses}>
-                  <DropdownLink href="/portal">Recruitment Portal</DropdownLink>
+                  Join Our Team
-                </DropdownMenu>
+                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
+                </button>
+                <div
+                  className={`
+                    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]
+                    group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
+                    transition-all duration-300 ease-out transform
+                  `}
+                >
+                  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
+                      <Link href="/vacancies" className={megaMenuItemClasses}>
+                        <FiFileText className={megaMenuIconClasses} />
+                        <div className={megaMenuTextWrapperClasses}>
+                          <p className={megaMenuTitleClasses}>
+                            Current Vacancies
+                          </p>
+                        </div>
+                      </Link>
+                      <Link href="/portal" className={megaMenuItemClasses}>
+                        <FiUserCheck className={megaMenuIconClasses} />
+                        <div className={megaMenuTextWrapperClasses}>
+                          <p className={megaMenuTitleClasses}>
+                            Recruitment Portal
+                          </p>
+                        </div>
+                      </Link>
+                    </div>
+                  </div>
+                </div>
               </div>
             </nav>
+
+            {/* ← Here’s the Explore Our Offerings link, back in its original spot */}
             <Link
               href="/services"
-              className="flex items-center text-sm font-medium text-primary-foreground hover:text-opacity-80 transition-opacity group"
+              className="flex items-center text-sm font-medium text-primary-foreground hover:opacity-80 transition-opacity group"
             >
               Explore Our Offerings
               <FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
@@ -260,21 +359,16 @@ const HeaderClient = ({
         </div>
       </div>
 
-      {/* Mobile Menu Panel */}
+      {/* Mobile Menu */}
       <div
         id="mobile-menu"
-        // Use semantic variables for background and border
         className={`md:hidden absolute top-full left-0 w-full shadow-lg transition-all duration-300 ease-in-out overflow-hidden bg-card border-t border-border ${
           isMenuOpen
             ? "max-h-[calc(100vh-4rem)] py-4 overflow-y-auto"
-            : "max-h-0 py-0" // Animate height, allow scroll
+            : "max-h-0 py-0"
         }`}
       >
-        {/* Use semantic variable for text color */}
         <nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-1 text-foreground">
-          {" "}
-          {/* Reduced space-y */}
-          {/* Mobile Links */}
           <DropdownLink href="/" onClick={handleMobileLinkClick}>
             Home
           </DropdownLink>
@@ -305,41 +399,33 @@ const HeaderClient = ({
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Products
           </span>
-          <DropdownLink href="/products/obse" onClick={handleMobileLinkClick}>
+          <DropdownLink href="/obse" onClick={handleMobileLinkClick}>
             OBSE
           </DropdownLink>
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Join Us
           </span>
-          <DropdownLink
+          <DropdownLink href="/vacancies" onClick={handleMobileLinkClick}>
-            href="/join-us/vacancies"
-            onClick={handleMobileLinkClick}
-          >
             Vacancies
           </DropdownLink>
-          <DropdownLink href="/join-us/portal" onClick={handleMobileLinkClick}>
+          <DropdownLink href="/portal" onClick={handleMobileLinkClick}>
             Recruitment Portal
           </DropdownLink>
           <DropdownLink href="/contact" onClick={handleMobileLinkClick}>
             Contact Us
           </DropdownLink>
-          {/* Demo Button */}
           <div className="pt-4">
             <Link
               href="/request-demo"
               onClick={handleMobileLinkClick}
-              // Use semantic variables for button style
               className="flex w-full justify-center items-center text-sm font-medium bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"
               title="Request a Demo"
             >
-              <FiClipboard className="w-4 h-4 mr-1.5" />
+              <FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
-              Request OBSE Demo
             </Link>
           </div>
-          {/* Auth Buttons in Mobile Menu */}
           <div className="pt-4 border-t border-border mt-4">
             {session?.user ? (
-              // Sign Out Button (Text)
               <button
                 onClick={() => {
                   handleSignOut();
@@ -350,7 +436,6 @@ const HeaderClient = ({
                 Sign Out
               </button>
             ) : (
-              // Sign In Button (Text or Icon+Text)
               <button
                 onClick={() => {
                   handleSignIn();
@@ -358,8 +443,7 @@ const HeaderClient = ({
                 }}
                 className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-foreground hover:bg-secondary hover:text-primary transition"
               >
-                <FiLogIn className="w-4 h-4 mr-2" /> {/* Added icon here too */}
+                <FiLogIn className="w-4 h-4 mr-2" /> Sign In
-                Sign In
               </button>
             )}
           </div>