74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
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;
|