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",
+    title: "Professional Overview",
-    subtitle: "Technology & Investment Group",
+    subtitle: "Leadership & Expertise",
     content: (
       <div className="space-y-6">
-        <h2 className="text-4xl font-bold text-gray-900 mb-8">Vestun</h2>
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Professional Overview</h2>
-        <div className="text-center mb-8">
+        <div className="space-y-4 text-lg text-gray-700">
-          <img src="https://vestun.com/wp-content/uploads/2023/05/vestun-logo-dark-lt-1.png" alt="Vestun" className="max-w-md mx-auto" />
+          <p className="leading-relaxed">
-        </div>
+            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.
-        <div className="grid grid-cols-2 gap-6">
+          </p>
-          <div className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-lg">
+          <div className="grid grid-cols-2 gap-6 mt-8">
-            <h3 className="font-bold text-2xl mb-3">Legal Status</h3>
+            <div className="bg-purple-50 p-6 rounded-lg">
-            <p className="text-blue-100">Authorized and regulated in Switzerland as financial intermediary</p>
+              <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>
+            <h3 className="font-bold text-2xl mb-3">Investment Focus</h3>
-            <p className="text-purple-100">~5 employees based in Zurich</p>
+            <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>
+            <h3 className="font-bold text-2xl mb-3">Portfolio</h3>
-            <p className="text-green-100">Capital markets, AI hedge funds, venture building</p>
+            <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>
+            <h3 className="font-bold text-2xl mb-3">Impact</h3>
-            <p className="text-orange-100">Subsidiary in Korea (2024)</p>
+            <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",
+    title: "TrueFi DAO Leadership",
-    subtitle: "Quantamental AI Approach",
+    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-2xl font-bold text-center">Non-Executive Director</p>
-          <p className="text-xl text-center text-blue-100 mt-2">Launched 2019 | External investors 2020</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>
+              <h3 className="font-bold text-xl text-gray-900">Strategic Governance</h3>
-              <p className="text-gray-600">Systematic US equity trading with dynamic adaptation</p>
+              <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>
+              <h3 className="font-bold text-xl text-gray-900">Innovation Leadership</h3>
-              <p className="text-gray-600">No reliance on statistical rules or historical backtesting</p>
+              <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>
+              <h3 className="font-bold text-xl text-gray-900">Community Engagement</h3>
-              <p className="text-gray-600">Domain-specific intelligence with uncorrelated datasets</p>
+              <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",
+    title: "Expertise & Vision",
-    subtitle: "Contrarian & Technology-Focused",
+    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 className="text-purple-600 mr-3">•</span>
-                <span>Contrarian positioning</span>
+                <span>Digital asset strategy</span>
               </li>
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
+                <span className="text-purple-600 mr-3">•</span>
-                <span>Technology-first focus</span>
+                <span>DeFi protocol design</span>
               </li>
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
+                <span className="text-purple-600 mr-3">•</span>
-                <span>Long-term vision</span>
+                <span>Venture capital expertise</span>
               </li>
               <li className="flex items-start">
-                <span className="text-blue-600 mr-3">•</span>
+                <span className="text-purple-600 mr-3">•</span>
-                <span>Market skepticism</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">
+              <div className="bg-blue-50 p-4 rounded-lg">
-                <p className="font-bold text-purple-900">Short-term</p>
+                <p className="font-bold text-blue-900">Blockchain Infrastructure</p>
-                <p className="text-gray-700">AI and Web3 technologies</p>
+                <p className="text-gray-700">Building foundational protocols</p>
               </div>
-              <div className="bg-purple-50 p-4 rounded-lg">
+              <div className="bg-blue-50 p-4 rounded-lg">
-                <p className="font-bold text-purple-900">Long-term</p>
+                <p className="font-bold text-blue-900">DeFi Innovation</p>
-                <p className="text-gray-700">Deep Tech, Longevity, Precision Health</p>
+                <p className="text-gray-700">Advancing decentralized finance</p>
               </div>
-              <div className="bg-purple-50 p-4 rounded-lg">
+              <div className="bg-blue-50 p-4 rounded-lg">
-                <p className="font-bold text-purple-900">Ongoing</p>
+                <p className="font-bold text-blue-900">Institutional Adoption</p>
-                <p className="text-gray-700">Cryptocurrency since 2016</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",
+    title: "Impact & Achievements",
-    subtitle: "Track Record & Success",
+    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">
+          <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">🎯 Market Predictions</h3>
+            <h3 className="text-2xl font-bold mb-2">🎯 Strategic Leadership</h3>
-            <p className="text-green-100">Successfully predicted Beyond Meat ($BYND) decline from $165 to sub-$100 (June 2019)</p>
+            <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>
+            <h3 className="text-2xl font-bold mb-2">🚀 Innovation Driver</h3>
-            <p className="text-blue-100">Sustained performance during COVID-19 market turbulence</p>
+            <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">
+          <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">🌐 International Expansion</h3>
+            <h3 className="text-2xl font-bold mb-2">🌐 Ecosystem Builder</h3>
-            <p className="text-purple-100">Established Korea subsidiary (2024)</p>
+            <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>
+            <h3 className="text-2xl font-bold mb-2">🤝 Thought Leadership</h3>
-            <p className="text-orange-100">Collaborations with EY-Parthenon, HEC Paris, and major banks</p>
+            <p className="text-orange-100">Shaping industry conversations on blockchain governance</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>
           </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">
+          <div className="flex items-center justify-center">
-            <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>
             <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
+                {content.htmlPath ? (
-                  src="/attached_assets/chayan asli report_1759208054055.html"
+                  <iframe
-                  className="w-full border-none"
+                    src={content.htmlPath}
-                  style={{ minHeight: '100vh', height: 'auto' }}
+                    className="w-full border-none"
-                  title="Comprehensive Report"
+                    style={{ minHeight: '100vh', height: 'auto' }}
-                  data-testid="iframe-report"
+                    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>