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
This commit is contained in:
kimjaehyeon0101
@ -1,22 +1,314 @@
|
|||||||
import { useRoute, Link } from "wouter";
|
import { useRoute, Link } from "wouter";
|
||||||
import { Button } from "@/components/ui/button";
|
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
import Footer from "@/components/Footer";
|
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() {
|
export default function Report() {
|
||||||
const [, params] = useRoute("/media/:slug/report");
|
const [, params] = useRoute("/media/:slug/report");
|
||||||
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
|
|
||||||
const handleDownloadPPT = () => {
|
const nextSlide = () => {
|
||||||
const link = document.createElement('a');
|
if (currentSlide < slides.length - 1) {
|
||||||
link.href = '/attached_assets/chayan asli slides_1759208079159.pptx';
|
setCurrentSlide((prev) => prev + 1);
|
||||||
link.download = 'chayan_asli_slides.pptx';
|
}
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<div className="flex flex-col min-h-screen bg-gray-50">
|
<div className="flex flex-col min-h-screen bg-gray-50">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@ -64,25 +356,62 @@ export default function Report() {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="slides">
|
<TabsContent value="slides">
|
||||||
<Card className="bg-white">
|
<div className="relative">
|
||||||
<CardContent className="p-12 text-center">
|
{/* Slide Display */}
|
||||||
<Presentation className="h-24 w-24 mx-auto mb-6 text-gray-400" />
|
<Card className={`${slides[currentSlide].background} min-h-[600px] shadow-2xl`}>
|
||||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
<CardContent className="p-16">
|
||||||
Presentation Slides
|
{slides[currentSlide].content}
|
||||||
</h2>
|
</CardContent>
|
||||||
<p className="text-gray-600 mb-8 max-w-md mx-auto">
|
</Card>
|
||||||
Download the comprehensive PowerPoint presentation with detailed slides about Chayan Asli's profile, achievements, and professional journey.
|
|
||||||
</p>
|
{/* Navigation Controls */}
|
||||||
|
<div className="flex items-center justify-between mt-6">
|
||||||
<Button
|
<Button
|
||||||
onClick={handleDownloadPPT}
|
onClick={prevSlide}
|
||||||
|
variant="outline"
|
||||||
size="lg"
|
size="lg"
|
||||||
data-testid="button-download-ppt"
|
disabled={currentSlide === 0}
|
||||||
|
data-testid="button-prev-slide"
|
||||||
>
|
>
|
||||||
<Download className="h-5 w-5 mr-2" />
|
<ChevronLeft className="h-5 w-5 mr-2" />
|
||||||
Download PowerPoint Slides
|
Previous
|
||||||
</Button>
|
</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>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user