OBSE page completed

app/(website)/obse/page.tsx

@@ -0,0 +1,798 @@
+import Image from "next/image";
+import Link from "next/link";
+import {
+  FaArrowRight,
+  FaCheckCircle,
+  FaCogs,
+  FaDatabase,
+  FaEnvelope,
+  FaExclamationTriangle,
+  FaFileAlt,
+  FaFileInvoiceDollar,
+  FaFingerprint,
+  FaHandshake,
+  FaHistory,
+  FaLaptopCode,
+  FaLayerGroup,
+  FaLightbulb,
+  FaPhone,
+  FaPlayCircle,
+  FaPuzzlePiece,
+  FaSearchDollar,
+  FaShieldAlt,
+  FaShippingFast,
+  FaSignInAlt,
+  FaSpinner,
+  FaSyncAlt,
+  FaTachometerAlt,
+  FaUserCheck,
+  FaUsersCog,
+  FaWrench,
+} from "react-icons/fa";
+import { COLORS } from "@/constants"; // Assuming COLORS constant is available
+import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available
+
+// Define structure for features, benefits, etc. if needed for mapping
+interface FeatureItem {
+  icon: React.ElementType;
+  title: string;
+  description: string;
+  isComingSoon?: boolean;
+}
+
+const keyFeatures: FeatureItem[] = [
+  {
+    icon: FaShippingFast,
+    title: "Automated Data Extraction",
+    description:
+      "Processes statements in seconds (avg. 9-12s), drastically reducing manual effort.",
+  },
+  {
+    icon: FaFileAlt,
+    title: "Advanced OCR Technology",
+    description:
+      "High accuracy, handles various fonts, obscured text (stamps), and similar characters.",
+  },
+  {
+    icon: FaDatabase,
+    title: "Comprehensive SA Bank Coverage",
+    description:
+      "Handles statements from all major SA banks and various formats (PDF, scanned, stamped).",
+  },
+  {
+    icon: FaSearchDollar,
+    title: "Intelligent Income Detection",
+    description:
+      "Identifies salaried/non-salaried income, provides explanations, and filters out transfers.",
+  },
+  {
+    icon: FaFingerprint,
+    title: "Enhanced Fraud Detection",
+    description:
+      "Detects document tampering, fraudulent insertions, and developing behavioral profiling.",
+    isComingSoon: true,
+  },
+  {
+    icon: FaSyncAlt,
+    title: "Dynamic Data Interaction",
+    description:
+      "User-friendly interface for real-time transaction recategorization with immediate recalculations.",
+  },
+  {
+    icon: FaLaptopCode,
+    title: "Seamless API Integration",
+    description:
+      "Push structured, validated data directly into your credit scoring or loan origination systems.",
+  },
+  {
+    icon: FaTachometerAlt,
+    title: "Visual Analytics & Reporting",
+    description:
+      "Intuitive dashboards for insights into cash flow, income sources, and spending patterns.",
+  },
+  {
+    icon: FaUsersCog,
+    title: "MI Dashboard & Performance Tracking",
+    description:
+      "Monitor processing volumes, success rates, average times, and user performance.",
+  },
+  {
+    icon: FaSignInAlt,
+    title: "Multiple Export Formats",
+    description:
+      "Download results as structured Excel, formatted PDFs, or copy data easily.",
+  },
+  {
+    icon: FaCheckCircle,
+    title: "Built-in Accuracy Checks",
+    description:
+      "Includes automated validations and data reviews for uncertain extractions.",
+  },
+  {
+    icon: FaHistory,
+    title: "Comprehensive Audit Trail",
+    description:
+      "Maintains a detailed log of processing steps and user interactions for compliance and traceability.",
+  },
+];
+
+const coreBenefits: FeatureItem[] = [
+  {
+    icon: FaShippingFast,
+    title: "Dramatically Reduce Processing Time",
+    description: "Cut statement analysis from hours to minutes/seconds.",
+  },
+  {
+    icon: FaCheckCircle,
+    title: "Ensure High Accuracy & Reliability",
+    description: "Minimize human error with advanced OCR and validation.",
+  },
+  {
+    icon: FaFileInvoiceDollar,
+    title: "Lower Operational Costs",
+    description: "Reduce reliance on manual data entry staff and overheads.",
+  },
+  {
+    icon: FaShieldAlt,
+    title: "Strengthen Fraud Prevention",
+    description:
+      "Proactively identify tampered documents and suspicious activity.",
+  },
+  {
+    icon: FaTachometerAlt,
+    title: "Accelerate Turnaround Times",
+    description:
+      "Speed up loan applications, credit assessments, and onboarding.",
+  },
+  {
+    icon: FaLightbulb,
+    title: "Improve Decision-Making",
+    description: "Base assessments on accurate, comprehensive, fast data.",
+  },
+  {
+    icon: FaCogs,
+    title: "Enhance Operational Efficiency",
+    description:
+      "Streamline workflows and free up staff for higher-value tasks.",
+  },
+  {
+    icon: FaUserCheck,
+    title: "Improve Compliance",
+    description: "Ensure consistent and accurate data handling.",
+  },
+];
+
+const dataOutputs = [
+  "Basic Transaction Summary",
+  "Debit Order Analysis",
+  "Disposable Income Calculation",
+  "Affordability Assessment Data",
+  "Income & Expenses Breakdown",
+  "Detailed Transaction List (Exportable)",
+  "Fraud Indicators & Flags",
+];
+
+const useCases = [
+  "Lending & Credit Origination (Personal, Vehicle, SME)",
+  "Credit Risk Assessment",
+  "Income Verification Automation",
+  "Affordability Calculations",
+  "Customer Onboarding (KYC)",
+  "Financial Health Monitoring",
+  "Internal Audit & Reconciliation",
+  "Fraud Investigation Support",
+];
+
+export default function ObsePage() {
+  return (
+    <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
+      {/* 1. Hero Section */}
+      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-900 text-white py-20 md:py-32">
+        <div className="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
+        {/* Optional: Add a subtle background pattern or image */}
+        {/* <div className="absolute inset-0 bg-[url('/path/to/hero-bg.png')] bg-cover bg-center opacity-10"></div> */}
+        <div className="container mx-auto px-6 text-center relative z-10">
+          {/* Consider adding OMS Logo here */}
+          {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
+          <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
+          >
+            Revolutionize Your Lending and Credit Processes with OBSE
+          </h1>
+          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
+            Automate data extraction, enhance accuracy, detect fraud, and
+            accelerate decision-making with South Africa&apos;s intelligent bank
+            statement solution.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            <Link
+              href="#how-it-works" // Link to the "How it Works" section
+              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 }}
+            >
+              <FaPlayCircle className="inline mr-2 text-red-400" /> See How It
+              Works
+            </Link>
+            {/* Optional Mini-CTA */}
+            {/* <Link href="#overview-video" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300">
+              <FaPlayCircle className="mr-2" /> Watch a Quick Overview
+            </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 High Cost of Manual Bank Statement Processing
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              In the rapidly evolving landscape of financial services, where
+              precision and speed are paramount, the challenges associated with
+              extracting data from bank statements can become significant
+              roadblocks. Efficiently parsing financial information is critical
+              for accurately assessing financial health and risk.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[
+              {
+                icon: FaSpinner,
+                title: "Slow & Labor-Intensive",
+                desc: "Teams spend countless hours manually keying in data, causing operational bottlenecks.",
+              },
+              {
+                icon: FaExclamationTriangle,
+                title: "Prone to Human Error",
+                desc: "Manual entry risks inaccurate assessments, compliance breaches, and poor decisions.",
+              },
+              {
+                icon: FaFileInvoiceDollar,
+                title: "High Operational Costs",
+                desc: "Significant resources consumed managing large volumes of statements manually.",
+              },
+              {
+                icon: FaShieldAlt,
+                title: "Limited Fraud Detection",
+                desc: "Identifying sophisticated fraud or tampered documents manually is difficult and slow.",
+              },
+              {
+                icon: FaTachometerAlt,
+                title: "Long Turnaround Times",
+                desc: "Slow processing delays approvals, causing customer dissatisfaction and missed opportunities.",
+              },
+              {
+                icon: FaLayerGroup,
+                title: "Scalability Challenges",
+                desc: "Manual workflows bottleneck quickly, making it difficult to handle growing statement volumes efficiently.",
+              },
+            ].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 to signify pain points
+                />
+                <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. Introducing OBSE Section */}
+      <section 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">
+                OBSE: Automated Accuracy, Speed, and Insight
+              </h2>
+              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
+                Optical Bank Statement Extractor (OBSE) is an advanced OCR and
+                data aggregation platform designed specifically for the South
+                African financial landscape. It seamlessly extracts
+                comprehensive, accurate data from any bank statement (individual
+                or juristic, across all SA banks), regardless of format –
+                including PDFs, scanned images, stamped documents, and even
+                disorganized statements.
+              </p>
+              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-semibold">
+                OBSE transforms raw bank statement data into actionable
+                financial intelligence in seconds, eliminating manual drudgery
+                and empowering your teams to make faster, smarter decisions.
+              </p>
+            </div>
+            <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
+              {/* Placeholder for UI Screenshot */}
+              <Image
+                src="/images/obse-ui-upload.png" // Replace with actual path
+                alt="OBSE Upload Interface"
+                layout="fill"
+                objectFit="cover"
+                className="bg-gray-200 dark:bg-gray-700" // Placeholder background
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. How OBSE Works Section */}
+      <section
+        id="how-it-works"
+        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">
+              From PDF to Insights in Seconds
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              OBSE simplifies complex data extraction into a streamlined
+              workflow.
+            </p>
+          </div>
+          {/* Consider a visual flow diagram or stepped cards */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 text-center">
+            {[
+              {
+                step: 1,
+                title: "Upload",
+                desc: "Easily upload single multi-month PDFs or separate monthly files.",
+                icon: FaSignInAlt,
+              },
+              {
+                step: 2,
+                title: "Automated Extraction",
+                desc: "Powerful engine reads, structures, and validates data in seconds.",
+                icon: FaCogs,
+              },
+              {
+                step: 3,
+                title: "Analysis & Fraud Checks",
+                desc: "Analyzes transactions, identifies income, flags fraud indicators.",
+                icon: FaSearchDollar,
+              },
+              {
+                step: 4,
+                title: "Review & Interact",
+                desc: "User-friendly interface to review, recategorize, and view insights.",
+                icon: FaUserCheck,
+              },
+              {
+                step: 5,
+                title: "Access & Integrate",
+                desc: "Export data (Excel, PDF) or integrate results via API.",
+                icon: FaLaptopCode,
+              },
+            ].map((item) => (
+              <div
+                key={item.step}
+                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
+              >
+                <div
+                  className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl"
+                  style={{ backgroundColor: COLORS.primary }}
+                >
+                  {item.step}
+                </div>
+                <item.icon
+                  className="text-3xl text-gold-500 dark:text-gold-400 mx-auto mb-3"
+                  style={{ color: COLORS.primary }}
+                />
+                <h4 className="text-lg 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>
+
+      {/* 5. Key Features 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">
+              Unlock Deeper Financial Understanding
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Explore the powerful capabilities that drive OBSE&apos;s
+              performance.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {keyFeatures.map((feature) => (
+              <div
+                key={feature.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 }}
+              >
+                {feature.isComingSoon && (
+                  <span className="absolute top-2 right-2 px-3 py-1 text-sm font-bold bg-cyan-700 text-white rounded-full shadow-lg z-10 font-poppins">
+                    Coming Soon
+                  </span>
+                )}
+                <feature.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">
+                  {feature.title}
+                </h4>
+                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 6. Core Benefits 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 OBSE Advantage: Transform Your Operations
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Experience tangible benefits that impact your bottom line and
+              efficiency.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {coreBenefits.map((benefit) => (
+              <div
+                key={benefit.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"
+              >
+                <benefit.icon
+                  className="text-4xl text-gold-500 dark:text-gold-400 mx-auto mb-4"
+                  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. Data Outputs & Insights Section */}
+      <section 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 className="relative h-64 md:h-96 rounded-lg overflow-hidden shadow-lg">
+              {/* Placeholder for Dashboard Example */}
+              <Image
+                src="/images/obse-dashboard-example.png" // Replace with actual path
+                alt="OBSE Dashboard Insights"
+                layout="fill"
+                objectFit="contain" // Use contain if showing a full dashboard
+                className="bg-gray-100 dark:bg-gray-800 p-4" // Add padding if needed
+              />
+            </div>
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
+                Actionable Intelligence at Your Fingertips
+              </h2>
+              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
+                OBSE delivers a suite of standard financial summaries and
+                detailed data points essential for informed decisions:
+              </p>
+              <ul className="space-y-3">
+                {dataOutputs.map((output) => (
+                  <li key={output} className="flex items-start">
+                    <FaCheckCircle
+                      className="w-5 h-5 text-green-500 dark:text-green-400 mr-3 mt-1 flex-shrink-0"
+                      style={{ color: COLORS.primary }} // Or use primary color
+                    />
+                    <span className="text-gray-700 dark:text-gray-300">
+                      {output}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 8. Technology Deep Dive Section */}
+      <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">
+            <FaCogs
+              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">
+              Leveraging Advanced Technology for Reliable Results
+            </h2>
+            <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300">
+              Built on a foundation of cutting-edge technology to ensure
+              performance and accuracy.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
+            {[
+              {
+                title: "Advanced OCR Engine",
+                desc: "Fine-tuned for diverse SA bank statements, handling stamps and challenging inputs.",
+                icon: FaFileAlt,
+              },
+              {
+                title: "Machine Learning",
+                desc: "Continuously improves interpretation, context analysis, and fraud detection models.",
+                icon: FaLightbulb,
+              },
+              {
+                title: "Data Structuring & Validation",
+                desc: "Intelligently structures data, validates entries, and applies rules for consistency.",
+                icon: FaPuzzlePiece,
+              },
+              {
+                title: "Secure API",
+                desc: "Robust and secure API for seamless and safe integration with your existing systems.",
+                icon: FaShieldAlt,
+              },
+            ].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>
+          {/* Optional: Add JSON snippet visual */}
+          {/* <div className="mt-12 max-w-2xl mx-auto bg-gray-900 p-4 rounded-lg shadow-lg">
+            <pre><code className="language-json text-sm">
+              {`{
+  "transaction_id": "T12345",
+  "date": "2023-10-26",
+  "description": "SALARY ABC CORP",
+  "amount": 15000.00,
+  "type": "credit",
+  "category": "Income/Salary"
+}`}
+            </code></pre>
+          </div> */}
+        </div>
+      </section>
+
+      {/* 9. Use Cases & Applications 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">
+            <FaWrench
+              className="text-5xl text-gold-500 mx-auto mb-4"
+              style={{ color: COLORS.primary }}
+            />
+            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+              Empowering Various Financial Processes
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              OBSE provides critical data and automation for a wide range of
+              applications.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 max-w-5xl mx-auto">
+            {useCases.map((useCase) => (
+              <div
+                key={useCase}
+                className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-center"
+              >
+                <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                  {useCase}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 10. Customization & Partnership Section */}
+      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+        <div className="container mx-auto px-6 text-center">
+          <FaHandshake
+            className="text-5xl text-gold-500 mx-auto mb-4"
+            style={{ color: COLORS.primary }}
+          />
+          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+            Flexible Solutions Tailored to Your Needs
+          </h2>
+          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-4xl mx-auto mb-6 leading-relaxed">
+            Beyond our standard offerings, we understand unique needs. If you
+            require specific information or analysis not in our standard
+            package, we&apos;ll collaborate to develop tailor-made outputs
+            aligned with your requirements. Our goal is to ensure OBSE exceeds
+            your expectations.
+          </p>
+          <p className="text-md md:text-lg text-gray-800 dark:text-gray-200 font-semibold max-w-4xl mx-auto">
+            We offer Proof of Concept (POC) engagements to demonstrate
+            OBSE&apos;s capabilities with your data and workflows, allowing you
+            to evaluate its potential impact before full commitment.
+          </p>
+        </div>
+      </section>
+
+      {/* 11. About OMS Section (Brief) */}
+      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-6 text-center">
+          {/* Optional: OMS Logo */}
+          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
+            Your Experienced Partner in Financial Technology
+          </h2>
+          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-6">
+            Owethu Management Solutions (OMS) provides professional technology
+            services with a proven track record, including participation in
+            ABSA&apos;s supplier development program since 2020. OBSE is backed
+            by a dedicated team committed to delivering robust, user-friendly
+            solutions that solve real-world business challenges.
+          </p>
+          <Link
+            href="/about"
+            className="text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 inline-flex items-center"
+            style={{ color: COLORS.primary }}
+          >
+            Learn More About OMS <FaArrowRight className="ml-2" />
+          </Link>
+        </div>
+      </section>
+
+      {/* 12. 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 Transform Your Bank Statement Processing?
+          </h2>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
+            See OBSE in action! Schedule a live demo tailored to your specific
+            use case and discover how OBSE can streamline your operations,
+            reduce costs, and mitigate risk.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            <Link
+              href="/contact?subject=OBSE Demo Request" // Pre-fill subject for contact form
+              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 Personalized Demo
+            </Link>
+            <Link
+              href="/contact?subject=OBSE Sales Inquiry" // Pre-fill subject
+              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 Sales Team
+            </Link>
+          </div>
+          {/* Optional: Download Brochure Link */}
+          {/* <div className="mt-6">
+            <a href="/path/to/obse-brochure.pdf" download className="text-sm text-gray-800 hover:underline">
+              Download Brochure
+            </a>
+          </div> */}
+        </div>
+      </section>
+
+      {/* 13. 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">
+              For personalized support or to schedule a demo, reach out to us.
+              Our team is here to help you harness the power of automated data
+              extraction. Take the first step toward enhancing your efficiency
+              and driving your success!
+            </p>
+          </div>
+          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+            {/* 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" // Updated phone number
+                    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:Zanelem@oms.africa" // Updated email
+                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
+                  >
+                    Zanelem@oms.africa
+                  </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"
+                style={{ color: COLORS.primary }}
+              >
+                Go to Full Contact Page <FaArrowRight className="ml-2" />
+              </Link>
+            </div>
+
+            {/* Optional: Simple Contact Form (if ContactForm component is not used/available) */}
+            {/* <form className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
+                <input type="text" id="name" name="name" required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                <input type="email" id="email" name="email" required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+              </div>
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
+                <textarea id="message" name="message" rows={4} required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
+              </div>
+              <button type="submit" className="w-full bg-gold-500 text-gray-900 font-bold py-2 px-4 rounded-md hover:bg-gold-600 transition-colors duration-300" style={{ backgroundColor: COLORS.primary }}>
+                Send Message
+              </button>
+            </form> */}
+
+            {/* OR Use the ContactForm Component */}
+            <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 />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}