File: /var/www/indoadvisory_new/webapp/src/index.tsx
import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { renderer } from './renderer'
import admin from './routes/admin'
import articles from './routes/articles'
import inquiries from './routes/inquiries'
import settings from './routes/settings'
import team from './routes/team'
import clients from './routes/clients'
import { initializeDatabase, formatDate, type Article, type TeamMember, type Client } from './utils/database'
import { t, type Language } from './utils/i18n'
type Bindings = {
DB: D1Database;
}
const app = new Hono<{ Bindings: Bindings }>()
// Enable CORS for API routes
app.use('/api/*', cors())
// Initialize database on startup
app.use('*', async (c, next) => {
if (c.env.DB) {
await initializeDatabase(c.env.DB)
}
return next()
})
// Mount admin routes
app.route('/admin', admin)
app.route('/admin/articles', articles)
app.route('/admin/inquiries', inquiries)
app.route('/admin/settings', settings)
app.route('/admin/team', team)
app.route('/admin/clients', clients)
// Use renderer for HTML pages
app.use(renderer)
app.get('/', async (c) => {
// Get current language
const lang = c.req.query('lang') === 'en' ? 'en' : 'id'
const otherLang = lang === 'en' ? 'id' : 'en'
const langSwitchUrl = `/?lang=${otherLang}`
// Fetch active clients for showcase
let clients: Client[] = []
let portfolioEnabled = true
let statisticsEnabled = true
try {
const clientsResult = await c.env.DB.prepare(
'SELECT * FROM clients WHERE is_active = 1 ORDER BY sort_order ASC, created_at DESC'
).all() as { results: Client[] }
clients = clientsResult.results
// Fetch portfolio section settings
const portfolioSetting = await c.env.DB.prepare(
'SELECT setting_value FROM site_settings WHERE setting_key = "portfolio_section_enabled"'
).first() as { setting_value: string } | null
const statisticsSetting = await c.env.DB.prepare(
'SELECT setting_value FROM site_settings WHERE setting_key = "portfolio_statistics_enabled"'
).first() as { setting_value: string } | null
portfolioEnabled = portfolioSetting?.setting_value === '1'
statisticsEnabled = statisticsSetting?.setting_value === '1'
} catch (error) {
console.error('Error fetching data:', error)
}
return c.render(
<div class="min-h-screen">
{/* Navigation Header */}
<nav class="fixed w-full z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<h1 class="text-2xl font-bold text-primary-700">
<i class="fas fa-chart-line mr-2"></i>
IndoAdvisory
</h1>
</div>
</div>
{/* Desktop Menu */}
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href={`#beranda${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">{lang === 'en' ? 'Home' : 'Beranda'}</a>
<a href={`#tentang${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">{lang === 'en' ? 'About Us' : 'Tentang Kami'}</a>
<a href={`#layanan${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">{lang === 'en' ? 'Services' : 'Layanan'}</a>
<a href={`#portfolio${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Portfolio</a>
<a href={`/artikel${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">{lang === 'en' ? 'Articles' : 'Artikel'}</a>
<a href={`#tim${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">{lang === 'en' ? 'Team' : 'Tim'}</a>
<a href={`#kontak${lang === 'en' ? '?lang=en' : ''}`} class="bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-700 transition-colors">{lang === 'en' ? 'Contact' : 'Kontak'}</a>
<a href={langSwitchUrl} class="bg-gray-200 text-gray-700 px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-300 transition-colors border-l border-gray-300 ml-2">
<i class="fas fa-globe mr-1"></i>
{lang === 'en' ? 'ID' : 'EN'}
</a>
</div>
</div>
{/* Mobile menu button */}
<div class="md:hidden">
<button onclick="toggleMenu()" class="text-secondary-700 hover:text-primary-600 p-2">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
{/* Mobile Menu */}
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href={`#beranda${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">{lang === 'en' ? 'Home' : 'Beranda'}</a>
<a href={`#tentang${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">{lang === 'en' ? 'About Us' : 'Tentang Kami'}</a>
<a href={`#layanan${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">{lang === 'en' ? 'Services' : 'Layanan'}</a>
<a href={`#portfolio${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
<a href={`/artikel${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">{lang === 'en' ? 'Articles' : 'Artikel'}</a>
<a href={`#tim${lang === 'en' ? '?lang=en' : ''}`} class="text-secondary-700 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">{lang === 'en' ? 'Team' : 'Tim'}</a>
<a href={`#kontak${lang === 'en' ? '?lang=en' : ''}`} class="bg-primary-600 text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-primary-700">{lang === 'en' ? 'Contact' : 'Kontak'}</a>
<div class="border-t border-gray-200 mt-2 pt-2">
<a href={langSwitchUrl} class="bg-gray-100 text-gray-700 block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200">
<i class="fas fa-globe mr-2"></i>
{lang === 'en' ? 'Switch to Indonesian' : 'Switch to English'}
</a>
</div>
</div>
</div>
</nav>
{/* Hero Section */}
<section id="beranda" class="pt-16 gradient-bg text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-5xl font-bold mb-6 leading-tight">
{lang === 'en' ? (
<>Trusted <span class="text-yellow-300">Private Equity</span> Advisory in Indonesia</>
) : (
<>Penasihat <span class="text-yellow-300">Private Equity</span> Terpercaya di Indonesia</>
)}
</h2>
<p class="text-xl mb-8 text-gray-100 leading-relaxed">
{lang === 'en'
? 'We help companies achieve sustainable growth through strategic investments, accurate company valuations, and comprehensive IPO preparation.'
: 'Kami membantu perusahaan mencapai pertumbuhan berkelanjutan melalui strategi investasi yang tepat, valuasi perusahaan yang akurat, dan persiapan IPO yang komprehensif.'
}
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href={`#kontak${lang === 'en' ? '?lang=en' : ''}`} class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-lg font-semibold hover:bg-yellow-300 transition-colors text-center">
{lang === 'en' ? 'Free Consultation' : 'Konsultasi Gratis'}
</a>
<a href={`#layanan${lang === 'en' ? '?lang=en' : ''}`} class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-gray-900 transition-colors text-center">
{lang === 'en' ? 'View Services' : 'Lihat Layanan'}
</a>
</div>
</div>
<div class="hidden lg:block">
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8">
<div class="grid grid-cols-2 gap-6 text-center">
<div>
<div class="text-3xl font-bold text-yellow-300">150+</div>
<div class="text-sm text-gray-200">Klien Terlayani</div>
</div>
<div>
<div class="text-3xl font-bold text-yellow-300">Rp 2.5T</div>
<div class="text-sm text-gray-200">Total Valuasi</div>
</div>
<div>
<div class="text-3xl font-bold text-yellow-300">25</div>
<div class="text-sm text-gray-200">IPO Sukses</div>
</div>
<div>
<div class="text-3xl font-bold text-yellow-300">98%</div>
<div class="text-sm text-gray-200">Tingkat Kepuasan</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* About Section */}
<section id="tentang" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-secondary-800 mb-4">
{lang === 'en' ? 'About IndoAdvisory' : 'Tentang IndoAdvisory'}
</h2>
<p class="text-xl text-secondary-600 max-w-3xl mx-auto">
{lang === 'en'
? 'As a leading private equity consulting firm in Indonesia, we have helped hundreds of companies in their business growth and transformation journey for over 15 years.'
: 'Sebagai firma konsultan private equity terkemuka di Indonesia, kami telah membantu ratusan perusahaan dalam perjalanan pertumbuhan dan transformasi bisnis mereka selama lebih dari 15 tahun.'
}
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-2xl font-bold text-secondary-800 mb-6">Misi Kami</h3>
<p class="text-secondary-600 mb-6 leading-relaxed">
Menjadi mitra strategis terpercaya dalam mengoptimalkan nilai perusahaan melalui solusi keuangan
yang inovatif dan berkelanjutan. Kami berkomitmen memberikan layanan berkualitas tinggi dengan
pendekatan yang personal dan solusi yang disesuaikan dengan kebutuhan spesifik setiap klien.
</p>
<div class="space-y-4">
<div class="flex items-center">
<div class="bg-primary-100 p-2 rounded-full mr-4">
<i class="fas fa-check text-primary-600"></i>
</div>
<span class="text-secondary-700">Tim ahli berpengalaman internasional</span>
</div>
<div class="flex items-center">
<div class="bg-primary-100 p-2 rounded-full mr-4">
<i class="fas fa-check text-primary-600"></i>
</div>
<span class="text-secondary-700">Metodologi valuasi yang terbukti akurat</span>
</div>
<div class="flex items-center">
<div class="bg-primary-100 p-2 rounded-full mr-4">
<i class="fas fa-check text-primary-600"></i>
</div>
<span class="text-secondary-700">Jaringan investor strategis yang luas</span>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-xl shadow-lg card-hover">
<div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fas fa-award text-primary-600 text-2xl"></i>
</div>
<h4 class="text-lg font-semibold text-secondary-800 text-center mb-2">Berpengalaman</h4>
<p class="text-secondary-600 text-sm text-center">15+ tahun melayani klien corporate dan UKM</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg card-hover">
<div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fas fa-shield-alt text-primary-600 text-2xl"></i>
</div>
<h4 class="text-lg font-semibold text-secondary-800 text-center mb-2">Terpercaya</h4>
<p class="text-secondary-600 text-sm text-center">Sertifikasi resmi dan reputasi yang terjaga</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg card-hover">
<div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fas fa-lightbulb text-primary-600 text-2xl"></i>
</div>
<h4 class="text-lg font-semibold text-secondary-800 text-center mb-2">Inovatif</h4>
<p class="text-secondary-600 text-sm text-center">Solusi kreatif untuk tantangan bisnis modern</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg card-hover">
<div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fas fa-handshake text-primary-600 text-2xl"></i>
</div>
<h4 class="text-lg font-semibold text-secondary-800 text-center mb-2">Kolaboratif</h4>
<p class="text-secondary-600 text-sm text-center">Pendekatan partnership jangka panjang</p>
</div>
</div>
</div>
</div>
</section>
{/* Services Section */}
<section id="layanan" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-secondary-800 mb-4">Layanan Kami</h2>
<p class="text-xl text-secondary-600 max-w-3xl mx-auto">
Layanan komprehensif untuk mendukung pertumbuhan dan transformasi bisnis Anda
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-8 rounded-2xl card-hover">
<div class="bg-primary-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-calculator text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-4">Valuasi Perusahaan</h3>
<p class="text-secondary-600 mb-6">
Penilaian yang akurat dan komprehensif untuk mendukung keputusan investasi, akuisisi, atau divestasi.
</p>
<ul class="space-y-2 text-sm text-secondary-600">
<li class="flex items-center">
<i class="fas fa-check text-primary-600 mr-2"></i>
Metode DCF, Market Multiple, Asset-based
</li>
<li class="flex items-center">
<i class="fas fa-check text-primary-600 mr-2"></i>
Analisis industri mendalam
</li>
<li class="flex items-center">
<i class="fas fa-check text-primary-600 mr-2"></i>
Laporan valuasi profesional
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-100 p-8 rounded-2xl card-hover">
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-chart-line text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-4">Persiapan IPO</h3>
<p class="text-secondary-600 mb-6">
Pendampingan lengkap dari tahap persiapan hingga pelaksanaan penawaran umum perdana.
</p>
<ul class="space-y-2 text-sm text-secondary-600">
<li class="flex items-center">
<i class="fas fa-check text-green-600 mr-2"></i>
Corporate restructuring
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-600 mr-2"></i>
Regulatory compliance
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-600 mr-2"></i>
Investor relations strategy
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-purple-50 to-violet-100 p-8 rounded-2xl card-hover">
<div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-handshake text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-4">M&A Advisory</h3>
<p class="text-secondary-600 mb-6">
Konsultasi strategis untuk merger, akuisisi, dan divestasi yang mengoptimalkan nilai transaksi.
</p>
<ul class="space-y-2 text-sm text-secondary-600">
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
Target identification & screening
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
Due diligence coordination
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
Deal structuring & negotiation
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-orange-50 to-amber-100 p-8 rounded-2xl card-hover">
<div class="bg-orange-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-rocket text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-4">Fundraising</h3>
<p class="text-secondary-600 mb-6">
Strategi penggalangan dana yang efektif untuk mendukung ekspansi dan pertumbuhan bisnis.
</p>
<ul class="space-y-2 text-sm text-secondary-600">
<li class="flex items-center">
<i class="fas fa-check text-orange-600 mr-2"></i>
Investor matching & outreach
</li>
<li class="flex items-center">
<i class="fas fa-check text-orange-600 mr-2"></i>
Pitch deck development
</li>
<li class="flex items-center">
<i class="fas fa-check text-orange-600 mr-2"></i>
Term sheet negotiation
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-red-50 to-pink-100 p-8 rounded-2xl card-hover">
<div class="bg-red-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-cogs text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-4">Restructuring</h3>
<p class="text-secondary-600 mb-6">
Restrukturisasi korporat dan keuangan untuk optimalisasi struktur dan performa perusahaan.
</p>
<ul class="space-y-2 text-sm text-secondary-600">
<li class="flex items-center">
<i class="fas fa-check text-red-600 mr-2"></i>
Financial restructuring
</li>
<li class="flex items-center">
<i class="fas fa-check text-red-600 mr-2"></i>
Operational improvement
</li>
<li class="flex items-center">
<i class="fas fa-check text-red-600 mr-2"></i>
Strategic planning
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-teal-50 to-cyan-100 p-8 rounded-2xl card-hover">
<div class="bg-teal-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-search-dollar text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-4">Due Diligence</h3>
<p class="text-secondary-600 mb-6">
Analisis mendalam untuk mengidentifikasi risiko dan peluang dalam transaksi investasi.
</p>
<ul class="space-y-2 text-sm text-secondary-600">
<li class="flex items-center">
<i class="fas fa-check text-teal-600 mr-2"></i>
Financial due diligence
</li>
<li class="flex items-center">
<i class="fas fa-check text-teal-600 mr-2"></i>
Commercial due diligence
</li>
<li class="flex items-center">
<i class="fas fa-check text-teal-600 mr-2"></i>
Risk assessment
</li>
</ul>
</div>
</div>
</div>
</section>
{/* Portfolio/Case Studies Section */}
{portfolioEnabled && (
<section id="portfolio" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-secondary-800 mb-4">Portfolio & Prestasi</h2>
<p class="text-xl text-secondary-600 max-w-3xl mx-auto">
Rekam jejak kesuksesan dalam membantu klien mencapai tujuan bisnis mereka
</p>
</div>
{/* Client Showcase - McKinsey Style with Auto-Scroll */}
<div class="mb-16">
<div class="text-center mb-12">
<h3 class="text-3xl font-bold mckinsey-heading mb-4">
{lang === 'en' ? 'Our Recent Clients' : 'Klien Terkini'}
</h3>
<p class="text-lg mckinsey-text max-w-3xl mx-auto">
{lang === 'en'
? 'Trusted by leading companies across various industries for their strategic financial advisory needs'
: 'Dipercaya oleh perusahaan-perusahaan terkemuka di berbagai industri untuk kebutuhan konsultasi keuangan strategis mereka'
}
</p>
</div>
{/* Auto-scrolling Client Cards */}
<div class="relative overflow-hidden" id="client-showcase-section">
<div
id="client-carousel"
class="flex space-x-6 transition-transform duration-1000 ease-in-out"
style="transform: translateX(0px)"
>
{clients.map((client, index) => {
const description = lang === 'en' ? client.description_en : client.description_id
const projectTypeMap: Record<string, string> = {
'valuation': lang === 'en' ? 'Valuation' : 'Valuasi',
'ipo': 'IPO',
'ma': 'M&A',
'fundraising': 'Fundraising',
'restructuring': lang === 'en' ? 'Restructuring' : 'Restrukturisasi',
'dd': lang === 'en' ? 'Due Diligence' : 'Due Diligence'
}
const projectTypeLabel = projectTypeMap[client.project_type] || client.project_type
return (
<div class="flex-none w-96 mckinsey-card rounded-xl p-6 bg-white">
<div class="flex items-start justify-between mb-4">
<div class="flex-1">
<div class="flex items-center mb-2">
<div class="w-12 h-12 bg-mckinsey-blue rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-building text-white text-lg"></i>
</div>
<div>
<h4 class="font-bold mckinsey-heading text-lg">{client.company_name}</h4>
<span class="text-sm text-gray-500">{client.industry}</span>
</div>
</div>
</div>
<span class="bg-mckinsey-blue/10 text-mckinsey-blue px-3 py-1 rounded-full text-xs font-medium">
{projectTypeLabel}
</span>
</div>
<p class="mckinsey-text text-sm leading-relaxed mb-4">
{description}
</p>
<div class="flex items-center justify-between">
{client.project_value && (
<span class="font-semibold text-mckinsey-darkblue text-sm">
{client.project_value}
</span>
)}
{client.completion_date && (
<span class="text-xs text-gray-400">
{formatDate(client.completion_date)}
</span>
)}
</div>
</div>
)
})}
{/* Duplicate cards for seamless loop */}
{clients.map((client, index) => {
const description = lang === 'en' ? client.description_en : client.description_id
const projectTypeMap: Record<string, string> = {
'valuation': lang === 'en' ? 'Valuation' : 'Valuasi',
'ipo': 'IPO',
'ma': 'M&A',
'fundraising': 'Fundraising',
'restructuring': lang === 'en' ? 'Restructuring' : 'Restrukturisasi',
'dd': lang === 'en' ? 'Due Diligence' : 'Due Diligence'
}
const projectTypeLabel = projectTypeMap[client.project_type] || client.project_type
return (
<div class="flex-none w-96 mckinsey-card rounded-xl p-6 bg-white">
<div class="flex items-start justify-between mb-4">
<div class="flex-1">
<div class="flex items-center mb-2">
<div class="w-12 h-12 bg-mckinsey-blue rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-building text-white text-lg"></i>
</div>
<div>
<h4 class="font-bold mckinsey-heading text-lg">{client.company_name}</h4>
<span class="text-sm text-gray-500">{client.industry}</span>
</div>
</div>
</div>
<span class="bg-mckinsey-blue/10 text-mckinsey-blue px-3 py-1 rounded-full text-xs font-medium">
{projectTypeLabel}
</span>
</div>
<p class="mckinsey-text text-sm leading-relaxed mb-4">
{description}
</p>
<div class="flex items-center justify-between">
{client.project_value && (
<span class="font-semibold text-mckinsey-darkblue text-sm">
{client.project_value}
</span>
)}
{client.completion_date && (
<span class="text-xs text-gray-400">
{formatDate(client.completion_date)}
</span>
)}
</div>
</div>
)
})}
</div>
</div>
{/* Auto-scroll indicator */}
<div class="flex justify-center mt-8">
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
<span class="text-gray-600 text-sm flex items-center">
<i class="fas fa-mouse mr-2 text-mckinsey-blue"></i>
{lang === 'en'
? 'Hover to pause • Auto-scrolling every 3 seconds'
: 'Arahkan kursor untuk jeda • Auto-scroll setiap 3 detik'
}
</span>
</div>
</div>
</div>
{statisticsEnabled && (
<div class="grid grid-cols-1 lg:grid-cols-1 gap-12 mb-16">
<div class="bg-white p-8 rounded-2xl shadow-lg mckinsey-card">
<h3 class="text-2xl font-bold text-secondary-800 mb-8 flex items-center">
<i class="fas fa-chart-bar text-mckinsey-blue mr-3"></i>
Statistik Kinerja
</h3>
{/* Animated Stats Cards */}
<div class="grid grid-cols-2 gap-6 mb-8">
<div class="text-center p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl border border-blue-200">
<div class="relative">
<div class="w-16 h-16 mx-auto mb-3 bg-mckinsey-blue rounded-full flex items-center justify-center">
<i class="fas fa-briefcase text-white text-lg"></i>
</div>
<div class="text-3xl font-bold text-mckinsey-blue mb-2 animate-counter" data-target="150">150+</div>
<div class="text-sm font-medium text-gray-700">Proyek Selesai</div>
<div class="mt-2 bg-mckinsey-blue/20 rounded-full h-2">
<div class="bg-mckinsey-blue h-2 rounded-full" style="width: 95%"></div>
</div>
</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200">
<div class="relative">
<div class="w-16 h-16 mx-auto mb-3 bg-green-600 rounded-full flex items-center justify-center">
<i class="fas fa-coins text-white text-lg"></i>
</div>
<div class="text-3xl font-bold text-green-600 mb-2">Rp 2.5T</div>
<div class="text-sm font-medium text-gray-700">Total Valuasi</div>
<div class="mt-2 bg-green-600/20 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 88%"></div>
</div>
</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl border border-purple-200">
<div class="relative">
<div class="w-16 h-16 mx-auto mb-3 bg-purple-600 rounded-full flex items-center justify-center">
<i class="fas fa-chart-line text-white text-lg"></i>
</div>
<div class="text-3xl font-bold text-purple-600 mb-2">25</div>
<div class="text-sm font-medium text-gray-700">IPO Sukses</div>
<div class="mt-2 bg-purple-600/20 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 92%"></div>
</div>
</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl border border-orange-200">
<div class="relative">
<div class="w-16 h-16 mx-auto mb-3 bg-orange-600 rounded-full flex items-center justify-center">
<i class="fas fa-heart text-white text-lg"></i>
</div>
<div class="text-3xl font-bold text-orange-600 mb-2">98%</div>
<div class="text-sm font-medium text-gray-700">Client Satisfaction</div>
<div class="mt-2 bg-orange-600/20 rounded-full h-2">
<div class="bg-orange-600 h-2 rounded-full" style="width: 98%"></div>
</div>
</div>
</div>
</div>
{/* Industry Sectors with Visual Representation */}
<div class="bg-gray-50 rounded-xl p-6">
<h4 class="font-bold text-secondary-800 mb-6 flex items-center">
<i class="fas fa-industry text-mckinsey-blue mr-2"></i>
Distribusi Sektor Industri
</h4>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="bg-mckinsey-blue text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
<i class="fas fa-laptop-code mr-1"></i>
Teknologi
</span>
<span class="text-sm text-gray-600">28%</span>
</div>
<div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
<div class="bg-mckinsey-blue h-2 rounded-full" style="width: 28%"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
<i class="fas fa-cogs mr-1"></i>
Manufaktur
</span>
<span class="text-sm text-gray-600">22%</span>
</div>
<div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 22%"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
<i class="fas fa-utensils mr-1"></i>
F&B
</span>
<span class="text-sm text-gray-600">18%</span>
</div>
<div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 18%"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="bg-orange-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
<i class="fas fa-store mr-1"></i>
Ritel
</span>
<span class="text-sm text-gray-600">15%</span>
</div>
<div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
<div class="bg-orange-600 h-2 rounded-full" style="width: 15%"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="bg-teal-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
<i class="fas fa-heartbeat mr-1"></i>
Healthcare
</span>
<span class="text-sm text-gray-600">10%</span>
</div>
<div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
<div class="bg-teal-600 h-2 rounded-full" style="width: 10%"></div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-medium mr-3">
<i class="fas fa-building mr-1"></i>
Property
</span>
<span class="text-sm text-gray-600">7%</span>
</div>
<div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
<div class="bg-red-600 h-2 rounded-full" style="width: 7%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</section>
)}
{/* Team Section */}
<section id="tim" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-secondary-800 mb-4">Tim Ahli Kami</h2>
<p class="text-xl text-secondary-600 max-w-3xl mx-auto">
Tim profesional berpengalaman dengan keahlian di berbagai bidang keuangan dan investasi
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-2xl text-center card-hover">
<div class="w-32 h-32 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full mx-auto mb-6 flex items-center justify-center">
<i class="fas fa-user text-white text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-2">Dr. Budi Santoso</h3>
<p class="text-primary-600 font-medium mb-4">Managing Partner</p>
<p class="text-secondary-600 text-sm mb-4">
20+ tahun pengalaman di investment banking dan private equity. Alumni Wharton School dan mantan VP di Goldman Sachs.
</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-primary-600 hover:text-primary-700">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-primary-600 hover:text-primary-700">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-2xl text-center card-hover">
<div class="w-32 h-32 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-6 flex items-center justify-center">
<i class="fas fa-user text-white text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-2">Sarah Wijaya, CFA</h3>
<p class="text-green-600 font-medium mb-4">Senior Director</p>
<p class="text-secondary-600 text-sm mb-4">
Spesialis valuasi dengan pengalaman 15+ tahun. Alumni UI dan bersertifikat CFA dengan track record di berbagai sektor industri.
</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-green-600 hover:text-green-700">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-green-600 hover:text-green-700">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-2xl text-center card-hover">
<div class="w-32 h-32 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-6 flex items-center justify-center">
<i class="fas fa-user text-white text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-secondary-800 mb-2">Ahmad Rahman, MBA</h3>
<p class="text-purple-600 font-medium mb-4">M&A Director</p>
<p class="text-secondary-600 text-sm mb-4">
Ahli M&A dengan pengalaman menangani transaksi senilai $2B+. Alumni INSEAD dan mantan consultant di McKinsey & Company.
</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-purple-600 hover:text-purple-700">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-purple-600 hover:text-purple-700">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
</div>
</div>
</div>
</section>
{/* Contact Section */}
<section id="kontak" class="py-20 bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Hubungi Kami</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Siap membantu pertumbuhan bisnis Anda. Mari diskusikan kebutuhan dan tantangan perusahaan Anda.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div>
<h3 class="text-2xl font-bold mb-6">Informasi Kontak</h3>
<div class="space-y-6">
<div class="flex items-center">
<div class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-map-marker-alt text-white"></i>
</div>
<div>
<h4 class="font-semibold">Alamat</h4>
<p class="text-gray-300">Menara Sudirman Lt. 25<br />Jl. Jend. Sudirman Kav. 60<br />Jakarta Selatan 12190</p>
</div>
</div>
<div class="flex items-center">
<div class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-phone text-white"></i>
</div>
<div>
<h4 class="font-semibold">Telepon</h4>
<p class="text-gray-300">+62 21 5794 3210</p>
</div>
</div>
<div class="flex items-center">
<div class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-envelope text-white"></i>
</div>
<div>
<h4 class="font-semibold">Email</h4>
<p class="text-gray-300">info@indoprivate.co.id</p>
</div>
</div>
<div class="flex items-center">
<div class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-clock text-white"></i>
</div>
<div>
<h4 class="font-semibold">Jam Operasional</h4>
<p class="text-gray-300">Senin - Jumat: 09:00 - 18:00<br />Sabtu: 09:00 - 15:00</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="text-lg font-semibold mb-4">Ikuti Kami</h4>
<div class="flex space-x-4">
<a href="#" class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
<i class="fab fa-linkedin text-white"></i>
</a>
<a href="#" class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
<i class="fab fa-twitter text-white"></i>
</a>
<a href="#" class="bg-primary-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
<i class="fab fa-instagram text-white"></i>
</a>
</div>
</div>
</div>
<div class="bg-gray-800 p-8 rounded-2xl">
<h3 class="text-2xl font-bold mb-6">Kirim Pesan</h3>
<div id="contact-success" class="hidden bg-green-600 text-white p-4 rounded-lg mb-6">
<i class="fas fa-check-circle mr-2"></i>
Terima kasih! Pesan Anda telah terkirim. Kami akan segera menghubungi Anda.
</div>
<form onsubmit="submitContact(event)" class="space-y-6">
<div>
<label class="block text-sm font-medium mb-2">Nama Lengkap</label>
<input
type="text"
name="name"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-white"
placeholder="Masukkan nama lengkap"
/>
</div>
<div>
<label class="block text-sm font-medium mb-2">Email</label>
<input
type="email"
name="email"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-white"
placeholder="nama@perusahaan.com"
/>
</div>
<div>
<label class="block text-sm font-medium mb-2">Perusahaan</label>
<input
type="text"
name="company"
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-white"
placeholder="Nama perusahaan"
/>
</div>
<div>
<label class="block text-sm font-medium mb-2">Layanan yang Diminati</label>
<select
name="service"
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-white"
>
<option value="">Pilih layanan</option>
<option value="valuasi">Valuasi Perusahaan</option>
<option value="ipo">Persiapan IPO</option>
<option value="ma">M&A Advisory</option>
<option value="fundraising">Fundraising</option>
<option value="restructuring">Restructuring</option>
<option value="dd">Due Diligence</option>
<option value="konsultasi">Konsultasi Umum</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-2">Pesan</label>
<textarea
name="message"
rows="4"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-white"
placeholder="Jelaskan kebutuhan atau pertanyaan Anda..."
></textarea>
</div>
<button
type="submit"
class="w-full bg-primary-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-primary-700 transition-colors"
>
Kirim Pesan
</button>
</form>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer class="bg-gray-900 border-t border-gray-800 py-12 text-gray-400">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-2xl font-bold text-white mb-4">
<i class="fas fa-chart-line mr-2 text-primary-600"></i>
IndoAdvisory
</h3>
<p class="text-gray-400 mb-4">
Mitra terpercaya dalam perjalanan pertumbuhan dan transformasi bisnis Anda.
</p>
<p class="text-sm text-gray-500">
© 2024 IndoAdvisory Equity Advisory. Hak cipta dilindungi undang-undang.
</p>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Layanan</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Valuasi Perusahaan</a></li>
<li><a href="#" class="hover:text-white transition-colors">Persiapan IPO</a></li>
<li><a href="#" class="hover:text-white transition-colors">M&A Advisory</a></li>
<li><a href="#" class="hover:text-white transition-colors">Fundraising</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Perusahaan</h4>
<ul class="space-y-2 text-sm">
<li><a href="#tentang" class="hover:text-white transition-colors">Tentang Kami</a></li>
<li><a href="#tim" class="hover:text-white transition-colors">Tim</a></li>
<li><a href="#portfolio" class="hover:text-white transition-colors">Portfolio</a></li>
<li><a href="#kontak" class="hover:text-white transition-colors">Kontak</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
)
})
// API route for contact form submission
app.post('/api/contact', async (c) => {
const { name, email, company, service, message } = await c.req.json()
try {
// Save contact inquiry to database
await c.env.DB.prepare(
'INSERT INTO contact_inquiries (name, email, company, service, message, created_at) VALUES (?, ?, ?, ?, ?, ?)'
).bind(name, email, company || null, service || null, message, new Date().toISOString()).run()
return c.json({
success: true,
message: 'Pesan berhasil terkirim. Tim kami akan menghubungi Anda segera.'
})
} catch (error) {
console.error('Contact form error:', error)
return c.json({
success: false,
message: 'Terjadi kesalahan. Silakan coba lagi.'
}, 500)
}
})
// Articles listing page
app.get('/artikel', async (c) => {
try {
const publishedArticles = await c.env.DB.prepare(
'SELECT * FROM articles WHERE status = "published" ORDER BY published_at DESC LIMIT 20'
).all() as { results: Article[] }
return c.render(
<div class="min-h-screen mckinsey-section pt-16">
{/* Header - McKinsey Style */}
<div class="mckinsey-gradient text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center">
<h1 class="text-5xl font-bold mb-6 mckinsey-heading text-white">
Artikel & Insights
</h1>
<p class="text-xl text-white/90 max-w-3xl mx-auto leading-relaxed">
Dapatkan insights mendalam tentang private equity, valuasi perusahaan, dan strategi investasi dari para ahli IndoAdvisory
</p>
<div class="mt-8 flex justify-center">
<div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
<span class="text-white/90 text-sm">
<i class="fas fa-chart-line mr-2"></i>
Dipercaya oleh 150+ perusahaan terkemuka
</span>
</div>
</div>
</div>
</div>
</div>
{/* Navigation */}
<nav class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center space-x-8 py-4">
<a href="/" class="flex items-center text-mckinsey-blue hover:text-mckinsey-darkblue font-medium">
<i class="fas fa-home mr-2"></i>
Beranda
</a>
<span class="text-gray-300">•</span>
<span class="mckinsey-accent font-semibold">Artikel</span>
</div>
</div>
</nav>
{/* Articles Grid */}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
{publishedArticles.results.length > 0 ? (
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{publishedArticles.results.map(article => (
<article class="mckinsey-card rounded-xl overflow-hidden">
<div class="p-8">
<div class="flex items-center justify-between mb-6">
<span class="bg-mckinsey-blue/10 text-mckinsey-blue px-4 py-2 rounded-full text-sm font-semibold uppercase tracking-wide">
{article.category}
</span>
<time class="text-gray-500 text-sm font-medium">
{formatDate(article.published_at || article.created_at)}
</time>
</div>
<h2 class="text-2xl font-bold mckinsey-heading mb-4 leading-tight">
{article.title}
</h2>
<p class="mckinsey-text mb-6 leading-relaxed">
{article.excerpt}
</p>
<div class="flex items-center justify-between pt-4 border-t border-gray-100">
<a
href={`/artikel/${article.slug}`}
class="mckinsey-btn px-6 py-3 rounded-lg text-sm font-semibold inline-flex items-center"
>
Baca Artikel
<i class="fas fa-arrow-right ml-2"></i>
</a>
<div class="text-sm text-gray-400">
<i class="fas fa-clock mr-1"></i>
5 min read
</div>
</div>
</div>
</article>
))}
</div>
) : (
<div class="text-center py-20">
<div class="bg-mckinsey-blue/10 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-newspaper text-mckinsey-blue text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mckinsey-heading mb-4">Artikel Segera Hadir</h3>
<p class="mckinsey-text text-lg">Tim editorial kami sedang menyiapkan insights terbaru untuk Anda</p>
</div>
)}
</div>
{/* Newsletter Subscription - McKinsey Style */}
<div class="mckinsey-gradient text-white py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-8">
<h2 class="text-4xl font-bold mb-6 text-white">Insights Eksklusif</h2>
<p class="text-xl text-white/90 mb-8 leading-relaxed">
Dapatkan analisis mendalam dan tren terbaru private equity langsung dari para ahli kami
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center max-w-lg mx-auto">
<input
type="email"
placeholder="Masukkan alamat email Anda"
class="flex-1 px-6 py-4 rounded-lg text-gray-900 focus:ring-2 focus:ring-white/50 border-0 font-medium"
/>
<button class="bg-white text-mckinsey-blue px-8 py-4 rounded-lg font-bold hover:bg-gray-100 transition-colors">
<i class="fas fa-envelope mr-2"></i>
Berlangganan
</button>
</div>
<p class="text-white/70 text-sm mt-4">
<i class="fas fa-shield-alt mr-1"></i>
Data Anda aman dan tidak akan dibagikan kepada pihak ketiga
</p>
</div>
</div>
</div>
</div>,
{
title: 'Artikel & Insights - IndoAdvisory'
}
)
} catch (error) {
console.error('Articles page error:', error)
return c.render(<div>Error loading articles</div>)
}
})
// Individual article page
app.get('/artikel/:slug', async (c) => {
try {
const slug = c.req.param('slug')
const article = await c.env.DB.prepare(
'SELECT * FROM articles WHERE slug = ? AND status = "published"'
).bind(slug).first() as Article
if (!article) {
return c.notFound()
}
// Get related articles
const relatedArticles = await c.env.DB.prepare(
'SELECT * FROM articles WHERE category = ? AND slug != ? AND status = "published" ORDER BY published_at DESC LIMIT 3'
).bind(article.category, slug).all() as { results: Article[] }
return c.render(
<div class="min-h-screen bg-white pt-16">
{/* Navigation - McKinsey Style */}
<nav class="bg-white border-b border-gray-200">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center space-x-4 py-6 text-sm">
<a href="/" class="text-mckinsey-blue hover:text-mckinsey-darkblue font-medium">
<i class="fas fa-home mr-2"></i>
Beranda
</a>
<span class="text-gray-300">•</span>
<a href="/artikel" class="text-mckinsey-blue hover:text-mckinsey-darkblue font-medium">Artikel</a>
<span class="text-gray-300">•</span>
<span class="mckinsey-text font-semibold truncate max-w-md">{article.title}</span>
</div>
</div>
</nav>
{/* Article Content - McKinsey Style */}
<article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<header class="mb-12">
<div class="flex items-center justify-between mb-8">
<span class="bg-mckinsey-blue/10 text-mckinsey-blue px-6 py-3 rounded-full text-sm font-bold uppercase tracking-wide">
{article.category}
</span>
<div class="text-right">
<time class="text-gray-500 font-medium">
{formatDate(article.published_at || article.created_at)}
</time>
<div class="text-sm text-gray-400 mt-1">
<i class="fas fa-clock mr-1"></i>
5 min read
</div>
</div>
</div>
<h1 class="text-5xl font-bold mckinsey-heading mb-8 leading-tight">
{article.title}
</h1>
{article.excerpt && (
<div class="bg-mckinsey-lightgray p-8 rounded-xl border-l-4 border-mckinsey-blue">
<p class="text-xl mckinsey-text leading-relaxed font-medium">
{article.excerpt}
</p>
</div>
)}
{/* Article Meta */}
<div class="flex items-center justify-between mt-8 pt-8 border-t border-gray-200">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-mckinsey-blue rounded-full flex items-center justify-center">
<i class="fas fa-user text-white"></i>
</div>
<div>
<div class="font-semibold mckinsey-heading">IndoAdvisory Team</div>
<div class="text-sm text-gray-500">Investment Advisory Experts</div>
</div>
</div>
<div class="flex items-center space-x-4 text-sm text-gray-500">
<div>
<i class="fas fa-eye mr-1"></i>
Professional Insights
</div>
<div>
<i class="fas fa-bookmark mr-1"></i>
Expert Analysis
</div>
</div>
</div>
</header>
<div class="prose prose-xl max-w-none mckinsey-article-content" dangerouslySetInnerHTML={{ __html: article.content }}></div>
{/* Tags - McKinsey Style */}
{article.tags && (
<div class="mt-12 pt-8 border-t border-gray-200">
<h3 class="font-semibold mckinsey-heading mb-4">Topik Terkait:</h3>
<div class="flex flex-wrap gap-3">
{article.tags.split(',').map(tag => (
<span class="bg-mckinsey-blue/10 text-mckinsey-blue px-4 py-2 rounded-full text-sm font-medium hover:bg-mckinsey-blue hover:text-white transition-colors cursor-pointer">
<i class="fas fa-tag mr-1"></i>
{tag.trim()}
</span>
))}
</div>
</div>
)}
{/* Share Buttons - McKinsey Style */}
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="bg-mckinsey-lightgray rounded-xl p-8">
<h3 class="text-xl font-bold mckinsey-heading mb-6">Bagikan Insights Ini</h3>
<div class="flex flex-wrap gap-4">
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(c.req.url)}`}
target="_blank"
class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold flex items-center"
>
<i class="fab fa-linkedin mr-3 text-lg"></i>
Share on LinkedIn
</a>
<a
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(article.title)}&url=${encodeURIComponent(c.req.url)}`}
target="_blank"
class="bg-blue-400 text-white px-6 py-3 rounded-lg hover:bg-blue-500 transition-colors font-semibold flex items-center"
>
<i class="fab fa-twitter mr-3 text-lg"></i>
Share on Twitter
</a>
<button
onclick={`navigator.clipboard.writeText('${c.req.url}'); alert('Link copied to clipboard!')`}
class="mckinsey-btn-outline px-6 py-3 rounded-lg font-semibold flex items-center"
>
<i class="fas fa-copy mr-3"></i>
Copy Link
</button>
</div>
<div class="mt-6 pt-6 border-t border-gray-300">
<p class="text-sm mckinsey-text">
<i class="fas fa-info-circle mr-2 text-mckinsey-blue"></i>
Bagikan insights ini dengan kolega dan rekan bisnis Anda untuk diskusi yang lebih mendalam
</p>
</div>
</div>
</div>
</article>
{/* Related Articles - McKinsey Style */}
{relatedArticles.results.length > 0 && (
<section class="mckinsey-section py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mckinsey-heading mb-4">Insights Terkait</h2>
<p class="text-lg mckinsey-text">Pelajari lebih lanjut topik serupa dari para ahli kami</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{relatedArticles.results.map(related => (
<article class="mckinsey-card rounded-xl overflow-hidden">
<div class="p-8">
<span class="bg-mckinsey-blue/10 text-mckinsey-blue px-4 py-2 rounded-full text-xs font-bold uppercase tracking-wide">
{related.category}
</span>
<h3 class="text-xl font-bold mckinsey-heading mt-6 mb-4 leading-tight">
{related.title}
</h3>
<p class="mckinsey-text mb-6 leading-relaxed">
{related.excerpt}
</p>
<div class="flex items-center justify-between pt-4 border-t border-gray-100">
<a
href={`/artikel/${related.slug}`}
class="mckinsey-btn px-4 py-2 rounded-lg text-sm font-semibold inline-flex items-center"
>
Baca Artikel
<i class="fas fa-arrow-right ml-2"></i>
</a>
<div class="text-xs text-gray-400">
<i class="fas fa-clock mr-1"></i>
5 min
</div>
</div>
</div>
</article>
))}
</div>
</div>
</section>
)}
</div>,
{
title: `${article.title} - IndoAdvisory`
}
)
} catch (error) {
console.error('Article page error:', error)
return c.notFound()
}
})
export default app