mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-18 17:28:08 +00:00
OBSE page completed
This commit is contained in:
libertyoms
959
app/(website)/obse/page-backup.tsx
Normal file
959
app/(website)/obse/page-backup.tsx
Normal file
@ -0,0 +1,959 @@
|
||||
// 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user