product development added

app/(website)/services/product-development/page.tsx

@@ -0,0 +1,537 @@
+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,
+  FaPhone,
+  FaEnvelope,
+} from "react-icons/fa";
+import { COLORS } from "@/constants";
+import ContactForm from "@/components/ContactForm";
+
+// SEO Metadata
+export const metadata: Metadata = {
+  title: "Custom Software Development South Africa | Tailored 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.",
+  keywords: [
+    "custom software development",
+    "bespoke software",
+    "tailored software solutions",
+    "software development South Africa",
+    "business process automation",
+    "enterprise software",
+    "fintech development",
+    "OMS",
+    "Owethu Management Services",
+    "product development",
+    "custom applications",
+  ],
+  openGraph: {
+    title:
+      "Custom Software Development South Africa | Tailored Solutions by OMS",
+    description:
+      "Partner with OMS to develop custom software perfectly aligned with your business needs.",
+    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",
+      },
+    ],
+    locale: "en_ZA",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title:
+      "Custom Software Development South Africa | Tailored Solutions by OMS",
+    description:
+      "Build the exact software you need with OMS's expert development services.",
+    // images: ['/images/product-dev-twitter-image.png'], // Replace if needed
+  },
+};
+
+interface StepItem {
+  icon: React.ElementType;
+  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 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.",
+  },
+];
+
+export default function ProductDevelopmentPage() {
+  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">
+        <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
+          >
+            Build Your Vision: Custom Software Development by OMS
+          </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&apos;t enough, OMS crafts bespoke software
+            solutions tailored precisely to your unique business challenges and
+            opportunities.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            <Link
+              href="#our-solution"
+              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
+            </Link>
+            <Link
+              href="#contact"
+              className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"
+              style={{ color: COLORS.primary }}
+            >
+              Discuss Your Project <FaArrowRight className="ml-2" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 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 */}
+      <section
+        id="our-solution"
+        className="py-16 md:py-24 bg-white dark:bg-gray-900"
+      >
+        <div className="container mx-auto px-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
+                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) => (
+              <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 }}
+                />
+                <div>
+                  <h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white">
+                    {step.title}
+                  </h4>
+                  <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 6. Benefits 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) => (
+              <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 }}
+              >
+                <benefit.icon
+                  className="text-3xl mb-3 text-gold-500 dark:text-gold-400"
+                  style={{ color: COLORS.primary }}
+                />
+                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
+                  {benefit.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                  {benefit.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 7. 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?
+          </h2>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
+            Let&apos;s discuss your specific needs and explore how OMS can
+            develop custom software 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
+              className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
+            >
+              Request a Consultation
+            </Link>
+            <Link
+              href="#contact" // Link to contact section below
+              className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
+            >
+              Contact Us
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 8. Contact Information Section */}
+      <section
+        id="contact"
+        className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
+      >
+        <div className="container mx-auto px-6">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              Get in Touch
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Have a project in mind or need more information about our custom
+              development services? Reach out today.
+            </p>
+          </div>
+          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+            {/* Contact Details */}
+            <div className="space-y-6">
+              <div className="flex items-center space-x-4">
+                <FaPhone
+                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
+                  style={{ color: COLORS.primary }}
+                />
+                <div>
+                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
+                    Phone
+                  </h3>
+                  <a
+                    href="tel:+27120513281"
+                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
+                  >
+                    (012) 051 3281
+                  </a>
+                </div>
+              </div>
+              <div className="flex items-center space-x-4">
+                <FaEnvelope
+                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
+                  style={{ color: COLORS.primary }}
+                />
+                <div>
+                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
+                    Email
+                  </h3>
+                  <a
+                    href="mailto:info@oms.africa?subject=Custom Development Inquiry" // General info or specific contact
+                    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 */}
+                </div>
+              </div>
+              <Link
+                href="/contact"
+                className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300"
+                style={{ color: COLORS.primary }}
+              >
+                Go to Full Contact Page <FaArrowRight className="ml-2" />
+              </Link>
+            </div>
+
+            {/* Contact Form */}
+            <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
+                Send Us Your Inquiry
+              </h3>
+              <ContactForm />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}