mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2026-02-04 21:17:41 +00:00
960 lines
42 KiB
TypeScript
960 lines
42 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>
|
||
</>
|
||
);
|
||
}
|