mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 19:08:09 +00:00
960 lines
45 KiB
TypeScript
960 lines
45 KiB
TypeScript
// // app/obse/page.tsx
|
||
|
||
// import Image from "next/image";
|
||
// import Link from "next/link"; // Import Link for internal navigation
|
||
// import {
|
||
// FaBolt, // Represents speed, automation
|
||
// FaExclamationTriangle, // Represents challenges, risks
|
||
// FaLightbulb, // Represents solution, intelligence
|
||
// FaCogs, // Represents how it works, engine
|
||
// FaThumbsUp, // Represents benefits, advantages
|
||
// FaChartPie, // Represents data outputs, insights
|
||
// FaMicrochip, // Represents technology
|
||
// FaBriefcase, // Represents use cases
|
||
// FaUsersCog, // Represents customization, partnership
|
||
// FaInfoCircle, // Represents about section (alternative)
|
||
// FaPhoneAlt, // Represents contact
|
||
// FaPlayCircle, // Optional for mini-CTA
|
||
// FaArrowRight, // For CTAs or steps
|
||
// FaFilePdf, // For PDF/Statement icon
|
||
// FaSearchDollar, // For income detection
|
||
// FaShieldAlt, // For fraud detection
|
||
// FaNetworkWired, // For API integration
|
||
// FaTable, // For data structuring
|
||
// FaBrain, // For Machine Learning
|
||
// FaBusinessTime, // For turnaround time
|
||
// FaHourglassHalf, // For reducing time
|
||
// FaHandHoldingUsd, // For operational costs
|
||
// FaUserCheck, // For accuracy
|
||
// FaChartLine, // For efficiency/profitability
|
||
// FaClipboardList, // For transaction summary
|
||
// FaCalendarAlt, // For debit orders
|
||
// FaMoneyBillWave, // For disposable income
|
||
// FaBalanceScale, // For affordability
|
||
// FaExchangeAlt, // For Income/Expenses
|
||
// FaEye, // For review/interact step
|
||
// FaUpload, // For upload step
|
||
// FaPaperPlane,
|
||
// FaCheckCircle, // For access/integrate step
|
||
// } from "react-icons/fa";
|
||
|
||
// const keyFeatures = [
|
||
// {
|
||
// icon: FaBolt,
|
||
// title: "Automated Data Extraction",
|
||
// description:
|
||
// "Processes statements in seconds (avg. 9-12s), drastically reducing manual effort.",
|
||
// },
|
||
// {
|
||
// icon: FaUserCheck, // Using accuracy icon here
|
||
// title: "Advanced OCR Technology",
|
||
// description:
|
||
// "High accuracy, reads varied fonts, handles stamps, and distinguishes similar characters ('7' vs 'Z').",
|
||
// },
|
||
// {
|
||
// icon: FaFilePdf,
|
||
// title: "Comprehensive SA Bank Coverage",
|
||
// description:
|
||
// "Handles statements from all major SA banks and various formats (PDF, scanned, stamped, multi/single page).",
|
||
// },
|
||
// {
|
||
// icon: FaSearchDollar,
|
||
// title: "Intelligent Income Detection",
|
||
// description:
|
||
// "Auto-identifies salaried/non-salaried income with suggestive logic and exclusionary rules.",
|
||
// },
|
||
// {
|
||
// icon: FaShieldAlt,
|
||
// title: "Enhanced Fraud Detection",
|
||
// description:
|
||
// "Detects document tampering, fraudulent transaction insertion, and developing ML-based behavioral profiling.",
|
||
// },
|
||
// {
|
||
// icon: FaCogs, // Using cogs for interaction/processing
|
||
// title: "Dynamic Data Interaction",
|
||
// description:
|
||
// "User-friendly interface for real-time transaction recategorization and immediate recalculations.",
|
||
// },
|
||
// {
|
||
// icon: FaNetworkWired,
|
||
// title: "Seamless API Integration",
|
||
// description:
|
||
// "Push structured, validated data directly into your credit scoring, LOS, or other internal systems.",
|
||
// },
|
||
// {
|
||
// icon: FaChartPie,
|
||
// title: "Visual Analytics & Reporting",
|
||
// description:
|
||
// "Intuitive dashboards showing cash flow, income sources, and spending patterns.",
|
||
// },
|
||
// {
|
||
// icon: FaTable, // Using table for dashboard data
|
||
// title: "MI Dashboard & Performance Tracking",
|
||
// description:
|
||
// "Monitor processing volumes, success rates, processing times, and user performance.",
|
||
// },
|
||
// {
|
||
// icon: FaTable,
|
||
// title: "Multiple Export Formats",
|
||
// description:
|
||
// "Download results as structured Excel, formatted PDFs, or copy data for easy transfer.",
|
||
// },
|
||
// {
|
||
// icon: FaCheckCircle, // Reusing from About Us for validation
|
||
// title: "Built-in Accuracy Checks",
|
||
// description:
|
||
// "Includes automated validations and data reviews for uncertain extractions to ensure reliability.",
|
||
// },
|
||
// ];
|
||
|
||
// const coreBenefits = [
|
||
// {
|
||
// icon: FaHourglassHalf,
|
||
// title: "Dramatically Reduce Processing Time",
|
||
// description:
|
||
// "Cut down statement analysis from hours to mere minutes/seconds.",
|
||
// },
|
||
// {
|
||
// icon: FaUserCheck,
|
||
// title: "Ensure High Accuracy & Reliability",
|
||
// description:
|
||
// "Minimize human error with advanced OCR and built-in validation rules.",
|
||
// },
|
||
// {
|
||
// icon: FaHandHoldingUsd,
|
||
// title: "Lower Operational Costs",
|
||
// description:
|
||
// "Reduce reliance on manual data entry staff and associated overheads.",
|
||
// },
|
||
// {
|
||
// icon: FaShieldAlt,
|
||
// title: "Strengthen Fraud Prevention",
|
||
// description:
|
||
// "Proactively identify tampered documents and suspicious financial activity.",
|
||
// },
|
||
// {
|
||
// icon: FaBusinessTime,
|
||
// title: "Accelerate Turnaround Times",
|
||
// description:
|
||
// "Speed up loan applications, credit assessments, and customer onboarding.",
|
||
// },
|
||
// {
|
||
// icon: FaBrain, // Using brain for better decisions
|
||
// title: "Improve Decision-Making",
|
||
// description:
|
||
// "Base assessments on accurate, comprehensive, and rapidly available data.",
|
||
// },
|
||
// {
|
||
// icon: FaChartLine,
|
||
// title: "Enhance Operational Efficiency",
|
||
// description: "Streamline workflows, free up staff for higher-value tasks.",
|
||
// },
|
||
// {
|
||
// icon: FaThumbsUp, // Using thumbs up for compliance
|
||
// title: "Improve Compliance",
|
||
// description:
|
||
// "Ensure consistent and accurate data handling for regulatory requirements.",
|
||
// },
|
||
// ];
|
||
|
||
// const dataOutputs = [
|
||
// {
|
||
// icon: FaClipboardList,
|
||
// title: "Basic Transaction Summary",
|
||
// description:
|
||
// "Concise overview of transactions for spending pattern analysis.",
|
||
// },
|
||
// {
|
||
// icon: FaCalendarAlt,
|
||
// title: "Debit Order Analysis",
|
||
// description: "Clear tracking of recurring payments and regular expenses.",
|
||
// },
|
||
// {
|
||
// icon: FaMoneyBillWave,
|
||
// title: "Disposable Income Calculation",
|
||
// description: "Assessment of available funds after essential expenses.",
|
||
// },
|
||
// {
|
||
// icon: FaBalanceScale,
|
||
// title: "Affordability Assessment Data",
|
||
// description: "Key data points to support financial capability evaluation.",
|
||
// },
|
||
// {
|
||
// icon: FaExchangeAlt,
|
||
// title: "Income & Expenses Breakdown",
|
||
// description: "Detailed insights into financial inflows and outflows.",
|
||
// },
|
||
// {
|
||
// icon: FaTable,
|
||
// title: "Detailed Transaction List",
|
||
// description:
|
||
// "Full, structured transaction data exportable for deep analysis.",
|
||
// },
|
||
// {
|
||
// icon: FaExclamationTriangle,
|
||
// title: "Fraud Indicators",
|
||
// description:
|
||
// "Flags for potentially suspicious documents or transaction patterns.",
|
||
// },
|
||
// ];
|
||
|
||
// const useCases = [
|
||
// { title: "Lending & Credit Origination (Personal, VAF, SME)" },
|
||
// { title: "Credit Risk Assessment & Scoring Input" },
|
||
// { title: "Automated Income Verification" },
|
||
// { title: "Affordability Calculations & Compliance Checks" },
|
||
// { title: "Faster Customer Onboarding (KYC/Financial)" },
|
||
// { title: "Portfolio Financial Health Monitoring" },
|
||
// { title: "Internal Audit & Reconciliation Support" },
|
||
// { title: "Fraud Investigation Data Preparation" },
|
||
// ];
|
||
|
||
// export default function ObsePage() {
|
||
// return (
|
||
// <>
|
||
// <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-900 text-white py-24 md:py-40">
|
||
// <div className="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
|
||
// <div className="absolute inset-0 bg-cover bg-center opacity-10 dark:opacity-5"></div>
|
||
// <div className="container mx-auto px-6 text-center relative z-10">
|
||
// <div className="mb-6 inline-block bg-gold-500/10 p-3 rounded-lg border border-gold-500/30">
|
||
// <Image
|
||
// src="/images/oms-logo-light.png"
|
||
// alt="OMS Logo"
|
||
// width={80}
|
||
// height={40}
|
||
// className="h-10 w-auto"
|
||
// />
|
||
// </div>
|
||
// <h1 className="text-4xl md:text-6xl font-bold mb-4 font-poppins text-gold-500 drop-shadow-md">
|
||
// Revolutionize Lending with OBSE
|
||
// </h1>
|
||
// <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 font-poppins mb-8">
|
||
// Automate data extraction, enhance accuracy, detect fraud, and
|
||
// accelerate decision-making with South Africa's intelligent bank
|
||
// statement solution: Owethu Bank Statement Extraction.
|
||
// </p>
|
||
// <div className="flex flex-col sm:flex-row justify-center gap-4">
|
||
// <Link
|
||
// href="#contact"
|
||
// className="inline-block bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 dark:hover:bg-gold-400 transition-colors duration-300 font-poppins"
|
||
// >
|
||
// Request a Demo <FaArrowRight className="inline ml-2" />
|
||
// </Link>
|
||
// <Link
|
||
// href="#how-it-works"
|
||
// className="inline-block bg-transparent border-2 border-gold-500 text-gold-500 font-bold py-3 px-8 rounded-md hover:bg-gold-500/10 transition-colors duration-300 font-poppins"
|
||
// >
|
||
// <FaPlayCircle className="inline mr-2" /> See How It Works
|
||
// </Link>
|
||
// </div>
|
||
// <p className="text-sm text-gray-400 mt-6 font-poppins">
|
||
// Keywords: Bank Statement Extraction, OCR, Automation, Financial Data
|
||
// Analysis, South Africa
|
||
// </p>
|
||
// </div>
|
||
// </section>
|
||
|
||
// <section 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>
|
||
// <FaExclamationTriangle
|
||
// className="text-5xl text-gold-500 mb-4"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
|
||
// The High Cost of Manual Bank Statement Processing
|
||
// </h2>
|
||
// <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 font-poppins">
|
||
// In the rapidly evolving landscape of financial services, where
|
||
// precision and speed are paramount, extracting data from bank
|
||
// statements manually creates significant roadblocks. Efficiently
|
||
// parsing financial information is critical for accurate risk
|
||
// assessment, yet reliance on manual methods impacts efficiency
|
||
// and decision-making.
|
||
// </p>
|
||
// <ul className="space-y-4 font-poppins">
|
||
// <li className="flex items-start">
|
||
// <FaHourglassHalf
|
||
// className="text-gold-500 mt-1 mr-3 flex-shrink-0"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <span className="text-gray-700 dark:text-gray-300">
|
||
// <strong className="dark:text-white">
|
||
// Slow & Labor-Intensive:
|
||
// </strong>{" "}
|
||
// Countless hours spent on manual data entry lead to
|
||
// operational bottlenecks.
|
||
// </span>
|
||
// </li>
|
||
// <li className="flex items-start">
|
||
// <FaUserCheck className="text-red-500 mt-1 mr-3 flex-shrink-0" />{" "}
|
||
// {/* Using red for error */}
|
||
// <span className="text-gray-700 dark:text-gray-300">
|
||
// <strong className="dark:text-white">
|
||
// Prone to Human Error:
|
||
// </strong>{" "}
|
||
// Mistakes risk inaccurate assessments, compliance breaches,
|
||
// and poor decisions.
|
||
// </span>
|
||
// </li>
|
||
// <li className="flex items-start">
|
||
// <FaHandHoldingUsd
|
||
// className="text-gold-500 mt-1 mr-3 flex-shrink-0"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <span className="text-gray-700 dark:text-gray-300">
|
||
// <strong className="dark:text-white">
|
||
// High Operational Costs:
|
||
// </strong>{" "}
|
||
// Significant resources consumed managing large volumes
|
||
// manually.
|
||
// </span>
|
||
// </li>
|
||
// <li className="flex items-start">
|
||
// <FaShieldAlt className="text-red-500 mt-1 mr-3 flex-shrink-0" />{" "}
|
||
// {/* Using red for ineffective fraud detection */}
|
||
// <span className="text-gray-700 dark:text-gray-300">
|
||
// <strong className="dark:text-white">
|
||
// Limited Fraud Detection:
|
||
// </strong>{" "}
|
||
// Manually identifying sophisticated fraud is difficult and
|
||
// time-consuming.
|
||
// </span>
|
||
// </li>
|
||
// <li className="flex items-start">
|
||
// <FaBusinessTime
|
||
// className="text-gold-500 mt-1 mr-3 flex-shrink-0"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <span className="text-gray-700 dark:text-gray-300">
|
||
// <strong className="dark:text-white">
|
||
// Long Turnaround Times:
|
||
// </strong>{" "}
|
||
// Slow processing leads to customer dissatisfaction and lost
|
||
// opportunities.
|
||
// </span>
|
||
// </li>
|
||
// </ul>
|
||
// </div>
|
||
// <div className="relative h-72 md:h-96 rounded-lg overflow-hidden shadow-lg">
|
||
// <Image
|
||
// src="/images/manual-vs-automated.png" // Placeholder: Contrast image
|
||
// alt="Manual data entry challenges vs automated efficiency"
|
||
// layout="fill"
|
||
// objectFit="cover"
|
||
// className="transition-transform duration-500 hover:scale-105"
|
||
// />
|
||
// <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 3. Introducing OBSE: The Intelligent Solution --- */}
|
||
// <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-72 md:h-96 rounded-lg overflow-hidden shadow-lg order-last md:order-first">
|
||
// {/* Use the UI screenshot showing upload */}
|
||
// <Image
|
||
// src="/images/obse-ui-upload.png" // Placeholder: Catalogue Page 4 Left
|
||
// alt="OBSE Bank Statement Upload Interface"
|
||
// layout="fill"
|
||
// objectFit="contain" // Use contain if you want to show the full UI without cropping
|
||
// className="p-4 bg-gray-100 dark:bg-gray-800" // Added padding and background
|
||
// />
|
||
// </div>
|
||
// <div>
|
||
// <FaLightbulb
|
||
// className="text-5xl text-gold-500 mb-4"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <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 font-poppins">
|
||
// Owethu Bank Statement Extraction (OBSE) is an advanced OCR and
|
||
// data aggregation platform designed specifically for the South
|
||
// African financial landscape. It seamlessly extracts
|
||
// comprehensive, accurate data from{" "}
|
||
// <strong className="dark:text-white">
|
||
// any SA bank statement
|
||
// </strong>{" "}
|
||
// (individual or juristic), regardless of format – including PDF
|
||
// templates, 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-poppins font-semibold text-gold-600 dark:text-gold-400">
|
||
// 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>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 4. How OBSE Works: Simple Steps, Powerful Results --- */}
|
||
// <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-14">
|
||
// <FaCogs
|
||
// className="text-5xl text-gold-500 mx-auto mb-5"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <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 font-poppins">
|
||
// OBSE simplifies complex data extraction into a streamlined
|
||
// workflow:
|
||
// </p>
|
||
// </div>
|
||
// {/* Process Steps - Can use a grid or timeline structure */}
|
||
// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 text-center">
|
||
// {/* Step 1: Upload */}
|
||
// <div className="flex flex-col items-center p-4">
|
||
// <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
|
||
// <FaUpload
|
||
// className="text-3xl text-gold-500"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// </div>
|
||
// <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
||
// 1. Upload
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
|
||
// Easily upload single or multiple bank statements (PDFs).
|
||
// </p>
|
||
// </div>
|
||
// {/* Step 2: Extract */}
|
||
// <div className="flex flex-col items-center p-4">
|
||
// <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
|
||
// <FaBolt
|
||
// className="text-3xl text-gold-500"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// </div>
|
||
// <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
||
// 2. Automated Extraction
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
|
||
// Powerful engine reads, structures, and validates data in seconds
|
||
// </p>
|
||
// </div>
|
||
// {/* Step 3: Analyze & Check */}
|
||
// <div className="flex flex-col items-center p-4">
|
||
// <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
|
||
// <FaShieldAlt
|
||
// className="text-3xl text-gold-500"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// </div>
|
||
// <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
||
// 3. Analysis & Fraud Check
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
|
||
// Analyzes transactions, identifies income, flags potential fraud.
|
||
// </p>
|
||
// </div>
|
||
// {/* Step 4: Review */}
|
||
// <div className="flex flex-col items-center p-4">
|
||
// <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
|
||
// <FaEye
|
||
// className="text-3xl text-gold-500"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// </div>
|
||
// <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
||
// 4. Review & Interact (Optional)
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
|
||
// User-friendly interface to review, recategorize (real-time), and
|
||
// view insights.
|
||
// </p>
|
||
// </div>
|
||
// {/* Step 5: Access/Integrate */}
|
||
// <div className="flex flex-col items-center p-4">
|
||
// <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
|
||
// <FaPaperPlane
|
||
// className="text-3xl text-gold-500"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// </div>
|
||
// <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
|
||
// 5. Access & Integrate
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
|
||
// Export (Excel, PDF), use visual analytics, or integrate via API.
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// {/* Visual for the process flow */}
|
||
// <div className="mt-12 relative h-60 md:h-96 rounded-lg overflow-hidden shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
||
// <Image
|
||
// src="/images/obse-process-flow.png" // Placeholder: Sequence of UI screenshots from Page 6
|
||
// alt="OBSE Process Flow Visualization"
|
||
// layout="fill"
|
||
// objectFit="contain"
|
||
// className="p-4"
|
||
// />
|
||
// <p className="absolute text-gray-500 dark:text-gray-400 z-0">
|
||
// Process Flow Visual (Replace with Image)
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 5. Key Features: Powering Your Processes --- */}
|
||
// <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-14">
|
||
// {/* <FaListCheck
|
||
// className="text-5xl text-gold-500 mx-auto mb-5"
|
||
// style={{ color: "#e1c44a" }}
|
||
// /> */}
|
||
// <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 font-poppins">
|
||
// Explore the core capabilities that make OBSE an indispensable tool
|
||
// for modern financial analysis.
|
||
// </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="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md transform transition duration-300 hover:-translate-y-2 hover:shadow-xl dark:hover:shadow-gold-500/20 border-t-4 border-gold-500"
|
||
// style={{ borderColor: "#e1c44a" }}
|
||
// >
|
||
// <feature.icon
|
||
// className="text-4xl text-gold-500 mb-4" // Adjusted size
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h4 className="text-xl font-semibold mb-3 font-poppins dark:text-white">
|
||
// {feature.title}
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
|
||
// {feature.description}
|
||
// </p>
|
||
// </div>
|
||
// ))}
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 6. Core Benefits: The OBSE Advantage (The Gain) --- */}
|
||
// <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-14">
|
||
// <FaThumbsUp
|
||
// className="text-5xl text-gold-500 mx-auto mb-5"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
|
||
// Transform Operations & Decision-Making
|
||
// </h2>
|
||
// <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
|
||
// Discover the tangible benefits OBSE brings to your financial
|
||
// workflows and bottom line.
|
||
// </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-2 hover:shadow-xl dark:hover:shadow-gold-500/20"
|
||
// >
|
||
// <benefit.icon
|
||
// className="text-4xl text-gold-500 mx-auto mb-4"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
|
||
// {benefit.title}
|
||
// </h4>
|
||
// <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
|
||
// {benefit.description}
|
||
// </p>
|
||
// </div>
|
||
// ))}
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 7. Data Outputs & Insights --- */}
|
||
// <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 lg:grid-cols-2 gap-12 items-center">
|
||
// <div>
|
||
// <FaChartPie
|
||
// className="text-5xl text-gold-500 mb-4"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <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 font-poppins">
|
||
// OBSE delivers a suite of standard financial summaries and
|
||
// detailed data points essential for informed decisions. Gain
|
||
// clarity on:
|
||
// </p>
|
||
// <div className="space-y-4">
|
||
// {dataOutputs.map((output) => (
|
||
// <div
|
||
// key={output.title}
|
||
// className="flex items-start p-3 bg-gray-50 dark:bg-gray-800 rounded-md border-l-4 border-gold-500/50"
|
||
// style={{ borderColor: "rgba(225, 196, 74, 0.5)" }}
|
||
// >
|
||
// <output.icon
|
||
// className="text-2xl text-gold-500 mt-1 mr-4 flex-shrink-0"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <div>
|
||
// <h4 className="font-semibold font-poppins dark:text-white">
|
||
// {output.title}
|
||
// </h4>
|
||
// <p className="text-sm text-gray-600 dark:text-gray-300 font-poppins">
|
||
// {output.description}
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// ))}
|
||
// </div>
|
||
// </div>
|
||
// <div className="relative h-80 md:h-[500px] rounded-lg overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
|
||
// {/* Visual: Use dashboard examples from Page 6 */}
|
||
// <Image
|
||
// src="/images/obse-dashboard-visuals.png" // Placeholder: Catalogue Page 6 Dashboards
|
||
// alt="OBSE Dashboard Examples showing financial insights"
|
||
// layout="fill"
|
||
// objectFit="contain" // Contain might be better for UI elements
|
||
// className="p-4"
|
||
// />
|
||
// <p className="absolute text-gray-500 dark:text-gray-400 z-0">
|
||
// Dashboard Visual (Replace with Image)
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 8. Technology Deep Dive --- */}
|
||
// <section className="py-16 md:py-24 bg-gray-800 text-white">
|
||
// <div className="container mx-auto px-6">
|
||
// <div className="text-center mb-14">
|
||
// <FaMicrochip
|
||
// className="text-5xl text-gold-500 mx-auto mb-5"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h2 className="text-3xl md:text-4xl font-bold font-poppins text-white mb-4">
|
||
// Leveraging Advanced Technology
|
||
// </h2>
|
||
// <p className="text-md md:text-lg text-gray-300 max-w-3xl mx-auto font-poppins">
|
||
// Built on a foundation of robust and intelligent technologies for
|
||
// reliable, accurate results.
|
||
// </p>
|
||
// </div>
|
||
// <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
// {/* OCR Engine */}
|
||
// <div className="bg-gray-700 p-6 rounded-lg text-center">
|
||
// <FaBolt
|
||
// className="text-4xl text-gold-500 mx-auto mb-3"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
|
||
// Advanced OCR Engine
|
||
// </h4>
|
||
// <p className="text-gray-300 font-poppins text-sm">
|
||
// Fine-tuned for SA bank statements, handles diverse formats,
|
||
// scans, and obscured text.
|
||
// </p>
|
||
// </div>
|
||
// {/* Machine Learning */}
|
||
// <div className="bg-gray-700 p-6 rounded-lg text-center">
|
||
// <FaBrain
|
||
// className="text-4xl text-gold-500 mx-auto mb-3"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
|
||
// Machine Learning
|
||
// </h4>
|
||
// <p className="text-gray-300 font-poppins text-sm">
|
||
// Continuously improves interpretation, reconciles discrepancies,
|
||
// and powers fraud detection models.
|
||
// </p>
|
||
// </div>
|
||
// {/* Data Structuring */}
|
||
// <div className="bg-gray-700 p-6 rounded-lg text-center">
|
||
// <FaTable
|
||
// className="text-4xl text-gold-500 mx-auto mb-3"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
|
||
// Data Structuring & Validation
|
||
// </h4>
|
||
// <p className="text-gray-300 font-poppins text-sm">
|
||
// Intelligently structures extracted data (e.g., JSON), validates
|
||
// entries, applies rules.
|
||
// </p>
|
||
// </div>
|
||
// {/* Secure API */}
|
||
// <div className="bg-gray-700 p-6 rounded-lg text-center">
|
||
// <FaNetworkWired
|
||
// className="text-4xl text-gold-500 mx-auto mb-3"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
|
||
// Secure API
|
||
// </h4>
|
||
// <p className="text-gray-300 font-poppins text-sm">
|
||
// Robust and secure API for seamless, safe integration with your
|
||
// existing systems.
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// {/* Visual: JSON code snippet visual from Page 5 */}
|
||
// <div className="mt-12 relative h-48 md:h-64 rounded-lg overflow-hidden shadow-lg bg-black flex items-center justify-center">
|
||
// <Image
|
||
// src="/images/obse-json-output.png" // Placeholder: Catalogue Page 5 JSON Visual
|
||
// alt="Example JSON output from OBSE data extraction"
|
||
// layout="fill"
|
||
// objectFit="contain"
|
||
// className="p-4 opacity-80"
|
||
// />
|
||
// <p className="absolute text-gray-500 z-0">
|
||
// JSON Output Example (Replace with Image)
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 9. Use Cases & Applications --- */}
|
||
// <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-14">
|
||
// <FaBriefcase
|
||
// className="text-5xl text-gold-500 mx-auto mb-5"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <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 font-poppins">
|
||
// OBSE delivers value across a wide range of applications within the
|
||
// financial services sector.
|
||
// </p>
|
||
// </div>
|
||
// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
// {useCases.map((useCase) => (
|
||
// <div
|
||
// key={useCase.title}
|
||
// className="bg-white dark:bg-gray-700 p-5 rounded-lg shadow-sm border-l-4 border-gold-500 flex items-center"
|
||
// style={{ borderColor: "#e1c44a" }}
|
||
// >
|
||
// <FaCheckCircle
|
||
// className="text-gold-500 mr-3 flex-shrink-0"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <span className="font-poppins dark:text-white text-sm font-medium">
|
||
// {useCase.title}
|
||
// </span>
|
||
// </div>
|
||
// ))}
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 10. Customization & Partnership --- */}
|
||
// <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-80 rounded-lg overflow-hidden shadow-lg order-last md:order-first">
|
||
// <Image
|
||
// src="/images/partnership-handshake.jpg" // Placeholder: Image representing partnership
|
||
// alt="OMS and Client Partnership"
|
||
// layout="fill"
|
||
// objectFit="cover"
|
||
// className="transition-transform duration-500 hover:scale-105"
|
||
// />
|
||
// </div>
|
||
// <div>
|
||
// <FaUsersCog
|
||
// className="text-5xl text-gold-500 mb-4"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
|
||
// Flexible Solutions, Tailored To You
|
||
// </h2>
|
||
// <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
|
||
// While OBSE offers a comprehensive standard package, we
|
||
// understand that each organization has unique needs. If you
|
||
// require specific information or analysis not included,{" "}
|
||
// <strong className="dark:text-white">
|
||
// we are committed to collaborating with you to develop
|
||
// tailor-made outputs
|
||
// </strong>{" "}
|
||
// that align perfectly with your requirements.
|
||
// </p>
|
||
// <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 font-poppins">
|
||
// Our goal is to ensure OBSE meets and exceeds your expectations,
|
||
// providing the exact insights needed for your operational
|
||
// processes and decision-making.
|
||
// </p>
|
||
// {/* POC Callout */}
|
||
// <div
|
||
// className="bg-gold-50 dark:bg-gold-900/20 border-l-4 border-gold-500 p-4 rounded-md"
|
||
// style={{ borderColor: "#e1c44a" }}
|
||
// >
|
||
// <h4 className="font-semibold font-poppins text-gold-800 dark:text-gold-300">
|
||
// Proof of Concept (POC) Available
|
||
// </h4>
|
||
// <p className="text-sm text-gold-700 dark:text-gold-400 font-poppins mt-1">
|
||
// We offer Proof of Concept engagements to demonstrate OBSE's
|
||
// capabilities with your specific data and workflows before full
|
||
// commitment. Let's discuss your needs.
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 11. About OMS: Your Trusted Technology Partner --- */}
|
||
// <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
|
||
// <div className="container mx-auto px-6 text-center">
|
||
// {/* Optional: Simple OMS logo here */}
|
||
// <Image
|
||
// src="/images/oms-logo-dark.png" // Placeholder: Dark version of logo
|
||
// alt="Owethu Management Solutions Logo"
|
||
// width={150}
|
||
// height={75}
|
||
// className="h-12 w-auto mx-auto mb-6"
|
||
// />
|
||
// <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
|
||
// Your Experienced Technology Partner
|
||
// </h2>
|
||
// <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins mb-6">
|
||
// Owethu Management Solutions (OMS) provides professional technology
|
||
// services with a proven track record, including participation in
|
||
// ABSA's supplier development program since 2020. OBSE is backed by
|
||
// our dedicated team of IT Managers, Senior Developers, and UX
|
||
// Designers committed to robust, user-friendly solutions.
|
||
// </p>
|
||
// <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins font-semibold">
|
||
// We focus on leveraging technology to solve real-world business
|
||
// challenges in the financial sector, emphasizing efficiency,
|
||
// accuracy, and strong partnerships.
|
||
// </p>
|
||
// <div className="mt-8">
|
||
// <Link
|
||
// href="/about-us"
|
||
// className="inline-block text-gold-600 dark:text-gold-400 font-semibold py-2 px-4 rounded-md hover:text-gold-700 dark:hover:text-gold-300 hover:bg-gold-500/10 transition-colors duration-300 font-poppins"
|
||
// style={{ color: "#c8a93d" }} // Using a slightly darker gold for text link
|
||
// >
|
||
// Learn More About OMS <FaArrowRight className="inline ml-1" />
|
||
// </Link>
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 12. Call to Action (CTA) --- */}
|
||
// <section
|
||
// className="py-16 md:py-24 bg-gradient-to-r from-gold-500 to-gold-600 text-gray-900 dark:from-gold-600 dark:to-gold-700"
|
||
// style={{ backgroundColor: "#e1c44a" }}
|
||
// >
|
||
// <div className="container mx-auto px-6 text-center">
|
||
// <FaBolt className="text-5xl mx-auto mb-5 text-gray-800" />
|
||
// <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900">
|
||
// Ready to Transform Your Bank Statement Processing?
|
||
// </h2>
|
||
// <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins text-gray-800 mb-8">
|
||
// 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 gap-4">
|
||
// <Link
|
||
// href="#contact" // Link to contact form/section below
|
||
// 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 font-poppins"
|
||
// >
|
||
// Request a Personalized Demo
|
||
// </Link>
|
||
// <Link
|
||
// href="/contact" // Link to general contact page
|
||
// 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/10 transition-colors duration-300 font-poppins"
|
||
// >
|
||
// Contact Sales Team
|
||
// </Link>
|
||
// </div>
|
||
// {/* Optional Tertiary Link */}
|
||
// {/* <div className="mt-4">
|
||
// <a href="/path/to/obse-brochure.pdf" target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-gray-700 hover:text-black font-poppins">
|
||
// Download Brochure
|
||
// </a>
|
||
// </div> */}
|
||
// </div>
|
||
// </section>
|
||
|
||
// {/* --- 13. Contact Information --- */}
|
||
// <section
|
||
// id="contact"
|
||
// 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">
|
||
// <FaPhoneAlt
|
||
// className="text-5xl text-gold-500 mx-auto mb-5"
|
||
// style={{ color: "#e1c44a" }}
|
||
// />
|
||
// <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 font-poppins">
|
||
// For personalized support or to schedule your demo, reach out to
|
||
// us. Let's harness the power of automated data extraction for your
|
||
// business.
|
||
// </p>
|
||
// </div>
|
||
// <div className="max-w-xl mx-auto text-center">
|
||
// <div className="mb-6">
|
||
// <h4 className="text-lg font-semibold font-poppins dark:text-white">
|
||
// Contact Details:
|
||
// </h4>
|
||
// <p className="text-gray-700 dark:text-gray-300 font-poppins mt-2">
|
||
// <strong className="dark:text-white">Phone:</strong>{" "}
|
||
// <a
|
||
// href="tel:+27120513281"
|
||
// className="text-gold-600 hover:text-gold-700 dark:text-gold-400 dark:hover:text-gold-300"
|
||
// >
|
||
// (012) 051 3281
|
||
// </a>
|
||
// </p>
|
||
// <p className="text-gray-700 dark:text-gray-300 font-poppins mt-1">
|
||
// <strong className="dark:text-white">Email:</strong>{" "}
|
||
// <a
|
||
// href="mailto:Zanelem@oms.africa"
|
||
// className="text-gold-600 hover:text-gold-700 dark:text-gold-400 dark:hover:text-gold-300"
|
||
// >
|
||
// Zanelem@oms.africa
|
||
// </a>
|
||
// </p>
|
||
// </div>
|
||
|
||
// {/* Optional: Placeholder for Contact Form */}
|
||
// {/* <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||
// <h4 className="text-lg font-semibold font-poppins dark:text-white mb-4">Or Send Us a Message</h4>
|
||
// <p className="text-gray-600 dark:text-gray-400 font-poppins">Contact form component would go here.</p>
|
||
// <Link href="/contact" className="mt-4 inline-block bg-gold-500 text-gray-900 font-bold py-2 px-6 rounded-md hover:bg-gold-600 transition-colors duration-300 font-poppins" style={{backgroundColor: "#e1c44a"}}>Go to Contact Form</Link>
|
||
// </div> */}
|
||
// </div>
|
||
// </div>
|
||
// </section>
|
||
// </>
|
||
// );
|
||
// }
|