+ {/* Main Content Area */}
+
+ {/* 1. Hero Section & Interactive Dual-Device Showcase with spacious Brand Header */}
+ setSelectedScreenshot(item)}
+ />
+
+ {/* 2. PFM Console Showcase (Executive Funder Backoffice) */}
+ setSelectedScreenshot(item)}
+ />
+
+ {/* 3. PFM Partner Showcase (Grantee Field Delivery & Evidence) */}
+ setSelectedScreenshot(item)}
+ />
+
+ {/* 4. Interactive 5-Phase Fiduciary Lifecycle Simulator */}
+ setSelectedPoster(poster)}
+ />
+
+ {/* 6. Dual Experience Comparison Matrix */}
+
+
+ {/* Footer */}
+
+
+ {/* Interactive Lightboxes & Modals */}
+ setSelectedScreenshot(null)}
+ />
+
+ setSelectedPoster(null)}
+ />
+
+ );
+}
+
+export default App;
diff --git a/PostFundManagement.ShowcaseUI/src/components/architecture/ArchitectureAssurance.tsx b/PostFundManagement.ShowcaseUI/src/components/architecture/ArchitectureAssurance.tsx
new file mode 100644
index 0000000..63de5c2
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/components/architecture/ArchitectureAssurance.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+ Layers,
+ Cpu,
+ HardDrive,
+ ShieldCheck,
+ Database,
+ Atom,
+ Sparkles,
+ CheckCircle2,
+ Terminal,
+ Server
+} from 'lucide-react';
+import { ARCHITECTURE_HIGHLIGHTS } from '../../data/showcaseData';
+
+export const ArchitectureAssurance: React.FC = () => {
+ return (
+
+ {/* Section Header */}
+
+
+
+
+ {/* 6 Tech Highlight Cards */}
+
+
+ + High-Performance &{' '} + + Tamper-Evident Engineering + +
++ Derived directly from PFM System Requirements Specification v2.0. Built on modern Clean Architecture, .NET 10, React 19, Quartz.NET, and Garage S3 object storage. +
+
+ {ARCHITECTURE_HIGHLIGHTS.map((item, idx) => (
+
+
+ {/* Master Business Rules Banner */}
+
+
+ ))}
+
+
+ {item.subtitle}
+
+
+
+ + {item.title} +
++ {item.description} +
+
+
+
+
+
+
+
+
+ Fiduciary Guarantee
+
+ + The 10 Cardinal Business Rules (BR-001 – BR-010) +
+
+
+
+
+
+ BR-001: Approval is Entry Point. No contract or project exists without external award reference.
+
+
+ BR-002: Automatic Contract Initiation. Award captures immediately spawn draft agreements.
+
+
+ BR-003: No Uncontrolled Disbursement. Zero capital release without verified evidence proofs.
+
+
+ BR-004: Evidence-Based Performance. Uploaded files must substantiate milestone deliverables.
+
+
+ BR-005: Single Source of Truth. Recipient KYC and bank details captured once, referenced immutably.
+
+
+ BR-010: Automated Portfolio Roll-Up. Activity metrics roll up to Programme, Portfolio, and Donor tiers.
+
+
+ {/* Section Header */}
+
+
+
+
+ {/* Calculator Main Grid */}
+
+
+ + Calculate Your{' '} + + Fiduciary Savings & Efficiency + +
++ Estimate how automated statutory gate checks, direct milestone proof uploads, and Quartz.NET SLA monitors reduce administrative overhead and mitigate capital exposure. +
+
+ {/* Controls Column */}
+
+
+ {/* Slider 1: Capital */}
+
+
+ {/* Results Output Column */}
+
+
+
+ {/* Slider 2: Projects */}
+
+ Total Portfolio Capital Under Management
+
+ R {portfolioCapital} Million
+
+
+ setPortfolioCapital(Number(e.target.value))}
+ className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-emerald-500"
+ />
+
+ R 5M
+ R 100M
+ R 250M+
+
+
+
+
+ {/* Slider 3: Milestones */}
+
+ Number of Funded Projects / Grantees
+
+ {projectCount} Projects
+
+
+ setProjectCount(Number(e.target.value))}
+ className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-cyan-500"
+ />
+
+ 3
+ 50
+ 100+
+
+
+
+
+
+ Contractual Milestones per Grant Award
+
+ {milestonesPerProject} Milestones
+
+
+ setMilestonesPerProject(Number(e.target.value))}
+ className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
+ />
+
+ 2
+ 8
+ 15
+
+
+ Underlying Model: Estimates based on independent development finance audits comparing manual spreadsheet evidence gathering against PFM automated gate clearances.
+
+
+
+
+ {/* Metric 1 */}
+
+
+ {/* Telemetry pill */}
+
+
+
+ {/* Metric 2 */}
+
+ Risk Exposure Avoided
+
+
+ R {riskMitigatedZar}M
+
+ + Uncontrolled tranches shielded by BR-003 condition precedent gates. +
+
+
+
+ {/* Metric 3 */}
+
+ Annual Audit Hours Saved
+
+
+ {hoursSavedPerYear.toLocaleString()} hrs
+
+ + Manual document chasing and reconciliation automated. +
+
+
+
+ {/* Metric 4 */}
+
+ Tranche Velocity
+
+
+ {turnaroundSpeedMultiplier} Faster
+
+ + From partner evidence submission to verified tranche release. +
+
+
+
+ Auditable Proof Artifacts
+
+
+ {totalMilestones} Proofs
+
+ + Indexed with immutable SHA signatures in Garage S3 vault. +
+
+
+
+
+ BR-001 — BR-010 Enforced
+
+ {/* Section Header */}
+
+
+
+
+ {/* Comparison Table */}
+
+
+ + PFM Console vs.{' '} + + PFM Partner + +
++ Engineered with clear separation of duties. Backoffice fiduciary gatekeepers govern portfolios, while field implementation teams deliver verified outcomes. +
+
+
+
+
+
+ | + Functional Dimension + | +
+
+
+ |
+
+
+
+ |
+
|---|---|---|
| + {row.feature} + | +
+
+
+ {row.console}
+
+ |
+
+
+
+ {row.partner}
+
+ |
+
+ {/* Section Header */}
+
+
+
+
+ {/* 3 Core Pillar Cards */}
+
+
+
+
+
+
+ + PFM Console •{' '} + + Executive Portfolio Command + +
++ Equip investment committees, CFOs, and programme directors with real-time capital deployment telemetry, automated statutory gate checks, and direct beneficiary impact verification. +
+
+ {/* Pillar 1 */}
+
+
+ {/* Screenshot Category Filter & Grid */}
+
+
+
+ {/* Pillar 2 */}
+
+
+
+ PILLAR 01
+ •
+ Capital Scale
+
+ + Multi-Portfolio Capital Deployment +
++ Filter commitments, released tranches (R 150k deployed), and active awards dynamically by programme, sector, and financial period with automated rollups. +
+
+ R 21.0m Governed
+ BR-010 Compliant
+
+
+
+
+ {/* Pillar 3 */}
+
+
+
+ PILLAR 02
+ •
+ Fiduciary Gating
+
+ + 100% Statutory Gate Enforcement +
++ Enforce Business Rule BR-003: no payment or disbursement is approved without verified banking KYC, signed legal agreements, and timestamped proofs. +
+
+ 0% Exposure
+ BR-003 Hard Gate
+
+
+
+
+
+
+ PILLAR 03
+ •
+ WBS & Gantt
+
+ + Chronological Gantt & Variance Audits +
++ 55-day span milestone chronology with automated variance detection comparing work breakdown task actuals against allocated budgets. +
+
+ Realized Actuals vs Budget
+ SLA Alerts
+
+
+
+
+ {/* Screenshot Cards Grid */}
+
+ {categories.map((cat) => (
+
+ ))}
+
+
+
+ Showing {filteredScreens.length} Console Views
+
+
+ {filteredScreens.map((screen) => (
+
+ onOpenScreenshot(screen)}
+ className="group cursor-pointer rounded-2xl bg-slate-900/60 border border-slate-800 hover:border-blue-500/50 overflow-hidden shadow-xl transition-all duration-300 hover:-translate-y-1"
+ >
+
+ ))}
+
+ 
+
+
+
+
+
+
+
+ {screen.category}
+
+
+
+
+ + {screen.title} +
++ {screen.description} +
+ +
+ {screen.tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+
+ {/* Section Header */}
+
+
+
+
+ {/* Poster Tabs Selector */}
+
+
+
+
+
+
+ + PFM Platform Marketing Posters •{' '} + + Strategic Campaign + +
++ Explore the official marketing campaign series showcasing field-level milestone proof, fiduciary portfolio command, institutional SSO security, and interactive WBS Gantt oversight. +
+
+ {CAMPAIGN_POSTERS.map((poster) => {
+ const isSelected = poster.id === selectedPosterId;
+ return (
+
+ );
+ })}
+
+
+ {/* Selected Poster Showcase Card */}
+
+ {/* Poster Image Preview */}
+
+ onOpenPosterModal(currentPoster)}>
+
+
+ {/* Poster Narrative & Highlights */}
+
+ 
+
+
+ {/* Zoom pill */}
+
+
+
+
+
+
+
+
+ {/* Poster Metrics Grid */}
+
+
+ {currentPoster.number}
+
+ •
+
+ {currentPoster.platform}
+
+
+ + {currentPoster.title} +
++ {currentPoster.subtitle} +
+
+ {currentPoster.metrics.map((metric, idx) => (
+
+
+ {/* 3 Numbered Key Takeaways */}
+
+
+ ))}
+ {metric.label}
+ {metric.value}
+ {metric.detail}
+
+ {currentPoster.keyHighlights.map((hl) => (
+
+
+ {/* Target Market Tags */}
+
+
+ {hl.number}
+
+
+ ))}
+
+
+ {hl.title}
+{hl.description}
+
+
+
+
+
+ {currentPoster.targetMarket.map((item, idx) => (
+
+ {item}
+
+ ))}
+
+
+ {/* Spacious, uncrowded brand header */}
+
+
+
+
+ {/* Main Hero Header */}
+
+ {/* Pill Badge */}
+
+
+ {/* Live Device Showcase */}
+
+
+
+ Post-Fund Management, Performance & Impact Platform
+
+ •
+ SRS v2.0 Production Suite
+
+
+ {/* Main Title */}
+ + Two Portals.{' '} + + One Unified Fiduciary Lifecycle. + +
+ + {/* Subtitle */} ++ From sanctioned award intake to audited field delivery. PFM bridges the gap between{' '} + Institutional Funders (PFM Console) and{' '} + Implementing Grantees (PFM Partner) with zero uncontrolled disbursements. +
+ + {/* CTAs */} + +
+
+
+ {/* Stats Ticker */}
+
+ {SHOWCASE_STATS.map((stat, idx) => (
+
+
+
+ ))}
+
+ {stat.value}
+
+
+ {stat.label}
+
+
+ {stat.detail}
+
+
+ {/* Platform Switcher Controls */}
+
+ );
+};
+
diff --git a/PostFundManagement.ShowcaseUI/src/components/layout/Footer.tsx b/PostFundManagement.ShowcaseUI/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..3fda34b
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/components/layout/Footer.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+ ShieldCheck,
+ Layers,
+ ExternalLink,
+ FileText,
+ Code2,
+ Cpu,
+ HardDrive,
+ Sparkles
+} from 'lucide-react';
+import { BrandLogo } from '../ui/BrandLogo';
+
+export const Footer: React.FC = () => {
+ return (
+
+ );
+};
+
diff --git a/PostFundManagement.ShowcaseUI/src/components/modal/PosterModal.tsx b/PostFundManagement.ShowcaseUI/src/components/modal/PosterModal.tsx
new file mode 100644
index 0000000..726cf1d
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/components/modal/PosterModal.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react';
+import { X, Download, Maximize2, ExternalLink } from 'lucide-react';
+import { PosterItem } from '../../data/showcaseData';
+
+interface PosterModalProps {
+ poster: PosterItem | null;
+ onClose: () => void;
+}
+
+export const PosterModal: React.FC
+
+
+ {/* Modern Device Shell */}
+
+
+
+
+
+
+
+
+ Live Application Telemetry
+
+
+
+
+ {/* Glow ambient background behind the frame */}
+
+
+ {/* Browser Top Bar */}
+
+
+ {/* Hotspots Quick Guide */}
+
+
+
+ {/* Browser Viewport with Image & Interactive Hotspots */}
+
+
+
+
+
+
+ {/* Browser Address Bar */}
+
+
+
+
+ https://
+
+ {activeMode === 'partner' ? 'partner.ifri.khongisa.co.za' : 'console.ifri.khongisa.co.za'}
+
+ /workspace
+
+
+ {activeMode === 'partner' ? 'PORT 8077' : 'PORT 8076'}
+
+
+ 
+
+ {/* Interactive Hotspots Overlay */}
+ {currentItem.hotspots?.map((hotspot, idx) => (
+
+
+
+
+ {/* Tooltip Card */}
+ {activeHotspot === idx && (
+
+ ))}
+
+ {/* Bottom Bar Info Overlay */}
+
+
+ )}
+
+
+ + {hotspot.description} +
+
+
+
+
+
+
+
+
+ {currentItem.platform}
+
+
+ {currentItem.category}
+
+
+ + {currentItem.title} +
++ {currentItem.subtitle} +
+
+ {currentItem.hotspots?.map((hotspot, idx) => (
+
+ setActiveHotspot(idx)}
+ onMouseLeave={() => setActiveHotspot(null)}
+ className={`p-3 rounded-xl border transition-all cursor-pointer ${
+ activeHotspot === idx
+ ? 'bg-slate-900 border-cyan-500/60 shadow-lg shadow-cyan-500/10'
+ : 'bg-slate-950/50 border-slate-800/80 hover:bg-slate-900/60'
+ }`}
+ >
+
+ ))}
+
+
+ {idx + 1}
+
+
+ {hotspot.title}
+
+
+ + {hotspot.description} +
+
+
+ );
+};
+
diff --git a/PostFundManagement.ShowcaseUI/src/components/modal/ScreenshotViewerModal.tsx b/PostFundManagement.ShowcaseUI/src/components/modal/ScreenshotViewerModal.tsx
new file mode 100644
index 0000000..86bb587
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/components/modal/ScreenshotViewerModal.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { X, ExternalLink, ShieldCheck, FileCheck2, Tag } from 'lucide-react';
+import { ScreenshotItem } from '../../data/showcaseData';
+
+interface ScreenshotViewerModalProps {
+ item: ScreenshotItem | null;
+ onClose: () => void;
+}
+
+export const ScreenshotViewerModal: React.FC e.stopPropagation()}
+ >
+ {/* Top Bar */}
+
+
+
+
+ {/* Poster Image */}
+
+
+ {poster.number}
+
+ •
+
+ {poster.title}
+
+
+
+
+
+
+
+ 
+
+
+ {/* Bottom Banner */}
+
+ {poster.coreProposition}
+ {poster.platform}
+
+
+
+ );
+};
+
diff --git a/PostFundManagement.ShowcaseUI/src/components/partner/PartnerShowcase.tsx b/PostFundManagement.ShowcaseUI/src/components/partner/PartnerShowcase.tsx
new file mode 100644
index 0000000..5531540
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/components/partner/PartnerShowcase.tsx
@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import {
+ FileCheck2,
+ UploadCloud,
+ MessageSquare,
+ KeyRound,
+ CheckCircle,
+ Clock,
+ ShieldAlert,
+ ExternalLink,
+ Maximize2,
+ FileSignature
+} from 'lucide-react';
+import { SCREENSHOTS, ScreenshotItem } from '../../data/showcaseData';
+
+interface PartnerShowcaseProps {
+ onOpenScreenshot: (item: ScreenshotItem) => void;
+}
+
+export const PartnerShowcase: React.FC e.stopPropagation()}
+ >
+ {/* Top Header */}
+
+
+
+
+ {/* Image Content */}
+
+
+ {item.platform}
+
+
+ {item.title}
+
+
+
+
+
+ 
+
+
+ {/* Footer Details */}
+
+
+
+
+
+
+ {item.subtitle}
+
+ + {item.description} +
+
+ {item.tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+
+ {/* Section Header */}
+
+
+
+
+ {/* 3 Core Partner Pillars */}
+
+
+
+
+
+
+ + PFM Partner •{' '} + + Field Delivery & Evidence Hub + +
++ Empower implementing teams to manage sanctioned grant agreements, execute work-breakdown activities, and upload tamper-evident proofs directly against funding covenants. +
+
+ {/* Pillar 1 */}
+
+
+ {/* Screenshot Category Filter & Grid */}
+
+
+
+ {/* Pillar 2 */}
+
+
+
+ PILLAR 01
+ •
+ Evidence Vault
+
+ + Granular Activity Proof Uploads +
++ Attach statutory documents, invoices, and geotagged photographs directly to milestones with pre-signed S3 storage and immediate SHA verification. +
+
+ 100% Traceable
+ Garage S3 Vault
+
+
+
+
+ {/* Pillar 3 */}
+
+
+
+ PILLAR 02
+ •
+ Direct Comms
+
+ + Direct Programme Officer Comms +
++ Eliminate lost email chains. Built-in contextual messaging links every query, revision request, and milestone note directly into an auditable project thread. +
+
+ Direct Inbox
+ Audit Logged
+
+
+
+
+
+
+ PILLAR 03
+ •
+ Rapid Mobilization
+
+ + Statutory SSO Onboarding & Tranches +
++ Single-token statutory onboarding invitations allow instant portal mobilization, KYC compliance verification, and clear visibility into covenant-tied tranches. +
+
+ Zero Friction
+ Duende STS Auth
+
+
+
+
+ {/* Screenshot Cards Grid */}
+
+ {categories.map((cat) => (
+
+ ))}
+
+
+
+ Showing {filteredScreens.length} Partner Views
+
+
+ {filteredScreens.map((screen) => (
+
+ onOpenScreenshot(screen)}
+ className="group cursor-pointer rounded-2xl bg-slate-900/60 border border-slate-800 hover:border-emerald-500/50 overflow-hidden shadow-xl transition-all duration-300 hover:-translate-y-1"
+ >
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {screen.category}
+
+
+
+
+ + {screen.title} +
++ {screen.description} +
+ +
+ {screen.tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+
+ {/* Header */}
+
+
+
+
+ {/* Stepper Progress Bar */}
+
+
+ + Experience the Complete{' '} + + Fiduciary Lifecycle + +
++ Follow a R 1,000,000 sanctioned award across both PFM Console and PFM Partner. See how business rules BR-001 through BR-010 guarantee zero uncontrolled capital release. +
+
+
+
+ {/* Step Card Details & Interactive Console View */}
+
+
+
+
+
+ {SIMULATION_STEPS.map((step, idx) => {
+ const isCurrent = currentStepIndex === idx;
+ const isCompleted = completedSteps.includes(idx);
+
+ return (
+
+ );
+ })}
+
+
+ {/* Left Column: Context & Narrative */}
+
+
+
+
+ {/* Right Column: Visual Telemetry Display */}
+
+
+ {activeStep.actor}
+
+
+ Phase {currentStepIndex + 1} of 5
+
+
+
+
+
+
+ + {activeStep.title} +
++ {activeStep.summary} +
+
+
+
+
+
+ + {activeStep.details} +
+
+ System Trace: {activeStep.systemAction}
+
+
+ {/* Stepper Buttons */}
+
+ {currentStepIndex < SIMULATION_STEPS.length - 1 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {/* Terminal-like Header */}
+
+
+
+
+ {/* Dynamic State Telemetry Block */}
+
+
+
+
+ pfm-runtime-telemetry.log
+
+
+
+ SYNCED
+
+
+
+
+ {/* Interactive Visual Status Bar */}
+
+ AWARD_ID:
+ PFM-2026-AWD-0091
+
+
+ SANCTIONED_AMOUNT:
+ ZAR 1,000,000.00
+
+
+ DISBURSEMENT_GATE:
+ = 4 ? 'text-emerald-400 font-bold' : 'text-amber-400 font-bold'}>
+ {currentStepIndex >= 4 ? 'CLEARED (BR-003 ENFORCED)' : 'LOCKED (PENDING EVIDENCE)'}
+
+
+
+ GARAGE_S3_EVIDENCE_PROOFS:
+ = 2 ? 'text-emerald-400' : 'text-slate-600'}>
+ {currentStepIndex >= 2 ? '2 VERIFIED SHA-256 ARTIFACTS' : '0 UPLOADED'}
+
+
+
+ RECIPIENT_KYC_STATUS:
+ = 1 ? 'text-emerald-400' : 'text-slate-600'}>
+ {currentStepIndex >= 1 ? 'VERIFIED (SSO AUTHENTICATED)' : 'AWAITING INVITATION ACCEPTANCE'}
+
+
+
+ DEPLOYED_TRANCHE:
+ = 4 ? 'text-emerald-400 font-bold' : 'text-slate-500'}>
+ {currentStepIndex >= 4 ? 'ZAR 350,000.00 (TRANCHE 1 RELEASED)' : 'ZAR 0.00 (EXPOSURE MITIGATED)'}
+
+
+
+
+
+ FIDUCIARY INTEGRITY INDEX:
+
+ {Math.min(100, (currentStepIndex + 1) * 20)}%
+
+
+
+
+
+
+
+ );
+};
+
diff --git a/PostFundManagement.ShowcaseUI/src/data/showcaseData.ts b/PostFundManagement.ShowcaseUI/src/data/showcaseData.ts
new file mode 100644
index 0000000..545f631
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/data/showcaseData.ts
@@ -0,0 +1,531 @@
+export interface PosterItem {
+ id: number;
+ number: string;
+ badge: string;
+ title: string;
+ subtitle: string;
+ platform: 'PFM Console' | 'PFM Partner';
+ image: string;
+ coreProposition: string;
+ metrics: { label: string; value: string; detail: string }[];
+ keyHighlights: { number: string; title: string; description: string }[];
+ targetMarket: string[];
+}
+
+export interface ScreenshotItem {
+ id: string;
+ title: string;
+ subtitle: string;
+ platform: 'PFM Console' | 'PFM Partner';
+ category: 'Dashboard' | 'WBS & Gantt' | 'Governance & Gate' | 'Evidence & Proof' | 'Communications' | 'Onboarding';
+ image: string;
+ description: string;
+ hotspots?: { x: number; y: number; title: string; description: string }[];
+ tags: string[];
+}
+
+export interface FeatureHighlight {
+ id: string;
+ title: string;
+ subtitle: string;
+ description: string;
+ iconName: string;
+ platform: 'console' | 'partner' | 'both';
+ metric: string;
+ metricLabel: string;
+ bulletPoints: string[];
+}
+
+export const SHOWCASE_STATS = [
+ {
+ value: 'R 21.0M+',
+ label: 'Statutory Capital Governed',
+ detail: 'Under active fiduciary management',
+ highlight: 'text-indigo-400',
+ },
+ {
+ value: '0% Exposure',
+ label: 'Unverified Disbursements',
+ detail: 'Strict statutory gate enforcement',
+ highlight: 'text-emerald-400',
+ },
+ {
+ value: '100% Traceable',
+ label: 'Milestone Evidence Trails',
+ detail: 'Tamper-evident S3 object vault',
+ highlight: 'text-cyan-400',
+ },
+ {
+ value: '1.2k+ Lives',
+ label: 'M&E Verified Beneficiaries',
+ detail: 'POPIA-compliant direct telemetry',
+ highlight: 'text-purple-400',
+ },
+];
+
+export const CAMPAIGN_POSTERS: PosterItem[] = [
+ {
+ id: 1,
+ number: '01 / 06',
+ badge: 'PARTNER COLLABORATION',
+ title: 'Implementing Partner Suite',
+ subtitle: 'Real-Time Milestone Oversight, Direct Programme Officer Comms & Live Capital Analytics',
+ platform: 'PFM Partner',
+ image: '/assets/marketing/1.jpeg',
+ coreProposition: 'Connect field-level contractors and recipient NGOs directly with funding administrators for seamless project execution.',
+ metrics: [
+ { label: 'Access Control', value: 'SSO Ready', detail: 'Statutory Invitation Verified' },
+ { label: 'Comms Channel', value: 'Direct Inbox', detail: 'Programme Officer Messaging' },
+ { label: 'Audited Proofs', value: '100% Traceable', detail: 'Substantiating Indicator Outcomes' },
+ { label: 'Tranche Release', value: 'Covenant-Tied', detail: 'Automated Precedent Checks' },
+ ],
+ keyHighlights: [
+ {
+ number: '01',
+ title: 'Contract Clarity',
+ description: 'View approved grant capital, governing portfolios, linked projects, and countersigned PDF agreements in one unified workspace.',
+ },
+ {
+ number: '02',
+ title: 'Proof Workflows',
+ description: 'Attach statutory documents, financial invoices, and field receipts directly to contractual milestones with real-time review badges.',
+ },
+ {
+ number: '03',
+ title: 'Risk Visibility',
+ description: 'Automated overdue milestone indicators and sector compliance tags keep field coordinators ahead of audit covenants.',
+ },
+ ],
+ targetMarket: ['Fieldwork Coordinators', 'Grant Recipients', 'Engineering & Infrastructure Contractors', 'Community Development NGOs'],
+ },
+ {
+ id: 2,
+ number: '02 / 06',
+ badge: 'EVIDENCE & GOVERNANCE',
+ title: 'Field-Level Activity Oversight & Evidence Verification',
+ subtitle: 'From Sanctioned Grant Award to Verified Field Delivery: Turn Contractual Milestones into Auditable Proof',
+ platform: 'PFM Partner',
+ image: '/assets/marketing/2.jpeg',
+ coreProposition: 'Empower implementing teams to manage sanctioned grant agreements, execute work-breakdown activities, and upload tamper-evident proofs.',
+ metrics: [
+ { label: 'Sanctioned Capital', value: 'R 1 000 000', detail: 'Binding Grant Agreement v1' },
+ { label: 'Fulfillment Pace', value: '33% Verified', detail: '1 / 1 Statutory Gate Signed' },
+ { label: 'Evidence Trail', value: '2 Proofs', detail: 'Timestamped & Status-Tracked' },
+ { label: 'Contract Execution', value: 'Countersigned', detail: 'Instant PDF Agreement Access' },
+ ],
+ keyHighlights: [
+ {
+ number: '01',
+ title: 'Sanctioned Award Alignment',
+ description: 'Access binding legal agreements, project scopes, and tranche disbursements mapped directly to approved award letters.',
+ },
+ {
+ number: '02',
+ title: 'Granular Activity Evidence',
+ description: 'Upload verifiable proofs against work breakdown items with immediate SHA hashing and tamper-evident storage.',
+ },
+ {
+ number: '03',
+ title: 'Proactive Compliance Alerts',
+ description: 'Keep projects on schedule with automated milestone reminders, overdue notifications, and SLA warnings.',
+ },
+ ],
+ targetMarket: ['Field Coordinators', 'Financial Controllers', 'Compliance Officers', 'Infrastructure Engineers'],
+ },
+ {
+ id: 3,
+ number: '03 / 06',
+ badge: 'ONBOARDING & VELOCITY',
+ title: 'Statutory Onboarding, SSO Access & Live Portfolio Analytics',
+ subtitle: 'Zero-Friction Partner Mobilization & Transparency',
+ platform: 'PFM Partner',
+ image: '/assets/marketing/3.jpeg',
+ coreProposition: 'Accelerate post-award mobilization from statutory invitation approval to authenticated portal access with live tranche visibility.',
+ metrics: [
+ { label: 'Access Control', value: 'SSO Ready', detail: 'Institutional Identity Gate' },
+ { label: 'Comms Channel', value: 'Direct Inbox', detail: 'Direct Funder-Partner Chat' },
+ { label: 'Audited Proofs', value: '100% Traceable', detail: 'Zero Unsubstantiated Claims' },
+ { label: 'Tranche Release', value: 'Covenant-Tied', detail: 'Milestone-Gated Releases' },
+ ],
+ keyHighlights: [
+ {
+ number: '01',
+ title: 'Rapid Mobilization',
+ description: 'Formal onboarding invitations grant immediate portal access to complete KYC compliance, review contracts, and start delivery.',
+ },
+ {
+ number: '02',
+ title: 'Capital Transparency',
+ description: 'Eliminate payment guesswork with transparent tranche release indicators tied directly to verified milestone deliverables.',
+ },
+ {
+ number: '03',
+ title: 'Strict Multi-Tenant Isolation',
+ description: 'Every partner organization operates in an encrypted tenant boundary with immutable audit logs protecting sensitive data.',
+ },
+ ],
+ targetMarket: ['Social Impact Enterprises', 'Research Consortia', 'Municipal Agencies', 'Non-Profit Finance Leads'],
+ },
+ {
+ id: 4,
+ number: '04 / 06',
+ badge: 'ENTERPRISE SECURITY & SSO',
+ title: 'Enterprise Security & Governance Architecture',
+ subtitle: 'Enterprise SSO Identity Management, Encrypted Multi-Tenant Isolation & Tamper-Evident Audit Trails',
+ platform: 'PFM Console',
+ image: '/assets/marketing/4.jpg',
+ coreProposition: 'The foundational security infrastructure ensuring institutional funders and government development portfolios remain unbreachable.',
+ metrics: [
+ { label: 'Architecture', value: 'Clean DDD', detail: '.NET 10 + React 19' },
+ { label: 'Storage Vault', value: 'Garage S3', detail: 'Pre-Signed Object Security' },
+ { label: 'Identity Gate', value: 'Duende STS', detail: 'OIDC / OAuth 2.0 PKCE' },
+ { label: 'Scheduler', value: 'Quartz.NET', detail: 'Dedicated Daemon Host' },
+ ],
+ keyHighlights: [
+ {
+ number: '01',
+ title: 'Institutional-Grade Identity',
+ description: 'Integrated with Skoruba Duende IdentityServer for multi-factor SSO, role-based access control, and granular tenant claims.',
+ },
+ {
+ number: '02',
+ title: 'Encrypted Multi-Tenancy',
+ description: 'Strict database tenant isolation with automatic global query filters, ensuring complete data sovereignty across portfolios.',
+ },
+ {
+ number: '03',
+ title: 'Immutable Decision Logs',
+ description: 'Every status transition, budget adjustment, evidence review, and disbursement approval writes an auditable record.',
+ },
+ ],
+ targetMarket: ['System Architects', 'CISO & InfoSec Teams', 'Compliance Auditors', 'Government Portfolio IT Leads'],
+ },
+ {
+ id: 5,
+ number: '05 / 06',
+ badge: 'EXECUTIVE COMMAND',
+ title: 'Executive Portfolio Command & Fiduciary Governance',
+ subtitle: 'Real-Time Fiduciary Command Across Every Programme & Sector: Total Portfolio Visibility, Zero Unverified Disbursements',
+ platform: 'PFM Console',
+ image: '/assets/marketing/5.jpg',
+ coreProposition: 'Equip executive funders, investment committees, and development agencies with live capital deployment telemetry and statutory gate checks.',
+ metrics: [
+ { label: 'Portfolio Value', value: 'R 21.0m', detail: 'Statutory Total Commitments' },
+ { label: 'Budget At Risk', value: 'R 0 Exposure', detail: '100% Statutory Gate Requirement' },
+ { label: 'Delivery Pace', value: '67% On Track', detail: 'Milestones Verified Index' },
+ { label: 'Verified Impact', value: '1.2k Lives', detail: 'M&E Verified Direct Beneficiaries' },
+ ],
+ keyHighlights: [
+ {
+ number: '01',
+ title: 'Multi-Portfolio Capital Deployment',
+ description: 'Filter commitments, released tranches, and active awards dynamically by programme, sector, and financial period.',
+ },
+ {
+ number: '02',
+ title: '100% Statutory Gate Enforcement',
+ description: 'Enforce mandatory governance gates before capital release—automatically flagging at-risk budgets and unverified deliverables.',
+ },
+ {
+ number: '03',
+ title: 'M&E Impact Roll-Up',
+ description: 'Aggregate project-level results directly into executive impact metrics, connecting every rand disbursed to verified human outcomes.',
+ },
+ ],
+ targetMarket: ['Institutional Funders', 'Science Councils', 'DFIs', 'Chief Financial Officers', 'Portfolio Investment Committees'],
+ },
+ {
+ id: 6,
+ number: '06 / 06',
+ badge: 'WBS & SCHEDULE CONTROL',
+ title: 'Interactive WBS Console, Gantt Timeline & Variance Governance',
+ subtitle: 'Granular Operational Oversight From Award Intake to Final Close-Out',
+ platform: 'PFM Console',
+ image: '/assets/marketing/6.jpeg',
+ coreProposition: 'Give programme managers and M&E specialists an interactive Work Breakdown Structure console, chronological Gantt, and variance detection.',
+ metrics: [
+ { label: 'WBS Precision', value: 'Live Gantt', detail: '55-Day Span Chronology' },
+ { label: 'Cost Oversight', value: 'Variance Alerts', detail: 'Realized Actuals vs Budget' },
+ { label: 'Scope Control', value: 'Locked Gates', detail: 'Statutory Clearance Enforced' },
+ { label: 'M&E Tracking', value: 'KPI Matrices', detail: 'Site Visits & Change Control' },
+ ],
+ keyHighlights: [
+ {
+ number: '01',
+ title: 'Chronological Gantt & Milestone Mapping',
+ description: 'Visualize verified milestones, pending reviews, contractual deliverables, and work activities along an interactive timeline.',
+ },
+ {
+ number: '02',
+ title: 'Realized Actuals & Cost Audits',
+ description: 'Automatically compare work breakdown task costs against allocated project budgets to expose cost overruns and schedule slippage.',
+ },
+ {
+ number: '03',
+ title: 'Integrated Change & Site Visit Control',
+ description: 'Manage scope locks, evidence queues, beneficiary registries, and formal change requests from a single governance console.',
+ },
+ ],
+ targetMarket: ['Programme Directors', 'M&E Specialists', 'Grant Operations Managers', 'Risk & Compliance Auditors'],
+ },
+];
+
+export const SCREENSHOTS: ScreenshotItem[] = [
+ {
+ id: 'console-primary',
+ title: 'PFM Console — Executive Dashboard',
+ subtitle: 'Fiduciary Portfolio Command & Statutory Gate Overview',
+ platform: 'PFM Console',
+ category: 'Dashboard',
+ image: '/assets/screenshots/console.png',
+ description: 'Executive birds-eye view of portfolio commitments (R21.0M), active awards, disbursement progress, sector allocations, and statutory compliance status.',
+ hotspots: [
+ { x: 22, y: 18, title: 'Portfolio Capital Ticker', description: 'Real-time roll-up of total commitments and released tranches across all programmes.' },
+ { x: 50, y: 35, title: 'Compliance Radar', description: 'Visual breakdown of projects satisfying statutory conditions precedent vs at-risk.' },
+ { x: 80, y: 22, title: 'Quick Action Center', description: 'One-click award registration, disbursement approvals, and compliance export.' },
+ ],
+ tags: ['Executive', 'Fiduciary', 'Capital Allocation', 'Real-time'],
+ },
+ {
+ id: 'partner-primary',
+ title: 'PFM Partner — Grantee Workspace',
+ subtitle: 'Active Grants, Milestone Fulfilment & Evidence Hub',
+ platform: 'PFM Partner',
+ category: 'Dashboard',
+ image: '/assets/screenshots/partner.png',
+ description: 'The recipient portal where implementing partners review contract scopes, upload required milestone proofs, and track disbursement releases.',
+ hotspots: [
+ { x: 30, y: 25, title: 'Binding Contract Cards', description: 'Overview of sanctioned awards, active project phases, and contractual covenants.' },
+ { x: 70, y: 40, title: 'Milestone Fulfilment Bar', description: 'Visual progress bar tracking verified deliverables against statutory disbursement gates.' },
+ { x: 88, y: 15, title: 'Direct Comms Inbox', description: 'Direct messaging channel with the assigned Programme Officer.' },
+ ],
+ tags: ['Grantee', 'Partner', 'Evidence Upload', 'Milestones'],
+ },
+ {
+ id: 'screen-1',
+ title: 'Console: Portfolio Telemetry & Sector Breakdown',
+ subtitle: 'Capital distribution by Agriculture, Mining, ICT, and Energy',
+ platform: 'PFM Console',
+ category: 'Dashboard',
+ image: '/assets/screenshots/1.png',
+ description: 'Dynamic portfolio analytics slicing sanctioned capital across industrial sectors and monitoring regional development impacts.',
+ tags: ['Analytics', 'Sectors', 'Reporting'],
+ },
+ {
+ id: 'screen-2',
+ title: 'Console: WBS & Project Directory',
+ subtitle: 'Multi-level project hierarchy with variance detection',
+ platform: 'PFM Console',
+ category: 'WBS & Gantt',
+ image: '/assets/screenshots/2.png',
+ description: 'Interactive directory of all funded projects, work packages, task budgets, and real-time variance calculations against contractual baselines.',
+ tags: ['WBS', 'Projects', 'Variance Detection'],
+ },
+ {
+ id: 'screen-3',
+ title: 'Console: Chronological Gantt Timeline',
+ subtitle: '55-Day span milestone chronology and critical paths',
+ platform: 'PFM Console',
+ category: 'WBS & Gantt',
+ image: '/assets/screenshots/3.png',
+ description: 'Interactive timeline modal mapping activity dependencies, milestone due dates, and automated overdue warning flags.',
+ tags: ['Gantt', 'Timelines', 'SLA Monitoring'],
+ },
+ {
+ id: 'screen-4',
+ title: 'Console: Fiduciary Governance & Gate Checks',
+ subtitle: 'Automated conditions precedent verification engine',
+ platform: 'PFM Console',
+ category: 'Governance & Gate',
+ image: '/assets/screenshots/4.png',
+ description: 'Enforces Business Rule BR-003: prevents any payment or disbursement release unless mandatory KYC, tax clearances, and milestone proofs are locked.',
+ tags: ['Governance', 'BR-003', 'Disbursement Gate'],
+ },
+ {
+ id: 'screen-6',
+ title: 'Partner: Project Delivery & Milestones',
+ subtitle: 'Transparent deliverable tracking for field teams',
+ platform: 'PFM Partner',
+ category: 'Evidence & Proof',
+ image: '/assets/screenshots/6.png',
+ description: 'Fieldwork teams manage deliverables, view assigned officer comments, and track the exact verification status of submitted documents.',
+ tags: ['Fieldwork', 'Verification', 'Milestones'],
+ },
+ {
+ id: 'screen-7',
+ title: 'Partner: Milestone Evidence Upload Queue',
+ subtitle: 'Granular file attachment directly to contractual items',
+ platform: 'PFM Partner',
+ category: 'Evidence & Proof',
+ image: '/assets/screenshots/7.png',
+ description: 'Implementing teams attach invoices, geotagged photos, and technical reports with instant preview and upload validation.',
+ tags: ['Evidence Queue', 'S3 Upload', 'Validation'],
+ },
+ {
+ id: 'screen-8',
+ title: 'Partner: Evidence Submission Modal',
+ subtitle: 'Pre-signed S3 storage upload with metadata tagging',
+ platform: 'PFM Partner',
+ category: 'Evidence & Proof',
+ image: '/assets/screenshots/8.png',
+ description: 'Upload modal with progress indicators, file size checks, and automated checksum generation for tamper-evident storage.',
+ tags: ['Upload Modal', 'Security', 'File Integrity'],
+ },
+ {
+ id: 'screen-9',
+ title: 'Partner: In-App Direct Communications',
+ subtitle: 'Instant messaging between Partner and Programme Officer',
+ platform: 'PFM Partner',
+ category: 'Communications',
+ image: '/assets/screenshots/9.png',
+ description: 'Eliminates lost emails and unrecorded WhatsApp conversations. All milestone clarifications and feedback are logged in an immutable thread.',
+ tags: ['Direct Comms', 'Audit Trail', 'Messaging'],
+ },
+ {
+ id: 'screen-10',
+ title: 'Partner: Statutory Onboarding & SSO Login',
+ subtitle: 'Instant mobilization via single sign-on invitation',
+ platform: 'PFM Partner',
+ category: 'Onboarding',
+ image: '/assets/screenshots/10.png',
+ description: 'Secure, seamless invitation acceptance. Grantees sign in with institutional SSO, accept terms, and configure their bank accounts.',
+ tags: ['SSO', 'KYC', 'Rapid Mobilization'],
+ },
+];
+
+export const SIMULATION_STEPS = [
+ {
+ id: 1,
+ step: 'Step 01',
+ actor: 'PFM Console (Funder)',
+ title: 'Sanctioned Award Intake',
+ summary: 'Funding award letter captured. Contract v1 initialized automatically (BR-001 & BR-002).',
+ details: 'Award of R1,000,000 registered with external committee reference. Initial conditions precedent generated.',
+ systemAction: 'Contract generated in DRAFT -> Counter-signed -> Tranche 1 pre-conditions locked.',
+ badgeColor: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30',
+ },
+ {
+ id: 2,
+ step: 'Step 02',
+ actor: 'PFM Partner (Grantee)',
+ title: 'SSO Onboarding & Banking KYC',
+ summary: 'Partner receives statutory invitation, authenticates via Duende SSO, and validates bank details.',
+ details: 'Bank confirmation letter and tax compliance certificate submitted. BR-005 single source of truth established.',
+ systemAction: 'Hashed recipient credentials locked into encrypted tenant boundary.',
+ badgeColor: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30',
+ },
+ {
+ id: 3,
+ step: 'Step 03',
+ actor: 'PFM Partner (Grantee)',
+ title: 'Milestone Execution & Proof Upload',
+ summary: 'Field team completes Activity 1.1 and uploads geotagged site photos & contractor invoices.',
+ details: 'Files uploaded directly to Garage S3 via pre-signed HTTPS URLs. Metadata & SHA-256 signatures generated.',
+ systemAction: 'Evidence record linked to Milestone #M01 in UNDER_REVIEW status.',
+ badgeColor: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30',
+ },
+ {
+ id: 4,
+ step: 'Step 04',
+ actor: 'PFM Console (Funder)',
+ title: 'Evidence Review & Gate Clearance',
+ summary: 'Programme Officer inspects proofs, verifies M&E indicators, and certifies condition precedent.',
+ details: 'Milestone marked VERIFIED (100%). System checks all gate conditions for Tranche 1 release.',
+ systemAction: 'Quartz.NET job triggers automated statutory audit log & notification dispatch.',
+ badgeColor: 'bg-purple-500/20 text-purple-300 border-purple-500/30',
+ },
+ {
+ id: 5,
+ step: 'Step 05',
+ actor: 'Unified System',
+ title: 'Fiduciary Tranche Disbursement Release',
+ summary: 'BR-003 Gate cleared. R350,000 initial drawdown released with zero uncontrolled exposure.',
+ details: 'Capital utilization telemetry updated across both Console and Partner dashboards in real time.',
+ systemAction: 'Disbursement instruction approved; partner notified in-app; M&E beneficiary count updated.',
+ badgeColor: 'bg-amber-500/20 text-amber-300 border-amber-500/30',
+ },
+];
+
+export const COMPARISON_FEATURES = [
+ {
+ feature: 'Primary Target User',
+ console: 'Institutional Funders, CFOs, Programme Managers, M&E Specialists',
+ partner: 'Field Coordinators, Grantee CEOs, Non-Profit Finance Leads, Contractors',
+ },
+ {
+ feature: 'Core Fiduciary Goal',
+ console: 'Capital control, risk mitigation, gate enforcement, portfolio roll-up',
+ partner: 'Activity execution, milestone evidence uploads, tranche visibility',
+ },
+ {
+ feature: 'Project Tracking View',
+ console: 'Interactive WBS, multi-project Gantt chronology, variance audits',
+ partner: 'Focused milestone deliverables list, task statuses, due dates',
+ },
+ {
+ feature: 'Financial Controls',
+ console: 'Budget allocation, covenant conditions precedent, tranche approvals',
+ partner: 'Drawdown requests, payment transparency, expenditure reconciliation',
+ },
+ {
+ feature: 'Evidence Management',
+ console: 'Multi-stakeholder verification, review notes, statutory audits',
+ partner: 'Drag-and-drop file upload to Garage S3, geotagging, progress notes',
+ },
+ {
+ feature: 'Communications Channel',
+ console: 'Official directives, formal compliance notices, query resolutions',
+ partner: 'Direct in-app messaging with assigned Programme Officer',
+ },
+ {
+ feature: 'Identity & Access',
+ console: 'Duende STS backoffice roles, multi-tenant portfolio administration',
+ partner: 'Statutory onboarding invitation token, one-click SSO login',
+ },
+];
+
+export const ARCHITECTURE_HIGHLIGHTS = [
+ {
+ title: '.NET 10 & Clean Architecture',
+ subtitle: 'Domain-Driven Design (DDD)',
+ description: 'Clear separation of Domain, Infrastructure, Application (CQRS via Mediator), and Presentation slices. Zero leaky abstractions.',
+ icon: 'Layers',
+ color: 'from-blue-500/20 to-indigo-500/20 border-blue-500/30',
+ },
+ {
+ title: 'React 19 & Vite 6/8 Frontend',
+ subtitle: 'Modern TypeScript Web Apps',
+ description: 'ConsoleUI and PartnerUI built on React 19, Tailwind CSS v4, Motion animations, and TanStack React Query for zero-stale reads.',
+ icon: 'Atom',
+ color: 'from-cyan-500/20 to-teal-500/20 border-cyan-500/30',
+ },
+ {
+ title: 'Distributed Background Host',
+ subtitle: 'Quartz.NET & PostFundManagement.Jobs',
+ description: 'Dedicated background daemon executing milestone sweeps, overdue alerts, risk score recalculations, and SMTP email notifications.',
+ icon: 'Cpu',
+ color: 'from-amber-500/20 to-orange-500/20 border-amber-500/30',
+ },
+ {
+ title: 'Garage S3 Object Storage',
+ subtitle: 'Tamper-Evident Evidence Vault',
+ description: 'Pre-signed secure upload URLs, SHA checksum verification, and accelerated CDN delivery for millions of statutory proof documents.',
+ icon: 'HardDrive',
+ color: 'from-emerald-500/20 to-teal-500/20 border-emerald-500/30',
+ },
+ {
+ title: 'Duende IdentityServer SSO',
+ subtitle: 'Institutional Security & RBAC',
+ description: 'OAuth 2.0 / OIDC PKCE flow with Skoruba administration, encrypted multi-tenant claims, and hashed ID persistence.',
+ icon: 'ShieldCheck',
+ color: 'from-purple-500/20 to-pink-500/20 border-purple-500/30',
+ },
+ {
+ title: 'PostgreSQL 14+ & HybridCache',
+ subtitle: 'Segregated Relational Data',
+ description: 'Segregated transactional (pfm) and scheduler (pfm-scheduler) databases paired with Redis output caching for sub-millisecond reads.',
+ icon: 'Database',
+ color: 'from-sky-500/20 to-blue-500/20 border-sky-500/30',
+ },
+];
+
diff --git a/PostFundManagement.ShowcaseUI/src/index.css b/PostFundManagement.ShowcaseUI/src/index.css
new file mode 100644
index 0000000..2e0ecbc
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/index.css
@@ -0,0 +1,116 @@
+@import "tailwindcss";
+
+@theme {
+ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+:root {
+ color-scheme: dark;
+}
+
+@layer base {
+ html {
+ scroll-behavior: smooth;
+ background-color: #020617;
+ color: #f8fafc;
+ font-family: var(--font-sans);
+ }
+
+ body {
+ background-color: #020617;
+ color: #f8fafc;
+ overflow-x: hidden;
+ }
+
+ code, pre, .font-mono {
+ font-family: var(--font-mono);
+ }
+}
+
+/* Custom modern scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: #020617;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #1e293b;
+ border-radius: 9999px;
+ border: 2px solid #020617;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #334155;
+}
+
+/* Glassmorphism utilities */
+.glass-panel {
+ background: rgba(15, 23, 42, 0.7);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.glass-panel-elevated {
+ background: rgba(30, 41, 59, 0.65);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
+}
+
+.glass-card-hover {
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glass-card-hover:hover {
+ transform: translateY(-3px);
+ border-color: rgba(56, 189, 248, 0.35);
+ box-shadow: 0 12px 30px -10px rgba(14, 165, 233, 0.25);
+}
+
+/* Ambient glow effects */
+.radial-glow-cyan {
+ background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(2, 6, 23, 0) 70%);
+}
+
+.radial-glow-indigo {
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(2, 6, 23, 0) 70%);
+}
+
+.radial-glow-emerald {
+ background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(2, 6, 23, 0) 70%);
+}
+
+/* Animated gradient text */
+.text-gradient-cyan {
+ background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 50%, #10b981 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.text-gradient-funder {
+ background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #c084fc 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.text-gradient-partner {
+ background: linear-gradient(135deg, #34d399 0%, #2dd4bf 50%, #38bdf8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+/* Subtle dot grid pattern */
+.bg-grid-pattern {
+ background-size: 32px 32px;
+ background-image:
+ linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+}
+
diff --git a/PostFundManagement.ShowcaseUI/src/main.tsx b/PostFundManagement.ShowcaseUI/src/main.tsx
new file mode 100644
index 0000000..0c657b5
--- /dev/null
+++ b/PostFundManagement.ShowcaseUI/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ {showGlow && (
+
+ )}
+
+
+
+ {variant === 'full' && (
+
+
+ )}
+
+
+ Post Fund Management
+
+
+ PFM Suite
+
+
+
+ Performance, Governance & Impact Platform
+
+