From 9af45f55325a83eda84fde68378d64089518c7d5 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 30 Sep 2025 05:04:04 +0000
Subject: [PATCH] Present report information in a slide-show format for easy
 viewing

Adds a new slide-show component to the report page, replacing the previous download-only format. Includes new icons for navigation and initializes state management for the slides.

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/pages/Report.tsx | 377 +++++++++++++++++++++++++++++++++---
 1 file changed, 353 insertions(+), 24 deletions(-)

diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx
index 8f2d3d0..9c81d8b 100644
--- a/client/src/pages/Report.tsx
+++ b/client/src/pages/Report.tsx
@@ -1,21 +1,313 @@
 import { useRoute, Link } from "wouter";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, Download, FileText, Presentation } from "lucide-react";
+import { ArrowLeft, 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 = [
+  {
+    title: "Chayan Asli",
+    subtitle: "Technology Entrepreneur | Hedge Fund Manager | AI Pioneer",
+    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/1683962801457332227/TZD2wovr_400x400.jpg" alt="Chayan Asli" className="w-full h-full object-cover" />
+        </div>
+        <h1 className="text-5xl font-bold text-white">Chayan Asli</h1>
+        <p className="text-2xl text-blue-100">Technology Entrepreneur | Hedge Fund Manager | AI Pioneer</p>
+        <p className="text-xl text-blue-200">Founder & CEO, Vestun</p>
+      </div>
+    ),
+    background: "bg-gradient-to-br from-blue-600 to-blue-800"
+  },
+  {
+    title: "Executive Summary",
+    subtitle: "Professional Overview",
+    content: (
+      <div className="space-y-6">
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Executive Summary</h2>
+        <div className="space-y-4 text-lg text-gray-700">
+          <p className="leading-relaxed">
+            Swiss-born technology entrepreneur and hedge fund manager who has established himself as a significant figure in the intersection of artificial intelligence, financial technology, and venture capital.
+          </p>
+          <div className="grid grid-cols-2 gap-6 mt-8">
+            <div className="bg-blue-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-blue-900 mb-2">Company</h3>
+              <p className="text-gray-700">Founder & CEO of Vestun</p>
+            </div>
+            <div className="bg-blue-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-blue-900 mb-2">Location</h3>
+              <p className="text-gray-700">Zurich, Switzerland</p>
+            </div>
+            <div className="bg-blue-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-blue-900 mb-2">Focus Areas</h3>
+              <p className="text-gray-700">AI, FinTech, Blockchain</p>
+            </div>
+            <div className="bg-blue-50 p-6 rounded-lg">
+              <h3 className="font-bold text-xl text-blue-900 mb-2">Since</h3>
+              <p className="text-gray-700">Crypto investor since 2016</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    background: "bg-white"
+  },
+  {
+    title: "Vestun Overview",
+    subtitle: "Technology & Investment Group",
+    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>
+          </div>
+          <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>
+          </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>
+          </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>
+          </div>
+        </div>
+      </div>
+    ),
+    background: "bg-gray-50"
+  },
+  {
+    title: "Hedge Fund Strategy",
+    subtitle: "Quantamental AI Approach",
+    content: (
+      <div className="space-y-6">
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Hedge Fund Strategy</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>
+        </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>
+            </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>
+            </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>
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    background: "bg-white"
+  },
+  {
+    title: "Investment Philosophy",
+    subtitle: "Contrarian & Technology-Focused",
+    content: (
+      <div className="space-y-6">
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Investment Philosophy</h2>
+        <div className="grid grid-cols-2 gap-8">
+          <div>
+            <h3 className="text-2xl font-bold text-blue-600 mb-4">Core Thesis</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>
+              </li>
+              <li className="flex items-start">
+                <span className="text-blue-600 mr-3">•</span>
+                <span>Technology-first focus</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-blue-600 mr-3">•</span>
+                <span>Long-term vision</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-blue-600 mr-3">•</span>
+                <span>Market skepticism</span>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="text-2xl font-bold text-purple-600 mb-4">Investment Areas</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>
+              <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>
+              <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    background: "bg-gray-50"
+  },
+  {
+    title: "Key Achievements",
+    subtitle: "Track Record & Success",
+    content: (
+      <div className="space-y-6">
+        <h2 className="text-4xl font-bold text-gray-900 mb-8">Key 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>
+          <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>
+          </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>
+          <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>
+          </div>
+        </div>
+      </div>
+    ),
+    background: "bg-white"
+  }
+];
 
 export default function Report() {
   const [, params] = useRoute("/media/:slug/report");
+  const [currentSlide, setCurrentSlide] = useState(0);
   
-  const handleDownloadPPT = () => {
-    const link = document.createElement('a');
-    link.href = '/attached_assets/chayan asli slides_1759208079159.pptx';
-    link.download = 'chayan_asli_slides.pptx';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  const nextSlide = () => {
+    if (currentSlide < slides.length - 1) {
+      setCurrentSlide((prev) => prev + 1);
+    }
   };
+  
+  const prevSlide = () => {
+    if (currentSlide > 0) {
+      setCurrentSlide((prev) => prev - 1);
+    }
+  };
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowRight') {
+        nextSlide();
+      } else if (e.key === 'ArrowLeft') {
+        prevSlide();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentSlide]);
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">
@@ -64,25 +356,62 @@ export default function Report() {
           </TabsContent>
 
           <TabsContent value="slides">
-            <Card className="bg-white">
-              <CardContent className="p-12 text-center">
-                <Presentation className="h-24 w-24 mx-auto mb-6 text-gray-400" />
-                <h2 className="text-2xl font-bold text-gray-900 mb-4">
-                  Presentation Slides
-                </h2>
-                <p className="text-gray-600 mb-8 max-w-md mx-auto">
-                  Download the comprehensive PowerPoint presentation with detailed slides about Chayan Asli's profile, achievements, and professional journey.
-                </p>
-                <Button 
-                  onClick={handleDownloadPPT} 
+            <div className="relative">
+              {/* Slide Display */}
+              <Card className={`${slides[currentSlide].background} min-h-[600px] shadow-2xl`}>
+                <CardContent className="p-16">
+                  {slides[currentSlide].content}
+                </CardContent>
+              </Card>
+
+              {/* Navigation Controls */}
+              <div className="flex items-center justify-between mt-6">
+                <Button
+                  onClick={prevSlide}
+                  variant="outline"
                   size="lg"
-                  data-testid="button-download-ppt"
+                  disabled={currentSlide === 0}
+                  data-testid="button-prev-slide"
                 >
-                  <Download className="h-5 w-5 mr-2" />
-                  Download PowerPoint Slides
+                  <ChevronLeft className="h-5 w-5 mr-2" />
+                  Previous
                 </Button>
-              </CardContent>
-            </Card>
+
+                <div className="flex items-center space-x-3">
+                  <span className="text-lg font-medium text-gray-700">
+                    {currentSlide + 1} / {slides.length}
+                  </span>
+                  <div className="flex space-x-1">
+                    {slides.map((_, index) => (
+                      <button
+                        key={index}
+                        onClick={() => setCurrentSlide(index)}
+                        className={`w-2 h-2 rounded-full transition-colors ${
+                          index === currentSlide ? 'bg-blue-600' : 'bg-gray-300'
+                        }`}
+                        data-testid={`dot-slide-${index}`}
+                      />
+                    ))}
+                  </div>
+                </div>
+
+                <Button
+                  onClick={nextSlide}
+                  variant="outline"
+                  size="lg"
+                  disabled={currentSlide === slides.length - 1}
+                  data-testid="button-next-slide"
+                >
+                  Next
+                  <ChevronRight className="h-5 w-5 ml-2" />
+                </Button>
+              </div>
+
+              {/* Keyboard Navigation Hint */}
+              <p className="text-center text-sm text-gray-500 mt-4">
+                Use arrow keys ← → to navigate slides
+              </p>
+            </div>
           </TabsContent>
         </Tabs>
       </main>