fix: product development fixed

This commit is contained in:
libertyoms
2025-05-19 07:54:59 +02:00
parent ec3f4a51dc
commit 0f3eaff970
5 changed files with 457 additions and 487 deletions

View File

@ -48,31 +48,31 @@ const coreValues = [
icon: FaCheckCircle, icon: FaCheckCircle,
title: "Service", title: "Service",
description: 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, icon: FaHandshake,
title: "Accountability", title: "Accountability",
description: 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, icon: FaHeart,
title: "Passion", title: "Passion",
description: 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 whats possible and make a difference in everything we do.",
}, },
{ {
icon: FaComments, icon: FaComments,
title: "Communication", title: "Communication",
description: 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, icon: FaShieldAlt,
title: "Trust", title: "Trust",
description: 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.",
}, },
]; ];
@ -168,20 +168,24 @@ export default function AboutUsPage() {
by Purpose by Purpose
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
Expand on the founding story/motivation. E.g., Owethu Managed Owethu Managed Services wasnt built in a boardroom it was
Services was born from a clear vision: to harness the born from a deeper calling: a desire to do more than simply
transformative power of technology not just to solve problems, exist in the tech space. We set out to use innovation not as a
but to proactively create opportunities for businesses to buzzword, but as a lifeline pulling businesses out of
thrive. We saw a need for a partner who truly understands both stagnation and into a future full of possibility.
technology&apos;s potential and the unique challenges modern </p>
organizations face. <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
From day one, weve challenged the status quo. We dont 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>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
Elaborate on the journey. E.g., Our journey has been defined by Today, OMS is more than a service provider. We are trusted
a relentless pursuit of knowledge, adaptation to the digital transformation partners, creative problem-solvers, and
ever-evolving tech landscape, and an unwavering commitment to passionate believers in human-driven innovation. This isnt just
client success. This focus has established us as trusted business. This is our purpose.
advisors and thought leaders in digital transformation.
</p> </p>
</div> </div>
<div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg"> <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
@ -224,9 +228,7 @@ export default function AboutUsPage() {
<p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow"> <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 &quot;To be global leaders in delivering cutting-edge IT
solutions, pushing the boundaries of what&apos;s possible, and solutions, pushing the boundaries of what&apos;s possible, and
transforming industries for the better. We aim to empower transforming industries for the better.&quot;
organisations to break through technological barriers and
achieve greater success.&quot;
</p> </p>
</div> </div>
{/* Mission Card */} {/* Mission Card */}
@ -242,12 +244,9 @@ export default function AboutUsPage() {
Our Mission Our Mission
</h3> </h3>
<p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow"> <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
&quot;We are dedicated to creating tailored, innovative &quot;Our purpose is to help our clients drive transformative
solutions that drive business success. By combining expertise growth and innovation to propel their business forward
with cutting-edge technology, we solve complex problems and redefining what&apos;s possible.&quot;
enable our clients to achieve outstanding results. We partner
closely with clients to ensure every solution aligns with their
unique needs for long-term success.&quot;
</p> </p>
</div> </div>
</div> </div>
@ -300,9 +299,10 @@ export default function AboutUsPage() {
Deep Domain Knowledge Deep Domain Knowledge
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
We combine broad technological capabilities with specialized Retail/E-commerce: Experience in building scalable e-commerce
expertise across key industries, understanding the unique platforms, optimizing digital customer journeys, enabling secure
challenges and opportunities within each sector. payment integrations, and leveraging data analytics to drive
personalized shopping experiences and operational efficiency.
</p> </p>
</div> </div>
<div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
@ -430,7 +430,7 @@ export default function AboutUsPage() {
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins"> <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 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 challenges, working alongside your team as an extension of your
own capabilities. own capabilities.
</p> </p>
@ -516,10 +516,11 @@ export default function AboutUsPage() {
</h2> </h2>
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins text-gray-800"> <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 Ultimately, our success is measured by yours. We are committed to
delivering solutions that not only meet technical requirements but creating solutions that ignite momentum, unlock potential, and turn
also drive efficiency, foster growth, enhance user experiences, and ambition into achievement,empowering you to rise above challenges
provide a clear return on investment. Let&apos;s build a successful and lead with confidence into the future. Together, let&apos;s build
future, together. a future where your success is not just a possibility, but a
reality.
</p> </p>
{/* Optional CTA to contact */} {/* Optional CTA to contact */}
<div className="mt-10"> <div className="mt-10">

View File

@ -39,7 +39,7 @@ export const metadata: Metadata = {
description: 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.", "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: [ keywords: [
"Optimised Bank Statement Extractor", "Optimized Bank Statement Extractor",
"OBSE", "OBSE",
"bank statement extraction", "bank statement extraction",
"OCR bank statements", "OCR bank statements",
@ -347,7 +347,7 @@ export default function ObsePage() {
OBSE: Automated Accuracy, Speed, and Insight OBSE: Automated Accuracy, Speed, and Insight
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4"> <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 data aggregation platform designed specifically for the South
African financial landscape. It seamlessly extracts African financial landscape. It seamlessly extracts
comprehensive, accurate data from any bank statement (individual comprehensive, accurate data from any bank statement (individual

View File

@ -58,7 +58,7 @@ export default async function HomePage() {
eyebrow="Featured Product" eyebrow="Featured Product"
title="Streamline Financial Analysis with" title="Streamline Financial Analysis with"
productName="OBSE" 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} features={defaultObseFeatures}
buttonText="Learn More & Demo" buttonText="Learn More & Demo"
buttonHref="/products/obse" // Link to the OBSE product page buttonHref="/products/obse" // Link to the OBSE product page

View File

@ -1,25 +1,29 @@
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Metadata } from "next"; import { Metadata } from "next";
import { import {
FaArrowRight, FaArrowRight,
FaCheckCircle,
FaCogs,
FaDraftingCompass, FaDraftingCompass,
FaHandshake, FaHandshake,
FaHeadset, FaHeadset,
FaLaptopCode, FaLaptopCode, // For Web App Dev, Backend
FaLightbulb, FaLightbulb, // For Ideation, Innovation
FaPuzzlePiece, FaPuzzlePiece, // For Custom Software Solutions
FaRocket, FaRocket, // For Product Launch, Scalable Tech
FaSearch, FaSearch, // For User Research
FaShieldAlt, FaShieldAlt, // For Security Testing
FaSyncAlt, FaSyncAlt, // For Agile, Iteration
FaTools, FaUserCheck, // For User-Centred Design, Usability Testing
FaUserCheck, FaUsersCog, // For Dedicated Teams
FaUsersCog, // Additional icons that might be useful for the new content:
FaExclamationTriangle, FaMobileAlt, // For Mobile Apps
FaFileInvoiceDollar, 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, FaPhone,
FaEnvelope, FaEnvelope,
} from "react-icons/fa"; } from "react-icons/fa";
@ -28,34 +32,33 @@ import ContactForm from "@/components/ContactForm";
// SEO Metadata // SEO Metadata
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Custom Software Development South Africa | Tailored Solutions by OMS", title: "Product Development Services | Digital Solutions by OMS",
description: description:
"OMS builds custom software solutions when off-the-shelf products don't fit. Leverage our expertise, proven by projects like OBSE, to solve your unique business challenges in South Africa.", "OMS delivers innovative, tailored digital solutions. Explore our end-to-end product development services, from ideation to launch and beyond.",
keywords: [ keywords: [
"custom software development", "product development",
"bespoke software", "custom software solutions",
"tailored software solutions", "user-centred design",
"software development South Africa", "agile development",
"business process automation", "cross-platform solutions",
"enterprise software", "mobile app development",
"fintech development", "web app development",
"tech stack",
"quality assurance",
"OMS", "OMS",
"Owethu Management Services", "Owethu Management Services",
"product development",
"custom applications",
], ],
openGraph: { openGraph: {
title: title: "Product Development Services | Digital Solutions by OMS",
"Custom Software Development South Africa | Tailored Solutions by OMS",
description: description:
"Partner with OMS to develop custom software perfectly aligned with your business needs.", "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 url: "https://www.oms.africa/services/product-development", // Replace with your actual URL
images: [ images: [
{ {
url: "/images/product-dev-og-image.png", // Replace with an appropriate OG image URL url: "/images/product-dev-og-image.png", // Replace with an appropriate OG image URL
width: 1200, width: 1200,
height: 630, height: 630,
alt: "OMS Custom Software Development", alt: "OMS Product Development Services",
}, },
], ],
locale: "en_ZA", locale: "en_ZA",
@ -63,123 +66,267 @@ export const metadata: Metadata = {
}, },
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image",
title: title: "Product Development Services | Digital Solutions by OMS",
"Custom Software Development South Africa | Tailored Solutions by OMS",
description: description:
"Build the exact software you need with OMS's expert development services.", "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 // images: ['/images/product-dev-twitter-image.png'], // Replace if needed
}, },
}; };
interface StepItem { interface FeatureItem {
icon: React.ElementType; icon?: React.ElementType; // Icon is optional for some lists like tech stack
title: string; title: string;
description: string; description: string;
} }
const developmentProcess: StepItem[] = [ const SectionTitle: React.FC<{ children: React.ReactNode }> = ({
{ children,
icon: FaSearch, }) => (
title: "Discovery & Consultation", <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4 text-center">
description: {children}
"We start by deeply understanding your business challenges, goals, and specific requirements.", </h2>
}, );
{
icon: FaDraftingCompass,
title: "Solution Design & Architecture",
description:
"Our experts design a robust, scalable, and secure software architecture tailored to your needs.",
},
{
icon: FaLaptopCode,
title: "Agile Development & Iteration",
description:
"We build your software using agile methodologies, ensuring flexibility and regular feedback loops.",
},
{
icon: FaCheckCircle,
title: "Rigorous Testing & QA",
description:
"Comprehensive testing ensures the software is reliable, performs optimally, and meets all requirements.",
},
{
icon: FaRocket,
title: "Deployment & Integration",
description:
"We manage the deployment process and ensure seamless integration with your existing systems.",
},
{
icon: FaHeadset,
title: "Ongoing Support & Maintenance",
description:
"We offer continued support and maintenance options to keep your software running smoothly.",
},
];
const coreBenefits: StepItem[] = [ const SectionParagraph: React.FC<{ children: React.ReactNode }> = ({
{ children,
icon: FaPuzzlePiece, }) => (
title: "Perfect Fit Solution", <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">
description: {children}
"Software designed precisely for your unique workflows and business logic.", </p>
}, );
{
icon: FaSyncAlt, const FeatureGrid: React.FC<{ items: FeatureItem[]; iconColor?: string }> = ({
title: "Increased Efficiency", items,
description: iconColor = COLORS.primary,
"Automate manual tasks and streamline operations for significant productivity gains.", }) => (
}, <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{ {items.map((item) => (
icon: FaUsersCog, <div
title: "Competitive Advantage", key={item.title}
description: className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
"Gain an edge with unique capabilities that off-the-shelf software cannot provide.", >
}, {item.icon && (
{ <item.icon className="text-3xl mb-3" style={{ color: iconColor }} />
icon: FaCogs, )}
title: "Scalability & Flexibility", <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
description: {item.title}
"Build solutions that can grow and adapt alongside your business needs.", </h4>
}, <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{ {item.description}
icon: FaShieldAlt, </p>
title: "Enhanced Security", </div>
description: ))}
"Incorporate specific security measures tailored to your data and compliance requirements.", </div>
}, );
{
icon: FaHandshake,
title: "Seamless Integration",
description:
"Ensure smooth data flow between your custom software and other business systems.",
},
];
export default function ProductDevelopmentPage() { 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 ( return (
<div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins"> <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
{/* 1. Hero Section */} {/* 1. Hero Section */}
<section className="relative bg-gradient-to-r from-blue-900 via-blue-800 to-gray-900 text-white py-20 md:py-32"> <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="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
<div className="container mx-auto px-6 text-center relative z-10"> <div className="container mx-auto px-6 text-center relative z-10">
<h1 <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"
style={{ color: COLORS.primary }} // Use gold color style={{ color: COLORS.primary }}
> >
Build Your Vision: Custom Software Development by OMS Product Development
</h1> </h1>
<p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8"> <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
When off-the-shelf isn&apos;t enough, OMS crafts bespoke software At OMS, we dont just create productswe build digital solutions
solutions tailored precisely to your unique business challenges and that accelerate business growth and transform industries. We
opportunities. 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> </p>
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="#our-solution" 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" 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 }} style={{ backgroundColor: COLORS.primary }}
> >
Discover Our Approach How We Deliver
</Link> </Link>
<Link <Link
href="#contact" href="#contact"
@ -192,200 +339,32 @@ export default function ProductDevelopmentPage() {
</div> </div>
</section> </section>
{/* 2. The Challenge Section */} {/* 2. How OMS Delivers Market-Ready Products Section */}
<section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
<div className="container mx-auto px-6">
<div className="text-center mb-12 md:mb-16">
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
The Limits of Standard Software
</h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
Off-the-shelf software offers convenience but often falls short
when faced with unique business processes, specific integration
needs, or the desire for a true competitive differentiator.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
icon: FaPuzzlePiece,
title: "Inflexible Workflows",
desc: "Forcing your processes to fit generic software limitations hinders efficiency.",
},
{
icon: FaExclamationTriangle,
title: "Missing Features",
desc: "Lacking critical functionality specific to your industry or business model.",
},
{
icon: FaFileInvoiceDollar,
title: "Costly Customization & Licenses",
desc: "Expensive add-ons or per-user fees that don't fully solve the core problem.",
},
{
icon: FaSyncAlt,
title: "Integration Headaches",
desc: "Difficulty connecting standard software with your existing systems and data.",
},
{
icon: FaTools,
title: "Lack of Competitive Edge",
desc: "Using the same tools as everyone else limits opportunities for innovation.",
},
{
icon: FaUsersCog,
title: "Scalability Constraints",
desc: "Outgrowing the capabilities or cost-effectiveness of standard solutions.",
},
].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"
>
<item.icon
className="text-4xl text-red-500 dark:text-red-400 mx-auto mb-4" // Using red for challenges
/>
<h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
{item.title}
</h4>
<p className="text-gray-600 dark:text-gray-300 text-sm">
{item.desc}
</p>
</div>
))}
</div>
</div>
</section>
{/* 3. Our Solution Section */}
<section <section
id="our-solution" id="how-we-deliver"
className="py-16 md:py-24 bg-white dark:bg-gray-900" className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800"
> >
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <SectionTitle>How OMS Delivers Market-Ready Products</SectionTitle>
<div> {/* No intro paragraph provided for this specific subtitle in the source */}
<h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
OMS Custom Development: Software Built For You {howOmsDeliversItems.map((item) => (
</h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
We specialize in designing, developing, and deploying bespoke
software applications that precisely match your operational
needs and strategic goals. From automating complex workflows to
creating unique customer experiences, we build solutions that
deliver tangible results.
</p>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-semibold">
Our approach combines technical expertise with a deep
understanding of business processes, ensuring the final product
is not just functional, but truly transformative.
</p>
</div>
<div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
<Image
src="/images/custom-dev-placeholder.svg" // Replace with relevant image (e.g., code, blueprint, team working)
alt="Custom Software Development Process"
layout="fill"
objectFit="cover"
className="bg-gray-200 dark:bg-gray-700"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent"></div>
</div>
</div>
</div>
</section>
{/* 4. Our Expertise Section (Showcasing OBSE) */}
<section className="py-16 md:py-24 bg-gray-800 text-white">
<div className="container mx-auto px-6">
<div className="text-center mb-12 md:mb-16">
<FaLightbulb
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 mb-4">
Proven Expertise in Complex Solutions
</h2>
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-6">
Our capabilities are demonstrated by our successful development of
sophisticated platforms like OBSE (Optimised Bank Statement
Extractor). This project showcases our ability to:
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
{[
{
title: "Handle Complex Data",
desc: "Develop systems that process and structure intricate data from varied sources.",
icon: FaCogs,
},
{
title: "Integrate Advanced Tech",
desc: "Leverage OCR, machine learning, and robust APIs for powerful functionality.",
icon: FaLaptopCode,
},
{
title: "Build Scalable Platforms",
desc: "Create solutions designed for high performance and future growth.",
icon: FaRocket,
},
{
title: "Focus on User Experience",
desc: "Design intuitive interfaces that enhance usability and productivity.",
icon: FaUserCheck,
},
].map((item) => (
<div <div
key={item.title} key={item.title}
className="bg-gray-700 p-6 rounded-lg text-center"
>
<item.icon
className="text-4xl text-gold-500 mx-auto mb-4"
style={{ color: COLORS.primary }}
/>
<h4 className="text-xl font-semibold mb-2 font-poppins text-white">
{item.title}
</h4>
<p className="text-gray-300 text-sm">{item.desc}</p>
</div>
))}
</div>
<p className="text-center mt-8 text-gray-300 max-w-3xl mx-auto">
This experience equips us to tackle diverse custom development
challenges across various industries, particularly within the
financial technology sector.
</p>
</div>
</section>
{/* 5. Our Process 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-12 md:mb-16">
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
Our Collaborative Development Journey
</h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
We follow a structured yet flexible process to ensure your project
is delivered successfully, on time, and within budget.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{developmentProcess.map((step) => (
<div
key={step.title}
className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex items-start space-x-4" className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex items-start space-x-4"
> >
<step.icon {item.icon && (
className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0" <item.icon
style={{ color: COLORS.primary }} className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0"
/> style={{ color: COLORS.primary }}
/>
)}
<div> <div>
<h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white"> <h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white">
{step.title} {item.title}
</h4> </h4>
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed"> <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{step.description} {item.description}
</p> </p>
</div> </div>
</div> </div>
@ -394,34 +373,60 @@ export default function ProductDevelopmentPage() {
</div> </div>
</section> </section>
{/* 6. Benefits Section */} {/* 3. End-to-End Product Development Section */}
<section className="py-16 md:py-24 bg-white dark:bg-gray-900"> <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="text-center mb-12 md:mb-16"> <SectionTitle>End-to-End Product Development</SectionTitle>
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4"> <SectionParagraph>
Advantages of a Custom-Built Solution We support businesses throughout the entire product lifecycle, from
</h2> ideation to post-launch support. Our comprehensive services cover
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto"> every phase of development, ensuring that your product is not only
Investing in custom software development offers significant, designed and built to meet your current needs, but is also ready for
long-term benefits for your organization. future growth and evolution.
</p> </SectionParagraph>
</div> <FeatureGrid items={endToEndItems} />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> </div>
{coreBenefits.map((benefit) => ( </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 <div
key={benefit.title} key={item.title}
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" className="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-sm"
style={{ borderColor: COLORS.primary }}
> >
<benefit.icon <h4
className="text-3xl mb-3 text-gold-500 dark:text-gold-400" className="text-lg font-semibold mb-2 font-poppins text-gold-600 dark:text-gold-400"
style={{ color: COLORS.primary }} style={{ color: COLORS.primary }}
/> >
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white"> {item.title}
{benefit.title}
</h4> </h4>
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed"> <p className="text-gray-700 dark:text-gray-300 text-sm">
{benefit.description} {item.description}
</p> </p>
</div> </div>
))} ))}
@ -429,23 +434,79 @@ export default function ProductDevelopmentPage() {
</div> </div>
</section> </section>
{/* 7. Call to Action (CTA) 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 <section
className="py-16 md:py-24 bg-gold-500 text-gray-900" className="py-16 md:py-24 bg-gold-500 text-gray-900"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
<div className="container mx-auto px-6 text-center"> <div className="container mx-auto px-6 text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins"> <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
Ready to Build Your Unique Software Solution? Ready to Transform Your Ideas into Reality?
</h2> </h2>
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800"> <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 specific needs and explore how OMS can Let&apos;s discuss your product vision and explore how OMS can
develop custom software to drive your business forward. Schedule a develop innovative digital solutions to drive your business forward.
consultation with our experts today. Schedule a consultation with our experts today.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="/contact?subject=Custom Development Inquiry" // Pre-fill subject 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" 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 Request a Consultation
@ -460,7 +521,7 @@ export default function ProductDevelopmentPage() {
</div> </div>
</section> </section>
{/* 8. Contact Information Section */} {/* 11. Contact Information Section */}
<section <section
id="contact" id="contact"
className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800" className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
@ -471,7 +532,7 @@ export default function ProductDevelopmentPage() {
Get in Touch Get in Touch
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto"> <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 custom Have a project in mind or need more information about our product
development services? Reach out today. development services? Reach out today.
</p> </p>
</div> </div>
@ -505,12 +566,11 @@ export default function ProductDevelopmentPage() {
Email Email
</h3> </h3>
<a <a
href="mailto:info@oms.africa?subject=Custom Development Inquiry" // General info or specific contact 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" className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
> >
info@oms.africa info@oms.africa
</a>{" "} </a>
{/* Or use Zanelem@oms.africa if preferred */}
</div> </div>
</div> </div>
<Link <Link

View File

@ -22,15 +22,12 @@ import {
FaUsers, // For Teams/Resources FaUsers, // For Teams/Resources
FaChartLine, // For Reporting/MI FaChartLine, // For Reporting/MI
FaLightbulb, // For Innovation/Solutions FaLightbulb, // For Innovation/Solutions
FaPhone, // Contact
FaEnvelope, // Contact
FaTools, // General Capabilities FaTools, // General Capabilities
FaLayerGroup, // Frameworks (SAFe, etc.) FaLayerGroup, // Frameworks (SAFe, etc.)
FaFileInvoiceDollar, // Cost/Pricing FaFileInvoiceDollar, // Cost/Pricing
FaBusinessTime, // Experience/Past Projects FaBusinessTime, // Experience/Past Projects
} from "react-icons/fa"; } from "react-icons/fa";
import { COLORS } from "@/constants"; // Assuming COLORS constant is available import { COLORS } from "@/constants"; // Assuming COLORS constant is available
import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
// SEO Metadata // SEO Metadata
export const metadata: Metadata = { export const metadata: Metadata = {
@ -98,7 +95,7 @@ interface ServiceModel {
const serviceModels: ServiceModel[] = [ const serviceModels: ServiceModel[] = [
{ {
icon: FaClock, icon: FaClock,
title: "Resource Augmentation Model (Time & Material)", title: "Resource Augmentation Model",
description: description:
"Access skilled IT professionals on demand to supplement your existing team.", "Access skilled IT professionals on demand to supplement your existing team.",
details: [ details: [
@ -111,15 +108,14 @@ const serviceModels: ServiceModel[] = [
}, },
{ {
icon: FaTasks, icon: FaTasks,
title: "Milestone-Based Model (Managed Service)", title: "Milestone-Based Model",
description: description:
"OMS takes full responsibility for delivering specific IT project phases or entire projects.", "OMS takes full responsibility for delivering specific IT project phases or entire projects.",
details: [ details: [
"Includes Project Planning & Management.", "Includes Project Planning & Management.",
"Covers End-to-end Process Design (Requirements, BPD, Arch, UX/UI).", "Covers End-to-end Process Design (Requirements, Business Process Design, Architecture, User Experience/User Interface, Data Architecture, Transformation, and Business Intelligence).",
"Includes Data & MI Design (Architecture, Transformation, BI).", "Change Management & Training ",
"Comprehensive Testing & QA (Strategy, Implementation, Management).", "Comprehensive Testing and Quality Assurance.",
"OMS manages all deployed team members, deliverables, and velocity.",
], ],
pricingModel: pricingModel:
"Milestone-Based pricing, payable on delivery of key milestones.", "Milestone-Based pricing, payable on delivery of key milestones.",
@ -553,7 +549,7 @@ export default function ResourceAugmentationPage() {
{model.title} {model.title}
</h3> </h3>
</div> </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} {model.description}
</p> </p>
<ul className="space-y-2 mb-4"> <ul className="space-y-2 mb-4">
@ -566,17 +562,19 @@ export default function ResourceAugmentationPage() {
</li> </li>
))} ))}
</ul> </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"> <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} {model.pricingModel}
</p> </p>
</div> </div>
))} ))}
</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> </div>
</section> </section>
@ -704,8 +702,10 @@ export default function ResourceAugmentationPage() {
Financial Services & Compliance Financial Services & Compliance
</h4> </h4>
<p className="text-sm text-gray-600 dark:text-gray-300"> <p className="text-sm text-gray-600 dark:text-gray-300">
FIC/KYC Remediation (Data Architecture, MI), Core Banking Expertise in FIC/KYC remediation, including data architecture
Systems, Lending/Credit Process Optimisation. and management information design, as well as core banking
systems and end-to-end optimisation of lending and credit
processes.
</p> </p>
</div> </div>
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm"> <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@ -717,8 +717,9 @@ export default function ResourceAugmentationPage() {
Customer Management & Onboarding Customer Management & Onboarding
</h4> </h4>
<p className="text-sm text-gray-600 dark:text-gray-300"> <p className="text-sm text-gray-600 dark:text-gray-300">
Design, Testing, Requirements, Process Engineering, UX/UI for Crafting seamless, data-driven onboarding experiences through
customer-facing platforms. straight-through processing, enhanced customer journeys,
real-time insights, and a 360-degree customer view.
</p> </p>
</div> </div>
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm"> <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
@ -730,8 +731,10 @@ export default function ResourceAugmentationPage() {
Platform & Process Automation Platform & Process Automation
</h4> </h4>
<p className="text-sm text-gray-600 dark:text-gray-300"> <p className="text-sm text-gray-600 dark:text-gray-300">
Straight-Through Processing (STP) on Banking Platforms, API Specialising in Straight-Through Processing (STP) for banking
Integration, Salesforce implementations. platforms, seamless API integration, and end-to-end Salesforce
implementations to drive efficiency and reduce manual
intervention.
</p> </p>
</div> </div>
</div> </div>
@ -831,100 +834,6 @@ export default function ResourceAugmentationPage() {
</div> </div>
</div> </div>
</section> </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> </div>
); );
} }