omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2025-12-17 15:38:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from OwethuManagedServices/dev

Browse Source 
Dev
This commit is contained in:
JohannesOmsDev
2025-05-26 09:53:57 +02:00
committed by GitHub
parent 730dc51629 2eb3e35cdb
commit af744bd192
26 changed files with 12108 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/(website)/_components/CoreServicesSection.tsx
View File

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

2
app/(website)/_components/HeroSection.tsx
View File

@ -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">

2
app/(website)/_components/HeroSectionDynamic.tsx
View File

@ -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">

2
app/(website)/_components/HeroSectionModern.tsx
View File

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

78
app/(website)/about/page.tsx
View File

@ -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
Services was born from a clear vision: to harness the
transformative power of technology not just to solve problems,
but to proactively create opportunities for businesses to
thrive. We saw a need for a partner who truly understands both
technology&apos;s potential and the unique challenges modern
organizations face.
Owethu Managed Services wasn’t built in a boardroom — it was
born from a deeper calling: a desire to do more than simply
exist in the tech space. We set out to use innovation not as a
buzzword, but as a lifeline — pulling businesses out of
stagnation and into a future full of possibility.
</p>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
From day one, we’ve challenged the status quo. We don’t just fix
problems — we anticipate them, reimagine them, and turn them
into powerful stepping stones for growth. Our mission is simple:
break what seems impossible, and rebuild it into something
extraordinary.
</p>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
Elaborate on the journey. E.g., Our journey has been defined by
a relentless pursuit of knowledge, adaptation to the
ever-evolving tech landscape, and an unwavering commitment to
client success. This focus has established us as trusted
advisors and thought leaders in digital transformation.
Today, OMS is more than a service provider. We are trusted
digital transformation partners, creative problem-solvers, and
passionate believers in human-driven innovation. This isn’t just
business. This is our purpose.
</p>
</div>
<div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
{/* Replace with a relevant, high-quality image representing innovation or teamwork */}
<Image
src="/images/team.svg"
src="/about-2.jpg" // Ensure this image exists in your public folder
alt="Team collaborating on innovative solutions"
layout="fill"
objectFit="cover"
@ -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
transforming industries for the better. We aim to empower
organisations to break through technological barriers and
achieve greater success.&quot;
solutions, pushing the boundaries of what&apos;s possible,and
transforming industries for the better.&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
solutions that drive business success. By combining expertise
with cutting-edge technology, we solve complex problems and
enable our clients to achieve outstanding results. We partner
closely with clients to ensure every solution aligns with their
unique needs for long-term success.&quot;
&quot;Our purpose is to help our clients drive transformative
growth and innovation to propel their business forward –
redefining whats possible.&quot;
</p>
</div>
</div>
@ -324,6 +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
also drive efficiency, foster growth, enhance user experiences, and
provide a clear return on investment. Let&apos;s build a successful
future, together.
creating solutions that ignite momentum, unlock potential, and turn
ambition into achievement — empowering you to rise above challenges
and lead with confidence into the future. Together, let&apos;s build
a future where your success is not just a possibility, but a
reality.
</p>
{/* Optional CTA to contact */}
<div className="mt-10">

59
app/(website)/obse/page.tsx
View File

@ -2,11 +2,9 @@ import Image from "next/image";
import Link from "next/link";
import { Metadata } from "next"; // Added import
import {
FaArrowRight,
FaCheckCircle,
FaCogs,
FaDatabase,
FaEnvelope,
FaExclamationTriangle,
FaFileAlt,
FaFileInvoiceDollar,
@ -16,7 +14,6 @@ import {
FaLaptopCode,
FaLayerGroup,
FaLightbulb,
FaPhone,
FaPlayCircle,
FaPuzzlePiece,
FaSearchDollar,
@ -31,7 +28,7 @@ import {
FaWrench,
} from "react-icons/fa";
import { COLORS } from "@/constants"; // Assuming COLORS constant is available
import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
// import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
// SEO Metadata
export const metadata: Metadata = {
@ -39,7 +36,7 @@ export const metadata: Metadata = {
description:
"Revolutionize lending with OBSE: Automated bank statement data extraction, OCR, fraud detection, and analysis for South African financial institutions. Improve accuracy, speed, and decision-making.",
keywords: [
"Optimised Bank Statement Extractor",
"Optimized Bank Statement Extractor",
"OBSE",
"bank statement extraction",
"OCR bank statements",
@ -110,16 +107,16 @@ const keyFeatures: FeatureItem[] = [
},
{
icon: FaSearchDollar,
title: "Intelligent Income Detection",
title: "Intelligent Income & Salaried Detection",
description:
"Identifies salaried/non-salaried income, provides explanations, and filters out transfers.",
"Accurately detects both salaried and non-salaried income, explains findings, and intelligently filters out internal transfers for clearer financial insights. ",
},
{
icon: FaFingerprint,
title: "Enhanced Fraud Detection",
description:
"Detects document tampering, fraudulent insertions, and developing behavioral profiling.",
isComingSoon: true,
isComingSoon: false,
},
{
icon: FaSyncAlt,
@ -244,10 +241,11 @@ export default function ObsePage() {
{/* Consider adding OMS Logo here */}
{/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
<h1
className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
style={{ color: COLORS.primary }} // Use gold color
className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-tight"
style={{ color: COLORS.primary }}
>
Revolutionize Your Lending and Credit Processes with OBSE
Revolutionize Your Lending and <br />Credit Processes with OBSE
</h1>
<p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
Automate data extraction, enhance accuracy, detect fraud, and
@ -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) */}
{/* <form className="space-y-4">
{/* Optional: Simple Contact Form (if ContactForm component is not used/available) */}
{/* <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>
);
}

285
app/(website)/offerings/page.tsx Normal file
View File

@ -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>
);
}

9
app/(website)/page.tsx
View File

@ -39,9 +39,10 @@ export default async function HomePage() {
buttonText={data.hero_buttons?.[0]?.label || "Learn More"} // Use optional chaining and provide a default
buttonHref={data.hero_buttons?.[0]?.link || "/about"} // Use optional chaining and provide a default
imageUrl={
data.hero_cover
? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
: "/hero-bg.jpg"
// data.hero_cover
// ? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
// : "/hero-bg-2.jpg"
"/banner-1.jpeg"
} // Use optional chaining and provide a default
/>
<CoreServicesSection
@ -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

616
app/(website)/services/product-development/page.tsx Normal file
View File

@ -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>
);
}

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

@ -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).",
"Includes Data & MI Design (Architecture, Transformation, BI).",
"Comprehensive Testing & QA (Strategy, Implementation, Management).",
"OMS manages all deployed team members, deliverables, and velocity.",
"Covers End-to-end Process Design (Requirements, Business Process Design, Architecture, User Experience/User Interface, Data Architecture, Transformation, and Business Intelligence).",
"Change Management & Training ",
"Comprehensive Testing and Quality Assurance.",
],
pricingModel:
"Milestone-Based pricing, payable on delivery of key milestones.",
@ -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",
desc: "Struggling to find specialized IT talent for specific project needs or new technologies.",
title: "Access Specialised Expertise",
desc: "Get experienced professionals in software development, business analysis, cybersecurity, cloud computing, data science, and more — bringing the right skills to your project, exactly when you need them.",
},
{
icon: FaChartLine,
title: "Fluctuating Demand",
desc: "Need to scale development or testing teams quickly for peak periods without long-term overhead.",
title: "Flexibility & Scalability",
desc: "Easily scale your team in response to changing project needs — expanding or reducing resources without long-term obligations, while maintaining agility and control.",
},
{
icon: FaClock,
title: "Project Delays",
desc: "Lack of internal resources causing bottlenecks and delaying critical project timelines.",
title: "Faster Onboarding & Deployment",
desc: "Our experts are project-ready, helping you accelerate delivery timelines and reduce the overhead typically associated with recruitment and training.",
},
{
icon: FaFileInvoiceDollar,
title: "Cost Control",
desc: "Wanting to manage IT personnel costs effectively, avoiding expensive recruitment and full-time hires.",
title: "Cost-Effective Hiring",
desc: "Maximize impact, minimize overhead — allowing you to scale your team according to project needs while managing costs efficiently and without compromising on quality. .",
},
/*
{
icon: FaBriefcase,
title: "Focus on Core Business",
@ -457,14 +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">
<div className="container mx-auto px-6">
<div className="text-center mb-12 md:mb-16">
<FaRegHandshake
className="text-5xl mx-auto mb-4"
style={{ color: COLORS.primary }}
/>
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
Why Choose OMS for Resource Augmentation?
</h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
Leverage our expertise and flexible models to gain a competitive
advantage.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{augmentationBenefits.map((benefit) => (
<div
key={benefit.title}
className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
>
<benefit.icon
className="text-4xl mx-auto mb-4"
style={{ color: COLORS.primary }}
/>
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
{benefit.title}
</h4>
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{benefit.description}
</p>
</div>
))}
</div>
</div>
</section>
{/* Benefits of Resource Augmentation
<section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
<div className="container mx-auto px-6">
<div className="text-center mb-12 md:mb-16">
<FaRegHandshake
className="text-5xl mx-auto mb-4"
style={{ color: COLORS.primary }}
/>
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
Why Choose OMS for Resource Augmentation?
</h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
Leverage our expertise and flexible models to gain a competitive
advantage.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{augmentationBenefits.map((benefit) => (
<div
key={benefit.title}
className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
>
<benefit.icon
className="text-4xl mx-auto mb-4"
style={{ color: COLORS.primary }}
/>
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
{benefit.title}
</h4>
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{benefit.description}
</p>
</div>
))}
</div>
</div>
</section>
*/}
{/* 7. Proven Experience / Past Projects (High Level) */}
<section className="py-16 md:py-24 bg-white dark:bg-gray-900">
<section className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
<div className="container mx-auto px-6">
<div className="text-center mb-12 md:mb-16">
<FaBusinessTime
@ -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
Systems, Lending/Credit Process Optimisation.
Expertise in FIC/KYC remediation, including data architecture
and management information design, as well as core banking
systems and end-to-end optimisation of lending and credit
processes.
</p>
</div>
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@ -717,8 +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
customer-facing platforms.
Crafting seamless, data-driven onboarding experiences through
straight-through processing, enhanced customer journeys,<br/>
real-time insights, and a 360-degree customer view.
</p>
</div>
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@ -730,8 +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
Integration, Salesforce implementations.
Specialising in Straight-Through Processing (STP) for banking
platforms, seamless API integration, and end-to-end Salesforce
implementations to drive efficiency and reduce manual
intervention.
</p>
</div>
</div>
@ -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>
);
}

2
app/layout.tsx
View File

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

22
components/ChatbotWidget.tsx
View File

@ -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;

52
components/Footer.tsx
View File

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

11
components/Header.tsx
View File

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

570
components/HeaderClient.tsx
View File

@ -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, // Resource Augmentation
FiBriefcase, // Project Management
FiCpu, // Product Development
FiBox, // OBSE
FiFileText, // Vacancies
FiUserCheck, // Recruitment Portal
FiUsers,
FiBriefcase,
FiCpu,
FiBox,
FiFileText,
FiUserCheck,
} 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 = {
session: Session | null;
handleSignIn: () => void;
handleSignOut: () => void;
};
const HeaderClient = ({
session,
handleSignIn,
handleSignOut,
}: HeaderClientProps) => {
const HeaderClient = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => setIsMenuOpen((open) => !open);
const handleMobileLinkClick = () => setIsMenuOpen(false);
const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
const [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">
{/* Services */}
<div className="group">
<button className={megaMenuTriggerClasses}>
Services
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
</button>
{/* Wrap nav and link in a flex container */}
<div className="flex items-center space-x-8 lg:space-x-10">
<nav className="flex items-center space-x-8 lg:space-x-10">
{/* Services */}
<div
className={`
absolute left-0 top-full w-full shadow-lg z-40
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
transition-all duration-300 ease-out transform
`}
className={`group ${isActive("/services") ? "active" : ""}`} // Add active class to group
onMouseEnter={handleServicesMouseEnter}
onMouseLeave={handleServicesMouseLeave}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
<Link
href="/services/resource-augmentation"
className={megaMenuItemClasses}
>
<FiUsers className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Resource Augmentation
</p>
</div>
</Link>
<Link
href="/services/project-management"
className={megaMenuItemClasses}
>
<FiBriefcase className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Project Management
</p>
</div>
</Link>
<Link
href="/services/product-development"
className={megaMenuItemClasses}
>
<FiCpu className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Product Development
</p>
</div>
</Link>
</div>
<div className="mt-6 pt-4 border-t border-border flex justify-end">
<Link
href="/services"
className="flex items-center text-sm font-medium text-primary hover:underline"
>
Explore All Services
<FiArrowRight className="w-4 h-4 ml-1" />
</Link>
<button
className={`${megaMenuTriggerClasses} ${
isActive("/services") ? "after:w-full" : ""
}`}
>
{" "}
{/* Apply underline based on active state */}
Services
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
</button>
<div
className={`
absolute left-0 top-full w-full shadow-lg z-40
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
${
servicesDropdownOpen
? "opacity-100 visible translate-y-0"
: ""
}
transition-all duration-300 ease-out transform
`}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
<Link
href="/services/resource-augmentation"
className={`${megaMenuItemClasses} ${
isActive("/services/resource-augmentation")
? "text-primary"
: ""
}`} // Apply active class
>
<FiUsers className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Resource Augmentation
</p>
</div>
</Link>
{/* Add more service links here
<Link
href="/services/project-management"
className={`${megaMenuItemClasses} ${
isActive("/services/project-management")
? "text-primary"
: ""
}`} // Apply active class
>
<FiBriefcase className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Project Management
</p>
</div>
</Link>
*/}
<Link
href="/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 */}
<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>
{/* Products */}
<div
className={`
absolute left-0 top-full w-full shadow-lg z-40
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
transition-all duration-300 ease-out transform
`}
className={`group ${isActive("/obse") ? "active" : ""}`} // Add active class to group
onMouseEnter={handleProductsMouseEnter}
onMouseLeave={handleProductsMouseLeave}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
<div className="max-w-md">
<Link href="/obse" className={megaMenuItemClasses}>
<FiBox className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>OBSE Platform</p>
</div>
</Link>
<button
className={`${megaMenuTriggerClasses} ${
isActive("/obse") ? "after:w-full" : ""
}`}
>
{" "}
{/* Apply underline based on active state */}
Products
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
</button>
<div
className={`
absolute left-0 top-full w-full shadow-lg z-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 */}
<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>
{/* Join Our Team */}
<div
className={`
absolute left-0 top-full w-full shadow-lg z-40
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
transition-all duration-300 ease-out transform
`}
className={`group ${
isActive("/join-us") ||
isActive("/vacancies") ||
isActive("/portal")
? "active"
: ""
}`} // 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">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
<Link href="/vacancies" className={megaMenuItemClasses}>
<FiFileText className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Current Vacancies
</p>
</div>
</Link>
<Link href="/portal" className={megaMenuItemClasses}>
<FiUserCheck className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Recruitment Portal
</p>
</div>
</Link>
<button
className={`${megaMenuTriggerClasses} ${
isActive("/join-us") ||
isActive("/vacancies") ||
isActive("/portal")
? "after:w-full"
: ""
}`}
>
{" "}
{/* Apply underline based on active state */}
Join Our Team
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
</button>
<div
className={`
absolute left-0 top-full w-full shadow-lg z-1000
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
${
joinUsDropdownOpen
? "opacity-100 visible translate-y-0"
: ""
}
transition-all duration-300 ease-out transform
`}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
<Link
href="/vacancies"
className={`${megaMenuItemClasses} ${
isActive("/vacancies") ? "text-primary" : ""
}`}
>
{" "}
{/* Apply active class */}
<FiFileText className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Current Vacancies
</p>
</div>
</Link>
<Link
href="/portal"
className={`${megaMenuItemClasses} ${
isActive("/portal") ? "text-primary" : ""
}`}
>
{" "}
{/* Apply active class */}
<FiUserCheck className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Recruitment Portal
</p>
</div>
</Link>
</div>
</div>
</div>
</div>
</div>
</nav>
{/* <div
className={`group ${isActive("/offerings") ? "active" : ""}`}
onMouseEnter={handleOfferingsMouseEnter}
onMouseLeave={handleOfferingsMouseLeave}
>
<button
className={`${megaMenuTriggerClasses} ${
isActive("/offerings") ? "after:w-full" : ""
}`}
>
Explore Our Offerings
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
</button>
<div
className={`
absolute left-0 top-full w-full shadow-lg z-1000
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
${offeringsDropdownOpen ? "opacity-100 visible translate-y-0" : ""}
transition-all duration-300 ease-out transform
`}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
<div className="max-w-md">
<Link
href="/offerings"
className={`${megaMenuItemClasses} ${
isActive("/offerings") ? "text-primary" : ""
}`}
>
<FiBox className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Our Offerings
</p>
</div>
</Link>
</div>
</div>
</div>
</div> */}
</nav>
{/* ← Here’s the Explore Our Offerings link, back in its original spot */}
<Link
href="/services"
className="flex items-center text-sm font-medium text-primary-foreground hover:opacity-80 transition-opacity group"
>
Explore Our Offerings
<FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
</Link>
{/* ← Here’s the Explore Our Offerings link, back in its original spot
<Link
href="/services" // Assuming this link goes to the main services page
className={`flex items-center text-sm font-medium hover:opacity-80 transition-opacity group ${
isActive("/services")
? "text-primary"
: "text-primary-foreground"
}`} // Apply active class
>
Explore Our Offerings
<FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
</Link>
*/}
</div>{" "}
{/* Close the new flex container */}
</div>
</div>
</div>
@ -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 ? (
<button
onClick={() => {
handleSignOut();
handleMobileLinkClick();
}}
className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-destructive hover:bg-secondary transition"
>
Sign Out
</button>
) : (
<button
onClick={() => {
handleSignIn();
handleMobileLinkClick();
}}
className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-foreground hover:bg-secondary hover:text-primary transition"
>
<FiLogIn className="w-4 h-4 mr-2" /> Sign In
</button>
)}
</div>
<div className="pt-4 border-t border-border mt-4"></div>
</nav>
</div>
</header>

7
oms-website.code-workspace Normal file
View File

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

BIN
public/About us-min.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/about-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/banner-1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
public/custom-software.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

BIN
public/custome-software-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/custome-software-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

2979
public/custome-software-3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/hero-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
public/images/team-collaborative-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

7684
public/images/team-collaborative-2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.5 MiB