mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
updated other pages
This commit is contained in:
libertyoms
284
app/(website)/services/page.tsx
Normal file
284
app/(website)/services/page.tsx
Normal file
@ -0,0 +1,284 @@
|
||||
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: "/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.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" // 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'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user