Added ShowcaseUI app

2026-10-29 17:40:48 +02:00
parent 0fe6f40b2a
commit 2bd0b12335
50 changed files with 4182 additions and 0 deletions
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { HeroSection } from './components/hero/HeroSection';
+import { ConsoleShowcase } from './components/console/ConsoleShowcase';
+import { PartnerShowcase } from './components/partner/PartnerShowcase';
+import { LifecycleSimulator } from './components/simulator/LifecycleSimulator';
+import { CampaignDeckGallery } from './components/gallery/CampaignDeckGallery';
+import { DualExperienceComparison } from './components/comparison/DualExperienceComparison';
+import { ArchitectureAssurance } from './components/architecture/ArchitectureAssurance';
+import { ImpactRoiCalculator } from './components/calculator/ImpactRoiCalculator';
+import { Footer } from './components/layout/Footer';
+import { ScreenshotViewerModal } from './components/modal/ScreenshotViewerModal';
+import { PosterModal } from './components/modal/PosterModal';
+import { ScreenshotItem, PosterItem } from './data/showcaseData';
+
+export function App() {
+  const [selectedScreenshot, setSelectedScreenshot] = useState<ScreenshotItem | null>(null);
+  const [selectedPoster, setSelectedPoster] = useState<PosterItem | null>(null);
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col selection:bg-cyan-500/20 selection:text-cyan-300">
+      {/* Main Content Area */}
+      <main className="flex-1">
+        {/* 1. Hero Section & Interactive Dual-Device Showcase with spacious Brand Header */}
+        <HeroSection
+          onOpenScreenshot={(item) => setSelectedScreenshot(item)}
+        />
+
+        {/* 2. PFM Console Showcase (Executive Funder Backoffice) */}
+        <ConsoleShowcase
+          onOpenScreenshot={(item) => setSelectedScreenshot(item)}
+        />
+
+        {/* 3. PFM Partner Showcase (Grantee Field Delivery & Evidence) */}
+        <PartnerShowcase
+          onOpenScreenshot={(item) => setSelectedScreenshot(item)}
+        />
+
+        {/* 4. Interactive 5-Phase Fiduciary Lifecycle Simulator */}
+        <LifecycleSimulator />
+
+        {/* 5. Strategic 6-Poster Campaign Deck Gallery */}
+        <CampaignDeckGallery
+          onOpenPosterModal={(poster) => setSelectedPoster(poster)}
+        />
+
+        {/* 6. Dual Experience Comparison Matrix */}
+        <DualExperienceComparison />
+
+        {/* 7. Enterprise Architecture & 10 Cardinal Business Rules */}
+        <ArchitectureAssurance />
+
+        {/* 8. Interactive Governance & ROI Calculator */}
+        <ImpactRoiCalculator />
+      </main>
+
+      {/* Footer */}
+      <Footer />
+
+      {/* Interactive Lightboxes & Modals */}
+      <ScreenshotViewerModal
+        item={selectedScreenshot}
+        onClose={() => setSelectedScreenshot(null)}
+      />
+
+      <PosterModal
+        poster={selectedPoster}
+        onClose={() => setSelectedPoster(null)}
+      />
+    </div>
+  );
+}
+
+export default App;