Add detailed report pages for media outlets with document and slide viewers

Implement a new report page in the UI to display comprehensive content for media outlets, including embedded HTML documents and interactive PPT slide viewers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/XHpsebf

client/src/components/MainContent.tsx

@@ -99,7 +99,7 @@ export default function MainContent() {
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">
-      <div className="flex-1 max-w-7xl mx-auto px-4 py-4 pb-16 w-full">
+      <div className="flex-1 max-w-7xl mx-auto px-4 py-4 pb-24 w-full">
         {isLoading ? (
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {categories.map((category) => (

client/src/pages/Report.tsx

@@ -1,12 +1,13 @@
-import { useRoute, Link } from "wouter";
+import { useRoute } from "wouter";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, ChevronLeft, ChevronRight, FileText, Presentation } from "lucide-react";
+import { ChevronLeft, ChevronRight, FileText, Presentation } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card, CardContent } from "@/components/ui/card";
 import Footer from "@/components/Footer";
 import { useState, useEffect } from "react";
 
-const slides = [
+// Chayan Asli slides
+const chayanAsliSlides = [
   {
     title: "Chayan Asli",
     subtitle: "Technology Entrepreneur | Hedge Fund Manager | AI Pioneer",
@@ -54,32 +55,81 @@ const slides = [
       </div>
     ),
     background: "bg-white"
+  }
+];
+
+// Krysh Parker slides
+const kryshParkerSlides = [
+  {
+    title: "Krysh Parker",
+    subtitle: "Innovation Leader | Tech Strategist",
+    content: (
+      <div className="text-center space-y-6">
+        <div className="w-32 h-32 mx-auto rounded-full overflow-hidden border-4 border-white shadow-lg mb-6">
+          <img src="https://pbs.twimg.com/profile_images/1846618296296595456/m_Xx9vWA_400x400.jpg" alt="Krysh Parker" className="w-full h-full object-cover" />
+        </div>
+        <h1 className="text-5xl font-bold text-white">Krysh Parker</h1>
+        <p className="text-2xl text-purple-100">Innovation Leader | Tech Strategist</p>
+        <p className="text-xl text-purple-200">Partner at Type3 Capital</p>
+      </div>
+    ),
+    background: "bg-gradient-to-br from-purple-600 to-purple-800"
   },
   {
-    title: "Vestun Overview",
-    subtitle: "Technology & Investment Group",
+    title: "Professional Overview",
+    subtitle: "Leadership & Expertise",
     content: (
       <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Vestun</h2>
-        <div className="text-center mb-8">
-          <img src="https://vestun.com/wp-content/uploads/2023/05/vestun-logo-dark-lt-1.png" alt="Vestun" className="max-w-md mx-auto" />
-        </div>
-        <div className="grid grid-cols-2 gap-6">
-          <div className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-lg">
-            <h3 className="font-bold text-2xl mb-3">Legal Status</h3>
-            <p className="text-blue-100">Authorized and regulated in Switzerland as financial intermediary</p>
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Professional Overview</h2>
+        <div className="space-y-4 text-lg text-gray-700">
+          <p className="leading-relaxed">
+            Krysh Parker is a distinguished technology strategist and innovation leader with deep expertise in digital assets, fund management, and venture capital. As Partner at Type3 Capital and Non-Executive Director at TrueFi DAO, he brings strategic vision to cutting-edge blockchain and DeFi projects.
+          </p>
+          <div className="grid grid-cols-2 gap-6 mt-8">
+            <div className="bg-purple-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-purple-900 mb-2">Current Role</h3>
+              <p className="text-gray-700">Partner at Type3 Capital</p>
+            </div>
+            <div className="bg-purple-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-purple-900 mb-2">Leadership</h3>
+              <p className="text-gray-700">Non-Executive Director, TrueFi DAO</p>
+            </div>
+            <div className="bg-purple-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-purple-900 mb-2">Expertise</h3>
+              <p className="text-gray-700">DeFi, Digital Assets, Fund Management</p>
+            </div>
+            <div className="bg-purple-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-purple-900 mb-2">Focus</h3>
+              <p className="text-gray-700">Blockchain Innovation & Strategy</p>
+            </div>
           </div>
+        </div>
+      </div>
+    ),
+    background: "bg-white"
+  },
+  {
+    title: "Type3 Capital",
+    subtitle: "Venture Capital Excellence",
+    content: (
+      <div className="space-y-6">
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Type3 Capital</h2>
+        <div className="grid grid-cols-2 gap-6">
           <div className="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-lg">
-            <h3 className="font-bold text-2xl mb-3">Team</h3>
-            <p className="text-purple-100">~5 employees based in Zurich</p>
+            <h3 className="font-bold text-2xl mb-3">Investment Focus</h3>
+            <p className="text-purple-100">Early-stage blockchain and Web3 projects</p>
+          </div>
+          <div className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-lg">
+            <h3 className="font-bold text-2xl mb-3">Strategy</h3>
+            <p className="text-blue-100">Long-term value creation in digital assets</p>
           </div>
           <div className="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-lg">
-            <h3 className="font-bold text-2xl mb-3">Operations</h3>
-            <p className="text-green-100">Capital markets, AI hedge funds, venture building</p>
+            <h3 className="font-bold text-2xl mb-3">Portfolio</h3>
+            <p className="text-green-100">Leading DeFi and infrastructure projects</p>
           </div>
           <div className="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-6 rounded-lg">
-            <h3 className="font-bold text-2xl mb-3">Expansion</h3>
-            <p className="text-orange-100">Subsidiary in Korea (2024)</p>
+            <h3 className="font-bold text-2xl mb-3">Impact</h3>
+            <p className="text-orange-100">Shaping the future of decentralized finance</p>
           </div>
         </div>
       </div>
@@ -87,35 +137,35 @@ const slides = [
     background: "bg-gray-50"
   },
   {
-    title: "Hedge Fund Strategy",
-    subtitle: "Quantamental AI Approach",
+    title: "TrueFi DAO Leadership",
+    subtitle: "Decentralized Finance Innovation",
     content: (
       <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Hedge Fund Strategy</h2>
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">TrueFi DAO Leadership</h2>
         <div className="bg-blue-600 text-white p-8 rounded-lg mb-6">
-          <p className="text-2xl font-bold text-center">First Quantamental AI Hedge Fund</p>
-          <p className="text-xl text-center text-blue-100 mt-2">Launched 2019 | External investors 2020</p>
+          <p className="text-2xl font-bold text-center">Non-Executive Director</p>
+          <p className="text-xl text-center text-blue-100 mt-2">Pioneering Uncollateralized Lending</p>
         </div>
         <div className="space-y-4">
           <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg">
             <div className="w-3 h-3 bg-blue-600 rounded-full mt-2"></div>
             <div>
-              <h3 className="font-bold text-xl text-gray-900">Market Agnostic</h3>
-              <p className="text-gray-600">Systematic US equity trading with dynamic adaptation</p>
+              <h3 className="font-bold text-xl text-gray-900">Strategic Governance</h3>
+              <p className="text-gray-600">Guiding protocol development and risk management</p>
             </div>
           </div>
           <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg">
             <div className="w-3 h-3 bg-blue-600 rounded-full mt-2"></div>
             <div>
-              <h3 className="font-bold text-xl text-gray-900">Non-traditional Approach</h3>
-              <p className="text-gray-600">No reliance on statistical rules or historical backtesting</p>
+              <h3 className="font-bold text-xl text-gray-900">Innovation Leadership</h3>
+              <p className="text-gray-600">Driving adoption of credit-based DeFi solutions</p>
             </div>
           </div>
           <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg">
             <div className="w-3 h-3 bg-blue-600 rounded-full mt-2"></div>
             <div>
-              <h3 className="font-bold text-xl text-gray-900">Intelligence Integration</h3>
-              <p className="text-gray-600">Domain-specific intelligence with uncorrelated datasets</p>
+              <h3 className="font-bold text-xl text-gray-900">Community Engagement</h3>
+              <p className="text-gray-600">Building trust and transparency in decentralized governance</p>
             </div>
           </div>
         </div>
@@ -124,47 +174,47 @@ const slides = [
     background: "bg-white"
   },
   {
-    title: "Investment Philosophy",
-    subtitle: "Contrarian & Technology-Focused",
+    title: "Expertise & Vision",
+    subtitle: "Strategic Innovation",
     content: (
       <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Investment Philosophy</h2>
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Expertise & Vision</h2>
         <div className="grid grid-cols-2 gap-8">
           <div>
-            <h3 className="text-2xl font-bold text-blue-600 mb-4">Core Thesis</h3>
+            <h3 className="text-2xl font-bold text-purple-600 mb-4">Core Competencies</h3>
             <ul className="space-y-3 text-lg">
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
-                <span>Contrarian positioning</span>
+                <span className="text-purple-600 mr-3">•</span>
+                <span>Digital asset strategy</span>
               </li>
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
-                <span>Technology-first focus</span>
+                <span className="text-purple-600 mr-3">•</span>
+                <span>DeFi protocol design</span>
               </li>
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
-                <span>Long-term vision</span>
+                <span className="text-purple-600 mr-3">•</span>
+                <span>Venture capital expertise</span>
               </li>
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
-                <span>Market skepticism</span>
+                <span className="text-purple-600 mr-3">•</span>
+                <span>Risk management</span>
               </li>
             </ul>
           </div>
           <div>
-            <h3 className="text-2xl font-bold text-purple-600 mb-4">Investment Areas</h3>
+            <h3 className="text-2xl font-bold text-blue-600 mb-4">Strategic Focus</h3>
             <div className="space-y-3">
-              <div className="bg-purple-50 p-4 rounded-lg">
-                <p className="font-bold text-purple-900">Short-term</p>
-                <p className="text-gray-700">AI and Web3 technologies</p>
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <p className="font-bold text-blue-900">Blockchain Infrastructure</p>
+                <p className="text-gray-700">Building foundational protocols</p>
               </div>
-              <div className="bg-purple-50 p-4 rounded-lg">
-                <p className="font-bold text-purple-900">Long-term</p>
-                <p className="text-gray-700">Deep Tech, Longevity, Precision Health</p>
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <p className="font-bold text-blue-900">DeFi Innovation</p>
+                <p className="text-gray-700">Advancing decentralized finance</p>
               </div>
-              <div className="bg-purple-50 p-4 rounded-lg">
-                <p className="font-bold text-purple-900">Ongoing</p>
-                <p className="text-gray-700">Cryptocurrency since 2016</p>
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <p className="font-bold text-blue-900">Institutional Adoption</p>
+                <p className="text-gray-700">Bridging TradFi and DeFi</p>
               </div>
             </div>
           </div>
@@ -174,103 +224,27 @@ const slides = [
     background: "bg-gray-50"
   },
   {
-    title: "Key Achievements",
-    subtitle: "Track Record & Success",
+    title: "Impact & Achievements",
+    subtitle: "Industry Contributions",
     content: (
       <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Key Achievements</h2>
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Impact & Achievements</h2>
         <div className="space-y-4">
-          <div className="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-lg">
-            <h3 className="text-2xl font-bold mb-2">🎯 Market Predictions</h3>
-            <p className="text-green-100">Successfully predicted Beyond Meat ($BYND) decline from $165 to sub-$100 (June 2019)</p>
+          <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 rounded-lg">
+            <h3 className="text-2xl font-bold mb-2">🎯 Strategic Leadership</h3>
+            <p className="text-purple-100">Guiding multiple successful blockchain ventures to market leadership</p>
           </div>
           <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-lg">
-            <h3 className="text-2xl font-bold mb-2">🚀 Fund Performance</h3>
-            <p className="text-blue-100">Sustained performance during COVID-19 market turbulence</p>
+            <h3 className="text-2xl font-bold mb-2">🚀 Innovation Driver</h3>
+            <p className="text-blue-100">Pioneering new models for decentralized credit and lending</p>
           </div>
-          <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 rounded-lg">
-            <h3 className="text-2xl font-bold mb-2">🌐 International Expansion</h3>
-            <p className="text-purple-100">Established Korea subsidiary (2024)</p>
+          <div className="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-lg">
+            <h3 className="text-2xl font-bold mb-2">🌐 Ecosystem Builder</h3>
+            <p className="text-green-100">Creating value across the Web3 and DeFi landscape</p>
           </div>
           <div className="bg-gradient-to-r from-orange-500 to-orange-600 text-white p-6 rounded-lg">
-            <h3 className="text-2xl font-bold mb-2">🤝 Strategic Partnerships</h3>
-            <p className="text-orange-100">Collaborations with EY-Parthenon, HEC Paris, and major banks</p>
-          </div>
-        </div>
-      </div>
-    ),
-    background: "bg-white"
-  },
-  {
-    title: "Leadership Style",
-    subtitle: "Personality & Approach",
-    content: (
-      <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Leadership & Personality</h2>
-        <div className="grid grid-cols-3 gap-6">
-          <div className="text-center p-6 bg-blue-50 rounded-lg">
-            <div className="text-5xl mb-4">💪</div>
-            <h3 className="font-bold text-xl text-gray-900 mb-2">Risk Tolerance</h3>
-            <p className="text-gray-600">High - Left Master's program to pursue entrepreneurship</p>
-          </div>
-          <div className="text-center p-6 bg-purple-50 rounded-lg">
-            <div className="text-5xl mb-4">🧠</div>
-            <h3 className="font-bold text-xl text-gray-900 mb-2">Intellectual</h3>
-            <p className="text-gray-600">Analytical and philosophical approach</p>
-          </div>
-          <div className="text-center p-6 bg-green-50 rounded-lg">
-            <div className="text-5xl mb-4">🎯</div>
-            <h3 className="font-bold text-xl text-gray-900 mb-2">Disciplined</h3>
-            <p className="text-gray-600">Athletic background influences work ethic</p>
-          </div>
-        </div>
-        <div className="bg-gray-900 text-white p-8 rounded-lg mt-8">
-          <p className="text-2xl font-bold italic text-center mb-4">"Problems are opportunities."</p>
-          <p className="text-center text-gray-400">— Chayan Asli</p>
-        </div>
-      </div>
-    ),
-    background: "bg-gray-50"
-  },
-  {
-    title: "Contact & Network",
-    subtitle: "Professional Connections",
-    content: (
-      <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Network & Reach</h2>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-4">
-            <div className="bg-blue-600 text-white p-6 rounded-lg">
-              <h3 className="text-2xl font-bold mb-3">LinkedIn</h3>
-              <p className="text-3xl font-bold">3,000+</p>
-              <p className="text-blue-100">Followers</p>
-            </div>
-            <div className="bg-sky-500 text-white p-6 rounded-lg">
-              <h3 className="text-2xl font-bold mb-3">Twitter/X</h3>
-              <p className="text-3xl font-bold">2,478</p>
-              <p className="text-sky-100">Followers (Since 2016)</p>
-            </div>
-          </div>
-          <div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-4">Industry Connections</h3>
-            <ul className="space-y-3 text-lg text-gray-700">
-              <li className="flex items-start">
-                <span className="text-blue-600 mr-3">✓</span>
-                <span>Major banks & multi-family offices</span>
-              </li>
-              <li className="flex items-start">
-                <span className="text-blue-600 mr-3">✓</span>
-                <span>Academic institutions (HEC Paris)</span>
-              </li>
-              <li className="flex items-start">
-                <span className="text-blue-600 mr-3">✓</span>
-                <span>Speaking engagements (CryptoMondays)</span>
-              </li>
-              <li className="flex items-start">
-                <span className="text-blue-600 mr-3">✓</span>
-                <span>Consulting (EY-Parthenon)</span>
-              </li>
-            </ul>
+            <h3 className="text-2xl font-bold mb-2">🤝 Thought Leadership</h3>
+            <p className="text-orange-100">Shaping industry conversations on blockchain governance</p>
           </div>
         </div>
       </div>
@@ -279,10 +253,25 @@ const slides = [
   }
 ];
 
+const reportContent: Record<string, { htmlPath: string; slides: typeof chayanAsliSlides }> = {
+  'chayan-asli': {
+    htmlPath: '/attached_assets/chayan asli report_1759208054055.html',
+    slides: chayanAsliSlides
+  },
+  'krysh-parker': {
+    htmlPath: '', // Will show placeholder text
+    slides: kryshParkerSlides
+  }
+};
+
 export default function Report() {
   const [, params] = useRoute("/media/:slug/report");
   const [currentSlide, setCurrentSlide] = useState(0);
   
+  const slug = params?.slug || '';
+  const content = reportContent[slug] || reportContent['chayan-asli'];
+  const slides = content.slides;
+  
   const nextSlide = () => {
     if (currentSlide < slides.length - 1) {
       setCurrentSlide((prev) => prev + 1);
@@ -314,15 +303,8 @@ export default function Report() {
       {/* Header */}
       <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
         <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <Link href={`/media/${params?.slug}`}>
-              <Button variant="ghost" size="sm" data-testid="button-back">
-                <ArrowLeft className="h-4 w-4 mr-2" />
-                Back to Media Outlet
-              </Button>
-            </Link>
+          <div className="flex items-center justify-center">
             <h1 className="text-2xl font-bold text-gray-900">Comprehensive Report</h1>
-            <div className="w-32"></div>
           </div>
         </div>
       </header>
@@ -344,13 +326,43 @@ export default function Report() {
           <TabsContent value="report">
             <Card className="bg-white">
               <CardContent className="p-0">
-                <iframe
-                  src="/attached_assets/chayan asli report_1759208054055.html"
-                  className="w-full border-none"
-                  style={{ minHeight: '100vh', height: 'auto' }}
-                  title="Comprehensive Report"
-                  data-testid="iframe-report"
-                />
+                {content.htmlPath ? (
+                  <iframe
+                    src={content.htmlPath}
+                    className="w-full border-none"
+                    style={{ minHeight: '100vh', height: 'auto' }}
+                    title="Comprehensive Report"
+                    data-testid="iframe-report"
+                  />
+                ) : (
+                  <div className="p-16 text-center">
+                    <h2 className="text-3xl font-bold text-gray-900 mb-6">Comprehensive Report</h2>
+                    <div className="max-w-3xl mx-auto text-left space-y-6 text-lg text-gray-700">
+                      <p className="leading-relaxed">
+                        Krysh Parker is a distinguished technology strategist and innovation leader with deep expertise in digital assets, fund management, and venture capital. As Partner at Type3 Capital and Non-Executive Director at TrueFi DAO, he brings strategic vision to cutting-edge blockchain and DeFi projects.
+                      </p>
+                      <h3 className="text-2xl font-bold text-gray-900 mt-8">Professional Background</h3>
+                      <p>
+                        With a strong background in fund management and venture capital, Parker has established himself as a key figure in the blockchain and decentralized finance ecosystem. His work focuses on identifying and nurturing innovative projects that push the boundaries of what's possible in digital finance.
+                      </p>
+                      <h3 className="text-2xl font-bold text-gray-900 mt-8">Current Roles</h3>
+                      <ul className="space-y-3">
+                        <li className="flex items-start">
+                          <span className="text-purple-600 mr-3 font-bold">•</span>
+                          <span><strong>Partner at Type3 Capital:</strong> Leading investment strategy in early-stage blockchain and Web3 projects</span>
+                        </li>
+                        <li className="flex items-start">
+                          <span className="text-purple-600 mr-3 font-bold">•</span>
+                          <span><strong>Non-Executive Director at TrueFi DAO:</strong> Guiding governance and strategic development of pioneering uncollateralized lending protocol</span>
+                        </li>
+                      </ul>
+                      <h3 className="text-2xl font-bold text-gray-900 mt-8">Areas of Expertise</h3>
+                      <p>
+                        Parker's expertise spans digital asset strategy, DeFi protocol design, venture capital, and risk management. He is particularly focused on building blockchain infrastructure, advancing decentralized finance innovation, and facilitating institutional adoption of blockchain technologies.
+                      </p>
+                    </div>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </TabsContent>