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

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