product development added

app/(website)/services/product-development/page.tsx

@@ -0,0 +1,537 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Metadata } from "next";
+import {
+  FaArrowRight,
+  FaCheckCircle,
+  FaCogs,
+  FaDraftingCompass,
+  FaHandshake,
+  FaHeadset,
+  FaLaptopCode,
+  FaLightbulb,
+  FaPuzzlePiece,
+  FaRocket,
+  FaSearch,
+  FaShieldAlt,
+  FaSyncAlt,
+  FaTools,
+  FaUserCheck,
+  FaUsersCog,
+  FaExclamationTriangle,
+  FaFileInvoiceDollar,
+  FaPhone,
+  FaEnvelope,
+} from "react-icons/fa";
+import { COLORS } from "@/constants";
+import ContactForm from "@/components/ContactForm";
+
+// SEO Metadata
+export const metadata: Metadata = {
+  title: "Custom Software Development South Africa | Tailored Solutions by OMS",
+  description:
+    "OMS builds custom software solutions when off-the-shelf products don't fit. Leverage our expertise, proven by projects like OBSE, to solve your unique business challenges in South Africa.",
+  keywords: [
+    "custom software development",
+    "bespoke software",
+    "tailored software solutions",
+    "software development South Africa",
+    "business process automation",
+    "enterprise software",
+    "fintech development",
+    "OMS",
+    "Owethu Management Services",
+    "product development",
+    "custom applications",
+  ],
+  openGraph: {
+    title:
+      "Custom Software Development South Africa | Tailored Solutions by OMS",
+    description:
+      "Partner with OMS to develop custom software perfectly aligned with your business needs.",
+    url: "https://www.oms.africa/services/product-development", // Replace with your actual URL
+    images: [
+      {
+        url: "/images/product-dev-og-image.png", // Replace with an appropriate OG image URL
+        width: 1200,
+        height: 630,
+        alt: "OMS Custom Software Development",
+      },
+    ],
+    locale: "en_ZA",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title:
+      "Custom Software Development South Africa | Tailored Solutions by OMS",
+    description:
+      "Build the exact software you need with OMS's expert development services.",
+    // images: ['/images/product-dev-twitter-image.png'], // Replace if needed
+  },
+};
+
+interface StepItem {
+  icon: React.ElementType;
+  title: string;
+  description: string;
+}
+
+const developmentProcess: StepItem[] = [
+  {
+    icon: FaSearch,
+    title: "Discovery & Consultation",
+    description:
+      "We start by deeply understanding your business challenges, goals, and specific requirements.",
+  },
+  {
+    icon: FaDraftingCompass,
+    title: "Solution Design & Architecture",
+    description:
+      "Our experts design a robust, scalable, and secure software architecture tailored to your needs.",
+  },
+  {
+    icon: FaLaptopCode,
+    title: "Agile Development & Iteration",
+    description:
+      "We build your software using agile methodologies, ensuring flexibility and regular feedback loops.",
+  },
+  {
+    icon: FaCheckCircle,
+    title: "Rigorous Testing & QA",
+    description:
+      "Comprehensive testing ensures the software is reliable, performs optimally, and meets all requirements.",
+  },
+  {
+    icon: FaRocket,
+    title: "Deployment & Integration",
+    description:
+      "We manage the deployment process and ensure seamless integration with your existing systems.",
+  },
+  {
+    icon: FaHeadset,
+    title: "Ongoing Support & Maintenance",
+    description:
+      "We offer continued support and maintenance options to keep your software running smoothly.",
+  },
+];
+
+const coreBenefits: StepItem[] = [
+  {
+    icon: FaPuzzlePiece,
+    title: "Perfect Fit Solution",
+    description:
+      "Software designed precisely for your unique workflows and business logic.",
+  },
+  {
+    icon: FaSyncAlt,
+    title: "Increased Efficiency",
+    description:
+      "Automate manual tasks and streamline operations for significant productivity gains.",
+  },
+  {
+    icon: FaUsersCog,
+    title: "Competitive Advantage",
+    description:
+      "Gain an edge with unique capabilities that off-the-shelf software cannot provide.",
+  },
+  {
+    icon: FaCogs,
+    title: "Scalability & Flexibility",
+    description:
+      "Build solutions that can grow and adapt alongside your business needs.",
+  },
+  {
+    icon: FaShieldAlt,
+    title: "Enhanced Security",
+    description:
+      "Incorporate specific security measures tailored to your data and compliance requirements.",
+  },
+  {
+    icon: FaHandshake,
+    title: "Seamless Integration",
+    description:
+      "Ensure smooth data flow between your custom software and other business systems.",
+  },
+];
+
+export default function ProductDevelopmentPage() {
+  return (
+    <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
+      {/* 1. Hero Section */}
+      <section className="relative bg-gradient-to-r from-blue-900 via-blue-800 to-gray-900 text-white py-20 md:py-32">
+        <div className="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
+        <div className="container mx-auto px-6 text-center relative z-10">
+          <h1
+            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
+            style={{ color: COLORS.primary }} // Use gold color
+          >
+            Build Your Vision: Custom Software Development by OMS
+          </h1>
+          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
+            When off-the-shelf isn&apos;t enough, OMS crafts bespoke software
+            solutions tailored precisely to your unique business challenges and
+            opportunities.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            <Link
+              href="#our-solution"
+              className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
+              style={{ backgroundColor: COLORS.primary }}
+            >
+              Discover Our Approach
+            </Link>
+            <Link
+              href="#contact"
+              className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"
+              style={{ color: COLORS.primary }}
+            >
+              Discuss Your Project <FaArrowRight className="ml-2" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 2. The Challenge Section */}
+      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-12 md:mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              The Limits of Standard Software
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Off-the-shelf software offers convenience but often falls short
+              when faced with unique business processes, specific integration
+              needs, or the desire for a true competitive differentiator.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[
+              {
+                icon: FaPuzzlePiece,
+                title: "Inflexible Workflows",
+                desc: "Forcing your processes to fit generic software limitations hinders efficiency.",
+              },
+              {
+                icon: FaExclamationTriangle,
+                title: "Missing Features",
+                desc: "Lacking critical functionality specific to your industry or business model.",
+              },
+              {
+                icon: FaFileInvoiceDollar,
+                title: "Costly Customization & Licenses",
+                desc: "Expensive add-ons or per-user fees that don't fully solve the core problem.",
+              },
+              {
+                icon: FaSyncAlt,
+                title: "Integration Headaches",
+                desc: "Difficulty connecting standard software with your existing systems and data.",
+              },
+              {
+                icon: FaTools,
+                title: "Lack of Competitive Edge",
+                desc: "Using the same tools as everyone else limits opportunities for innovation.",
+              },
+              {
+                icon: FaUsersCog,
+                title: "Scalability Constraints",
+                desc: "Outgrowing the capabilities or cost-effectiveness of standard solutions.",
+              },
+            ].map((item) => (
+              <div
+                key={item.title}
+                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
+              >
+                <item.icon
+                  className="text-4xl text-red-500 dark:text-red-400 mx-auto mb-4" // Using red for challenges
+                />
+                <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
+                  {item.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm">
+                  {item.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 3. Our Solution Section */}
+      <section
+        id="our-solution"
+        className="py-16 md:py-24 bg-white dark:bg-gray-900"
+      >
+        <div className="container mx-auto px-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
+                OMS Custom Development: Software Built For You
+              </h2>
+              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
+                We specialize in designing, developing, and deploying bespoke
+                software applications that precisely match your operational
+                needs and strategic goals. From automating complex workflows to
+                creating unique customer experiences, we build solutions that
+                deliver tangible results.
+              </p>
+              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-semibold">
+                Our approach combines technical expertise with a deep
+                understanding of business processes, ensuring the final product
+                is not just functional, but truly transformative.
+              </p>
+            </div>
+            <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
+              <Image
+                src="/images/custom-dev-placeholder.svg" // Replace with relevant image (e.g., code, blueprint, team working)
+                alt="Custom Software Development Process"
+                layout="fill"
+                objectFit="cover"
+                className="bg-gray-200 dark:bg-gray-700"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Our Expertise Section (Showcasing OBSE) */}
+      <section className="py-16 md:py-24 bg-gray-800 text-white">
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-12 md:mb-16">
+            <FaLightbulb
+              className="text-5xl text-gold-500 mx-auto mb-4"
+              style={{ color: COLORS.primary }}
+            />
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins mb-4">
+              Proven Expertise in Complex Solutions
+            </h2>
+            <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-6">
+              Our capabilities are demonstrated by our successful development of
+              sophisticated platforms like OBSE (Optimised Bank Statement
+              Extractor). This project showcases our ability to:
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
+            {[
+              {
+                title: "Handle Complex Data",
+                desc: "Develop systems that process and structure intricate data from varied sources.",
+                icon: FaCogs,
+              },
+              {
+                title: "Integrate Advanced Tech",
+                desc: "Leverage OCR, machine learning, and robust APIs for powerful functionality.",
+                icon: FaLaptopCode,
+              },
+              {
+                title: "Build Scalable Platforms",
+                desc: "Create solutions designed for high performance and future growth.",
+                icon: FaRocket,
+              },
+              {
+                title: "Focus on User Experience",
+                desc: "Design intuitive interfaces that enhance usability and productivity.",
+                icon: FaUserCheck,
+              },
+            ].map((item) => (
+              <div
+                key={item.title}
+                className="bg-gray-700 p-6 rounded-lg text-center"
+              >
+                <item.icon
+                  className="text-4xl text-gold-500 mx-auto mb-4"
+                  style={{ color: COLORS.primary }}
+                />
+                <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
+                  {item.title}
+                </h4>
+                <p className="text-gray-300 text-sm">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+          <p className="text-center mt-8 text-gray-300 max-w-3xl mx-auto">
+            This experience equips us to tackle diverse custom development
+            challenges across various industries, particularly within the
+            financial technology sector.
+          </p>
+        </div>
+      </section>
+
+      {/* 5. Our Process Section */}
+      <section className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-12 md:mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              Our Collaborative Development Journey
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              We follow a structured yet flexible process to ensure your project
+              is delivered successfully, on time, and within budget.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {developmentProcess.map((step) => (
+              <div
+                key={step.title}
+                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex items-start space-x-4"
+              >
+                <step.icon
+                  className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0"
+                  style={{ color: COLORS.primary }}
+                />
+                <div>
+                  <h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white">
+                    {step.title}
+                  </h4>
+                  <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 6. Benefits Section */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-12 md:mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              Advantages of a Custom-Built Solution
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Investing in custom software development offers significant,
+              long-term benefits for your organization.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {coreBenefits.map((benefit) => (
+              <div
+                key={benefit.title}
+                className="relative bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm border-t-4 border-gold-500 dark:border-gold-400 transition-shadow hover:shadow-md"
+                style={{ borderColor: COLORS.primary }}
+              >
+                <benefit.icon
+                  className="text-3xl mb-3 text-gold-500 dark:text-gold-400"
+                  style={{ color: COLORS.primary }}
+                />
+                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
+                  {benefit.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                  {benefit.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 7. Call to Action (CTA) Section */}
+      <section
+        className="py-16 md:py-24 bg-gold-500 text-gray-900"
+        style={{ backgroundColor: COLORS.primary }}
+      >
+        <div className="container mx-auto px-6 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
+            Ready to Build Your Unique Software Solution?
+          </h2>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
+            Let&apos;s discuss your specific needs and explore how OMS can
+            develop custom software to drive your business forward. Schedule a
+            consultation with our experts today.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            <Link
+              href="/contact?subject=Custom Development Inquiry" // Pre-fill subject
+              className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
+            >
+              Request a Consultation
+            </Link>
+            <Link
+              href="#contact" // Link to contact section below
+              className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
+            >
+              Contact Us
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 8. Contact Information Section */}
+      <section
+        id="contact"
+        className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
+      >
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              Get in Touch
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Have a project in mind or need more information about our custom
+              development services? Reach out today.
+            </p>
+          </div>
+          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+            {/* Contact Details */}
+            <div className="space-y-6">
+              <div className="flex items-center space-x-4">
+                <FaPhone
+                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
+                  style={{ color: COLORS.primary }}
+                />
+                <div>
+                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
+                    Phone
+                  </h3>
+                  <a
+                    href="tel:+27120513281"
+                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
+                  >
+                    (012) 051 3281
+                  </a>
+                </div>
+              </div>
+              <div className="flex items-center space-x-4">
+                <FaEnvelope
+                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
+                  style={{ color: COLORS.primary }}
+                />
+                <div>
+                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
+                    Email
+                  </h3>
+                  <a
+                    href="mailto:info@oms.africa?subject=Custom Development Inquiry" // General info or specific contact
+                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
+                  >
+                    info@oms.africa
+                  </a>{" "}
+                  {/* Or use Zanelem@oms.africa if preferred */}
+                </div>
+              </div>
+              <Link
+                href="/contact"
+                className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300"
+                style={{ color: COLORS.primary }}
+              >
+                Go to Full Contact Page <FaArrowRight className="ml-2" />
+              </Link>
+            </div>
+
+            {/* Contact Form */}
+            <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
+                Send Us Your Inquiry
+              </h3>
+              <ContactForm />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

components/HeaderClient.tsx

@@ -10,47 +10,17 @@ import {
   FiArrowRight,
   FiMenu,
   FiX,
-  FiLogIn,
+  FiUsers,
-  FiUsers, // Resource Augmentation
+  FiBriefcase,
-  FiBriefcase, // Project Management
+  FiCpu,
-  FiCpu, // Product Development
+  FiBox,
-  FiBox, // OBSE
+  FiFileText,
-  FiFileText, // Vacancies
+  FiUserCheck,
-  FiUserCheck, // Recruitment Portal
 } from "react-icons/fi";
 import ThemeToggle from "./ThemeToggle";
-import type { Session } from "@auth/core/types";
 
 const omsLogoUrl = "/oms-logo.svg";
 
-type DropdownMenuProps = {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  menuClasses?: string;
-};
-const DropdownMenu = ({
-  trigger,
-  children,
-  menuClasses = "w-48",
-}: DropdownMenuProps) => (
-  <div className="relative group">
-    <button className="flex items-center space-x-1 text-sm font-medium focus:outline-none inherit-color group">
-      {trigger}
-      <FiChevronDown className="w-4 h-4 transition-transform duration-200 group-hover:rotate-180 group-focus-within:rotate-180" />
-    </button>
-    <div
-      className={`
-        absolute left-0 mt-2 ${menuClasses} origin-top-left rounded-md shadow-lg z-50
-        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
-      `}
-    >
-      <div className="py-1">{children}</div>
-    </div>
-  </div>
-);
-
 type DropdownLinkProps = {
   href: string;
   children: React.ReactNode;
@@ -66,34 +36,36 @@ const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => (
   </Link>
 );
 
-type HeaderClientProps = {
+const HeaderClient = () => {
-  session: Session | null;
-  handleSignIn: () => void;
-  handleSignOut: () => void;
-};
-
-const HeaderClient = ({
-  session,
-  handleSignIn,
-  handleSignOut,
-}: HeaderClientProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const toggleMenu = () => setIsMenuOpen((open) => !open);
   const handleMobileLinkClick = () => setIsMenuOpen(false);
 
+  const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
+  const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
+  const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
+
+  const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
+  const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
+
+  const handleProductsMouseEnter = () => setProductsDropdownOpen(true);
+  const handleProductsMouseLeave = () => setProductsDropdownOpen(false);
+
+  const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
+  const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
+
   const megaMenuTriggerClasses = `
-    relative inline-flex items-center text-sm font-medium text-primary-foreground group
+    relative inline-flex items-center text-sm font-medium text-primary-foreground
     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
+    hover:bg-secondary transition-colors duration-150 ease-in-out
   `;
-  const megaMenuIconClasses = `flex-shrink-0 h-6 w-6 text-primary group-hover:text-primary-focus mr-4`;
+  const megaMenuIconClasses = `flex-shrink-0 h-6 w-6 text-primary mr-4`;
   const megaMenuTextWrapperClasses = `text-sm`;
   const megaMenuTitleClasses = `font-semibold text-card-foreground`;
 
@@ -156,42 +128,6 @@ const HeaderClient = ({
               <FiClipboard className="w-4 h-4 mr-1.5" />
               Request OBSE Demo
             </Link>
-
-            {session?.user ? (
-              <DropdownMenu
-                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"}
-                      alt={session.user.name || "User"}
-                      width={32}
-                      height={32}
-                      className="rounded-full ring-1 ring-primary ring-offset-2 ring-offset-background"
-                    />
-                    <span className="text-sm font-medium text-foreground hidden lg:inline">
-                      {session.user.name?.split(" ")[0]}
-                    </span>
-                  </div>
-                }
-              >
-                <button
-                  onClick={handleSignOut}
-                  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>
-            ) : (
-              <button
-                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"
-              >
-                <FiLogIn className="w-5 h-5" />
-              </button>
-            )}
           </div>
 
           <div className="md:hidden flex items-center">
@@ -219,17 +155,25 @@ const HeaderClient = ({
           <div className="hidden md:flex justify-between items-center h-12">
             <nav className="flex items-center space-x-8 lg:space-x-10">
               {/* Services */}
-              <div className="group">
+              <div
+                className="group"
+                onMouseEnter={handleServicesMouseEnter}
+                onMouseLeave={handleServicesMouseLeave}
+              >
                 <button className={megaMenuTriggerClasses}>
                   Services
-                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
+                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 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
+                    ${
+                      servicesDropdownOpen
+                        ? "opacity-100 visible translate-y-0"
+                        : ""
+                    }
                     transition-all duration-300 ease-out transform
                   `}
                 >
@@ -282,17 +226,25 @@ const HeaderClient = ({
                 </div>
               </div>
               {/* Products */}
-              <div className="group">
+              <div
+                className="group"
+                onMouseEnter={handleProductsMouseEnter}
+                onMouseLeave={handleProductsMouseLeave}
+              >
                 <button className={megaMenuTriggerClasses}>
                   Products
-                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
+                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
                 </button>
                 <div
                   className={`
-                    absolute left-0 top-full w-full shadow-lg z-40
+                    absolute left-0 top-full w-full shadow-lg z-1000
                     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
+                    ${
+                      productsDropdownOpen
+                        ? "opacity-100 visible translate-y-0"
+                        : ""
+                    }
                     transition-all duration-300 ease-out transform
                   `}
                 >
@@ -309,17 +261,25 @@ const HeaderClient = ({
                 </div>
               </div>
               {/* Join Our Team */}
-              <div className="group">
+              <div
+                className="group"
+                onMouseEnter={handleJoinUsMouseEnter}
+                onMouseLeave={handleJoinUsMouseLeave}
+              >
                 <button className={megaMenuTriggerClasses}>
                   Join Our Team
-                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
+                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
                 </button>
                 <div
                   className={`
-                    absolute left-0 top-full w-full shadow-lg z-40
+                    absolute left-0 top-full w-full shadow-lg z-1000
                     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
+                    ${
+                      joinUsDropdownOpen
+                        ? "opacity-100 visible translate-y-0"
+                        : ""
+                    }
                     transition-all duration-300 ease-out transform
                   `}
                 >
@@ -424,29 +384,7 @@ const HeaderClient = ({
               <FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
             </Link>
           </div>
-          <div className="pt-4 border-t border-border mt-4">
+          <div className="pt-4 border-t border-border mt-4"></div>
-            {session?.user ? (
-              <button
-                onClick={() => {
-                  handleSignOut();
-                  handleMobileLinkClick();
-                }}
-                className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-destructive hover:bg-secondary transition"
-              >
-                Sign Out
-              </button>
-            ) : (
-              <button
-                onClick={() => {
-                  handleSignIn();
-                  handleMobileLinkClick();
-                }}
-                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" /> Sign In
-              </button>
-            )}
-          </div>
         </nav>
       </div>
     </header>