Merge pull request #10 from OwethuManagedServices/dev

Dev

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

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

app/(website)/obse/page.tsx

@@ -2,11 +2,9 @@ import Image from "next/image";
 import Link from "next/link";
 import { Metadata } from "next"; // Added import
 import {
-  FaArrowRight,
   FaCheckCircle,
   FaCogs,
   FaDatabase,
-  FaEnvelope,
   FaExclamationTriangle,
   FaFileAlt,
   FaFileInvoiceDollar,
@@ -16,7 +14,6 @@ import {
   FaLaptopCode,
   FaLayerGroup,
   FaLightbulb,
-  FaPhone,
   FaPlayCircle,
   FaPuzzlePiece,
   FaSearchDollar,
@@ -31,7 +28,7 @@ import {
   FaWrench,
 } from "react-icons/fa";
 import { COLORS } from "@/constants"; // Assuming COLORS constant is available
-import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
+// import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
 
 // SEO Metadata
 export const metadata: Metadata = {
@@ -39,7 +36,7 @@ export const metadata: Metadata = {
   description:
     "Revolutionize lending with OBSE: Automated bank statement data extraction, OCR, fraud detection, and analysis for South African financial institutions. Improve accuracy, speed, and decision-making.",
   keywords: [
-    "Optimised Bank Statement Extractor",
+    "Optimized Bank Statement Extractor",
     "OBSE",
     "bank statement extraction",
     "OCR bank statements",
@@ -110,16 +107,16 @@ const keyFeatures: FeatureItem[] = [
   },
   {
     icon: FaSearchDollar,
-    title: "Intelligent Income Detection",
+    title: "Intelligent Income & Salaried Detection",
     description:
-      "Identifies salaried/non-salaried income, provides explanations, and filters out transfers.",
+      "Accurately detects both salaried and non-salaried income, explains findings, and intelligently filters out internal transfers for clearer financial insights. ",
   },
   {
     icon: FaFingerprint,
     title: "Enhanced Fraud Detection",
     description:
       "Detects document tampering, fraudulent insertions, and developing behavioral profiling.",
-    isComingSoon: true,
+    isComingSoon: false,
   },
   {
     icon: FaSyncAlt,
@@ -244,10 +241,11 @@ export default function ObsePage() {
           {/* Consider adding OMS Logo here */}
           {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
           <h1
-            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
+            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-tight"
-            style={{ color: COLORS.primary }} // Use gold color
+
+            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
@@ -324,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}
@@ -347,7 +347,7 @@ export default function ObsePage() {
                 OBSE: Automated Accuracy, Speed, and Insight
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
-                Optimised Bank Statement Extractor (OBSE) is an advanced OCR and
+                Optimized Bank Statement Extractor (OBSE) is an advanced OCR and
                 data aggregation platform designed specifically for the South
                 African financial landscape. It seamlessly extracts
                 comprehensive, accurate data from any bank statement (individual
@@ -470,11 +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 }}
@@ -691,10 +691,10 @@ export default function ObsePage() {
         </div>
       </section>
 
-      {/* 11. About OMS Section (Brief) */}
+      {/* 11. About OMS Section (Brief) 
       <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
         <div className="container mx-auto px-6 text-center">
-          {/* Optional: OMS Logo */}
+          { Optional: OMS Logo }
           <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
             Your Experienced Partner in Financial Technology
           </h2>
@@ -714,6 +714,7 @@ export default function ObsePage() {
           </Link>
         </div>
       </section>
+      /}
 
       {/* 12. Call to Action (CTA) Section */}
       <section
@@ -753,6 +754,7 @@ export default function ObsePage() {
       </section>
 
       {/* 13. Contact Information Section */}
+      {/*}
       <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
         <div className="container mx-auto px-6">
           <div className="text-center mb-12">
@@ -767,7 +769,10 @@ export default function ObsePage() {
             </p>
           </div>
           <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
-            {/* Contact Details */}
+            { -----Contact Details */}
+
+      {/* Optional: Add a contact form component here if available ---
+            
             <div className="space-y-6">
               <div className="flex items-center space-x-4">
                 <FaPhone
@@ -796,14 +801,16 @@ export default function ObsePage() {
                     Email
                   </h3>
                   <a
-                    href="mailto:Zanelem@oms.africa" // Updated email
+                    href="mailto:hello@oms.africa" // Updated email  //
                     className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                   >
-                    Zanelem@oms.africa
+                    hello@oms.africa
                   </a>
                 </div>
               </div>
-              {/* Optional: Link to main contact page */}
+
+              {--- Optional: Link to main contact page */}
+      {/* --- comment out if not needed}
               <Link
                 href="/contact"
                 className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300"
@@ -812,9 +819,10 @@ export default function ObsePage() {
                 Go to Full Contact Page <FaArrowRight className="ml-2" />
               </Link>
             </div>
+              */}
 
-            {/* Optional: Simple Contact Form (if ContactForm component is not used/available) */}
+      {/* Optional: Simple Contact Form (if ContactForm component is not used/available) */}
-            {/* <form className="space-y-4">
+      {/* <form className="space-y-4">
               <div>
                 <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                 <input type="text" id="name" name="name" required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
@@ -832,7 +840,7 @@ export default function ObsePage() {
               </button>
             </form> */}
 
-            {/* OR Use the ContactForm Component */}
+      {/* OR Use the ContactForm Component 
             <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
               <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
                 Send a Quick Inquiry
@@ -842,6 +850,9 @@ export default function ObsePage() {
           </div>
         </div>
       </section>
+      */}
+
+      {/* 14. Footer Section */}
     </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
+          // 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
@@ -58,7 +59,7 @@ export default async function HomePage() {
         eyebrow="Featured Product"
         title="Streamline Financial Analysis with"
         productName="OBSE"
-        description="Our advanced Optimised Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights."
+        description="Our advanced Optimized Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights."
         features={defaultObseFeatures}
         buttonText="Learn More & Demo"
         buttonHref="/products/obse" // Link to the OBSE product page

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

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

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

@@ -22,15 +22,12 @@ import {
   FaUsers, // For Teams/Resources
   FaChartLine, // For Reporting/MI
   FaLightbulb, // For Innovation/Solutions
-  FaPhone, // Contact
-  FaEnvelope, // Contact
   FaTools, // General Capabilities
   FaLayerGroup, // Frameworks (SAFe, etc.)
   FaFileInvoiceDollar, // Cost/Pricing
   FaBusinessTime, // Experience/Past Projects
 } from "react-icons/fa";
 import { COLORS } from "@/constants"; // Assuming COLORS constant is available
-import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
 
 // SEO Metadata
 export const metadata: Metadata = {
@@ -49,7 +46,7 @@ export const metadata: Metadata = {
     "UX/UI Designer",
     "Process Engineer",
     "Salesforce Partner",
-    "time and material IT",
+   // "time and material IT",
     "milestone-based projects",
     "IT outsourcing",
     "flexible IT resources",
@@ -98,7 +95,7 @@ interface ServiceModel {
 const serviceModels: ServiceModel[] = [
   {
     icon: FaClock,
-    title: "Resource Augmentation Model (Time & Material)",
+    title: "Resource Augmentation Model",
     description:
       "Access skilled IT professionals on demand to supplement your existing team.",
     details: [
@@ -111,15 +108,14 @@ const serviceModels: ServiceModel[] = [
   },
   {
     icon: FaTasks,
-    title: "Milestone-Based Model (Managed Service)",
+    title: "Milestone-Based Model",
     description:
       "OMS takes full responsibility for delivering specific IT project phases or entire projects.",
     details: [
       "Includes Project Planning & Management.",
-      "Covers End-to-end Process Design (Requirements, BPD, Arch, UX/UI).",
+      "Covers End-to-end Process Design (Requirements, Business Process Design, Architecture, User Experience/User Interface, Data Architecture, Transformation, and Business Intelligence).",
-      "Includes Data & MI Design (Architecture, Transformation, BI).",
+      "Change Management & Training ",
-      "Comprehensive Testing & QA (Strategy, Implementation, Management).",
+      "Comprehensive Testing and Quality Assurance.",
-      "OMS manages all deployed team members, deliverables, and velocity.",
     ],
     pricingModel:
       "Milestone-Based pricing, payable on delivery of key milestones.",
@@ -384,10 +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"
+
+            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-<1.5>"
             style={{ color: COLORS.primary }} // Use gold color
           >
-            Flexible IT Resource Augmentation & Managed Services
+            Flexible IT Resource <br />Augmentation & Managed Services
           </h1>
           <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
             Scale your IT capabilities effectively with Owethu Managed Services.
@@ -426,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",
+                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",
@@ -457,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}
@@ -487,7 +487,7 @@ export default function ResourceAugmentationPage() {
                 Your Strategic Partner for IT Talent
               </h2>
               <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
-                Owethu Managed Services (OMS) provides high-caliber IT
+                Owethu Managed Services provides high-caliber IT
                 professionals through flexible engagement models tailored to
                 your specific project requirements and business objectives. As a
                 100% Black female-owned organization based in Centurion,
@@ -553,7 +553,7 @@ export default function ResourceAugmentationPage() {
                     {model.title}
                   </h3>
                 </div>
-                <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm flex-grow">
+                <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">
                   {model.description}
                 </p>
                 <ul className="space-y-2 mb-4">
@@ -566,17 +566,19 @@ export default function ResourceAugmentationPage() {
                     </li>
                   ))}
                 </ul>
+                {/* Add the sentence as a separate paragraph for the Milestone model */}
+                {model.title === "Milestone-Based Model" && (
+                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-4 italic">
+                    OMS manages all deployed team members, deliverables, and
+                    velocity.
+                  </p>
+                )}
                 <p className="text-sm font-semibold text-gray-800 dark:text-gray-200 mt-auto pt-4 border-t border-gray-200 dark:border-gray-600">
                   {model.pricingModel}
                 </p>
               </div>
             ))}
           </div>
-          <p className="text-center text-md text-gray-700 dark:text-gray-300 mt-12 max-w-3xl mx-auto">
-            OMS operates using both <span className="font-semibold">AGILE</span>{" "}
-            and <span className="font-semibold">Waterfall</span> Frameworks,
-            depending on client preference and project suitability.
-          </p>
         </div>
       </section>
 
@@ -641,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">
+      {/* 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
@@ -704,8 +707,10 @@ export default function ResourceAugmentationPage() {
                 Financial Services & Compliance
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                FIC/KYC Remediation (Data Architecture, MI), Core Banking
+                Expertise in FIC/KYC remediation, including data architecture
-                Systems, Lending/Credit Process Optimisation.
+                and management information design, as well as core banking
+                systems and end-to-end optimisation of lending and credit
+                processes.
               </p>
             </div>
             <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@@ -717,8 +722,9 @@ export default function ResourceAugmentationPage() {
                 Customer Management & Onboarding
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                Design, Testing, Requirements, Process Engineering, UX/UI for
+                Crafting seamless, data-driven onboarding experiences through
-                customer-facing platforms.
+                straight-through processing, enhanced customer journeys,<br/>
+                real-time insights, and a 360-degree customer view.
               </p>
             </div>
             <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@@ -730,8 +736,10 @@ export default function ResourceAugmentationPage() {
                 Platform & Process Automation
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                Straight-Through Processing (STP) on Banking Platforms, API
+                Specialising in Straight-Through Processing (STP) for banking
-                Integration, Salesforce implementations.
+                platforms, seamless API integration, and end-to-end Salesforce
+                implementations to drive efficiency and reduce manual
+                intervention.
               </p>
             </div>
           </div>
@@ -831,100 +839,6 @@ export default function ResourceAugmentationPage() {
           </div>
         </div>
       </section>
-
-      {/* 11. Contact Information Section */}
-      <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
-        <div className="container mx-auto px-6">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
-              Get in Touch
-            </h2>
-            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
-              We&apos;re ready to assist you. Reach out via phone, email, or use
-              the form below to start the conversation about your IT resource
-              needs.
-            </p>
-          </div>
-          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
-            {/* Contact Details */}
-            <div className="space-y-6 bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
-              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
-                Contact Information
-              </h3>
-              <div className="flex items-center space-x-4">
-                <FaPhone
-                  className="w-6 h-6 flex-shrink-0"
-                  style={{ color: COLORS.primary }}
-                />
-                <div>
-                  <h4 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
-                    Phone
-                  </h4>
-                  {/* Using specific numbers from PDF */}
-                  <a
-                    href="tel:+27120513281"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Zanele: (012) 051 3281
-                  </a>
-                  <a
-                    href="tel:+27120513282"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Lindiwe: (012) 051 3282
-                  </a>
-                </div>
-              </div>
-              <div className="flex items-center space-x-4">
-                <FaEnvelope
-                  className="w-6 h-6 flex-shrink-0"
-                  style={{ color: COLORS.primary }}
-                />
-                <div>
-                  <h4 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
-                    Email
-                  </h4>
-                  {/* Using specific emails from PDF */}
-                  <a
-                    href="mailto:Zanelem@oms.africa"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Zanelem@oms.africa
-                  </a>
-                  <a
-                    href="mailto:Lindiwes@oms.africa"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
-                  >
-                    Lindiwes@oms.africa
-                  </a>
-                  <a
-                    href="mailto:admin@oms.africa"
-                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm mt-1"
-                  >
-                    admin@oms.africa (General)
-                  </a>
-                </div>
-              </div>
-              {/* Optional: Link to main contact page */}
-              <Link
-                href="/contact"
-                className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 mt-4"
-                style={{ color: COLORS.primary }}
-              >
-                Go to Full Contact Page <FaArrowRight className="ml-2" />
-              </Link>
-            </div>
-
-            {/* Contact Form */}
-            <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
-              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
-                Send a Quick Inquiry
-              </h3>
-              <ContactForm /> {/* Reuse your existing contact form */}
-            </div>
-          </div>
-        </div>
-      </section>
     </div>
   );
 }

app/layout.tsx

@@ -3,7 +3,6 @@ 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";
 
 const poppins = Poppins({
@@ -95,7 +94,6 @@ export default function RootLayout({
           <Header />
           <main>{children}</main>
           <Footer />
-          <ChatbotWidget />
         </ThemeProvider>
       </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

@@ -157,20 +157,44 @@ const Footer = () => {
             </p>
             <form className="flex flex-col sm:flex-row gap-2">
               {/* Input needs dark background styles */}
-              <input
+              <div className="relative">
-                type="email"
+                <input
-                placeholder="Enter your email"
+                  type="email"
-                aria-label="Email for newsletter"
+                  placeholder="Enter your email"
-                // Use dark variable for input bg/border, bright for text
+                  aria-label="Email for newsletter"
-                className="flex-grow px-4 py-2 rounded-lg bg-[var(--dark-input)] border border-[var(--dark-border)] text-[var(--dark-foreground)] placeholder:text-[var(--dark-muted-foreground)] focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]" // Ring offset needs dark bg
+                  className="
-              />
+          w-full
-              {/* Keep button styling primary */}
+          pr-24           
-              <button
+          
-                type="submit"
+          px-4 py-2
-                className="bg-primary text-primary-foreground px-4 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]" // Ring offset needs dark bg
+          rounded-lg
-              >
+          bg-[var(--dark-input)]
-                Subscribe
+          border border-[var(--dark-border)]
-              </button>
+          text-[var(--dark-foreground)]
+          placeholder:text-[var(--dark-muted-foreground)]
+          focus:outline-none focus:ring-2 focus:ring-ring
+          focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+        "
+                />
+                <button
+                  type="submit"
+                  className="
+          absolute top-0 right-0
+          h-full
+          px-4
+          rounded-r-lg  
+          bg-primary
+          text-primary-foreground
+          font-semibold
+          hover:bg-opacity-90
+          transition-colors
+          focus:outline-none focus:ring-2 focus:ring-ring
+          focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+        "
+                >
+                  Subscribe
+                </button>
+              </div>
             </form>
             {/* Badges - Use a subtle dark bg */}
             <div className="mt-6 space-x-2 sm:space-x-4">

components/Header.tsx

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

components/HeaderClient.tsx

@@ -4,53 +4,24 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { usePathname } from "next/navigation"; // Import usePathname
 import {
   FiChevronDown,
   FiClipboard,
   FiArrowRight,
   FiMenu,
   FiX,
-  FiLogIn,
+  FiUsers,
-  FiUsers, // Resource Augmentation
+  FiBriefcase,
-  FiBriefcase, // Project Management
+  FiCpu,
-  FiCpu, // Product Development
+  FiBox,
-  FiBox, // OBSE
+  FiFileText,
-  FiFileText, // Vacancies
+  FiUserCheck,
-  FiUserCheck, // Recruitment Portal
 } from "react-icons/fi";
 import ThemeToggle from "./ThemeToggle";
-import type { Session } from "@auth/core/types";
 
 const omsLogoUrl = "/oms-logo.svg";
 
-type DropdownMenuProps = {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  menuClasses?: string;
-};
-const DropdownMenu = ({
-  trigger,
-  children,
-  menuClasses = "w-48",
-}: DropdownMenuProps) => (
-  <div className="relative group">
-    <button className="flex items-center space-x-1 text-sm font-medium focus:outline-none inherit-color group">
-      {trigger}
-      <FiChevronDown className="w-4 h-4 transition-transform duration-200 group-hover:rotate-180 group-focus-within:rotate-180" />
-    </button>
-    <div
-      className={`
-        absolute left-0 mt-2 ${menuClasses} origin-top-left rounded-md shadow-lg z-50
-        bg-card border border-border
-        opacity-0 invisible group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible
-        transition-all duration-200
-      `}
-    >
-      <div className="py-1">{children}</div>
-    </div>
-  </div>
-);
-
 type DropdownLinkProps = {
   href: string;
   children: React.ReactNode;
@@ -66,34 +37,54 @@ const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => (
   </Link>
 );
 
-type HeaderClientProps = {
+const HeaderClient = () => {
-  session: Session | null;
-  handleSignIn: () => void;
-  handleSignOut: () => void;
-};
-
-const HeaderClient = ({
-  session,
-  handleSignIn,
-  handleSignOut,
-}: HeaderClientProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const toggleMenu = () => setIsMenuOpen((open) => !open);
   const handleMobileLinkClick = () => setIsMenuOpen(false);
 
+  const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
+  const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
+  const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
+  const [offeringsDropdownOpen, setOfferingsDropdownOpen] = useState(false);
+
+  const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
+  const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
+
+  const handleProductsMouseEnter = () => setProductsDropdownOpen(true);
+  const handleProductsMouseLeave = () => setProductsDropdownOpen(false);
+
+  const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
+  const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
+
+  const 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)
+  const isActive = (href: string, exact = false) => {
+    if (exact) {
+      return pathname === href;
+    }
+    // Handle root path specifically
+    if (href === "/") {
+      return pathname === "/";
+    }
+    return pathname.startsWith(href);
+  };
+
   const megaMenuTriggerClasses = `
-    relative inline-flex items-center text-sm font-medium text-primary-foreground group
+    relative inline-flex items-center text-sm font-medium text-primary-foreground
     hover:opacity-90 transition-opacity duration-150 ease-in-out pb-1
     after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[2px]
     after:w-0 after:bg-primary-foreground/80 after:transition-all after:duration-300 after:ease-out
-    group-hover:after:w-full group-focus-within:after:w-full
   `;
 
   const megaMenuItemClasses = `
     flex items-center p-3 -m-3 rounded-lg
-    hover:bg-secondary transition-colors duration-150 ease-in-out group
+    hover:bg-secondary transition-colors duration-150 ease-in-out
   `;
-  const megaMenuIconClasses = `flex-shrink-0 h-6 w-6 text-primary group-hover:text-primary-focus mr-4`;
+  const megaMenuIconClasses = `flex-shrink-0 h-6 w-6 text-primary mr-4`;
   const megaMenuTextWrapperClasses = `text-sm`;
   const megaMenuTitleClasses = `font-semibold text-card-foreground`;
 
@@ -122,25 +113,41 @@ const HeaderClient = ({
           <nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
             <Link
               href="/"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               Home
             </Link>
             <Link
               href="/tech-talk"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/tech-talk")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               Tech Talk
             </Link>
             <Link
               href="/about"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/about")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               About Us
             </Link>
             <Link
               href="/contact"
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition"
+              className={`text-sm font-medium transition ${
+                isActive("/contact")
+                  ? "text-primary"
+                  : "text-foreground/80 hover:text-primary"
+              }`} // Apply active class
             >
               Contact Us
             </Link>
@@ -156,42 +163,6 @@ const HeaderClient = ({
               <FiClipboard className="w-4 h-4 mr-1.5" />
               Request OBSE Demo
             </Link>
-
-            {session?.user ? (
-              <DropdownMenu
-                menuClasses="w-40 right-0 left-auto"
-                trigger={
-                  <div className="flex items-center space-x-2 cursor-pointer hover:opacity-80 transition">
-                    <Image
-                      src={session.user.image || "/default-avatar.png"}
-                      alt={session.user.name || "User"}
-                      width={32}
-                      height={32}
-                      className="rounded-full ring-1 ring-primary ring-offset-2 ring-offset-background"
-                    />
-                    <span className="text-sm font-medium text-foreground hidden lg:inline">
-                      {session.user.name?.split(" ")[0]}
-                    </span>
-                  </div>
-                }
-              >
-                <button
-                  onClick={handleSignOut}
-                  className="block w-full text-left px-4 py-2 text-sm text-destructive hover:bg-secondary hover:text-destructive transition"
-                >
-                  Sign Out
-                </button>
-              </DropdownMenu>
-            ) : (
-              <button
-                onClick={handleSignIn}
-                className="p-2 rounded-full text-foreground/70 hover:text-primary hover:bg-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors"
-                title="Sign In"
-                aria-label="Sign In"
-              >
-                <FiLogIn className="w-5 h-5" />
-              </button>
-            )}
           </div>
 
           <div className="md:hidden flex items-center">
@@ -217,144 +188,274 @@ const HeaderClient = ({
       <div className="bg-primary relative">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8">
           <div className="hidden md:flex justify-between items-center h-12">
-            <nav className="flex items-center space-x-8 lg:space-x-10">
+            {/* Wrap nav and link in a flex container */}
-              {/* Services */}
+            <div className="flex items-center space-x-8 lg:space-x-10">
-              <div className="group">
+              <nav className="flex items-center space-x-8 lg:space-x-10">
-                <button className={megaMenuTriggerClasses}>
+                {/* Services */}
-                  Services
-                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
-                </button>
                 <div
-                  className={`
+                  className={`group ${isActive("/services") ? "active" : ""}`} // Add active class to group
-                    absolute left-0 top-full w-full shadow-lg z-40
+                  onMouseEnter={handleServicesMouseEnter}
-                    bg-card border-x border-b border-border rounded-b-lg
+                  onMouseLeave={handleServicesMouseLeave}
-                    opacity-0 invisible translate-y-[-10px]
-                    group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
-                    transition-all duration-300 ease-out transform
-                  `}
                 >
-                  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                  <button
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
+                    className={`${megaMenuTriggerClasses} ${
-                      <Link
+                      isActive("/services") ? "after:w-full" : ""
-                        href="/services/resource-augmentation"
+                    }`}
-                        className={megaMenuItemClasses}
+                  >
-                      >
+                    {" "}
-                        <FiUsers className={megaMenuIconClasses} />
+                    {/* Apply underline based on active state */}
-                        <div className={megaMenuTextWrapperClasses}>
+                    Services
-                          <p className={megaMenuTitleClasses}>
+                    <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
-                            Resource Augmentation
+                  </button>
-                          </p>
+                  <div
-                        </div>
+                    className={`
-                      </Link>
+                      absolute left-0 top-full w-full shadow-lg z-40
-                      <Link
+                      bg-card border-x border-b border-border rounded-b-lg
-                        href="/services/project-management"
+                      opacity-0 invisible translate-y-[-10px]
-                        className={megaMenuItemClasses}
+                      ${
-                      >
+                        servicesDropdownOpen
-                        <FiBriefcase className={megaMenuIconClasses} />
+                          ? "opacity-100 visible translate-y-0"
-                        <div className={megaMenuTextWrapperClasses}>
+                          : ""
-                          <p className={megaMenuTitleClasses}>
+                      }
-                            Project Management
+                      transition-all duration-300 ease-out transform
-                          </p>
+                    `}
-                        </div>
+                  >
-                      </Link>
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
-                      <Link
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
-                        href="/services/product-development"
+                        <Link
-                        className={megaMenuItemClasses}
+                          href="/services/resource-augmentation"
-                      >
+                          className={`${megaMenuItemClasses} ${
-                        <FiCpu className={megaMenuIconClasses} />
+                            isActive("/services/resource-augmentation")
-                        <div className={megaMenuTextWrapperClasses}>
+                              ? "text-primary"
-                          <p className={megaMenuTitleClasses}>
+                              : ""
-                            Product Development
+                          }`} // Apply active class
-                          </p>
+                        >
-                        </div>
+                          <FiUsers className={megaMenuIconClasses} />
-                      </Link>
+                          <div className={megaMenuTextWrapperClasses}>
-                    </div>
+                            <p className={megaMenuTitleClasses}>
-                    <div className="mt-6 pt-4 border-t border-border flex justify-end">
+                              Resource Augmentation
-                      <Link
+                            </p>
-                        href="/services"
+                          </div>
-                        className="flex items-center text-sm font-medium text-primary hover:underline"
+                        </Link>
-                      >
+                        {/* Add more service links here 
-                        Explore All Services
+                        <Link
-                        <FiArrowRight className="w-4 h-4 ml-1" />
+                          href="/services/project-management"
-                      </Link>
+                          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="/services/product-development"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/services/product-development")
+                              ? "text-primary"
+                              : ""
+                          }`} // Apply active class
+                        >
+                          <FiCpu className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                              Product Development
+                            </p>
+                          </div>
+                        </Link>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
+                {/* Products */}
-              {/* Products */}
-              <div className="group">
-                <button className={megaMenuTriggerClasses}>
-                  Products
-                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
-                </button>
                 <div
-                  className={`
+                  className={`group ${isActive("/obse") ? "active" : ""}`} // Add active class to group
-                    absolute left-0 top-full w-full shadow-lg z-40
+                  onMouseEnter={handleProductsMouseEnter}
-                    bg-card border-x border-b border-border rounded-b-lg
+                  onMouseLeave={handleProductsMouseLeave}
-                    opacity-0 invisible translate-y-[-10px]
-                    group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
-                    transition-all duration-300 ease-out transform
-                  `}
                 >
-                  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                  <button
-                    <div className="max-w-md">
+                    className={`${megaMenuTriggerClasses} ${
-                      <Link href="/obse" className={megaMenuItemClasses}>
+                      isActive("/obse") ? "after:w-full" : ""
-                        <FiBox className={megaMenuIconClasses} />
+                    }`}
-                        <div className={megaMenuTextWrapperClasses}>
+                  >
-                          <p className={megaMenuTitleClasses}>OBSE Platform</p>
+                    {" "}
-                        </div>
+                    {/* Apply underline based on active state */}
-                      </Link>
+                    Products
+                    <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
+                  </button>
+                  <div
+                    className={`
+                      absolute left-0 top-full w-full shadow-lg z-1000
+                      bg-card border-x border-b border-border rounded-b-lg
+                      opacity-0 invisible translate-y-[-10px]
+                      ${
+                        productsDropdownOpen
+                          ? "opacity-100 visible translate-y-0"
+                          : ""
+                      }
+                      transition-all duration-300 ease-out transform
+                    `}
+                  >
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                      <div className="max-w-md">
+                        <Link
+                          href="/obse"
+                          className={`${megaMenuItemClasses} ${
+                            isActive("/obse") ? "text-primary" : ""
+                          }`}
+                        >
+                          {" "}
+                          {/* Apply active class */}
+                          <FiBox className={megaMenuIconClasses} />
+                          <div className={megaMenuTextWrapperClasses}>
+                            <p className={megaMenuTitleClasses}>
+                              OBSE Platform
+                            </p>
+                          </div>
+                        </Link>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
+                {/* Join Our Team */}
-              {/* Join Our Team */}
-              <div className="group">
-                <button className={megaMenuTriggerClasses}>
-                  Join Our Team
-                  <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
-                </button>
                 <div
-                  className={`
+                  className={`group ${
-                    absolute left-0 top-full w-full shadow-lg z-40
+                    isActive("/join-us") ||
-                    bg-card border-x border-b border-border rounded-b-lg
+                    isActive("/vacancies") ||
-                    opacity-0 invisible translate-y-[-10px]
+                    isActive("/portal")
-                    group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
+                      ? "active"
-                    transition-all duration-300 ease-out transform
+                      : ""
-                  `}
+                  }`} // Add active class to group (check all related paths)
+                  onMouseEnter={handleJoinUsMouseEnter}
+                  onMouseLeave={handleJoinUsMouseLeave}
                 >
-                  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+                  <button
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
+                    className={`${megaMenuTriggerClasses} ${
-                      <Link href="/vacancies" className={megaMenuItemClasses}>
+                      isActive("/join-us") ||
-                        <FiFileText className={megaMenuIconClasses} />
+                      isActive("/vacancies") ||
-                        <div className={megaMenuTextWrapperClasses}>
+                      isActive("/portal")
-                          <p className={megaMenuTitleClasses}>
+                        ? "after:w-full"
-                            Current Vacancies
+                        : ""
-                          </p>
+                    }`}
-                        </div>
+                  >
-                      </Link>
+                    {" "}
-                      <Link href="/portal" className={megaMenuItemClasses}>
+                    {/* Apply underline based on active state */}
-                        <FiUserCheck className={megaMenuIconClasses} />
+                    Join Our Team
-                        <div className={megaMenuTextWrapperClasses}>
+                    <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
-                          <p className={megaMenuTitleClasses}>
+                  </button>
-                            Recruitment Portal
+                  <div
-                          </p>
+                    className={`
-                        </div>
+                      absolute left-0 top-full w-full shadow-lg z-1000
-                      </Link>
+                      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>
-              </div>
+                {/* <div
-            </nav>
+                  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
+              <Link
-              href="/services"
+                href="/services" // Assuming this link goes to the main services page
-              className="flex items-center text-sm font-medium text-primary-foreground hover:opacity-80 transition-opacity group"
+                className={`flex items-center text-sm font-medium hover:opacity-80 transition-opacity group ${
-            >
+                  isActive("/services")
-              Explore Our Offerings
+                    ? "text-primary"
-              <FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
+                    : "text-primary-foreground"
-            </Link>
+                }`} // Apply active class
+              >
+                Explore Our Offerings
+                <FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
+              </Link>
+              */}
+            </div>{" "}
+            {/* Close the new flex container */}
           </div>
         </div>
       </div>
@@ -375,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>
@@ -384,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>
@@ -411,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"
@@ -424,29 +531,8 @@ 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">
+
-            {session?.user ? (
+          <div className="pt-4 border-t border-border mt-4"></div>
-              <button
-                onClick={() => {
-                  handleSignOut();
-                  handleMobileLinkClick();
-                }}
-                className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-destructive hover:bg-secondary transition"
-              >
-                Sign Out
-              </button>
-            ) : (
-              <button
-                onClick={() => {
-                  handleSignIn();
-                  handleMobileLinkClick();
-                }}
-                className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-foreground hover:bg-secondary hover:text-primary transition"
-              >
-                <FiLogIn className="w-4 h-4 mr-2" /> Sign In
-              </button>
-            )}
-          </div>
         </nav>
       </div>
     </header>

oms-website.code-workspace

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