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