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

Fix : Added a scroller on ClientLogoSection

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,87 @@
-// components/ClientLogosSection.tsx
+"use client";
-import React from "react";
+
+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; // pixels per frame
-  speed?: number;
-  /** Size of the square background container in pixels. Default: 120 */
   squareSize?: number;
 };
 
-const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
+const ClientLogosSection = ({
   title,
   description,
-  clients = [], // Default to empty array
+  clients = [],
-  speed = 50, //Default speed in seconds for one full cycle
+  speed = 1,
-  squareSize = 120, // Default size for the square container (e.g., 120px)
+  squareSize = 120,
-}) => {
+}: ClientLogosSectionProps) => {
-  // Need at least one client to render the marquee
-  if (clients.length === 0) {
-    return null; // Or render a placeholder message if preferred
-  }
-
-  // Duplicate the clients for a seamless loop effect
   const extendedClients = [...clients, ...clients];
-
+  const squareDim = `${squareSize}px`;
-  const squareDim = `${squareSize}px`; // Convert size to string for inline style
+  const padding = Math.round(squareSize / 6);
-  const padding = Math.round(squareSize / 6); // Calculate padding based on size (adjust divisor as needed)
   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);
+
+    scrollRef.current.scrollBy({
+      left: dir === "left" ? -200 : 200,
+      behavior: "smooth",
+    });
+
+    clearTimeout(resumeTimeout);
+    resumeTimeout = setTimeout(() => {
+      setPaused(false);
+    }, 3000);
+
+    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]);
+
+  // ✅ Safe early return after hooks
+  if (clients.length === 0) return null;
+
   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 +90,17 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
         </h2>
       </div>
 
-      {/* Marquee container - group allows pausing animation on hover */}
+      {/* Logos Container */}
-      <div className="relative w-full overflow-hidden group">
+      <div className="relative w-full overflow-hidden">
-        {/* Inner container that will animate */}
         <div
-          className="flex flex-nowrap animate-marquee-continuous"
+          ref={scrollRef}
-          style={{ animationDuration: `${speed}s` }}
+          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 +116,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
+                  fill
-                  objectFit="contain" // Maintain aspect ratio within the container
+                  style={{ objectFit: "contain" }}
                 />
               </div>
             </div>
           ))}
         </div>
+      </div>
 
-        {/* Optional: Add fade effect at the edges */}
+      {/* Arrow Controls */}
-        <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="flex justify-center mt-8 space-x-6">
-        <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>
+        <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 && (
@@ -103,6 +158,8 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
   );
 };
 
+export default ClientLogosSection;
+
 export const defaultClients: Client[] = [
   { name: "ABSA", logoUrl: "/images/absa.png" },
   { name: "SYBRIN", logoUrl: "/images/sybrin.svg" },
@@ -113,4 +170,4 @@ export const defaultClients: Client[] = [
   { name: "TOYOTA", logoUrl: "/images/toyota-logo.png" },
 ];
 
-export default ClientLogosSection;
+

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,
+  //buttonHref,
-  imageUrl = "/hero-bg.jpg", // Default background image
+  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,6 +44,23 @@ 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 = [
   {
@@ -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.",
   },
 ];
 
@@ -140,7 +160,7 @@ export default function AboutUsPage() {
         <div className="absolute inset-0 bg-black opacity-30 dark:opacity-50"></div>
         <div
           className="absolute inset-0 bg-cover bg-center opacity-10"
-          style={{ backgroundImage: "url('/path/to/abstract-tech-bg.jpg')" }}
+          style={{ backgroundImage: "url('/path/to/abstract-tech-bg.jpg')"}}
         ></div>{" "}
         {/* Add a subtle background image */}
         <div className="container mx-auto px-6 text-center relative z-10">
@@ -191,7 +211,7 @@ export default function AboutUsPage() {
             <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"
@@ -241,7 +261,7 @@ 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;Our purpose is to help our clients drive transformative
@@ -299,10 +319,9 @@ export default function AboutUsPage() {
                 Deep Domain Knowledge
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
-                Retail/E-commerce: Experience in building scalable e-commerce
+                We combine broad technological capabilities with specialized
-                platforms, optimizing digital customer journeys, enabling secure
+                expertise across key industries, understanding the unique
-                payment integrations, and leveraging data analytics to drive
+                challenges and opportunities within each sector.
-                personalized shopping experiences and operational efficiency.
               </p>
             </div>
             <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -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">
@@ -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">

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

@@ -244,7 +244,8 @@ export default function ObsePage() {
             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
@@ -253,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
+              href="https://youtu.be/Sd3TnvoLtDA?si=UOeXScbosM5LZxbg" // 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"
+              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
@@ -321,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}
@@ -467,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 }}
@@ -715,7 +719,7 @@ export default function ObsePage() {
 
       {/* 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">
@@ -729,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
@@ -798,10 +802,10 @@ 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>

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
+          // data.hero_cover
-            ? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
+           // ? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
-            : "/hero-bg.jpg"
+           // : "/hero-bg-2.jpg"
+            "/banner-1.jpeg"
         } // Use optional chaining and provide a default
       />
       <CoreServicesSection
@@ -61,7 +63,7 @@ export default async function HomePage() {
         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

@@ -24,11 +24,11 @@ import {
   FaChartLine, // For Growth/Scalability
   FaTasks, // For QA
   FaComments, // For Feedback
-  FaPhone,
+  //FaPhone,
-  FaEnvelope,
+  //FaEnvelope,
 } from "react-icons/fa";
 import { COLORS } from "@/constants";
-import ContactForm from "@/components/ContactForm";
+//import ContactForm from "@/components/ContactForm";
 
 // SEO Metadata
 export const metadata: Metadata = {
@@ -323,13 +323,13 @@ export default function ProductDevelopmentPage() {
           <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-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 }}
             >
               How We Deliver
             </Link>
             <Link
-              href="#contact"
+              href="/contact"
               className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"
               style={{ color: COLORS.primary }}
             >
@@ -347,26 +347,24 @@ export default function ProductDevelopmentPage() {
         <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-8 max-w-5xl mx-auto">
+          <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-6 rounded-lg shadow-md flex items-start space-x-4"
+                className="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md"
               >
                 {item.icon && (
                   <item.icon
-                    className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0"
+                    className="text-3xl mb-3"
                     style={{ color: COLORS.primary }}
                   />
                 )}
-                <div>
+                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
-                  <h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white">
+                  {item.title}
-                    {item.title}
+                </h4>
-                  </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-                  <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                  {item.description}
-                    {item.description}
+                </p>
-                  </p>
-                </div>
               </div>
             ))}
           </div>
@@ -384,7 +382,28 @@ export default function ProductDevelopmentPage() {
             designed and built to meet your current needs, but is also ready for
             future growth and evolution.
           </SectionParagraph>
-          <FeatureGrid items={endToEndItems} />
+           <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>
 
@@ -492,7 +511,7 @@ export default function ProductDevelopmentPage() {
 
       {/* 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">
@@ -506,13 +525,13 @@ export default function ProductDevelopmentPage() {
           </p>
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
-              href="/contact?subject=Product Development Inquiry" // Pre-fill subject
+              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
+              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
@@ -522,7 +541,7 @@ export default function ProductDevelopmentPage() {
       </section>
 
       {/* 11. Contact Information Section */}
-      <section
+      {/* <section
         id="contact"
         className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
       >
@@ -537,7 +556,7 @@ export default function ProductDevelopmentPage() {
             </p>
           </div>
           <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
-            {/* Contact Details */}
+            
             <div className="space-y-6">
               <div className="flex items-center space-x-4">
                 <FaPhone
@@ -582,7 +601,7 @@ export default function ProductDevelopmentPage() {
               </Link>
             </div>
 
-            {/* Contact Form */}
+          
             <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
               <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
                 Send Us Your Inquiry
@@ -591,7 +610,9 @@ export default function ProductDevelopmentPage() {
             </div>
           </div>
         </div>
-      </section>
+      </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,15 +12,12 @@ 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
   FaTools, // General Capabilities
   FaLayerGroup, // Frameworks (SAFe, etc.)
   FaFileInvoiceDollar, // Cost/Pricing
@@ -295,62 +291,62 @@ const capabilities: Capability[] = [
   },
 ];
 
-interface Benefit {
+// interface Benefit {
-  icon: React.ElementType;
+//   icon: React.ElementType;
-  title: string;
+//   title: string;
-  description: string;
+//   description: string;
-}
+// }
 
-const augmentationBenefits: Benefit[] = [
+// const augmentationBenefits: Benefit[] = [
-  {
+//   {
-    icon: FaSyncAlt,
+//     icon: FaSyncAlt,
-    title: "Ultimate Flexibility",
+//     title: "Ultimate Flexibility",
-    description:
+//     description:
-      "Scale your team up or down quickly based on project demands and budget.",
+//       "Scale your team up or down quickly based on project demands and budget.",
-  },
+//   },
-  {
+//   {
-    icon: FaUsers,
+//     icon: FaUsers,
-    title: "Access to Expertise",
+//     title: "Access to Expertise",
-    description:
+//     description:
-      "Gain immediate access to specialized IT skills that may not be available in-house.",
+//       "Gain immediate access to specialized IT skills that may not be available in-house.",
-  },
+//   },
-  {
+//   {
-    icon: FaFileInvoiceDollar,
+//     icon: FaFileInvoiceDollar,
-    title: "Cost-Effectiveness",
+//     title: "Cost-Effectiveness",
-    description:
+//     description:
-      "Reduce recruitment costs, overheads, and long-term commitments associated with FTEs.",
+//       "Reduce recruitment costs, overheads, and long-term commitments associated with FTEs.",
-  },
+//   },
-  {
+//   {
-    icon: FaChartLine,
+//     icon: FaChartLine,
-    title: "Increased Productivity",
+//     title: "Increased Productivity",
-    description:
+//     description:
-      "Focus your core team on strategic initiatives while OMS resources handle specific tasks or projects.",
+//       "Focus your core team on strategic initiatives while OMS resources handle specific tasks or projects.",
-  },
+//   },
-  {
+//   {
-    icon: FaShieldAlt,
+//     icon: FaShieldAlt,
-    title: "Reduced Hiring Burden",
+//     title: "Reduced Hiring Burden",
-    description:
+//     description:
-      "Avoid the time-consuming process of sourcing, vetting, hiring, and onboarding new employees.",
+//       "Avoid the time-consuming process of sourcing, vetting, hiring, and onboarding new employees.",
-  },
+//   },
-  {
+//   {
-    icon: FaTasks,
+//     icon: FaTasks,
-    title: "Focus on Core Business",
+//     title: "Focus on Core Business",
-    description:
+//     description:
-      "Outsource IT project execution or specific roles, allowing you to concentrate on your primary objectives.",
+//       "Outsource IT project execution or specific roles, allowing you to concentrate on your primary objectives.",
-  },
+//   },
-  {
+//   {
-    icon: FaCheckCircle,
+//     icon: FaCheckCircle,
-    title: "Quality Assurance",
+//     title: "Quality Assurance",
-    description:
+//     description:
-      "Benefit from experienced professionals and managed delivery (in Milestone model) for high-quality outcomes.",
+//       "Benefit from experienced professionals and managed delivery (in Milestone model) for high-quality outcomes.",
-  },
+//   },
-  {
+//   {
-    icon: FaLightbulb,
+//     icon: FaLightbulb,
-    title: "Faster Project Delivery",
+//     title: "Faster Project Delivery",
-    description:
+//     description:
-      "Accelerate project timelines by quickly filling skill gaps and adding capacity.",
+//       "Accelerate project timelines by quickly filling skill gaps and adding capacity.",
-  },
+//   },
-];
+// ];
 
 const methodologies = [
   { name: "Agile (SCRUM)", icon: FaSyncAlt },
@@ -380,11 +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 leading-tight"
+
+            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 <br />
+            Flexible IT Resource <br />Augmentation & Managed Services
-            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.
@@ -394,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" />
@@ -423,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",
+                title: "Access Specialised Expertise",
-                desc: "Struggling to find specialized IT talent for specific project needs or new technologies.",
+                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",
+                title: "Flexibility & Scalability",
-                desc: "Need to scale development or testing teams quickly for peak periods without long-term overhead.",
+                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",
+                title: "Faster Onboarding & Deployment",
-                desc: "Lack of internal resources causing bottlenecks and delaying critical project timelines.",
+                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",
+                title: "Cost-Effective Hiring",
-                desc: "Wanting to manage IT personnel costs effectively, avoiding expensive recruitment and full-time hires.",
+                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",
@@ -454,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}
@@ -640,45 +639,46 @@ export default function ResourceAugmentationPage() {
       </section>
 
       {/* 6. Benefits of Partnering with OMS Section */}
-      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+      {/* Benefits of Resource Augmentation 
-        <div className="container mx-auto px-6">
+                <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
-          <div className="text-center mb-12 md:mb-16">
+                  <div className="container mx-auto px-6">
-            <FaRegHandshake
+                    <div className="text-center mb-12 md:mb-16">
-              className="text-5xl mx-auto mb-4"
+                      <FaRegHandshake
-              style={{ color: COLORS.primary }}
+                        className="text-5xl 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">
+                      />
-              Why Choose OMS for Resource Augmentation?
+                      <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
-            </h2>
+                        Why Choose OMS for Resource Augmentation?
-            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+                      </h2>
-              Leverage our expertise and flexible models to gain a competitive
+                      <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
-              advantage.
+                        Leverage our expertise and flexible models to gain a competitive
-            </p>
+                        advantage.
-          </div>
+                      </p>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                    </div>
-            {augmentationBenefits.map((benefit) => (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-              <div
+                      {augmentationBenefits.map((benefit) => (
-                key={benefit.title}
+                        <div
-                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"
+                          key={benefit.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"
-                <benefit.icon
+                        >
-                  className="text-4xl mx-auto mb-4"
+                          <benefit.icon
-                  style={{ color: COLORS.primary }}
+                            className="text-4xl mx-auto mb-4"
-                />
+                            style={{ color: COLORS.primary }}
-                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
+                          />
-                  {benefit.title}
+                          <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
-                </h4>
+                            {benefit.title}
-                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                          </h4>
-                  {benefit.description}
+                          <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-                </p>
+                            {benefit.description}
-              </div>
+                          </p>
-            ))}
+                        </div>
-          </div>
+                      ))}
-        </div>
+                    </div>
-      </section>
+                  </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
@@ -807,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">

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 {
+@keyframes marquee {
-    opacity: 0;
+  from { transform: translateX(0); }
-    transform: translateY(20px);
+  to { transform: translateX(-50%); }
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }
 
-.animate-fade-in-up {
+.animate-marquee-continuous {
-  animation: fadeInUp 0.8s ease-out forwards;
+  animation: marquee linear infinite;
-  opacity: 0; /* Start hidden */
+}
+
+.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
+               265 Von Willich Avenue
               <br />
-              265 Von Willich Avenue
+             Die Hoewes, Centurion, 0159
               <br />
-              Die Hoewes, Centurion, 0159
+              (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">
+              <a href="tel:+27684855721" className="hover:text-primary">
-                (012) 051 3282
+                +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,40 +170,39 @@ const Footer = () => {
             </p>
             <form className="flex flex-col sm:flex-row gap-2">
               {/* Input needs dark background styles */}
-              <div className="relative">
+              <div className="relative max-w-md mx-auto w-full">
                 <input
                   type="email"
                   placeholder="Enter your email"
                   aria-label="Email for newsletter"
                   className="
-          w-full
+      w-full
-          pr-24           
+      pr-24
-          
+      px-4 py-2
-          px-4 py-2
+      rounded-lg
-          rounded-lg
+      bg-[var(--dark-input)]
-          bg-[var(--dark-input)]
+      border border-[var(--dark-border)]
-          border border-[var(--dark-border)]
+      text-[var(--dark-foreground)]
-          text-[var(--dark-foreground)]
+      placeholder:text-[var(--dark-muted-foreground)]
-          placeholder:text-[var(--dark-muted-foreground)]
+      focus:outline-none focus:ring-2 focus:ring-ring
-          focus:outline-none focus:ring-2 focus:ring-ring
+      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
-          focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+    "
-        "
                 />
                 <button
                   type="submit"
                   className="
-          absolute top-0 right-0
+      absolute top-0 right-0
-          h-full
+      h-full
-          px-4
+      px-4
-          rounded-r-lg  
+      rounded-r-lg  
-          bg-primary
+      bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 
-          text-primary-foreground
+      text-primary-foreground
-          font-semibold
+      font-semibold
-          hover:bg-opacity-90
+      hover:bg-opacity-90
-          transition-colors
+      transition-colors
-          focus:outline-none focus:ring-2 focus:ring-ring
+      focus:outline-none focus:ring-2 focus:ring-ring
-          focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
-        "
+    "
                 >
                   Subscribe
                 </button>
@@ -217,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> */}
-            <Link
+
-              href="/paia-popia"
+        
+            <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>
@@ -237,3 +259,4 @@ const Footer = () => {
 };
 
 export default Footer;
+//Data-Privacy-Statement-for-Candidates

components/HeaderClient.tsx

@@ -8,15 +8,12 @@ import { usePathname } from "next/navigation"; // Import usePathname
 import {
   FiChevronDown,
   FiClipboard,
-  FiArrowRight,
   FiMenu,
   FiX,
   FiUsers,
-  FiBriefcase,
   FiCpu,
   FiBox,
-  FiFileText,
+  FiLayers
-  FiUserCheck,
 } from "react-icons/fi";
 import ThemeToggle from "./ThemeToggle";
 
@@ -44,7 +41,7 @@ const HeaderClient = () => {
 
   const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
   const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
-  const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
+  //const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
 
   const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
   const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
@@ -52,8 +49,8 @@ const HeaderClient = () => {
   const handleProductsMouseEnter = () => setProductsDropdownOpen(true);
   const handleProductsMouseLeave = () => setProductsDropdownOpen(false);
 
-  const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
+  // const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
-  const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
+  // const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
 
   const pathname = usePathname(); // Get current path
 
@@ -152,8 +149,8 @@ const HeaderClient = () => {
           <div className="hidden md:flex items-center space-x-4">
             <ThemeToggle />
             <Link
-              href="/request-demo"
+              href="/contact"
-              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"
+              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" />
@@ -181,7 +178,7 @@ 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 */}
@@ -217,7 +214,7 @@ const HeaderClient = () => {
                     `}
                   >
                     <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} ${
@@ -233,6 +230,7 @@ const HeaderClient = () => {
                             </p>
                           </div>
                         </Link>
+                        {/* Add more service links here 
                         <Link
                           href="/services/project-management"
                           className={`${megaMenuItemClasses} ${
@@ -248,6 +246,7 @@ const HeaderClient = () => {
                             </p>
                           </div>
                         </Link>
+                        */}
                         <Link
                           href="/services/product-development"
                           className={`${megaMenuItemClasses} ${
@@ -267,15 +266,16 @@ const HeaderClient = () => {
                     </div>
                   </div>
                 </div>
+
                 {/* Products */}
                 <div
-                  className={`group ${isActive("/obse") ? "active" : ""}`} // Add active class to group
+                  className={`group ${isActive("/products") ? "active" : ""}`} // Add active class to group
                   onMouseEnter={handleProductsMouseEnter}
                   onMouseLeave={handleProductsMouseLeave}
                 >
                   <button
                     className={`${megaMenuTriggerClasses} ${
-                      isActive("/obse") ? "after:w-full" : ""
+                      isActive("/products") ? "after:w-full" : ""
                     }`}
                   >
                     {" "}
@@ -285,7 +285,7 @@ const HeaderClient = () => {
                   </button>
                   <div
                     className={`
-                      absolute left-0 top-full w-full shadow-lg z-1000
+                      absolute left-0 top-full w-full shadow-lg z-40
                       bg-card border-x border-b border-border rounded-b-lg
                       opacity-0 invisible translate-y-[-10px]
                       ${
@@ -297,7 +297,7 @@ const HeaderClient = () => {
                     `}
                   >
                     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
-                      <div className="max-w-md">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
                         <Link
                           href="/obse"
                           className={`${megaMenuItemClasses} ${
@@ -309,7 +309,44 @@ const HeaderClient = () => {
                           <FiBox className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
                             <p className={megaMenuTitleClasses}>
+                                   
                               OBSE Platform
+
+                            </p>
+                          </div>
+                        </Link>
+                        {/* Add more service links here 
+                        <Link
+                          href="/services/project-management"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/services/project-management")
+                              ? "text-primary"
+                              : ""
+                          }`} // Apply active class
+                        >
+                          <FiBriefcase className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                              Project Management
+                            </p>
+                          </div>
+                        </Link>
+                        */}
+                         <Link
+                          href="https://cvevolve.com/"
+                          target="_blank"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/obse") ? "text-primary" : ""
+                          }`}
+                        >
+                          {" "}
+                          {/* Apply active class */}
+                          <FiLayers className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                                   
+                              CVEvolve
+                            
                             </p>
                           </div>
                         </Link>
@@ -317,84 +354,55 @@ const HeaderClient = () => {
                     </div>
                   </div>
                 </div>
+
+                
                 {/* Join Our Team */}
-                <div
+              
-                  className={`group ${
+                
-                    isActive("/join-us") ||
+                {/* <div
-                    isActive("/vacancies") ||
+                  className={`group ${isActive("/offerings") ? "active" : ""}`}
-                    isActive("/portal")
+                  onMouseEnter={handleOfferingsMouseEnter}
-                      ? "active"
+                  onMouseLeave={handleOfferingsMouseLeave}
-                      : ""
-                  }`} // Add active class to group (check all related paths)
-                  onMouseEnter={handleJoinUsMouseEnter}
-                  onMouseLeave={handleJoinUsMouseLeave}
                 >
                   <button
                     className={`${megaMenuTriggerClasses} ${
-                      isActive("/join-us") ||
+                      isActive("/offerings") ? "after:w-full" : ""
-                      isActive("/vacancies") ||
-                      isActive("/portal")
-                        ? "after:w-full"
-                        : ""
                     }`}
                   >
-                    {" "}
+                    Explore Our Offerings
-                    {/* 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
+      absolute left-0 top-full w-full shadow-lg z-1000
-                      bg-card border-x border-b border-border rounded-b-lg
+      bg-card border-x border-b border-border rounded-b-lg
-                      opacity-0 invisible translate-y-[-10px]
+      opacity-0 invisible translate-y-[-10px]
-                      ${
+      ${offeringsDropdownOpen ? "opacity-100 visible translate-y-0" : ""}
-                        joinUsDropdownOpen
+      transition-all duration-300 ease-out transform
-                          ? "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">
+                      <div className="max-w-md">
                         <Link
-                          href="/vacancies"
+                          href="/offerings"
                           className={`${megaMenuItemClasses} ${
-                            isActive("/vacancies") ? "text-primary" : ""
+                            isActive("/offerings") ? "text-primary" : ""
                           }`}
                         >
-                          {" "}
+                          <FiBox className={megaMenuIconClasses} />
-                          {/* Apply active class */}
-                          <FiFileText className={megaMenuIconClasses} />
                           <div className={megaMenuTextWrapperClasses}>
                             <p className={megaMenuTitleClasses}>
-                              Current Vacancies
+                              Our Offerings
-                            </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>
+                </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" // Assuming this link goes to the main services page
                 className={`flex items-center text-sm font-medium hover:opacity-80 transition-opacity group ${
@@ -406,6 +414,7 @@ const HeaderClient = () => {
                 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>
@@ -424,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>
@@ -437,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}>
@@ -463,20 +479,27 @@ const HeaderClient = () => {
           </DropdownLink>
           <DropdownLink href="/portal" onClick={handleMobileLinkClick}>
             Recruitment Portal
-          </DropdownLink>
+          </DropdownLink> */}
-          <DropdownLink href="/contact" onClick={handleMobileLinkClick}>
+
-            Contact Us
+          {/*         
-          </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"></div>
         </nav>
       </div>
@@ -485,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 = {