mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
fix: product development fixed
This commit is contained in:
libertyoms
@ -1,25 +1,29 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Metadata } from "next";
|
||||
import {
|
||||
FaArrowRight,
|
||||
FaCheckCircle,
|
||||
FaCogs,
|
||||
FaDraftingCompass,
|
||||
FaHandshake,
|
||||
FaHeadset,
|
||||
FaLaptopCode,
|
||||
FaLightbulb,
|
||||
FaPuzzlePiece,
|
||||
FaRocket,
|
||||
FaSearch,
|
||||
FaShieldAlt,
|
||||
FaSyncAlt,
|
||||
FaTools,
|
||||
FaUserCheck,
|
||||
FaUsersCog,
|
||||
FaExclamationTriangle,
|
||||
FaFileInvoiceDollar,
|
||||
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";
|
||||
@ -28,34 +32,33 @@ import ContactForm from "@/components/ContactForm";
|
||||
|
||||
// SEO Metadata
|
||||
export const metadata: Metadata = {
|
||||
title: "Custom Software Development South Africa | Tailored Solutions by OMS",
|
||||
title: "Product Development Services | Digital Solutions by OMS",
|
||||
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: [
|
||||
"custom software development",
|
||||
"bespoke software",
|
||||
"tailored software solutions",
|
||||
"software development South Africa",
|
||||
"business process automation",
|
||||
"enterprise software",
|
||||
"fintech development",
|
||||
"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",
|
||||
"product development",
|
||||
"custom applications",
|
||||
],
|
||||
openGraph: {
|
||||
title:
|
||||
"Custom Software Development South Africa | Tailored Solutions by OMS",
|
||||
title: "Product Development Services | Digital Solutions by OMS",
|
||||
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
|
||||
images: [
|
||||
{
|
||||
url: "/images/product-dev-og-image.png", // Replace with an appropriate OG image URL
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "OMS Custom Software Development",
|
||||
alt: "OMS Product Development Services",
|
||||
},
|
||||
],
|
||||
locale: "en_ZA",
|
||||
@ -63,123 +66,267 @@ export const metadata: Metadata = {
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title:
|
||||
"Custom Software Development South Africa | Tailored Solutions by OMS",
|
||||
title: "Product Development Services | Digital Solutions by OMS",
|
||||
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
|
||||
},
|
||||
};
|
||||
|
||||
interface StepItem {
|
||||
icon: React.ElementType;
|
||||
interface FeatureItem {
|
||||
icon?: React.ElementType; // Icon is optional for some lists like tech stack
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const developmentProcess: StepItem[] = [
|
||||
{
|
||||
icon: FaSearch,
|
||||
title: "Discovery & Consultation",
|
||||
description:
|
||||
"We start by deeply understanding your business challenges, goals, and specific requirements.",
|
||||
},
|
||||
{
|
||||
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 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 coreBenefits: StepItem[] = [
|
||||
{
|
||||
icon: FaPuzzlePiece,
|
||||
title: "Perfect Fit Solution",
|
||||
description:
|
||||
"Software designed precisely for your unique workflows and business logic.",
|
||||
},
|
||||
{
|
||||
icon: FaSyncAlt,
|
||||
title: "Increased Efficiency",
|
||||
description:
|
||||
"Automate manual tasks and streamline operations for significant productivity gains.",
|
||||
},
|
||||
{
|
||||
icon: FaUsersCog,
|
||||
title: "Competitive Advantage",
|
||||
description:
|
||||
"Gain an edge with unique capabilities that off-the-shelf software cannot provide.",
|
||||
},
|
||||
{
|
||||
icon: FaCogs,
|
||||
title: "Scalability & Flexibility",
|
||||
description:
|
||||
"Build solutions that can grow and adapt alongside your business needs.",
|
||||
},
|
||||
{
|
||||
icon: FaShieldAlt,
|
||||
title: "Enhanced Security",
|
||||
description:
|
||||
"Incorporate specific security measures tailored to your data and compliance requirements.",
|
||||
},
|
||||
{
|
||||
icon: FaHandshake,
|
||||
title: "Seamless Integration",
|
||||
description:
|
||||
"Ensure smooth data flow between your custom software and other business systems.",
|
||||
},
|
||||
];
|
||||
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-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="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 }} // Use gold color
|
||||
style={{ color: COLORS.primary }}
|
||||
>
|
||||
Build Your Vision: Custom Software Development by OMS
|
||||
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">
|
||||
When off-the-shelf isn't enough, OMS crafts bespoke software
|
||||
solutions tailored precisely to your unique business challenges and
|
||||
opportunities.
|
||||
At OMS, we don’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="#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"
|
||||
style={{ backgroundColor: COLORS.primary }}
|
||||
>
|
||||
Discover Our Approach
|
||||
How We Deliver
|
||||
</Link>
|
||||
<Link
|
||||
href="#contact"
|
||||
@ -192,200 +339,32 @@ export default function ProductDevelopmentPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. The Challenge 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 */}
|
||||
{/* 2. How OMS Delivers Market-Ready Products Section */}
|
||||
<section
|
||||
id="our-solution"
|
||||
className="py-16 md:py-24 bg-white dark:bg-gray-900"
|
||||
id="how-we-deliver"
|
||||
className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800"
|
||||
>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
|
||||
OMS Custom Development: Software Built For You
|
||||
</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) => (
|
||||
<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-8 max-w-5xl mx-auto">
|
||||
{howOmsDeliversItems.map((item) => (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<step.icon
|
||||
className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>
|
||||
{item.icon && (
|
||||
<item.icon
|
||||
className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white">
|
||||
{step.title}
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
|
||||
{step.description}
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -394,34 +373,60 @@ export default function ProductDevelopmentPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. Benefits 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">
|
||||
<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">
|
||||
Advantages of a Custom-Built Solution
|
||||
</h2>
|
||||
<p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
Investing in custom software development offers significant,
|
||||
long-term benefits for your organization.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{coreBenefits.map((benefit) => (
|
||||
<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>
|
||||
<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={benefit.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"
|
||||
style={{ borderColor: COLORS.primary }}
|
||||
key={item.title}
|
||||
className="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-sm"
|
||||
>
|
||||
<benefit.icon
|
||||
className="text-3xl mb-3 text-gold-500 dark:text-gold-400"
|
||||
<h4
|
||||
className="text-lg font-semibold mb-2 font-poppins text-gold-600 dark:text-gold-400"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>
|
||||
<h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
||||
{benefit.title}
|
||||
>
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
|
||||
{benefit.description}
|
||||
<p className="text-gray-700 dark:text-gray-300 text-sm">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
@ -429,23 +434,79 @@ export default function ProductDevelopmentPage() {
|
||||
</div>
|
||||
</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
|
||||
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 Build Your Unique Software Solution?
|
||||
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's discuss your specific needs and explore how OMS can
|
||||
develop custom software to drive your business forward. Schedule a
|
||||
consultation with our experts today.
|
||||
Let'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=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"
|
||||
>
|
||||
Request a Consultation
|
||||
@ -460,7 +521,7 @@ export default function ProductDevelopmentPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 8. Contact Information Section */}
|
||||
{/* 11. Contact Information Section */}
|
||||
<section
|
||||
id="contact"
|
||||
className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
|
||||
@ -471,7 +532,7 @@ export default function ProductDevelopmentPage() {
|
||||
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 custom
|
||||
Have a project in mind or need more information about our product
|
||||
development services? Reach out today.
|
||||
</p>
|
||||
</div>
|
||||
@ -505,12 +566,11 @@ export default function ProductDevelopmentPage() {
|
||||
Email
|
||||
</h3>
|
||||
<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"
|
||||
>
|
||||
info@oms.africa
|
||||
</a>{" "}
|
||||
{/* Or use Zanelem@oms.africa if preferred */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
|
||||
Reference in New Issue
Block a user