Merge pull request #33 from OwethuManagedServices/09-09-2025-/Please-add-a-scroller-onTrusted-By-Industry-Leaders

feat: enhance ClientLogosSection with scrolling functionality and con…

app/(website)/_components/CallToActionSection.tsx

@@ -17,7 +17,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
 }) => {
   return (
     // Use primary background, primary-foreground for text
-    <section className="bg-primary text-primary-foreground py-16 md:py-20">
+    <section className="bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground py-16 md:py-20">
       {" "}
       {/* Adjusted padding */}
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
@@ -30,7 +30,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
         </p>{" "}
         {/* Slightly less emphasis */}
         {/* Button needs contrast on primary bg. Use a secondary/outline/custom variant */}
-        <Button href={buttonHref} variant="secondary" size="lg">
+        <Button href={buttonHref} variant="black" size="lg" >
           {/* Example: Using 'secondary' which uses light/dark gray bg defined in globals */}
           {/* OR custom class: className="bg-background text-foreground hover:bg-background/90" */}
           {buttonText}

app/(website)/_components/ClientLogosSection.tsx

@@ -1,42 +1,85 @@
-// components/ClientLogosSection.tsx
-import React from "react";
+"use client";
+
+import { useRef, useEffect, useState } from "react";
 import Image from "next/image";
 
-// Define structure for client data - focusing on logos now
 type Client = {
   name: string;
-  logoUrl: string; // Expecting actual logo URLs now
+  logoUrl: string;
 };
 
 type ClientLogosSectionProps = {
   title: string;
   description?: string;
   clients: Client[];
-  /** Control animation speed (lower number = faster). Default: 40s */
-  speed?: number;
-  /** Size of the square background container in pixels. Default: 120 */
+  speed?: number; // pixels per frame
   squareSize?: number;
 };
 
-const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
+const ClientLogosSection = ({
   title,
   description,
-  clients = [], // Default to empty array
-  speed = 50, //Default speed in seconds for one full cycle
-  squareSize = 120, // Default size for the square container (e.g., 120px)
-}) => {
-  // Need at least one client to render the marquee
-  if (clients.length === 0) {
-    return null; // Or render a placeholder message if preferred
-  }
+  clients = [],
+  speed = 1,
+  squareSize = 120,
+}: ClientLogosSectionProps) => {
+  if (clients.length === 0) return null;
 
-  // Duplicate the clients for a seamless loop effect
   const extendedClients = [...clients, ...clients];
-
-  const squareDim = `${squareSize}px`; // Convert size to string for inline style
-  const padding = Math.round(squareSize / 6); // Calculate padding based on size (adjust divisor as needed)
+  const squareDim = `${squareSize}px`;
+  const padding = Math.round(squareSize / 6);
   const paddingDim = `${padding}px`;
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [direction, setDirection] = useState<"left" | "right">("left");
+  const [paused, setPaused] = useState(false);
+  let resumeTimeout: NodeJS.Timeout;
+
+  const pauseAndScroll = (dir: "left" | "right") => {
+    if (!scrollRef.current) return;
+
+    setPaused(true);
+
+    // Scroll manually
+    scrollRef.current.scrollBy({
+      left: dir === "left" ? -200 : 200,
+      behavior: "smooth",
+    });
+
+    // Clear previous timeout and resume after 3 seconds
+    clearTimeout(resumeTimeout);
+    resumeTimeout = setTimeout(() => {
+      setPaused(false);
+    }, 3000);
+
+    // Set the direction for automatic scroll after pause
+    setDirection(dir === "left" ? "right" : "left");
+  };
+
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    let animationFrame: number;
+
+    const step = () => {
+      if (!paused) {
+        if (direction === "left") {
+          container.scrollLeft += speed;
+          if (container.scrollLeft >= container.scrollWidth / 2) container.scrollLeft = 0;
+        } else {
+          container.scrollLeft -= speed;
+          if (container.scrollLeft <= 0) container.scrollLeft = container.scrollWidth / 2;
+        }
+      }
+      animationFrame = requestAnimationFrame(step);
+    };
+
+    animationFrame = requestAnimationFrame(step);
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [direction, paused, speed]);
+
   return (
     <section className="py-16 md:py-20 bg-background overflow-hidden">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
@@ -45,19 +88,17 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
         </h2>
       </div>
 
-      {/* Marquee container - group allows pausing animation on hover */}
-      <div className="relative w-full overflow-hidden group">
-        {/* Inner container that will animate */}
+      {/* Logos Container */}
+      <div className="relative w-full overflow-hidden">
         <div
-          className="flex flex-nowrap animate-marquee-continuous"
-          style={{ animationDuration: `${speed}s` }}
+          ref={scrollRef}
+          className="flex flex-nowrap overflow-x-hidden scrollbar-hide"
         >
           {extendedClients.map((client, index) => (
             <div
               key={`${client.name}-${index}`}
               className="flex-shrink-0 mx-12 md:mx-16 py-4"
             >
-              {/* Square Background Container */}
               <div
                 title={client.name}
                 className="
@@ -73,23 +114,35 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
                 style={{
                   width: squareDim,
                   height: squareDim,
-                  padding: paddingDim, // Add padding inside the square
+                  padding: paddingDim,
                 }}
               >
                 <Image
                   src={client.logoUrl}
                   alt={`${client.name} Logo`}
-                  layout="fill" // Let image fill the relative container
-                  objectFit="contain" // Maintain aspect ratio within the container
+                  fill
+                  style={{ objectFit: "contain" }}
                 />
               </div>
             </div>
           ))}
         </div>
+      </div>
 
-        {/* Optional: Add fade effect at the edges */}
-        <div className="absolute inset-y-0 left-0 w-16 md:w-24 bg-gradient-to-r from-background to-transparent pointer-events-none z-10"></div>
-        <div className="absolute inset-y-0 right-0 w-16 md:w-24 bg-gradient-to-l from-background to-transparent pointer-events-none z-10"></div>
+      {/* Arrow Controls */}
+      <div className="flex justify-center mt-8 space-x-6">
+        <button
+          onClick={() => pauseAndScroll("right")}
+          className="px-4 py-2 rounded-full bg-muted hover:bg-muted/70 transition"
+        >
+          ←
+        </button>
+        <button
+          onClick={() => pauseAndScroll("left")}
+          className="px-4 py-2 rounded-full bg-muted hover:bg-muted/70 transition"
+        >
+          →
+        </button>
       </div>
 
       {description && (

app/(website)/_components/CoreServicesSection.tsx

@@ -61,9 +61,9 @@ export const defaultCoreServices: ServiceItem[] = [
   },
   {
     icon: FaProjectDiagram,
-    title: "Project Management",
+    title: "IT Implementation",
     description:
-      "Expert management ensuring on-time, within-budget delivery with superior results, risk mitigation, and maximum efficiency.",
+      "Empowering your business through seamless IT rollouts—delivered on time and on budget. We turn complex systems into powerful solutions that drive transformation, reduce risk, and unlock real results. ",
   },
   {
     icon: FaCode,

app/(website)/_components/HeroSection.tsx

@@ -16,15 +16,15 @@ const HeroSection: React.FC<HeroSectionProps> = ({
   title,
   subtitle,
   buttonText,
-  buttonHref,
-  imageUrl = "/hero-bg.jpg", // Default background image
+  //buttonHref,
+  imageUrl = "/hero-bg-2.jpg", // Default background image
 }) => {
   return (
-    <section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center bg-gradient-to-b from-black/10 to-black/40 text-white overflow-hidden">
+    <section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center  text-white overflow-hidden">
       {" "}
-      {/* Adjusted background */}
+      {/* Adjusted background bg-gradient-to-b from-black/10 to-black/40*/}
       {/* Background Image/Video */}
-      <div className="absolute inset-0 z-0 opacity-40 dark:opacity-30">
+      <div className="absolute inset-0 z-0 opacity-100 dark:opacity-30">
         {" "}
         {/* Adjusted opacity */}
         {imageUrl && (
@@ -52,7 +52,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
           {subtitle}
         </p>
         <Button
-          href={buttonHref}
+          href="/obse"
           variant="primary" // Use primary variant defined in Button component
           size="lg"
           className="animate-fade-in-up animation-delay-600"

app/(website)/_components/HeroSectionDynamic.tsx

@@ -17,7 +17,7 @@ const HeroSectionDynamic: React.FC<HeroSectionProps> = ({
   subtitle,
   buttonText,
   buttonHref,
-  imageUrl = "/hero-bg.jpg", // Ensure this high-quality image exists
+  imageUrl = "/hero-bg-2.jpg", // Ensure this high-quality image exists
 }) => {
   return (
     <section className="relative flex items-center bg-background min-h-screen overflow-hidden">

app/(website)/_components/HeroSectionModern.tsx

@@ -17,10 +17,11 @@ const HeroSectionModern: React.FC<HeroSectionProps> = ({
   subtitle,
   buttonText,
   buttonHref,
-  imageUrl = "/hero-bg.jpg", // Default background image - MAKE SURE THIS EXISTS
+  imageUrl = "/hero-bg-2.jpg", // Default background image - MAKE SURE THIS EXISTS
 }) => {
   return (
     // Use min-h-screen for full viewport height adjust if needed
+    //bg-[linear-gradient(to_right,#f0e18a,#f9f4c3,#ecd973)]
     <section className="relative flex flex-col md:flex-row items-center bg-background min-h-[80vh] md:min-h-screen overflow-hidden">
       {/* Background Image/Video Layer */}
       <div className="absolute inset-0 z-0">

app/(website)/about/page.tsx

@@ -15,6 +15,8 @@ import {
   FaUserCheck,
   FaProjectDiagram,
 } from "react-icons/fa";
+import { Metadata } from "next";
+
 
 // const leadershipTeam = [
 //   {
@@ -42,37 +44,54 @@ import {
 //     linkedinUrl: "#",
 //   },
 // ];
+    export const metadata: Metadata = {
+    title: "About Us | Owethu Managed Services (OMS)",
+    description: "Learn about OMS, our mission, vision, and the values that drive us to deliver exceptional IT solutions and services.",
+    keywords: [
+      "Owethu Managed Services",
+      "About OMS",
+      "OMS",
+      "Black-owned ",
+      "Women-owned",
+      "Tech company",
+      "bank statement reader",
+      "fintech solutions" ,
+      
+     ],
+
+    }
+
 
 const coreValues = [
   {
     icon: FaCheckCircle,
     title: "Service",
     description:
-      "Dedicated to providing outstanding service at every touchpoint, meeting the highest standards, and creating lasting impact for our clients.",
+      "We strive to elevate every experience — from client interactions to internal collaborations. With unwavering dedication, we deliver excellence that inspires growth, fosters partnerships, and creates a lasting, positive impact on everyone we touch.",
   },
   {
     icon: FaHandshake,
     title: "Accountability",
     description:
-      "Taking ownership of our actions and delivering on promises with transparency. Our commitment fosters trust and ensures we consistently meet client expectations.",
+      "We embrace ownership with pride, holding ourselves and each other to the highest standards. Our transparency and commitment to our promises build the trust that strengthens relationships, propels progress, and empowers everyone to thrive.",
   },
   {
     icon: FaHeart,
     title: "Passion",
     description:
-      "Driven by a passion for innovation, we embrace new ideas and technologies, constantly seeking ways to improve and deliver creative, boundary-pushing solutions.",
+      "Driven by a relentless passion for innovation, we embrace challenges as opportunities. We inspire creativity, ignite new ideas, and fuel transformation — always seeking to push the limits of what’s possible and make a difference in everything we do.",
   },
   {
     icon: FaComments,
     title: "Communication",
     description:
-      "Clear, consistent, and proactive communication is central. We ensure all stakeholders are aligned, informed, and empowered, fostering collaboration.",
+      "Open, honest, and proactive communication is the bridge that connects us all. We believe in the power of dialogue to align, inspire, and drive collaboration — ensuring that every voice is heard and every idea has the opportunity to flourish.",
   },
   {
     icon: FaShieldAlt,
     title: "Trust",
     description:
-      "Cultivating trust through ethical practices, honesty, and transparency. We uphold the highest integrity for long-term, mutually beneficial relationships.",
+      "At the heart of our work lies unwavering trust. Built on integrity, honesty, and respect, we nurture strong, meaningful relationships that create a foundation for long-term success — together, as partners, as a team, and as a community.",
   },
 ];
 
@@ -125,7 +144,8 @@ const industryExpertise = [
   {
     icon: FaBriefcase,
     industry: "Retail/E-commerce",
-    details: "Describe experience in this sector.",
+    details:
+      "Experience in building scalable e-commerce platforms, optimizing digital customer journeys, enabling secure payment integrations, and leveraging data analytics to drive personalized shopping experiences and operational efficiency.",
   },
 ];
 
@@ -168,26 +188,30 @@ export default function AboutUsPage() {
                 by Purpose
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
-                Expand on the founding story/motivation. E.g., Owethu Managed
-                Services was born from a clear vision: to harness the
-                transformative power of technology not just to solve problems,
-                but to proactively create opportunities for businesses to
-                thrive. We saw a need for a partner who truly understands both
-                technology&apos;s potential and the unique challenges modern
-                organizations face.
+                Owethu Managed Services wasn’t built in a boardroom — it was
+                born from a deeper calling: a desire to do more than simply
+                exist in the tech space. We set out to use innovation not as a
+                buzzword, but as a lifeline — pulling businesses out of
+                stagnation and into a future full of possibility.
+              </p>
+              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
+                From day one, we’ve challenged the status quo. We don’t just fix
+                problems — we anticipate them, reimagine them, and turn them
+                into powerful stepping stones for growth. Our mission is simple:
+                break what seems impossible, and rebuild it into something
+                extraordinary.
               </p>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
-                Elaborate on the journey. E.g., Our journey has been defined by
-                a relentless pursuit of knowledge, adaptation to the
-                ever-evolving tech landscape, and an unwavering commitment to
-                client success. This focus has established us as trusted
-                advisors and thought leaders in digital transformation.
+                Today, OMS is more than a service provider. We are trusted
+                digital transformation partners, creative problem-solvers, and
+                passionate believers in human-driven innovation. This isn’t just
+                business. This is our purpose.
               </p>
             </div>
             <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
               {/* Replace with a relevant, high-quality image representing innovation or teamwork */}
               <Image
-                src="/images/team.svg"
+                src="/about-2.jpg" // Ensure this image exists in your public folder
                 alt="Team collaborating on innovative solutions"
                 layout="fill"
                 objectFit="cover"
@@ -224,9 +248,7 @@ export default function AboutUsPage() {
               <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
                 &quot;To be global leaders in delivering cutting-edge IT
                 solutions, pushing the boundaries of what&apos;s possible,and
-                transforming industries for the better. We aim to empower
-                organisations to break through technological barriers and
-                achieve greater success.&quot;
+                transforming industries for the better.&quot;
               </p>
             </div>
             {/* Mission Card */}
@@ -239,15 +261,12 @@ export default function AboutUsPage() {
                 style={{ color: "#e1c44a" }}
               />
               <h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900 dark:text-white">
-                Our Mission
+                Our Purpose
               </h3>
               <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
-                &quot;We are dedicated to creating tailored, innovative
-                solutions that drive business success. By combining expertise
-                with cutting-edge technology, we solve complex problems and
-                enable our clients to achieve outstanding results. We partner
-                closely with clients to ensure every solution aligns with their
-                unique needs for long-term success.&quot;
+                &quot;Our purpose is to help our clients drive transformative
+                growth and innovation to propel their business forward –
+                redefining whats possible.&quot;
               </p>
             </div>
           </div>
@@ -324,6 +343,7 @@ export default function AboutUsPage() {
           </div>
         </div>
       </section>
+      
       {/* Section 6: Technology Philosophy */}
       <section className="py-16 md:py-24 bg-gray-800 text-white">
         <div className="container mx-auto px-6 text-center">
@@ -378,6 +398,8 @@ export default function AboutUsPage() {
           </div>
         </div>
       </section>
+
+
       {/* Section 7: Core Values (Reusing previous structure, adjusting background) */}
       <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
         <div className="container mx-auto px-6">
@@ -405,6 +427,8 @@ export default function AboutUsPage() {
           </div>
         </div>
       </section>
+
+      
       {/* Section 8: The OMS Partnership */}
       <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
         <div className="container mx-auto px-6">
@@ -430,7 +454,7 @@ export default function AboutUsPage() {
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
                 We believe the best results come from true collaboration. We
-                invest time in understanding your culture, goals, and
+                invest time in understanding your culture, processes, goals, and
                 challenges, working alongside your team as an extension of your
                 own capabilities.
               </p>
@@ -506,7 +530,7 @@ export default function AboutUsPage() {
       */}
       {/* Section 10: Commitment to Impact (Optional, but adds value) */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900 dark:bg-gold-600 dark:text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 dark:bg-gold-600 dark:text-gray-900"
         style={{ backgroundColor: "#e1c44a" }}
       >
         <div className="container mx-auto px-6 text-center">
@@ -516,10 +540,11 @@ export default function AboutUsPage() {
           </h2>
           <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins text-gray-800">
             Ultimately, our success is measured by yours. We are committed to
-            delivering solutions that not only meet technical requirements but
-            also drive efficiency, foster growth, enhance user experiences, and
-            provide a clear return on investment. Let&apos;s build a successful
-            future, together.
+            creating solutions that ignite momentum, unlock potential, and turn
+            ambition into achievement — empowering you to rise above challenges
+            and lead with confidence into the future. Together, let&apos;s build
+            a future where your success is not just a possibility, but a
+            reality.
           </p>
           {/* Optional CTA to contact */}
           <div className="mt-10">

app/(website)/contact/page.tsx

@@ -12,6 +12,7 @@ import {
 import { COLORS } from "@/constants"; // Using COLORS constant
 import ContactForm from "@/components/ContactForm";
 
+
 // Define the structure for FAQ items
 interface FAQItem {
   id: number;
@@ -130,10 +131,10 @@ export default function ContactPage() {
                     Phone
                   </h3>
                   <a
-                    href="tel:+27120513282"
+                    href="tel:+27684855721"
                     className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
                   >
-                    (012) 051 3282
+                    +27 68 485 5721
                   </a>
                 </div>
               </div>

app/(website)/obse/page.tsx

@@ -2,11 +2,9 @@ import Image from "next/image";
 import Link from "next/link";
 import { Metadata } from "next"; // Added import
 import {
-  FaArrowRight,
   FaCheckCircle,
   FaCogs,
   FaDatabase,
-  FaEnvelope,
   FaExclamationTriangle,
   FaFileAlt,
   FaFileInvoiceDollar,
@@ -16,7 +14,6 @@ import {
   FaLaptopCode,
   FaLayerGroup,
   FaLightbulb,
-  FaPhone,
   FaPlayCircle,
   FaPuzzlePiece,
   FaSearchDollar,
@@ -31,7 +28,7 @@ import {
   FaWrench,
 } from "react-icons/fa";
 import { COLORS } from "@/constants"; // Assuming COLORS constant is available
-import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
+// import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
 
 // SEO Metadata
 export const metadata: Metadata = {
@@ -39,7 +36,7 @@ export const metadata: Metadata = {
   description:
     "Revolutionize lending with OBSE: Automated bank statement data extraction, OCR, fraud detection, and analysis for South African financial institutions. Improve accuracy, speed, and decision-making.",
   keywords: [
-    "Optimised Bank Statement Extractor",
+    "Optimized Bank Statement Extractor",
     "OBSE",
     "bank statement extraction",
     "OCR bank statements",
@@ -110,16 +107,16 @@ const keyFeatures: FeatureItem[] = [
   },
   {
     icon: FaSearchDollar,
-    title: "Intelligent Income Detection",
+    title: "Intelligent Income & Salaried Detection",
     description:
-      "Identifies salaried/non-salaried income, provides explanations, and filters out transfers.",
+      "Accurately detects both salaried and non-salaried income, explains findings, and intelligently filters out internal transfers for clearer financial insights. ",
   },
   {
     icon: FaFingerprint,
     title: "Enhanced Fraud Detection",
     description:
       "Detects document tampering, fraudulent insertions, and developing behavioral profiling.",
-    isComingSoon: true,
+    isComingSoon: false,
   },
   {
     icon: FaSyncAlt,
@@ -244,10 +241,11 @@ export default function ObsePage() {
           {/* Consider adding OMS Logo here */}
           {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
           <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
+            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-tight"
+            style={{ color: COLORS.primary }}
           >
-            Revolutionize Your Lending and Credit Processes with OBSE
+            Revolutionize Your Lending and <br />
+            Credit Processes with OBSE
           </h1>
           <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
             Automate data extraction, enhance accuracy, detect fraud, and
@@ -256,13 +254,14 @@ export default function ObsePage() {
           </p>
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
-              href="#how-it-works" // Link to the "How it Works" section
-              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"
+              href="https://youtu.be/Sd3TnvoLtDA?si=UOeXScbosM5LZxbg" // Link to the "How it Works" section
+              className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
               style={{ backgroundColor: COLORS.primary }}
             >
               <FaPlayCircle className="inline mr-2 text-red-400" /> See How It
               Works
             </Link>
+
             {/* Optional Mini-CTA */}
             {/* <Link href="#overview-video" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300">
               <FaPlayCircle className="mr-2" /> Watch a Quick Overview
@@ -324,7 +323,9 @@ export default function ObsePage() {
                 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 to signify pain points
+                  className="text-4xl 0 mx-auto mb-4"
+                  style={{ color: "#e1c44a" }} // Using red to signify pain points
+                  //text-red-500 dark:text-red-40
                 />
                 <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
                   {item.title}
@@ -347,7 +348,7 @@ export default function ObsePage() {
                 OBSE: Automated Accuracy, Speed, and Insight
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
-                Optimised Bank Statement Extractor (OBSE) is an advanced OCR and
+                Optimized Bank Statement Extractor (OBSE) is an advanced OCR and
                 data aggregation platform designed specifically for the South
                 African financial landscape. It seamlessly extracts
                 comprehensive, accurate data from any bank statement (individual
@@ -470,11 +471,11 @@ export default function ObsePage() {
                 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 }}
               >
-                {feature.isComingSoon && (
+                {/*feature.isComingSoon && (
                   <span className="absolute top-2 right-2 px-3 py-1 text-sm font-bold bg-cyan-700 text-white rounded-full shadow-lg z-10 font-poppins">
                     Coming Soon
                   </span>
-                )}
+                )*/}
                 <feature.icon
                   className="text-3xl mb-3 text-gold-500 dark:text-gold-400"
                   style={{ color: COLORS.primary }}
@@ -691,10 +692,10 @@ export default function ObsePage() {
         </div>
       </section>
 
-      {/* 11. About OMS Section (Brief) */}
+      {/* 11. About OMS Section (Brief) 
       <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
         <div className="container mx-auto px-6 text-center">
-          {/* Optional: OMS Logo */}
+          { Optional: OMS Logo }
           <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
             Your Experienced Partner in Financial Technology
           </h2>
@@ -714,10 +715,11 @@ export default function ObsePage() {
           </Link>
         </div>
       </section>
+      /}
 
       {/* 12. Call to Action (CTA) Section */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900"
         style={{ backgroundColor: COLORS.primary }}
       >
         <div className="container mx-auto px-6 text-center">
@@ -731,13 +733,13 @@ export default function ObsePage() {
           </p>
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
-              href="/contact?subject=OBSE Demo Request" // Pre-fill subject for contact form
+              href="/contact" // Pre-fill subject for contact form
               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 Personalized Demo
             </Link>
             <Link
-              href="/contact?subject=OBSE Sales Inquiry" // Pre-fill subject
+              href="/contact" // Pre-fill subject
               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 Sales Team
@@ -753,6 +755,7 @@ export default function ObsePage() {
       </section>
 
       {/* 13. Contact Information Section */}
+      {/*}
       <section 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">
@@ -767,7 +770,10 @@ export default function ObsePage() {
             </p>
           </div>
           <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
-            {/* Contact Details */}
+            { -----Contact Details */}
+
+      {/* Optional: Add a contact form component here if available ---
+            
             <div className="space-y-6">
               <div className="flex items-center space-x-4">
                 <FaPhone
@@ -796,14 +802,16 @@ export default function ObsePage() {
                     Email
                   </h3>
                   <a
-                    href="mailto:Zanelem@oms.africa" // Updated email
+                    href="mailto:hello@oms.africa" // Updated email  //
                     className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                   >
-                    Zanelem@oms.africa
+                    hello@oms.africa
                   </a>
                 </div>
               </div>
-              {/* Optional: Link to main contact page */}
+
+              {--- Optional: Link to main contact page */}
+      {/* --- comment out if not needed}
               <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"
@@ -812,6 +820,7 @@ export default function ObsePage() {
                 Go to Full Contact Page <FaArrowRight className="ml-2" />
               </Link>
             </div>
+              */}
 
       {/* Optional: Simple Contact Form (if ContactForm component is not used/available) */}
       {/* <form className="space-y-4">
@@ -832,7 +841,7 @@ export default function ObsePage() {
               </button>
             </form> */}
 
-            {/* OR Use the ContactForm Component */}
+      {/* OR Use the ContactForm Component 
             <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 a Quick Inquiry
@@ -842,6 +851,9 @@ export default function ObsePage() {
           </div>
         </div>
       </section>
+      */}
+
+      {/* 14. Footer Section */}
     </div>
   );
 }

app/(website)/offerings/page.tsx

@@ -0,0 +1,286 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Metadata } from "next";
+import {
+  FaArrowRight,
+  FaBriefcase,
+  FaCogs,
+  FaHandshake,
+  FaLaptopCode,
+  FaProjectDiagram,
+  FaUsers,
+  FaWrench,
+  FaShippingFast,
+} from "react-icons/fa";
+import { COLORS } from "@/constants"; // Assuming COLORS constant is available
+
+// SEO Metadata
+export const metadata: Metadata = {
+  title: "IT Services & Solutions | OMS South Africa",
+  description:
+    "Explore IT services by Owethu Managed Services (OMS): Custom Software Development, IT Resource Augmentation, and the OBSE Bank Statement Extractor. Partner with us for innovative solutions.",
+  keywords: [
+    "IT services South Africa",
+    "custom software development",
+    "IT resource augmentation",
+    "managed IT services",
+    "OBSE",
+    "bank statement automation",
+    "fintech solutions",
+    "IT consulting",
+    "OMS",
+    "CVEvolve",
+    "Owethu Managed Services",
+    "Centurion",
+    "Gauteng",
+  ],
+  openGraph: {
+    title: "Comprehensive IT Services & Solutions | OMS South Africa",
+    description:
+      "OMS offers tailored IT solutions including custom development, resource augmentation, and specialized products like OBSE.",
+    url: "https://oms.africa/services", // Update with the final URL
+    images: [
+      {
+        url: "/images/oms-services-og.png", // Replace with an appropriate OG image URL
+        width: 1200,
+        height: 630,
+        alt: "OMS IT Services",
+      },
+    ],
+    locale: "en_ZA",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Comprehensive IT Services & Solutions | OMS South Africa",
+    description:
+      "Partner with OMS for expert IT services, from custom builds to resource scaling.",
+    // images: ['/images/oms-services-twitter.png'], // Replace if needed
+  },
+};
+
+// Data for Service Areas
+const serviceAreas = [
+  {
+    title: "Custom Software Development & Consulting",
+    icon: FaLaptopCode,
+    description:
+      "We design, build, and implement bespoke software solutions tailored to your unique business challenges and objectives. Our consulting services help align technology with your strategic goals.",
+    imageUrl: "/custome-software-3.png", // Reusing image from Custom Software Development
+    //imageUrl: "/images/team.svg", // Reusing image from About
+    link: "/contact?subject=Custom Development Inquiry", // Link to contact or a future dedicated page
+    linkText: "Discuss Your Project",
+  },
+  {
+    title: "IT Resource Augmentation",
+    icon: FaUsers,
+    description:
+      "Scale your team effectively with our flexible resource augmentation model. Access skilled IT professionals (BAs, Testers, Developers, Designers) on demand or via managed milestone-based projects.",
+    imageUrl: "/images/team-collaborative-2.png", // Reusing image from Resource Augmentation
+    link: "/services/resource-augmentation",
+    linkText: "Explore Augmentation",
+  },
+  {
+    title: "OBSE - Bank Statement Extractor",
+    icon: FaShippingFast,
+    description:
+      "Automate bank statement processing with OBSE. Our intelligent OCR solution extracts data accurately and quickly, enhancing efficiency, reducing risk, and speeding up financial assessments.",
+    imageUrl: "/images/obse.svg", // Reusing image from OBSE
+    link: "/obse",
+    linkText: "Learn About OBSE",
+  },
+];
+
+const ourApproachItems = [
+  {
+    icon: FaProjectDiagram,
+    title: "Strategic Alignment",
+    description: "Understanding your goals to ensure solutions deliver value.",
+  },
+  {
+    icon: FaHandshake,
+    title: "Client-Centric Collaboration",
+    description: "Working as true partners, involving you throughout.",
+  },
+  {
+    icon: FaCogs,
+    title: "Agile & Adaptive Delivery",
+    description: "Flexible methodologies for faster, relevant results.",
+  },
+  {
+    icon: FaWrench,
+    title: "Technical Excellence",
+    description: "Building robust, scalable, and maintainable solutions.",
+  },
+];
+
+export default function ServicesPage() {
+  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-gray-800 via-gray-700 to-gray-900 text-white py-20 md:py-32">
+        <div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></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 }}
+          >
+            Tailored IT Services & Solutions
+          </h1>
+          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
+            Owethu Managed Services empowers businesses through innovative
+            technology solutions, strategic consulting, flexible resource
+            augmentation, and specialized product offerings.
+          </p>
+          <Link
+            href="#core-services"
+            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 }}
+          >
+            Explore Our Services <FaArrowRight className="ml-2" />
+          </Link>
+        </div>
+      </section>
+
+      {/* 2. Core Service Areas Section */}
+      <section
+        id="core-services"
+        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">
+              Our Expertise, Your Advantage
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              We offer a comprehensive suite of services designed to address
+              your specific IT needs and drive business growth.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {serviceAreas.map((service) => (
+              <div
+                key={service.title}
+                className="flex flex-col bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:-translate-y-1"
+              >
+                <div className="relative h-48 w-full">
+                  <Image
+                    src={service.imageUrl}
+                    alt={`${service.title} illustration`}
+                    layout="fill"
+                    objectFit="contain" // Changed to contain for SVG/Illustrations
+                    className="p-4 bg-gray-100 dark:bg-gray-700 z-10" // Added padding and bg
+                  />
+                </div>
+                <div className="p-6 flex flex-col flex-grow">
+                  <div className="flex items-center mb-3">
+                    <service.icon
+                      className="text-2xl mr-3 flex-shrink-0"
+                      style={{ color: COLORS.primary }}
+                    />
+                    <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white">
+                      {service.title}
+                    </h3>
+                  </div>
+                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-4 flex-grow">
+                    {service.description}
+                  </p>
+                  <Link
+                    href={service.link}
+                    className="inline-flex items-center mt-auto text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 text-sm"
+                    style={{ color: COLORS.primary }}
+                  >
+                    {service.linkText} <FaArrowRight className="ml-2" />
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 3. Our Approach 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-14">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              How We Deliver Excellence
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
+              Our methodology ensures collaboration, precision, and impactful
+              results tailored to your project needs.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {ourApproachItems.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-2 hover:shadow-xl dark:hover:shadow-gold-500/20"
+              >
+                <item.icon
+                  className="text-4xl text-gold-500 mx-auto mb-5"
+                  style={{ color: COLORS.primary }}
+                />
+                <h4 className="text-xl font-semibold mb-3 font-poppins dark:text-white">
+                  {item.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Industry Expertise Snippet (Optional) */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6 text-center">
+          <FaBriefcase
+            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 text-gray-900 dark:text-white mb-4">
+            Serving Diverse Industries
+          </h2>
+          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-8">
+            We apply our technical expertise across various sectors,
+            understanding the unique challenges and opportunities within each.
+            Key areas include Financial Services, Automotive, Technology, and
+            more.
+          </p>
+          <Link
+            href="/about#industry-expertise" // Assuming you add an ID to the section in about page
+            className="text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 inline-flex items-center"
+            style={{ color: COLORS.primary }}
+          >
+            Learn More About Our Industry Focus{" "}
+            <FaArrowRight className="ml-2" />
+          </Link>
+        </div>
+      </section>
+
+      {/* 5. 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">
+            Let&apos;s Build Your Solution
+          </h2>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
+            Ready to discuss how OMS can help you achieve your technology goals?
+            Contact us today for a consultation.
+          </p>
+          <Link
+            href="/contact"
+            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"
+          >
+            Get in Touch
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}

app/(website)/page.tsx

@@ -14,6 +14,7 @@ import FeaturedProductSection, {
 } from "./_components/FeaturedProductSection";
 import { getHome } from "@/lib/query/home";
 
+
 export default async function HomePage() {
   // Explicitly type the data variable, assuming getHome returns HeroSectionType or null/undefined
   const data = await getHome();
@@ -39,9 +40,10 @@ export default async function HomePage() {
         buttonText={data.hero_buttons?.[0]?.label || "Learn More"} // Use optional chaining and provide a default
         buttonHref={data.hero_buttons?.[0]?.link || "/about"} // Use optional chaining and provide a default
         imageUrl={
-          data.hero_cover
-            ? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
-            : "/hero-bg.jpg"
+          // data.hero_cover
+           // ? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
+           // : "/hero-bg-2.jpg"
+            "/banner-1.jpeg"
         } // Use optional chaining and provide a default
       />
       <CoreServicesSection
@@ -58,10 +60,10 @@ export default async function HomePage() {
         eyebrow="Featured Product"
         title="Streamline Financial Analysis with"
         productName="OBSE"
-        description="Our advanced Optimised Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights."
+        description="Our advanced Optimized Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights."
         features={defaultObseFeatures}
         buttonText="Learn More & Demo"
-        buttonHref="/products/obse" // Link to the OBSE product page
+        buttonHref="/obse" // Link to the OBSE product page
         imageUrl="/images/obse.svg" // **IMPORTANT: Create or find a relevant image**
         imageAlt="OBSE Product Interface Mockup"
       />

app/(website)/portal/page.tsx

@@ -8,6 +8,7 @@ export const metadata: Metadata = {
   description:
     "Our recruitment portal is currently under development. Stay tuned for updates on career opportunities at Owethu Managed Services.",
   robots: "noindex, nofollow", // Prevent indexing of the coming soon page
+
 };
 
 export default function RecruitmentPortalPage() {

app/(website)/services/page.tsx

@@ -25,6 +25,8 @@ export const metadata: Metadata = {
     "IT resource augmentation",
     "managed IT services",
     "OBSE",
+    "CVEvolve",
+    "bank statement extractor",
     "bank statement automation",
     "fintech solutions",
     "IT consulting",

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

@@ -0,0 +1,618 @@
+import Link from "next/link";
+import { Metadata } from "next";
+import {
+  FaArrowRight,
+  FaDraftingCompass,
+  FaHandshake,
+  FaHeadset,
+  FaLaptopCode, // For Web App Dev, Backend
+  FaLightbulb, // For Ideation, Innovation
+  FaPuzzlePiece, // For Custom Software Solutions
+  FaRocket, // For Product Launch, Scalable Tech
+  FaSearch, // For User Research
+  FaShieldAlt, // For Security Testing
+  FaSyncAlt, // For Agile, Iteration
+  FaUserCheck, // For User-Centred Design, Usability Testing
+  FaUsersCog, // For Dedicated Teams
+  // Additional icons that might be useful for the new content:
+  FaMobileAlt, // For Mobile Apps
+  FaDesktop, // For Desktop Apps
+  FaBrain, // For AI & ML
+  FaCubes, // For Blockchain (alternative: FaLink)
+  FaNetworkWired, // For IoT (alternative: FaBroadcastTower)
+  FaBullseye, // For Market Strategy
+  FaChartLine, // For Growth/Scalability
+  FaTasks, // For QA
+  FaComments, // For Feedback
+  //FaPhone,
+  //FaEnvelope,
+} from "react-icons/fa";
+import { COLORS } from "@/constants";
+//import ContactForm from "@/components/ContactForm";
+
+// SEO Metadata
+export const metadata: Metadata = {
+  title: "Product Development Services | Digital Solutions by OMS",
+  description:
+    "OMS delivers innovative, tailored digital solutions. Explore our end-to-end product development services, from ideation to launch and beyond.",
+  keywords: [
+    "product development",
+    "custom software solutions",
+    "user-centred design",
+    "agile development",
+    "cross-platform solutions",
+    "mobile app development",
+    "web app development",
+    "tech stack",
+    "quality assurance",
+    "OMS",
+    "Owethu Management Services",
+  ],
+  openGraph: {
+    title: "Product Development Services | Digital Solutions by OMS",
+    description:
+      "Transform your ideas into market-ready products with OMS's comprehensive development expertise.",
+    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 Product Development Services",
+      },
+    ],
+    locale: "en_ZA",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Product Development Services | Digital Solutions by OMS",
+    description:
+      "Build innovative digital products with OMS. We cover the full lifecycle from concept to continuous improvement.",
+    // images: ['/images/product-dev-twitter-image.png'], // Replace if needed
+  },
+};
+
+interface FeatureItem {
+  icon?: React.ElementType; // Icon is optional for some lists like tech stack
+  title: string;
+  description: string;
+}
+
+const SectionTitle: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4 text-center">
+    {children}
+  </h2>
+);
+
+const SectionParagraph: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-10 md:mb-12">
+    {children}
+  </p>
+);
+
+const FeatureGrid: React.FC<{ items: FeatureItem[]; iconColor?: string }> = ({
+  items,
+  iconColor = COLORS.primary,
+}) => (
+  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    {items.map((item) => (
+      <div
+        key={item.title}
+        className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
+      >
+        {item.icon && (
+          <item.icon className="text-3xl mb-3" style={{ color: iconColor }} />
+        )}
+        <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 leading-relaxed">
+          {item.description}
+        </p>
+      </div>
+    ))}
+  </div>
+);
+
+export default function ProductDevelopmentPage() {
+  const howOmsDeliversItems: FeatureItem[] = [
+    {
+      icon: FaPuzzlePiece,
+      title: "Custom Software Solutions",
+      description:
+        "We craft bespoke applications designed to solve your unique business challenges, ensuring alignment with your goals and processes.",
+    },
+    {
+      icon: FaUserCheck,
+      title: "User-Centred Design",
+      description:
+        "We prioritise seamless functionality with an intuitive user experience, creating products that are not only powerful but also easy to use.",
+    },
+    {
+      icon: FaRocket,
+      title: "Scalable & Future-Proof Technology",
+      description:
+        "Our solutions are built with long-term growth in mind, ensuring adaptability to future demands and changes in technology.",
+    },
+    {
+      icon: FaSyncAlt,
+      title: "Agile Development Approach",
+      description:
+        "Through iterative development, we ensure faster time-to-market, with continuous feedback from users driving improvements along the way.",
+    },
+  ];
+
+  const endToEndItems: FeatureItem[] = [
+    {
+      icon: FaLightbulb,
+      title: "Ideation & Concept Development",
+      description:
+        "We collaborate with you to transform your ideas into a clear product vision and roadmap.",
+    },
+    {
+      icon: FaDraftingCompass,
+      title: "Prototyping & MVP Development",
+      description:
+        "We build prototypes and minimum viable products to validate concepts early, gather feedback, and ensure alignment with user needs.",
+    },
+    {
+      icon: FaBullseye,
+      title: "Product Launch & Market Strategy",
+      description:
+        "Our team helps with the go-to-market strategy, ensuring a successful product launch with strong market positioning and customer adoption.",
+    },
+    {
+      icon: FaHeadset,
+      title: "Post-Launch Support & Continuous Improvement",
+      description:
+        "We provide ongoing support, monitoring, and iterative enhancements based on user feedback and market trends.",
+    },
+  ];
+
+  const crossPlatformItems: FeatureItem[] = [
+    {
+      icon: FaMobileAlt,
+      title: "Mobile Application Development",
+      description:
+        "We create intuitive mobile apps for both iOS and Android, ensuring seamless performance and a high-quality user experience.",
+    },
+    {
+      icon: FaLaptopCode,
+      title: "Web Application Development",
+      description:
+        "Tailored web applications that are scalable, secure, and optimized for the best user interaction.",
+    },
+    {
+      icon: FaDesktop,
+      title: "Desktop Applications",
+      description:
+        "For businesses requiring more complex or resource-heavy solutions, we build powerful desktop applications with smooth integration.",
+    },
+  ];
+
+  const techStackItems: FeatureItem[] = [
+    { title: "Frontend Development", description: "React, Angular, Vue.js" },
+    {
+      title: "Backend Development",
+      description: "Node.js, Python, Java, Ruby on Rails",
+    },
+    {
+      title: "Database Technologies",
+      description: "MySQL, PostgreSQL, MongoDB, NoSQL",
+    },
+    {
+      title: "Cloud Services & DevOps",
+      description: "AWS, Azure, Google Cloud Platform",
+    },
+    {
+      title: "AI & Machine Learning",
+      description: "TensorFlow, PyTorch, Scikit-learn",
+    },
+  ];
+
+  const qualityAssuranceItems: FeatureItem[] = [
+    {
+      icon: FaTasks,
+      title: "Manual & Automated Testing",
+      description:
+        "Comprehensive testing to ensure the product meets all requirements and functions seamlessly.",
+    },
+    {
+      icon: FaChartLine, // Or FaTachometerAlt if you add it
+      title: "Performance & Load Testing",
+      description:
+        "We simulate high traffic and performance scenarios to ensure your product can scale and handle user demands.",
+    },
+    {
+      icon: FaShieldAlt,
+      title: "Security Testing",
+      description:
+        "Proactive identification and mitigation of potential security vulnerabilities to safeguard your product and user data.",
+    },
+  ];
+
+  const collaborativeProcessItems: FeatureItem[] = [
+    {
+      icon: FaSyncAlt,
+      title: "Agile Methodology",
+      description:
+        "Our flexible and iterative approach ensures that your product evolves based on real-time feedback, reducing risk and accelerating time-to-market.",
+    },
+    {
+      icon: FaHandshake,
+      title: "Client Involvement",
+      description:
+        "Regular check-ins, demos, and sprint reviews keep you involved and aligned with project progress, making sure we are building the product you envisioned.",
+    },
+    {
+      icon: FaUsersCog,
+      title: "Dedicated Development Teams",
+      description:
+        "Our dedicated teams work closely with your business to ensure that every decision aligns with your strategic goals and product vision.",
+    },
+  ];
+
+  const userCentredApproachItems: FeatureItem[] = [
+    {
+      icon: FaSearch,
+      title: "User Research & Personas",
+      description:
+        "We conduct thorough user research to understand the needs, behaviours, and challenges of your target audience.",
+    },
+    {
+      icon: FaUserCheck,
+      title: "Usability Testing",
+      description:
+        "Regular usability tests are conducted to ensure that your product is easy to navigate, efficient, and enjoyable to use.",
+    },
+    {
+      icon: FaComments,
+      title: "User Feedback & Iteration",
+      description:
+        "We continuously gather user feedback and iterate on product features to improve usability and customer satisfaction.",
+    },
+  ];
+
+  const innovationItems: FeatureItem[] = [
+    {
+      icon: FaBrain,
+      title: "Artificial Intelligence & Machine Learning",
+      description:
+        "We integrate AI and machine learning to create smarter, data-driven products that can adapt and scale as user needs evolve.",
+    },
+    {
+      icon: FaCubes,
+      title: "Blockchain Solutions",
+      description:
+        "We incorporate blockchain for secure, transparent, and decentralized applications.",
+    },
+    {
+      icon: FaNetworkWired,
+      title: "Internet of Things (IoT)",
+      description:
+        "We build IoT-enabled products that connect the physical and digital worlds for enhanced business intelligence and automation.",
+    },
+  ];
+
+  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-gray-800 via-gray-700 to-gray-800 text-white py-24 md:py-40">
+        <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 }}
+          >
+            Product Development
+          </h1>
+          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
+            At OMS, we don&apos;t just create products—we build digital
+            solutions that accelerate business growth and transform industries.
+            We understand that great products are the result of careful
+            planning, technical expertise, and a deep understanding of user
+            needs. From concept to launch, our product development services
+            deliver innovative, tailored solutions that help businesses enhance
+            efficiency, reduce complexity, and unlock new revenue streams.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            <Link
+              href="#how-we-deliver"
+              className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
+              style={{ backgroundColor: COLORS.primary }}
+            >
+              How We Deliver
+            </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. How OMS Delivers Market-Ready Products Section */}
+      <section
+        id="how-we-deliver"
+        className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800"
+      >
+        <div className="container mx-auto px-6">
+          <SectionTitle>How OMS Delivers Market-Ready Products</SectionTitle>
+          {/* No intro paragraph provided for this specific subtitle in the source */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
+            {howOmsDeliversItems.map((item) => (
+              <div
+                key={item.title}
+                className="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md"
+              >
+                {item.icon && (
+                  <item.icon
+                    className="text-3xl mb-3"
+                    style={{ color: COLORS.primary }}
+                  />
+                )}
+                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
+                  {item.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 3. End-to-End Product Development Section */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6">
+          <SectionTitle>End-to-End Product Development</SectionTitle>
+          <SectionParagraph>
+            We support businesses throughout the entire product lifecycle, from
+            ideation to post-launch support. Our comprehensive services cover
+            every phase of development, ensuring that your product is not only
+            designed and built to meet your current needs, but is also ready for
+            future growth and evolution.
+          </SectionParagraph>
+           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
+            {endToEndItems.map((item) => (
+              <div
+                key={item.title}
+                className="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md"
+              >
+                {item.icon && (
+                  <item.icon
+                    className="text-3xl mb-3"
+                    style={{ color: COLORS.primary }}
+                  />
+                )}
+                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
+                  {item.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+         {/* <FeatureGrid items={endToEndItems} /> */}
+        </div>
+      </section>
+
+      {/* 4. Cross-Platform Solutions Section */}
+      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+        <div className="container mx-auto px-6">
+          <SectionTitle>Cross-Platform Solutions</SectionTitle>
+          <SectionParagraph>
+            We deliver cross-platform products that work seamlessly across web,
+            mobile, and desktop environments. This ensures your product is
+            accessible to a wider audience and provides a consistent user
+            experience, regardless of the device or platform.
+          </SectionParagraph>
+          <FeatureGrid items={crossPlatformItems} />
+        </div>
+      </section>
+
+      {/* 5. Tech Stack Expertise Section */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6">
+          <SectionTitle>Tech Stack Expertise</SectionTitle>
+          <SectionParagraph>
+            Our product development solutions are powered by a diverse range of
+            technologies. Whether you need a high-performance web app, a mobile
+            solution, or a complex enterprise application, our team uses the
+            latest and most suitable technologies to ensure the product is
+            reliable, secure, and future-ready.
+          </SectionParagraph>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {techStackItems.map((item) => (
+              <div
+                key={item.title}
+                className="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-sm"
+              >
+                <h4
+                  className="text-lg font-semibold mb-2 font-poppins text-gold-600 dark:text-gold-400"
+                  style={{ color: COLORS.primary }}
+                >
+                  {item.title}
+                </h4>
+                <p className="text-gray-700 dark:text-gray-300 text-sm">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 6. Quality Assurance & Testing Section */}
+      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+        <div className="container mx-auto px-6">
+          <SectionTitle>Quality Assurance & Testing</SectionTitle>
+          <SectionParagraph>
+            Our product development approach includes robust testing and quality
+            assurance to ensure that your product is error-free, secure, and
+            optimized for performance. We conduct thorough testing at each stage
+            of the development process to deliver a high-quality final product.
+          </SectionParagraph>
+          <FeatureGrid items={qualityAssuranceItems} />
+        </div>
+      </section>
+
+      {/* 7. Collaborative Development Process Section */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6">
+          <SectionTitle>Collaborative Development Process</SectionTitle>
+          <SectionParagraph>
+            We believe that collaboration is key to successful product
+            development. Our agile and transparent development process ensures
+            that you are always in the loop, from initial discussions to final
+            delivery.
+          </SectionParagraph>
+          <FeatureGrid items={collaborativeProcessItems} />
+        </div>
+      </section>
+
+      {/* 8. User-Centred Approach Section */}
+      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+        <div className="container mx-auto px-6">
+          <SectionTitle>User-Centred Approach</SectionTitle>
+          <SectionParagraph>
+            We design products with the end-user in mind, focusing on creating
+            intuitive, engaging, and valuable experiences that delight customers
+            and drive retention.
+          </SectionParagraph>
+          <FeatureGrid items={userCentredApproachItems} />
+        </div>
+      </section>
+
+      {/* 9. Innovation & Emerging Technologies Section */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6">
+          <SectionTitle>Innovation & Emerging Technologies</SectionTitle>
+          <SectionParagraph>
+            At OMS, we believe in staying ahead of the curve by leveraging the
+            latest innovations and emerging technologies to build
+            next-generation products. We are constantly exploring new ways to
+            incorporate cutting-edge solutions into our product development
+            process.
+          </SectionParagraph>
+          <FeatureGrid items={innovationItems} />
+        </div>
+      </section>
+
+      {/* 10. Call to Action (CTA) Section */}
+      <section
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 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 Transform Your Ideas into Reality?
+          </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 product vision and explore how OMS can
+            develop innovative digital solutions 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" // 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>
+
+      {/* 11. 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 product
+              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">
+            
+            <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=Product Development Inquiry"
+                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
+                  >
+                    info@oms.africa
+                  </a>
+                </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>
+
+          
+            <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>
+  );
+}

app/(website)/services/resource-augmentation/page.tsx

@@ -4,7 +4,6 @@ import Link from "next/link";
 import { Metadata } from "next";
 import {
   FaArrowRight,
-  FaBriefcase,
   FaCheckCircle,
   FaClipboardList, // For BA
   FaClock, // For Time & Material
@@ -13,24 +12,18 @@ import {
   FaPaintBrush, // For UX/UI Design
   FaProjectDiagram, // For Architecture/Milestones
   FaPuzzlePiece, // For Integration/Solutions
-  FaRegHandshake, // For Partnership/Client Relations
   FaShieldAlt, // For Reliability/QA
   FaSitemap, // For Process/Architecture
   FaSyncAlt, // For Agile/Flexibility
   FaTasks, // For Project Management/Milestones
   FaVial, // For Testing
-  FaUsers, // For Teams/Resources
   FaChartLine, // For Reporting/MI
-  FaLightbulb, // For Innovation/Solutions
-  FaPhone, // Contact
-  FaEnvelope, // Contact
   FaTools, // General Capabilities
   FaLayerGroup, // Frameworks (SAFe, etc.)
   FaFileInvoiceDollar, // Cost/Pricing
   FaBusinessTime, // Experience/Past Projects
 } from "react-icons/fa";
 import { COLORS } from "@/constants"; // Assuming COLORS constant is available
-import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
 
 // SEO Metadata
 export const metadata: Metadata = {
@@ -49,7 +42,7 @@ export const metadata: Metadata = {
     "UX/UI Designer",
     "Process Engineer",
     "Salesforce Partner",
-    "time and material IT",
+   // "time and material IT",
     "milestone-based projects",
     "IT outsourcing",
     "flexible IT resources",
@@ -98,7 +91,7 @@ interface ServiceModel {
 const serviceModels: ServiceModel[] = [
   {
     icon: FaClock,
-    title: "Resource Augmentation Model (Time & Material)",
+    title: "Resource Augmentation Model",
     description:
       "Access skilled IT professionals on demand to supplement your existing team.",
     details: [
@@ -111,15 +104,14 @@ const serviceModels: ServiceModel[] = [
   },
   {
     icon: FaTasks,
-    title: "Milestone-Based Model (Managed Service)",
+    title: "Milestone-Based Model",
     description:
       "OMS takes full responsibility for delivering specific IT project phases or entire projects.",
     details: [
       "Includes Project Planning & Management.",
-      "Covers End-to-end Process Design (Requirements, BPD, Arch, UX/UI).",
-      "Includes Data & MI Design (Architecture, Transformation, BI).",
-      "Comprehensive Testing & QA (Strategy, Implementation, Management).",
-      "OMS manages all deployed team members, deliverables, and velocity.",
+      "Covers End-to-end Process Design (Requirements, Business Process Design, Architecture, User Experience/User Interface, Data Architecture, Transformation, and Business Intelligence).",
+      "Change Management & Training ",
+      "Comprehensive Testing and Quality Assurance.",
     ],
     pricingModel:
       "Milestone-Based pricing, payable on delivery of key milestones.",
@@ -299,62 +291,62 @@ const capabilities: Capability[] = [
   },
 ];
 
-interface Benefit {
-  icon: React.ElementType;
-  title: string;
-  description: string;
-}
+// interface Benefit {
+//   icon: React.ElementType;
+//   title: string;
+//   description: string;
+// }
 
-const augmentationBenefits: Benefit[] = [
-  {
-    icon: FaSyncAlt,
-    title: "Ultimate Flexibility",
-    description:
-      "Scale your team up or down quickly based on project demands and budget.",
-  },
-  {
-    icon: FaUsers,
-    title: "Access to Expertise",
-    description:
-      "Gain immediate access to specialized IT skills that may not be available in-house.",
-  },
-  {
-    icon: FaFileInvoiceDollar,
-    title: "Cost-Effectiveness",
-    description:
-      "Reduce recruitment costs, overheads, and long-term commitments associated with FTEs.",
-  },
-  {
-    icon: FaChartLine,
-    title: "Increased Productivity",
-    description:
-      "Focus your core team on strategic initiatives while OMS resources handle specific tasks or projects.",
-  },
-  {
-    icon: FaShieldAlt,
-    title: "Reduced Hiring Burden",
-    description:
-      "Avoid the time-consuming process of sourcing, vetting, hiring, and onboarding new employees.",
-  },
-  {
-    icon: FaTasks,
-    title: "Focus on Core Business",
-    description:
-      "Outsource IT project execution or specific roles, allowing you to concentrate on your primary objectives.",
-  },
-  {
-    icon: FaCheckCircle,
-    title: "Quality Assurance",
-    description:
-      "Benefit from experienced professionals and managed delivery (in Milestone model) for high-quality outcomes.",
-  },
-  {
-    icon: FaLightbulb,
-    title: "Faster Project Delivery",
-    description:
-      "Accelerate project timelines by quickly filling skill gaps and adding capacity.",
-  },
-];
+// const augmentationBenefits: Benefit[] = [
+//   {
+//     icon: FaSyncAlt,
+//     title: "Ultimate Flexibility",
+//     description:
+//       "Scale your team up or down quickly based on project demands and budget.",
+//   },
+//   {
+//     icon: FaUsers,
+//     title: "Access to Expertise",
+//     description:
+//       "Gain immediate access to specialized IT skills that may not be available in-house.",
+//   },
+//   {
+//     icon: FaFileInvoiceDollar,
+//     title: "Cost-Effectiveness",
+//     description:
+//       "Reduce recruitment costs, overheads, and long-term commitments associated with FTEs.",
+//   },
+//   {
+//     icon: FaChartLine,
+//     title: "Increased Productivity",
+//     description:
+//       "Focus your core team on strategic initiatives while OMS resources handle specific tasks or projects.",
+//   },
+//   {
+//     icon: FaShieldAlt,
+//     title: "Reduced Hiring Burden",
+//     description:
+//       "Avoid the time-consuming process of sourcing, vetting, hiring, and onboarding new employees.",
+//   },
+//   {
+//     icon: FaTasks,
+//     title: "Focus on Core Business",
+//     description:
+//       "Outsource IT project execution or specific roles, allowing you to concentrate on your primary objectives.",
+//   },
+//   {
+//     icon: FaCheckCircle,
+//     title: "Quality Assurance",
+//     description:
+//       "Benefit from experienced professionals and managed delivery (in Milestone model) for high-quality outcomes.",
+//   },
+//   {
+//     icon: FaLightbulb,
+//     title: "Faster Project Delivery",
+//     description:
+//       "Accelerate project timelines by quickly filling skill gaps and adding capacity.",
+//   },
+// ];
 
 const methodologies = [
   { name: "Agile (SCRUM)", icon: FaSyncAlt },
@@ -384,10 +376,11 @@ export default function ResourceAugmentationPage() {
           {/* Consider adding OMS Logo here if desired */}
           {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
           <h1
-            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
+
+            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-<1.5>"
             style={{ color: COLORS.primary }} // Use gold color
           >
-            Flexible IT Resource Augmentation & Managed Services
+            Flexible IT Resource <br />Augmentation & Managed Services
           </h1>
           <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
             Scale your IT capabilities effectively with Owethu Managed Services.
@@ -397,7 +390,7 @@ export default function ResourceAugmentationPage() {
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
               href="#service-models" // Link to the service models section
-              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"
+              className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
               style={{ backgroundColor: COLORS.primary }}
             >
               Explore Our Models <FaArrowRight className="ml-2" />
@@ -426,28 +419,29 @@ export default function ResourceAugmentationPage() {
               businesses today.
             </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 items-stretch">
             {[
               {
                 icon: FaPuzzlePiece,
-                title: "Skill Gaps",
-                desc: "Struggling to find specialized IT talent for specific project needs or new technologies.",
+                title: "Access Specialised Expertise",
+                desc: "Get experienced professionals in software development, business analysis, cybersecurity, cloud computing, data science, and more — bringing the right skills to your project, exactly when you need them.",
               },
               {
                 icon: FaChartLine,
-                title: "Fluctuating Demand",
-                desc: "Need to scale development or testing teams quickly for peak periods without long-term overhead.",
+                title: "Flexibility & Scalability",
+                desc: "Easily scale your team in response to changing project needs — expanding or reducing resources without long-term obligations, while maintaining agility and control.",
               },
               {
                 icon: FaClock,
-                title: "Project Delays",
-                desc: "Lack of internal resources causing bottlenecks and delaying critical project timelines.",
+                title: "Faster Onboarding & Deployment",
+                desc: "Our experts are project-ready, helping you accelerate delivery timelines and reduce the overhead typically associated with recruitment and training.",
               },
               {
                 icon: FaFileInvoiceDollar,
-                title: "Cost Control",
-                desc: "Wanting to manage IT personnel costs effectively, avoiding expensive recruitment and full-time hires.",
+                title: "Cost-Effective Hiring",
+                desc: "Maximize impact, minimize overhead — allowing you to scale your team according to project needs while managing costs efficiently and without compromising on quality. .",
               },
+              /*
               {
                 icon: FaBriefcase,
                 title: "Focus on Core Business",
@@ -457,14 +451,16 @@ export default function ResourceAugmentationPage() {
                 icon: FaSyncAlt,
                 title: "Need for Flexibility",
                 desc: "Requiring adaptable staffing solutions that can change as project requirements evolve.",
-              },
+              },*/
             ].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"
+                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-lgflex flex-col h-full"
               >
                 <item.icon
-                  className="text-4xl text-red-500 dark:text-red-400 mx-auto mb-4" // Using red to signify challenges/needs
+                  className="text-4xl mx-auto mb-4"
+                  // Using red to signify challenges/needs
+                  style={{ color: COLORS.primary }} // Use gold color
                 />
                 <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
                   {item.title}
@@ -487,7 +483,7 @@ export default function ResourceAugmentationPage() {
                 Your Strategic Partner for IT Talent
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
-                Owethu Managed Services (OMS) provides high-caliber IT
+                Owethu Managed Services provides high-caliber IT
                 professionals through flexible engagement models tailored to
                 your specific project requirements and business objectives. As a
                 100% Black female-owned organization based in Centurion,
@@ -553,7 +549,7 @@ export default function ResourceAugmentationPage() {
                     {model.title}
                   </h3>
                 </div>
-                <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm flex-grow">
+                <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">
                   {model.description}
                 </p>
                 <ul className="space-y-2 mb-4">
@@ -566,17 +562,19 @@ export default function ResourceAugmentationPage() {
                     </li>
                   ))}
                 </ul>
+                {/* Add the sentence as a separate paragraph for the Milestone model */}
+                {model.title === "Milestone-Based Model" && (
+                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-4 italic">
+                    OMS manages all deployed team members, deliverables, and
+                    velocity.
+                  </p>
+                )}
                 <p className="text-sm font-semibold text-gray-800 dark:text-gray-200 mt-auto pt-4 border-t border-gray-200 dark:border-gray-600">
                   {model.pricingModel}
                 </p>
               </div>
             ))}
           </div>
-          <p className="text-center text-md text-gray-700 dark:text-gray-300 mt-12 max-w-3xl mx-auto">
-            OMS operates using both <span className="font-semibold">AGILE</span>{" "}
-            and <span className="font-semibold">Waterfall</span> Frameworks,
-            depending on client preference and project suitability.
-          </p>
         </div>
       </section>
 
@@ -641,6 +639,7 @@ export default function ResourceAugmentationPage() {
       </section>
 
       {/* 6. Benefits of Partnering with OMS Section */}
+      {/* Benefits of Resource Augmentation 
                 <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">
@@ -677,9 +676,9 @@ export default function ResourceAugmentationPage() {
                     </div>
                   </div>
                 </section>
-
+            */}
       {/* 7. Proven Experience / Past Projects (High Level) */}
-      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+      <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">
             <FaBusinessTime
@@ -704,8 +703,10 @@ export default function ResourceAugmentationPage() {
                 Financial Services & Compliance
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                FIC/KYC Remediation (Data Architecture, MI), Core Banking
-                Systems, Lending/Credit Process Optimisation.
+                Expertise in FIC/KYC remediation, including data architecture
+                and management information design, as well as core banking
+                systems and end-to-end optimisation of lending and credit
+                processes.
               </p>
             </div>
             <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@@ -717,8 +718,9 @@ export default function ResourceAugmentationPage() {
                 Customer Management & Onboarding
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                Design, Testing, Requirements, Process Engineering, UX/UI for
-                customer-facing platforms.
+                Crafting seamless, data-driven onboarding experiences through
+                straight-through processing, enhanced customer journeys,<br/>
+                real-time insights, and a 360-degree customer view.
               </p>
             </div>
             <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@@ -730,8 +732,10 @@ export default function ResourceAugmentationPage() {
                 Platform & Process Automation
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                Straight-Through Processing (STP) on Banking Platforms, API
-                Integration, Salesforce implementations.
+                Specialising in Straight-Through Processing (STP) for banking
+                platforms, seamless API integration, and end-to-end Salesforce
+                implementations to drive efficiency and reduce manual
+                intervention.
               </p>
             </div>
           </div>
@@ -803,7 +807,7 @@ export default function ResourceAugmentationPage() {
 
       {/* 10. Call to Action (CTA) Section */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900"
         style={{ backgroundColor: COLORS.primary }}
       >
         <div className="container mx-auto px-6 text-center">
@@ -831,100 +835,6 @@ export default function ResourceAugmentationPage() {
           </div>
         </div>
       </section>
-
-      {/* 11. Contact Information Section */}
-      <section 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">
-              We&apos;re ready to assist you. Reach out via phone, email, or use
-              the form below to start the conversation about your IT resource
-              needs.
-            </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 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">
-                Contact Information
-              </h3>
-              <div className="flex items-center space-x-4">
-                <FaPhone
-                  className="w-6 h-6 flex-shrink-0"
-                  style={{ color: COLORS.primary }}
-                />
-                <div>
-                  <h4 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
-                    Phone
-                  </h4>
-                  {/* Using specific numbers from PDF */}
-                  <a
-                    href="tel:+27120513281"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Zanele: (012) 051 3281
-                  </a>
-                  <a
-                    href="tel:+27120513282"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Lindiwe: (012) 051 3282
-                  </a>
-                </div>
-              </div>
-              <div className="flex items-center space-x-4">
-                <FaEnvelope
-                  className="w-6 h-6 flex-shrink-0"
-                  style={{ color: COLORS.primary }}
-                />
-                <div>
-                  <h4 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
-                    Email
-                  </h4>
-                  {/* Using specific emails from PDF */}
-                  <a
-                    href="mailto:Zanelem@oms.africa"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Zanelem@oms.africa
-                  </a>
-                  <a
-                    href="mailto:Lindiwes@oms.africa"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Lindiwes@oms.africa
-                  </a>
-                  <a
-                    href="mailto:admin@oms.africa"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm mt-1"
-                  >
-                    admin@oms.africa (General)
-                  </a>
-                </div>
-              </div>
-              {/* Optional: Link to main contact page */}
-              <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 mt-4"
-                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 a Quick Inquiry
-              </h3>
-              <ContactForm /> {/* Reuse your existing contact form */}
-            </div>
-          </div>
-        </div>
-      </section>
     </div>
   );
 }

app/(website)/tech-talk/page.tsx

@@ -11,6 +11,7 @@ export const metadata: Metadata = {
   alternates: {
     canonical: "/tech-talk",
   },
+  
   openGraph: {
     title: "OMS TechTalk | Insights & Innovation",
     description: "Stay updated with tech insights from OMS.",
@@ -50,7 +51,7 @@ const TechTalkPage = async () => {
           </p>
         </div>
         {/* Blog Post Grid */}
-        {posts.length > 0 ? (
+        {false && posts.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
             {posts.map((post: Post) => (
               <BlogPostCard

app/(website)/vacancies/[slug]/page.tsx

@@ -12,7 +12,7 @@ interface ExtendedVacancy extends Vacancy {
 }
 
 async function getVacancy(slug: string): Promise<ExtendedVacancy | null> {
-  const res = await fetch(`http://localhost:3000/api/vacancies/${slug}`, {
+  const res = await fetch(`${process.env.WEBSITE_URL}/api/vacancies/${slug}`, {
     cache: "no-store",
   });
   if (!res.ok) {

app/globals.css

@@ -208,18 +208,16 @@
   } /* Added longer delay */
 }
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+
+@keyframes marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
 }
 
-.animate-fade-in-up {
-  animation: fadeInUp 0.8s ease-out forwards;
-  opacity: 0; /* Start hidden */
+.animate-marquee-continuous {
+  animation: marquee linear infinite;
+}
+
+.paused {
+  animation-play-state: paused !important;
 }

app/layout.tsx

@@ -3,8 +3,8 @@ import { Poppins } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-import ChatbotWidget from "@/components/ChatbotWidget";
 import { ThemeProvider } from "@/providers/theme-provider";
+import Script from "next/script";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -20,6 +20,7 @@ export const metadata: Metadata = {
     "Owethu Managed Services (OMS) provides expert IT solutions in Centurion & South Africa, including resource augmentation, project management, custom software development, and the OBSE financial analysis tool.", // Include Keywords, Location, USP
   keywords: [
     "Owethu Managed Services",
+    "OMS",
     "OBSE",
     "IT solutions South Africa",
     "resource augmentation",
@@ -28,6 +29,7 @@ export const metadata: Metadata = {
     "OBSE",
     "financial data analysis",
     "IT services Centurion",
+    "digital transformation",
   ], // Add relevant keywords
   alternates: {
     canonical: "/", // Assuming this is the root URL
@@ -95,8 +97,15 @@ export default function RootLayout({
           <Header />
           <main>{children}</main>
           <Footer />
-          <ChatbotWidget />
         </ThemeProvider>
+        <Script
+          src="https://umami.obse.africa/script.js"
+          data-website-id={
+            process.env.NEXT_PUBLIC_UMAMI_WEB_ID ||
+            "d9f0e4d7-0f0a-45e4-91bf-62e0e65e25d2"
+          }
+          strategy="afterInteractive"
+        />
       </body>
     </html>
   );

components/ChatbotWidget.tsx

@@ -1,22 +0,0 @@
-// components/ChatbotWidget.tsx
-import React from "react";
-import { FaComments } from "react-icons/fa";
-
-const ChatbotWidget = () => {
-  // TODO: Implement actual chat functionality (e.g., integrate a service)
-  // const handleChatOpen = () => {
-  //   alert("Chatbot functionality to be implemented!");
-  // };
-
-  return (
-    <button
-      //   onClick={handleChatOpen}
-      className="fixed bottom-6 right-6 bg-primary text-dark p-4 rounded-full shadow-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all duration-300 z-50"
-      aria-label="Open Chat"
-    >
-      <FaComments size={24} />
-    </button>
-  );
-};
-
-export default ChatbotWidget;

components/Footer.tsx

@@ -1,9 +1,10 @@
 // components/Footer.tsx
 import React from "react";
 import Link from "next/link";
-import { FaLinkedin, FaInstagram } from "react-icons/fa";
+import { FaLinkedin, FaInstagram, FaYoutube } from "react-icons/fa";
 import Image from "next/image";
 
+
 const omsLogoUrl = "/oms-logo.svg"; // Ensure this exists in /public
 // const omsLogoDarkUrl = "/oms-logo-dark.svg"; // Optional dark mode logo
 
@@ -69,7 +70,7 @@ const Footer = () => {
               </li>
               <li>
                 <Link
-                  href="/services"
+                  href="/services/resource-augmentation"
                   className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                 >
                   Services
@@ -77,20 +78,20 @@ const Footer = () => {
               </li>
               <li>
                 <Link
-                  href="/products"
+                  href="/obse"
                   className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                 >
                   Products
                 </Link>
               </li>
-              <li>
+              {/* <li>
                 <Link
                   href="/join-us"
                   className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
                 >
                   Join Our Team
                 </Link>
-              </li>
+              </li> */}
               <li>
                 <Link
                   href="/contact"
@@ -106,16 +107,16 @@ const Footer = () => {
           <div>
             <h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5>
             <address className="text-sm text-[var(--oms-white)]/80 mb-2 not-italic">
-              Unit 10 B Centuria Park
-              <br />
                265 Von Willich Avenue
               <br />
              Die Hoewes, Centurion, 0159
+              <br />
+              (Unit 10 B Centuria Park)
             </address>
             <p className="text-sm text-[var(--oms-white)]/80 mb-2">
               Phone:{" "}
-              <a href="tel:+27120513282" className="hover:text-primary">
-                (012) 051 3282
+              <a href="tel:+27684855721" className="hover:text-primary">
+                +27 68 485 5721
               </a>
             </p>
             <p className="text-sm text-[var(--oms-white)]/80 mb-2">
@@ -127,7 +128,7 @@ const Footer = () => {
             {/* Social Icons - Use muted bright color, primary on hover */}
             <div className="flex space-x-4 mt-4">
               <a
-                href="https://linkedin.com"
+                href="https://www.linkedin.com/company/owethu-managed-services-oms"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
@@ -135,8 +136,9 @@ const Footer = () => {
               >
                 <FaLinkedin size={24} />
               </a>
+               
               <a
-                href="https://instagram.com"
+                href="https://www.instagram.com/owethumanagedservices_oms"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
@@ -144,6 +146,17 @@ const Footer = () => {
               >
                 <FaInstagram size={24} />
               </a>
+
+              <a
+                href="https://www.youtube.com/@OwethuManagedServices-africa"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
+                aria-label="YouTube"
+              >
+                <FaYoutube size={24} />
+              </a>
+
             </div>
           </div>
 
@@ -157,20 +170,43 @@ const Footer = () => {
             </p>
             <form className="flex flex-col sm:flex-row gap-2">
               {/* Input needs dark background styles */}
+              <div className="relative max-w-md mx-auto w-full">
                 <input
                   type="email"
                   placeholder="Enter your email"
                   aria-label="Email for newsletter"
-                // Use dark variable for input bg/border, bright for text
-                className="flex-grow px-4 py-2 rounded-lg bg-[var(--dark-input)] border border-[var(--dark-border)] text-[var(--dark-foreground)] placeholder:text-[var(--dark-muted-foreground)] focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]" // Ring offset needs dark bg
+                  className="
+      w-full
+      pr-24
+      px-4 py-2
+      rounded-lg
+      bg-[var(--dark-input)]
+      border border-[var(--dark-border)]
+      text-[var(--dark-foreground)]
+      placeholder:text-[var(--dark-muted-foreground)]
+      focus:outline-none focus:ring-2 focus:ring-ring
+      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+    "
                 />
-              {/* Keep button styling primary */}
                 <button
                   type="submit"
-                className="bg-primary text-primary-foreground px-4 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]" // Ring offset needs dark bg
+                  className="
+      absolute top-0 right-0
+      h-full
+      px-4
+      rounded-r-lg  
+      bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 
+      text-primary-foreground
+      font-semibold
+      hover:bg-opacity-90
+      transition-colors
+      focus:outline-none focus:ring-2 focus:ring-ring
+      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+    "
                 >
                   Subscribe
                 </button>
+              </div>
             </form>
             {/* Badges - Use a subtle dark bg */}
             <div className="mt-6 space-x-2 sm:space-x-4">
@@ -193,19 +229,29 @@ const Footer = () => {
           </p>
           <div className="flex space-x-4">
             {/* Links still hover to primary */}
-            <Link
+
+            {/* <Link
               href="/privacy-policy"
               className="hover:text-primary transition-colors"
             >
               Privacy Policy
-            </Link>
-            <Link
-              href="/paia-popia"
+            </Link> */}
+
+        
+            <a
+              href="/Privacy-Policy/Recruitment-Privacy-Policy.pdf"
+              className="hover:text-primary transition-colors"
+            >
+              Privacy Policy
+            </a>
+            <a
+              href="/Privacy-Policy/Data-Privacy-Statement-for-Candidates.pdf"
               className="hover:text-primary transition-colors"
             >
               PAIA & POPIA
-            </Link>
+            </a>
           </div>
+
         </div>
       </div>
     </footer>
@@ -213,3 +259,4 @@ const Footer = () => {
 };
 
 export default Footer;
+//Data-Privacy-Statement-for-Candidates

components/Header.tsx

@@ -1,22 +1,13 @@
 // components/Header.tsx (Server Component)
 import React from "react";
-import { auth } from "@/auth"; // Only need auth (for session) from here now
 
 import HeaderClient from "./HeaderClient";
-import { handleSignInAction, handleSignOutAction } from "@/actions/auth-action";
 
 const Header = async () => {
   // Fetch session data on the server
-  const session = await auth();
 
   // Pass the session data and YOUR Server Actions as props
-  return (
-    <HeaderClient
-      session={session}
-      handleSignIn={handleSignInAction} // Pass YOUR sign-in Server Action
-      handleSignOut={handleSignOutAction} // Pass YOUR sign-out Server Action
-    />
-  );
+  return <HeaderClient />;
 };
 
 export default Header;

components/HeaderClient.tsx

@@ -4,53 +4,21 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { usePathname } from "next/navigation"; // Import usePathname
 import {
   FiChevronDown,
   FiClipboard,
-  FiArrowRight,
   FiMenu,
   FiX,
-  FiLogIn,
-  FiUsers, // Resource Augmentation
-  FiBriefcase, // Project Management
-  FiCpu, // Product Development
-  FiBox, // OBSE
-  FiFileText, // Vacancies
-  FiUserCheck, // Recruitment Portal
+  FiUsers,
+  FiCpu,
+  FiBox,
+  FiLayers
 } 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 +34,50 @@ const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => (
   </Link>
 );
 
-type HeaderClientProps = {
-  session: Session | null;
-  handleSignIn: () => void;
-  handleSignOut: () => void;
-};
-
-const HeaderClient = ({
-  session,
-  handleSignIn,
-  handleSignOut,
-}: HeaderClientProps) => {
+const HeaderClient = () => {
   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 pathname = usePathname(); // Get current path
+
+  // Helper function to check if a path is active (exact match for simple links, startsWith for base paths)
+  const isActive = (href: string, exact = false) => {
+    if (exact) {
+      return pathname === href;
+    }
+    // Handle root path specifically
+    if (href === "/") {
+      return pathname === "/";
+    }
+    return pathname.startsWith(href);
+  };
+
   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`;
 
@@ -122,25 +106,41 @@ const HeaderClient = ({
           <nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
             <Link
               href="/"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               Home
             </Link>
             <Link
               href="/tech-talk"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/tech-talk")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               Tech Talk
             </Link>
             <Link
               href="/about"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/about")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               About Us
             </Link>
             <Link
               href="/contact"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/contact")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               Contact Us
             </Link>
@@ -149,49 +149,13 @@ const HeaderClient = ({
           <div className="hidden md:flex items-center space-x-4">
             <ThemeToggle />
             <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"
+              href="/contact"
+              className="flex items-center text-sm font-medium bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground px-3 py-1.5 rounded-lg hover:bg-opacity-90 transition-colors"
               title="Request a Demo"
             >
               <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">
@@ -214,30 +178,50 @@ const HeaderClient = ({
       </div>
 
       {/* Secondary Row w/ Mega Menus */}
-      <div className="bg-primary relative">
+      <div className="bg-[linear-gradient(to_right,#dec750,#f0de7e,#e1c44a)] 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">
+            {/* Wrap nav and link in a flex container */}
+            <div className="flex items-center space-x-8 lg:space-x-10">
               <nav className="flex items-center space-x-8 lg:space-x-10">
                 {/* Services */}
-              <div className="group">
-                <button className={megaMenuTriggerClasses}>
+                <div
+                  className={`group ${isActive("/services") ? "active" : ""}`} // Add active class to group
+                  onMouseEnter={handleServicesMouseEnter}
+                  onMouseLeave={handleServicesMouseLeave}
+                >
+                  <button
+                    className={`${megaMenuTriggerClasses} ${
+                      isActive("/services") ? "after:w-full" : ""
+                    }`}
+                  >
+                    {" "}
+                    {/* Apply underline based on active state */}
                     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
                     `}
                   >
                     <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">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
                         <Link
                           href="/services/resource-augmentation"
-                        className={megaMenuItemClasses}
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/services/resource-augmentation")
+                              ? "text-primary"
+                              : ""
+                          }`} // Apply active class
                         >
                           <FiUsers className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
@@ -246,9 +230,14 @@ const HeaderClient = ({
                             </p>
                           </div>
                         </Link>
+                        {/* Add more service links here 
                         <Link
                           href="/services/project-management"
-                        className={megaMenuItemClasses}
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/services/project-management")
+                              ? "text-primary"
+                              : ""
+                          }`} // Apply active class
                         >
                           <FiBriefcase className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
@@ -257,9 +246,14 @@ const HeaderClient = ({
                             </p>
                           </div>
                         </Link>
+                        */}
                         <Link
                           href="/services/product-development"
-                        className={megaMenuItemClasses}
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/services/product-development")
+                              ? "text-primary"
+                              : ""
+                          }`} // Apply active class
                         >
                           <FiCpu className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
@@ -269,75 +263,90 @@ const HeaderClient = ({
                           </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>
+
                 {/* Products */}
-              <div className="group">
-                <button className={megaMenuTriggerClasses}>
-                  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
-                  `}
+                  className={`group ${isActive("/products") ? "active" : ""}`} // Add active class to group
+                  onMouseEnter={handleProductsMouseEnter}
+                  onMouseLeave={handleProductsMouseLeave}
                 >
-                  <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>
-              {/* Join Our Team */}
-              <div className="group">
-                <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" />
+                  <button
+                    className={`${megaMenuTriggerClasses} ${
+                      isActive("/products") ? "after:w-full" : ""
+                    }`}
+                  >
+                    {" "}
+                    {/* Apply underline based on active state */}
+                    Products
+                    <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
+                      ${
+                        productsDropdownOpen
+                          ? "opacity-100 visible 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} />
+                        <Link
+                          href="/obse"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/obse") ? "text-primary" : ""
+                          }`}
+                        >
+                          {" "}
+                          {/* Apply active class */}
+                          <FiBox className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
                             <p className={megaMenuTitleClasses}>
-                            Current Vacancies
+                                   
+                              OBSE Platform
+
                             </p>
                           </div>
                         </Link>
-                      <Link href="/portal" className={megaMenuItemClasses}>
-                        <FiUserCheck className={megaMenuIconClasses} />
+                        {/* 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}>
-                            Recruitment Portal
+                              Project Management
+                            </p>
+                          </div>
+                        </Link>
+                        */}
+                         <Link
+                          href="https://cvevolve.com/"
+                          target="_blank"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/obse") ? "text-primary" : ""
+                          }`}
+                        >
+                          {" "}
+                          {/* Apply active class */}
+                          <FiLayers className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                                   
+                              CVEvolve
+                            
                             </p>
                           </div>
                         </Link>
@@ -345,16 +354,69 @@ const HeaderClient = ({
                     </div>
                   </div>
                 </div>
+
+                
+                {/* Join Our Team */}
+              
+                
+                {/* <div
+                  className={`group ${isActive("/offerings") ? "active" : ""}`}
+                  onMouseEnter={handleOfferingsMouseEnter}
+                  onMouseLeave={handleOfferingsMouseLeave}
+                >
+                  <button
+                    className={`${megaMenuTriggerClasses} ${
+                      isActive("/offerings") ? "after:w-full" : ""
+                    }`}
+                  >
+                    Explore Our Offerings
+                    <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-1000
+      bg-card border-x border-b border-border rounded-b-lg
+      opacity-0 invisible translate-y-[-10px]
+      ${offeringsDropdownOpen ? "opacity-100 visible 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="/offerings"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/offerings") ? "text-primary" : ""
+                          }`}
+                        >
+                          <FiBox className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                              Our Offerings
+                            </p>
+                          </div>
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                </div> */}
               </nav>
 
-            {/* ← Here’s the Explore Our Offerings link, back in its original spot */}
+              {/* ← 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:opacity-80 transition-opacity group"
+                href="/services" // Assuming this link goes to the main services page
+                className={`flex items-center text-sm font-medium hover:opacity-80 transition-opacity group ${
+                  isActive("/services")
+                    ? "text-primary"
+                    : "text-primary-foreground"
+                }`} // Apply active class
               >
                 Explore Our Offerings
                 <FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
               </Link>
+              */}
+            </div>{" "}
+            {/* Close the new flex container */}
           </div>
         </div>
       </div>
@@ -371,10 +433,16 @@ const HeaderClient = ({
         <nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-1 text-foreground">
           <DropdownLink href="/" onClick={handleMobileLinkClick}>
             Home
+          </DropdownLink>
+           <DropdownLink href="/tech-talk" onClick={handleMobileLinkClick}>
+            Tech Talk
           </DropdownLink>
           <DropdownLink href="/about" onClick={handleMobileLinkClick}>
             About Us
           </DropdownLink>
+          <DropdownLink href="/contact" onClick={handleMobileLinkClick}>
+            Contact Us
+          </DropdownLink>
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Services
           </span>
@@ -384,25 +452,26 @@ const HeaderClient = ({
           >
             Resource Augmentation
           </DropdownLink>
-          <DropdownLink
-            href="/services/project-management"
-            onClick={handleMobileLinkClick}
-          >
-            Project Management
-          </DropdownLink>
           <DropdownLink
             href="/services/product-development"
             onClick={handleMobileLinkClick}
           >
             Product Development
           </DropdownLink>
+
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Products
           </span>
           <DropdownLink href="/obse" onClick={handleMobileLinkClick}>
             OBSE
           </DropdownLink>
-          <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
+
+          {/* small screen investigation */}
+          <DropdownLink href="https://cvevolve.com" onClick={handleMobileLinkClick}>
+            CVEvolve    
+          </DropdownLink>
+
+          {/* <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Join Us
           </span>
           <DropdownLink href="/vacancies" onClick={handleMobileLinkClick}>
@@ -410,43 +479,28 @@ const HeaderClient = ({
           </DropdownLink>
           <DropdownLink href="/portal" onClick={handleMobileLinkClick}>
             Recruitment Portal
-          </DropdownLink>
-          <DropdownLink href="/contact" onClick={handleMobileLinkClick}>
-            Contact Us
-          </DropdownLink>
+          </DropdownLink> */}
+
+          {/*         
+          <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
+            Explore Our Offerings
+          </span>
+          <DropdownLink href="/offerings" onClick={handleMobileLinkClick}>
+            Our Offerings
+          </DropdownLink> */}
+
           <div className="pt-4">
             <Link
-              href="/request-demo"
+              href="/contact"
               onClick={handleMobileLinkClick}
-              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"
+              className="flex w-full justify-center items-center text-sm font-medium bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 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" /> Request OBSE Demo
             </Link>
           </div>
-          <div className="pt-4 border-t border-border mt-4">
-            {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>
+
+          <div className="pt-4 border-t border-border mt-4"></div>
         </nav>
       </div>
     </header>
@@ -454,3 +508,77 @@ const HeaderClient = ({
 };
 
 export default HeaderClient;
+  // <div
+  //                 className={`group ${
+  //                   isActive("/join-us") ||
+  //                   isActive("/vacancies") ||
+  //                   isActive("/portal")
+  //                     ? "active"
+  //                     : ""
+  //                 }`} // Add active class to group (check all related paths)
+  //                 onMouseEnter={handleJoinUsMouseEnter}
+  //                 onMouseLeave={handleJoinUsMouseLeave}
+  //               >
+  //                 <button
+  //                   className={`${megaMenuTriggerClasses} ${
+  //                     isActive("/join-us") ||
+  //                     isActive("/vacancies") ||
+  //                     isActive("/portal")
+  //                       ? "after:w-full"
+  //                       : ""
+  //                   }`}
+  //                 >
+  //                   {" "}
+  //                   {/* Apply underline based on active state */}
+  //                   Join Our Team
+  //                   <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-1000
+  //                     bg-card border-x border-b border-border rounded-b-lg
+  //                     opacity-0 invisible translate-y-[-10px]
+  //                     ${
+  //                       joinUsDropdownOpen
+  //                         ? "opacity-100 visible 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} ${
+  //                           isActive("/vacancies") ? "text-primary" : ""
+  //                         }`}
+  //                       >
+  //                         {" "}
+  //                         {/* Apply active class */}
+  //                         <FiFileText className={megaMenuIconClasses} />
+  //                         <div className={megaMenuTextWrapperClasses}>
+  //                           <p className={megaMenuTitleClasses}>
+  //                             Current Vacancies
+  //                           </p>
+  //                         </div>
+  //                       </Link>
+  //                       <Link
+  //                         href="/portal"
+  //                         className={`${megaMenuItemClasses} ${
+  //                           isActive("/portal") ? "text-primary" : ""
+  //                         }`}
+  //                       >
+  //                         {" "}
+  //                         {/* Apply active class */}
+  //                         <FiUserCheck className={megaMenuIconClasses} />
+  //                         <div className={megaMenuTextWrapperClasses}>
+  //                           <p className={megaMenuTitleClasses}>
+  //                             Recruitment Portal
+  //                           </p>
+  //                         </div>
+  //                       </Link>
+  //                     </div>
+  //                   </div>
+  //                 </div>
+  //               </div>

components/ui/Button.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string;
-  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"; // Added more variants
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "black";
   size?: "sm" | "md" | "lg";
   children: React.ReactNode;
   className?: string;
@@ -24,13 +24,17 @@ const Button: React.FC<ButtonProps> = ({
 
   // Variant styles using semantic vars (Tailwind classes generated via @theme)
   const variantStyles = {
-    primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary
+    //primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary
+    primary: "bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground hover:bg-primary/90",
     secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
     outline:
       "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
     ghost: "hover:bg-accent hover:text-accent-foreground",
     destructive:
       "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      //linear-gradient(to right, #ead566, #e0be45) created using Tailwind's gradient utilities
+      //i want that variant
+      black:"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 font-poppins",
   };
 
   const sizeStyles = {

oms-website.code-workspace

@@ -0,0 +1,7 @@
+{
+    "folders": [
+        {
+            "path": "."
+        }
+    ]
+}