File: /var/www/indoadvisory_new/webapp/src/renderer.tsx
import { jsxRenderer } from 'hono/jsx-renderer'
export const renderer = jsxRenderer(({ children, title = "IndoAdvisory - Penasihat Investasi Terpercaya" }) => {
return (
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<meta name="description" content="Firma konsultan private equity terkemuka di Indonesia. Kami menyediakan layanan valuasi perusahaan, persiapan IPO, dan konsultasi investasi untuk pertumbuhan bisnis Anda." />
<meta name="keywords" content="private equity, investasi, valuasi perusahaan, IPO, konsultan keuangan, Indonesia, Jakarta" />
{/* Tailwind CSS */}
<script src="https://cdn.tailwindcss.com"></script>
<script dangerouslySetInnerHTML={{__html: `
tailwind.config = {
theme: {
extend: {
colors: {
// McKinsey-inspired professional palette
primary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a'
},
mckinsey: {
blue: '#0073e6',
darkblue: '#003d73',
navy: '#001f3f',
gray: '#4a5568',
lightgray: '#f7fafc',
accent: '#00b4d8'
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a'
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Inter', 'system-ui', 'sans-serif']
}
}
}
}
`}} />
{/* Font Awesome Icons */}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
{/* Custom CSS */}
<link href="/static/style.css" rel="stylesheet" />
{/* McKinsey-style professional styling */}
<style>{`
html {
scroll-behavior: smooth;
font-family: 'Inter', system-ui, sans-serif;
}
.mckinsey-gradient {
background: linear-gradient(135deg, #0073e6 0%, #003d73 50%, #001f3f 100%);
}
.mckinsey-card {
background: #ffffff;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.mckinsey-card:hover {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
border-color: #cbd5e1;
}
.mckinsey-section {
background: #f8fafc;
}
.mckinsey-text {
color: #334155;
line-height: 1.6;
}
.mckinsey-heading {
color: #1e293b;
font-weight: 600;
letter-spacing: -0.025em;
}
.mckinsey-accent {
color: #0073e6;
}
.mckinsey-btn {
background: #0073e6;
color: white;
font-weight: 500;
letter-spacing: 0.025em;
transition: all 0.2s ease;
}
.mckinsey-btn:hover {
background: #003d73;
box-shadow: 0 4px 8px rgba(0, 115, 230, 0.25);
}
.mckinsey-btn-outline {
border: 2px solid #0073e6;
color: #0073e6;
background: transparent;
font-weight: 500;
transition: all 0.2s ease;
}
.mckinsey-btn-outline:hover {
background: #0073e6;
color: white;
}
/* McKinsey Article Content Styling */
.mckinsey-article-content {
font-family: 'Inter', system-ui, sans-serif;
line-height: 1.8;
color: #334155;
}
.mckinsey-article-content h2 {
color: #1e293b;
font-weight: 700;
font-size: 1.75rem;
margin: 2.5rem 0 1rem 0;
border-bottom: 3px solid #0073e6;
padding-bottom: 0.5rem;
}
.mckinsey-article-content h3 {
color: #1e293b;
font-weight: 600;
font-size: 1.375rem;
margin: 2rem 0 0.75rem 0;
}
.mckinsey-article-content h4 {
color: #0073e6;
font-weight: 600;
font-size: 1.125rem;
margin: 1.5rem 0 0.5rem 0;
}
.mckinsey-article-content p {
margin: 1.25rem 0;
font-size: 1.125rem;
line-height: 1.8;
}
.mckinsey-article-content ul, .mckinsey-article-content ol {
margin: 1.5rem 0;
padding-left: 1.5rem;
}
.mckinsey-article-content li {
margin: 0.75rem 0;
font-size: 1.125rem;
line-height: 1.7;
}
.mckinsey-article-content blockquote {
border-left: 4px solid #0073e6;
background: #f8fafc;
padding: 1.5rem 2rem;
margin: 2rem 0;
font-style: italic;
font-weight: 500;
color: #475569;
}
.mckinsey-article-content strong {
color: #1e293b;
font-weight: 700;
}
.mckinsey-article-content em {
color: #0073e6;
font-style: normal;
font-weight: 600;
}
.mckinsey-article-content code {
background: #f1f5f9;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-family: 'Monaco', monospace;
font-size: 0.875rem;
color: #003d73;
}
`}</style>
</head>
<body class="antialiased">
{children}
{/* JavaScript for smooth interactions */}
<script dangerouslySetInnerHTML={{__html: `
// Mobile menu toggle
function toggleMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Contact form submission
function submitContact(event) {
event.preventDefault();
const formData = new FormData(event.target);
const data = Object.fromEntries(formData);
// Show success message
const successDiv = document.getElementById('contact-success');
successDiv.classList.remove('hidden');
event.target.reset();
// Hide message after 5 seconds
setTimeout(() => {
successDiv.classList.add('hidden');
}, 5000);
}
// Client carousel auto-scroll functionality
let autoScrollInterval;
let isPaused = false;
let currentPosition = 0;
function initializeClientCarousel() {
const carousel = document.getElementById('client-carousel');
const showcaseSection = document.getElementById('client-showcase-section');
if (!carousel || !showcaseSection) return;
const cards = carousel.querySelectorAll('.flex-none');
if (cards.length === 0) return;
const cardCount = cards.length / 2; // We duplicate cards for seamless loop
const cardWidth = 408; // 384px + 24px margin
const maxPosition = cardCount * cardWidth;
function autoScroll() {
if (isPaused) return;
currentPosition += cardWidth;
// Reset to beginning when we've scrolled through all original cards
if (currentPosition >= maxPosition) {
currentPosition = 0;
}
carousel.style.transform = 'translateX(-' + currentPosition + 'px)';
}
// Start auto-scroll
autoScrollInterval = setInterval(autoScroll, 3000);
// Pause on hover over the entire client showcase section
showcaseSection.addEventListener('mouseenter', () => {
isPaused = true;
});
showcaseSection.addEventListener('mouseleave', () => {
isPaused = false;
});
}
// Initialize carousel when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeClientCarousel);
`}} />
</body>
</html>
)
})