mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 17:18:09 +00:00
844 lines
34 KiB
TypeScript
844 lines
34 KiB
TypeScript
// /app/resource-augmentation/page.tsx (or wherever you place your page components)
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Metadata } from "next";
|
|
import {
|
|
FaArrowRight,
|
|
FaBriefcase,
|
|
FaCheckCircle,
|
|
FaClipboardList, // For BA
|
|
FaClock, // For Time & Material
|
|
FaCode, // For Development (General)
|
|
FaUsersCog, // For Managed Services/Teams
|
|
FaPaintBrush, // For UX/UI Design
|
|
FaProjectDiagram, // For Architecture/Milestones
|
|
FaPuzzlePiece, // For Integration/Solutions
|
|
FaRegHandshake, // For Partnership/Client Relations
|
|
FaShieldAlt, // For Reliability/QA
|
|
FaSitemap, // For Process/Architecture
|
|
FaSyncAlt, // For Agile/Flexibility
|
|
FaTasks, // For Project Management/Milestones
|
|
FaVial, // For Testing
|
|
FaUsers, // For Teams/Resources
|
|
FaChartLine, // For Reporting/MI
|
|
FaLightbulb, // For Innovation/Solutions
|
|
FaTools, // General Capabilities
|
|
FaLayerGroup, // Frameworks (SAFe, etc.)
|
|
FaFileInvoiceDollar, // Cost/Pricing
|
|
FaBusinessTime, // Experience/Past Projects
|
|
} from "react-icons/fa";
|
|
import { COLORS } from "@/constants"; // Assuming COLORS constant is available
|
|
|
|
// SEO Metadata
|
|
export const metadata: Metadata = {
|
|
title: "IT Resource Augmentation & Managed Services | OMS South Africa",
|
|
description:
|
|
"Flexible IT resource augmentation by Owethu Managed Services (OMS). Access expert Business Analysts, Developers, Testers, UX/UI Designers, and more on-demand or via milestone-based projects. Centurion, Gauteng.",
|
|
keywords: [
|
|
"IT resource augmentation",
|
|
"managed IT services",
|
|
"IT staffing South Africa",
|
|
"project resources",
|
|
"IT project delivery",
|
|
"Business Analyst",
|
|
"Software Developer",
|
|
"Test Analyst",
|
|
"UX/UI Designer",
|
|
"Process Engineer",
|
|
"Salesforce Partner",
|
|
"time and material IT",
|
|
"milestone-based projects",
|
|
"IT outsourcing",
|
|
"flexible IT resources",
|
|
"Centurion",
|
|
"Gauteng",
|
|
"OMS",
|
|
"Owethu Managed Services",
|
|
"black female owned IT",
|
|
],
|
|
openGraph: {
|
|
title: "Expert IT Resource Augmentation Services | OMS South Africa",
|
|
description:
|
|
"Scale your IT projects effectively with OMS's flexible resource augmentation and managed services.",
|
|
url: "https://oms.cvevolve.com/resource-augmentation", // Update with the final URL
|
|
images: [
|
|
{
|
|
// Replace with an appropriate OG image URL if you have one
|
|
url: "/images/oms-resource-augmentation-og.png",
|
|
width: 1200,
|
|
height: 630,
|
|
alt: "OMS IT Resource Augmentation Services",
|
|
},
|
|
],
|
|
locale: "en_ZA",
|
|
type: "website",
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: "Expert IT Resource Augmentation Services | OMS South Africa",
|
|
description:
|
|
"Get skilled IT professionals on demand. OMS offers flexible resource augmentation in South Africa.",
|
|
// images: ['/images/oms-resource-augmentation-twitter.png'], // Replace if needed
|
|
},
|
|
};
|
|
|
|
// --- Data Structures from PDF ---
|
|
|
|
interface ServiceModel {
|
|
icon: React.ElementType;
|
|
title: string;
|
|
description: string;
|
|
details: string[];
|
|
pricingModel: string;
|
|
}
|
|
|
|
const serviceModels: ServiceModel[] = [
|
|
{
|
|
icon: FaClock,
|
|
title: "Resource Augmentation Model",
|
|
description:
|
|
"Access skilled IT professionals on demand to supplement your existing team.",
|
|
details: [
|
|
"Provides required Technology and Human Resources.",
|
|
"Client manages the project end-to-end.",
|
|
"Ideal for adding specific skills or capacity quickly.",
|
|
"Resources-on-Demand ensures no long-term FTE costs after project completion.",
|
|
],
|
|
pricingModel: "Time-and-Material pricing structure.",
|
|
},
|
|
{
|
|
icon: FaTasks,
|
|
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, Business Process Design, Architecture, User Experience/User Interface, Data Architecture, Transformation, and Business Intelligence).",
|
|
"Change Management & Training ",
|
|
"Comprehensive Testing and Quality Assurance.",
|
|
],
|
|
pricingModel:
|
|
"Milestone-Based pricing, payable on delivery of key milestones.",
|
|
},
|
|
];
|
|
|
|
interface Capability {
|
|
role: string;
|
|
icon: React.ElementType;
|
|
description: string;
|
|
skills: {
|
|
level: string; // e.g., 'Senior', 'Intermediate', 'Junior'
|
|
points: string[];
|
|
}[]; // Simplified for web display
|
|
}
|
|
|
|
// Simplified representation of Page 4 for web display
|
|
const capabilities: Capability[] = [
|
|
{
|
|
role: "Business / System Analysts",
|
|
icon: FaClipboardList,
|
|
description:
|
|
"Bridge the gap between business needs and technology solutions, defining requirements and processes.",
|
|
skills: [
|
|
{
|
|
level: "Senior",
|
|
points: [
|
|
"Stakeholder engagement & management",
|
|
"Lead other BAs",
|
|
"Requirements/Backlog management",
|
|
"Process Design",
|
|
"Report in Steering committees",
|
|
],
|
|
},
|
|
{
|
|
level: "Intermediate",
|
|
points: [
|
|
"Document requirements",
|
|
"Design solutions with architects",
|
|
"Stakeholder engagement",
|
|
],
|
|
},
|
|
{
|
|
level: "Junior",
|
|
points: ["Elicit requirements", "Document requirements", "UML Design"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
role: "Test Analysts (Manual & Automation)",
|
|
icon: FaVial,
|
|
description:
|
|
"Ensure software quality and reliability through rigorous testing strategies and execution.",
|
|
skills: [
|
|
{
|
|
level: "Senior",
|
|
points: [
|
|
"Lead Test Analysts",
|
|
"Develop Test Strategy",
|
|
"Manage Test Execution",
|
|
"UAT Training",
|
|
"Stakeholder Management",
|
|
"Report in Steering committees",
|
|
],
|
|
},
|
|
{
|
|
level: "Intermediate",
|
|
points: [
|
|
"Document Test Scenarios",
|
|
"Write test scripts",
|
|
"Manage Test Execution",
|
|
"Report progress",
|
|
"Execute manual/automated testing",
|
|
],
|
|
},
|
|
{
|
|
level: "Junior",
|
|
points: [
|
|
"Document Test Scenarios",
|
|
"Execute manual/automated testing",
|
|
"Produce Test Data",
|
|
"Defects tracking",
|
|
"UAT Training",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
role: "UX / UI / CX Designers",
|
|
icon: FaPaintBrush,
|
|
description:
|
|
"Craft intuitive, engaging, and effective user experiences and interfaces.",
|
|
skills: [
|
|
{
|
|
level: "Senior",
|
|
points: [
|
|
"Develop Design Led Strategy",
|
|
"Lead other designers",
|
|
"Define User Journeys",
|
|
"Perform user experience testing",
|
|
"Stakeholder engagement",
|
|
"Produce UI prototypes",
|
|
],
|
|
},
|
|
{
|
|
level: "Intermediate",
|
|
points: [
|
|
"Define User Journeys",
|
|
"Perform user experience testing",
|
|
"Produce design progress reports",
|
|
"Execute designs for UI prototypes",
|
|
],
|
|
},
|
|
{
|
|
level: "Junior",
|
|
points: [
|
|
"Define User Journeys",
|
|
"Produce design progress reports",
|
|
"Execute designs for UI prototypes",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
role: "Process Engineers / Designers",
|
|
icon: FaSitemap,
|
|
description:
|
|
"Analyze, design, and optimize business processes for efficiency and effectiveness.",
|
|
skills: [
|
|
{
|
|
level: "Senior",
|
|
points: [
|
|
"Develop Process Design Strategy",
|
|
"Manage and lead teams",
|
|
"Define Target Operating Model",
|
|
"Design ASIS/TOBE Processes",
|
|
"Stakeholder management",
|
|
],
|
|
},
|
|
{
|
|
level: "Intermediate",
|
|
points: [
|
|
"Design ASIS/TOBE Processes",
|
|
"Stakeholder management",
|
|
"Evaluate & remove inefficiencies",
|
|
"Optimize current processes",
|
|
],
|
|
},
|
|
{
|
|
level: "Junior",
|
|
points: [
|
|
"Design ASIS/TOBE Processes",
|
|
"Validate & remove inefficiencies",
|
|
"Optimize current processes",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
// Note: Developer roles are mentioned in 'About Us' but not detailed in the table. Add a general entry if desired.
|
|
{
|
|
role: "Software Developers & Architects",
|
|
icon: FaCode, // Or FaProjectDiagram for Architects
|
|
description:
|
|
"Build, implement, and architect robust and scalable software solutions.",
|
|
skills: [
|
|
{
|
|
level: "General",
|
|
points: [
|
|
"Expertise across various modern technologies (backend, frontend, integration)",
|
|
"Solution architecture design",
|
|
"Development lifecycle management",
|
|
"API development and integration",
|
|
"Database design and management",
|
|
],
|
|
},
|
|
], // Keep generic as PDF doesn't detail levels here
|
|
},
|
|
];
|
|
|
|
interface Benefit {
|
|
icon: React.ElementType;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const augmentationBenefits: Benefit[] = [
|
|
{
|
|
icon: FaSyncAlt,
|
|
title: "Ultimate Flexibility",
|
|
description:
|
|
"Scale your team up or down quickly based on project demands and budget.",
|
|
},
|
|
{
|
|
icon: FaUsers,
|
|
title: "Access to Expertise",
|
|
description:
|
|
"Gain immediate access to specialized IT skills that may not be available in-house.",
|
|
},
|
|
{
|
|
icon: FaFileInvoiceDollar,
|
|
title: "Cost-Effectiveness",
|
|
description:
|
|
"Reduce recruitment costs, overheads, and long-term commitments associated with FTEs.",
|
|
},
|
|
{
|
|
icon: FaChartLine,
|
|
title: "Increased Productivity",
|
|
description:
|
|
"Focus your core team on strategic initiatives while OMS resources handle specific tasks or projects.",
|
|
},
|
|
{
|
|
icon: FaShieldAlt,
|
|
title: "Reduced Hiring Burden",
|
|
description:
|
|
"Avoid the time-consuming process of sourcing, vetting, hiring, and onboarding new employees.",
|
|
},
|
|
{
|
|
icon: FaTasks,
|
|
title: "Focus on Core Business",
|
|
description:
|
|
"Outsource IT project execution or specific roles, allowing you to concentrate on your primary objectives.",
|
|
},
|
|
{
|
|
icon: FaCheckCircle,
|
|
title: "Quality Assurance",
|
|
description:
|
|
"Benefit from experienced professionals and managed delivery (in Milestone model) for high-quality outcomes.",
|
|
},
|
|
{
|
|
icon: FaLightbulb,
|
|
title: "Faster Project Delivery",
|
|
description:
|
|
"Accelerate project timelines by quickly filling skill gaps and adding capacity.",
|
|
},
|
|
];
|
|
|
|
const methodologies = [
|
|
{ name: "Agile (SCRUM)", icon: FaSyncAlt },
|
|
{ name: "Scaled Agile (SAFe)", icon: FaLayerGroup },
|
|
{ name: "Waterfall", icon: FaProjectDiagram }, // Using ProjectDiagram as a proxy
|
|
];
|
|
|
|
const clientLogos = [
|
|
{ src: "/images/absa.png", alt: "Absa Bank Logo" }, // Replace with actual paths
|
|
{ src: "/images/sybrin.svg", alt: "Sybrin Logo" },
|
|
{ src: "/images/bcx.png", alt: "BCX Logo" },
|
|
{ src: "/images/sasol.png", alt: "Sasol Logo" },
|
|
{ src: "/images/toyota-logo.png", alt: "Toyota Logo" },
|
|
];
|
|
|
|
// --- Page Component ---
|
|
|
|
export default function ResourceAugmentationPage() {
|
|
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>
|
|
{/* Optional: Add a subtle background pattern or image */}
|
|
{/* <div className="absolute inset-0 bg-[url('/images/team-background.jpg')] bg-cover bg-center opacity-10"></div> */}
|
|
<div className="container mx-auto px-6 text-center relative z-10">
|
|
{/* 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"
|
|
style={{ color: COLORS.primary }} // Use gold color
|
|
>
|
|
Flexible IT Resource 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.
|
|
Access expert resources on demand or entrust us with full project
|
|
delivery through our flexible engagement models.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
|
<Link
|
|
href="#service-models" // Link to the service models section
|
|
className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
|
|
style={{ backgroundColor: COLORS.primary }}
|
|
>
|
|
Explore Our Models <FaArrowRight className="ml-2" />
|
|
</Link>
|
|
<Link
|
|
href="/contact?subject=Resource Augmentation Inquiry"
|
|
className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300 font-semibold"
|
|
style={{ color: COLORS.primary }} // Use gold color for secondary CTA text too
|
|
>
|
|
Discuss Your Needs
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 2. The Need / Why Resource Augmentation? Section */}
|
|
<section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
|
|
Bridge Your IT Skills Gap & Scale Efficiently
|
|
</h2>
|
|
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
Modern IT projects demand diverse skills and flexible capacity.
|
|
Resource augmentation helps overcome common challenges faced by
|
|
businesses today.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 items-stretch">
|
|
{[
|
|
{
|
|
icon: FaPuzzlePiece,
|
|
title: "Access Specialised Expertise",
|
|
desc: "Get experienced professionals in software development, business analysis, cybersecurity, cloud computing, data science, and more — bringing the right skills to your project, exactly when you need them.",
|
|
},
|
|
{
|
|
icon: FaChartLine,
|
|
title: "Flexibility & Scalability",
|
|
desc: "Easily scale your team in response to changing project needs — expanding or reducing resources without long-term obligations, while maintaining agility and control.",
|
|
},
|
|
{
|
|
icon: FaClock,
|
|
title: "Faster Onboarding & Deployment",
|
|
desc: "Our experts are project-ready, helping you accelerate delivery timelines and reduce the overhead typically associated with recruitment and training.",
|
|
},
|
|
{
|
|
icon: FaFileInvoiceDollar,
|
|
title: "Cost-Effective Hiring",
|
|
desc: "Maximize impact, minimize overhead — allowing you to scale your team according to project needs while managing costs efficiently and without compromising on quality. .",
|
|
},
|
|
/*
|
|
{
|
|
icon: FaBriefcase,
|
|
title: "Focus on Core Business",
|
|
desc: "Needing to free up internal teams to concentrate on strategic goals rather than specific project tasks.",
|
|
},
|
|
{
|
|
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-lgflex flex-col h-full"
|
|
>
|
|
<item.icon
|
|
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}
|
|
</h4>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 3. Our Solution: OMS Resource Augmentation */}
|
|
<section className="py-16 md:py-24 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
|
|
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
|
|
professionals through flexible engagement models tailored to
|
|
your specific project requirements and business objectives. As a
|
|
100% Black female-owned organization based in Centurion,
|
|
Gauteng, we are committed to excellence and delivering value.
|
|
</p>
|
|
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-semibold">
|
|
Whether you need individual experts to augment your team or a
|
|
fully managed service to deliver key project milestones, OMS
|
|
offers the expertise and flexibility you need to succeed. We are
|
|
also a Salesforce Partner, providing licenses, implementation,
|
|
and managed services.
|
|
</p>
|
|
<Link
|
|
href="/about" // Link to your main About Us page
|
|
className="inline-flex items-center mt-4 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 }}
|
|
>
|
|
Learn More About OMS <FaArrowRight className="ml-2" />
|
|
</Link>
|
|
</div>
|
|
<div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
|
|
{/* Placeholder Image - Replace with a relevant image (e.g., team collaboration, office) */}
|
|
<Image
|
|
src="/images/team-collaborative.png" // Replace with actual path
|
|
alt="OMS Team Collaboration"
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="bg-gray-200 dark:bg-gray-700"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 4. Our Service Models Section */}
|
|
<section
|
|
id="service-models"
|
|
className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700"
|
|
>
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
|
|
Flexible Engagement Models
|
|
</h2>
|
|
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
Choose the approach that best suits your project needs, management
|
|
style, and budget.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
|
{serviceModels.map((model) => (
|
|
<div
|
|
key={model.title}
|
|
className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex flex-col"
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<model.icon
|
|
className="text-3xl mr-3"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white">
|
|
{model.title}
|
|
</h3>
|
|
</div>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">
|
|
{model.description}
|
|
</p>
|
|
<ul className="space-y-2 mb-4">
|
|
{model.details.map((detail, index) => (
|
|
<li key={index} className="flex items-start text-sm">
|
|
<FaCheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 mr-2 mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-700 dark:text-gray-300">
|
|
{detail}
|
|
</span>
|
|
</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>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 5. Capabilities & Expertise Section */}
|
|
<section className="py-16 md:py-24 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<FaTools
|
|
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">
|
|
Our Core Capabilities
|
|
</h2>
|
|
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
We provide skilled professionals across key IT disciplines at
|
|
various experience levels (Junior, Intermediate, Senior).
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{capabilities.map((capability) => (
|
|
<div
|
|
key={capability.role}
|
|
className="relative bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm border-t-4 dark:border-gold-400 transition-shadow hover:shadow-md"
|
|
style={{ borderColor: COLORS.primary }}
|
|
>
|
|
<capability.icon
|
|
className="text-3xl mb-3"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
|
{capability.role}
|
|
</h4>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-3">
|
|
{capability.description}
|
|
</p>
|
|
{/* Simplified skills display for the web page overview */}
|
|
<h5 className="text-sm font-semibold mb-1 dark:text-gray-200">
|
|
Key Areas of Expertise:
|
|
</h5>
|
|
<ul className="list-disc list-inside space-y-1 text-xs text-gray-600 dark:text-gray-300">
|
|
{capability.skills[0].points.slice(0, 4).map(
|
|
(
|
|
point,
|
|
index // Show first few points from senior/general list
|
|
) => (
|
|
<li key={index}>{point}</li>
|
|
)
|
|
)}
|
|
{capability.skills[0].points.length > 4 && (
|
|
<li>And more...</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-center text-md text-gray-700 dark:text-gray-300 mt-12 max-w-3xl mx-auto">
|
|
Detailed capability breakdowns by seniority level (Junior,
|
|
Intermediate, Senior) are available upon request.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 6. Benefits of Partnering with OMS Section */}
|
|
{/* Benefits of Resource Augmentation
|
|
<section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<FaRegHandshake
|
|
className="text-5xl mx-auto mb-4"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
|
|
Why Choose OMS for Resource Augmentation?
|
|
</h2>
|
|
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
Leverage our expertise and flexible models to gain a competitive
|
|
advantage.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{augmentationBenefits.map((benefit) => (
|
|
<div
|
|
key={benefit.title}
|
|
className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
|
|
>
|
|
<benefit.icon
|
|
className="text-4xl mx-auto mb-4"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
|
{benefit.title}
|
|
</h4>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
*/}
|
|
{/* 7. Proven Experience / Past Projects (High Level) */}
|
|
<section className="py-16 md:py-24 bg-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
|
|
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">
|
|
Proven Track Record Across Industries
|
|
</h2>
|
|
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
We have successfully delivered resources and managed projects in
|
|
complex environments, including:
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto text-center">
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
|
|
<FaShieldAlt
|
|
className="text-3xl mx-auto mb-3"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
|
Financial Services & Compliance
|
|
</h4>
|
|
<p className="text-sm text-gray-600 dark:text-gray-300">
|
|
Expertise in FIC/KYC remediation, including data architecture
|
|
and management information design, as well as core banking
|
|
systems and end-to-end optimisation of lending and credit
|
|
processes.
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
|
|
<FaUsersCog
|
|
className="text-3xl mx-auto mb-3"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
|
Customer Management & Onboarding
|
|
</h4>
|
|
<p className="text-sm text-gray-600 dark:text-gray-300">
|
|
Crafting seamless, data-driven onboarding experiences through
|
|
straight-through processing, enhanced customer journeys,
|
|
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">
|
|
<FaSitemap
|
|
className="text-3xl mx-auto mb-3"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
|
Platform & Process Automation
|
|
</h4>
|
|
<p className="text-sm text-gray-600 dark:text-gray-300">
|
|
Specialising in Straight-Through Processing (STP) for banking
|
|
platforms, seamless API integration, and end-to-end Salesforce
|
|
implementations to drive efficiency and reduce manual
|
|
intervention.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Optional: Mention specific technologies briefly if desired */}
|
|
{/* <p className="text-center text-md text-gray-500 dark:text-gray-400 mt-8 max-w-4xl mx-auto italic">
|
|
Expertise includes: Salesforce, AWS, Azure, Data Warehousing, BI Tools, BPMN, Various Banking Systems (Sybrin, Flexicube, etc.), Automation Frameworks (Selenium), and more.
|
|
</p> */}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 8. Implementation Approaches / Methodologies */}
|
|
<section className="py-16 md:py-24 bg-gray-800 text-white">
|
|
<div className="container mx-auto px-6 text-center">
|
|
<FaLayerGroup
|
|
className="text-5xl mx-auto mb-4"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<h2 className="text-3xl md:text-4xl font-bold font-poppins mb-4">
|
|
Adaptable Delivery Methodologies
|
|
</h2>
|
|
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-8">
|
|
We are proficient in various project management frameworks and adapt
|
|
our approach to align with your organizational standards and project
|
|
needs.
|
|
</p>
|
|
<div className="flex flex-wrap justify-center items-center gap-8">
|
|
{methodologies.map((method) => (
|
|
<div
|
|
key={method.name}
|
|
className="flex flex-col items-center p-4 bg-gray-700 rounded-lg w-48"
|
|
>
|
|
<method.icon
|
|
className="text-4xl mb-2"
|
|
style={{ color: COLORS.primary }}
|
|
/>
|
|
<span className="font-semibold text-gray-200">
|
|
{method.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 9. Clients & Partners Section */}
|
|
<section className="py-16 md:py-24 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-6">
|
|
<h2 className="text-center text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-12">
|
|
Trusted by Leading Organizations
|
|
</h2>
|
|
{/* Updated the grid classes here */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8 md:gap-12 items-center max-w-5xl mx-auto">
|
|
{clientLogos.map((logo) => (
|
|
<div
|
|
key={logo.alt}
|
|
className="relative h-16 md:h-20 filter grayscale hover:grayscale-0 transition duration-300 brightness-75 hover:brightness-100 dark:brightness-150 dark:hover:brightness-100 dark:invert dark:hover:invert-0"
|
|
>
|
|
<Image
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</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 Enhance Your IT Team?
|
|
</h2>
|
|
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
|
|
Let's discuss how OMS resource augmentation or managed services
|
|
can help you achieve your project goals. Contact us today for a
|
|
consultation tailored to your specific needs.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
|
<Link
|
|
href="/contact?subject=Resource Augmentation Consultation"
|
|
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="mailto:admin@oms.africa" // Direct email link
|
|
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"
|
|
>
|
|
Email Us Directly
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|