Merge pull request #8 from OwethuManagedServices/25-05-2025/New-Changes

25 05 2025/new changes

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

@@ -17,7 +17,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
   subtitle,
   buttonText,
   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">

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,7 +17,7 @@ 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

app/(website)/about/page.tsx

@@ -125,7 +125,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 +141,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 +192,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 +242,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 +300,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
-                platforms, optimizing digital customer journeys, enabling secure
-                payment integrations, and leveraging data analytics to drive
-                personalized shopping experiences and operational efficiency.
+                We combine broad technological capabilities with specialized
+                expertise across key industries, understanding the unique
+                challenges and opportunities within each sector.
               </p>
             </div>
             <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -324,6 +324,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 +379,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 +408,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">

app/(website)/obse/page.tsx

@@ -242,9 +242,10 @@ export default function ObsePage() {
           {/* <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"
+
             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
@@ -321,7 +322,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 +470,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 }}
@@ -798,10 +801,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,285 @@
+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",
+    "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

@@ -39,9 +39,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

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

@@ -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-1 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>
+                <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>
@@ -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>
 

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

@@ -380,11 +380,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 />
-            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.
@@ -423,28 +423,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",
@@ -454,14 +455,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 +643,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">
-        <div className="container mx-auto px-6">
-          <div className="text-center mb-12 md:mb-16">
-            <FaRegHandshake
-              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>
-            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
-              Leverage our expertise and flexible models to gain a competitive
-              advantage.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-            {augmentationBenefits.map((benefit) => (
-              <div
-                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"
-                  style={{ color: COLORS.primary }}
-                />
-                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
-                  {benefit.title}
-                </h4>
-                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-                  {benefit.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
+      {/* 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">
+                      <FaRegHandshake
+                        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>
+                      <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+                        Leverage our expertise and flexible models to gain a competitive
+                        advantage.
+                      </p>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                      {augmentationBenefits.map((benefit) => (
+                        <div
+                          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"
+                            style={{ color: COLORS.primary }}
+                          />
+                          <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
+                            {benefit.title}
+                          </h4>
+                          <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                            {benefit.description}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </section>
+            */}
       {/* 7. 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

components/HeaderClient.tsx

@@ -45,6 +45,7 @@ const HeaderClient = () => {
   const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
   const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
   const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
+  const [offeringsDropdownOpen, setOfferingsDropdownOpen] = useState(false);
 
   const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
   const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
@@ -55,6 +56,9 @@ const HeaderClient = () => {
   const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
   const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
 
+  const handleOfferingsMouseEnter = () => setOfferingsDropdownOpen(true);
+  const handleOfferingsMouseLeave = () => setOfferingsDropdownOpen(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)
@@ -217,7 +221,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 +237,7 @@ const HeaderClient = () => {
                             </p>
                           </div>
                         </Link>
+                        {/* Add more service links here 
                         <Link
                           href="/services/project-management"
                           className={`${megaMenuItemClasses} ${
@@ -248,6 +253,7 @@ const HeaderClient = () => {
                             </p>
                           </div>
                         </Link>
+                        */}
                         <Link
                           href="/services/product-development"
                           className={`${megaMenuItemClasses} ${
@@ -392,9 +398,50 @@ const HeaderClient = () => {
                     </div>
                   </div>
                 </div>
+                <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" // 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 +453,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>
@@ -428,6 +476,7 @@ const HeaderClient = () => {
           <DropdownLink href="/about" onClick={handleMobileLinkClick}>
             About Us
           </DropdownLink>
+
           <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
             Services
           </span>
@@ -437,24 +486,20 @@ 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">
             Join Us
           </span>
@@ -464,9 +509,18 @@ const HeaderClient = () => {
           <DropdownLink href="/portal" onClick={handleMobileLinkClick}>
             Recruitment Portal
           </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"
@@ -477,6 +531,7 @@ const HeaderClient = () => {
               <FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
             </Link>
           </div>
+
           <div className="pt-4 border-t border-border mt-4"></div>
         </nav>
       </div>