File: /var/www/indoadvisory_new/web/webapp/views/public/index.ejs
<%- contentFor('additionalCSS') %>
<style>
/* Client showcase styles */
.client-showcase-container {
overflow: hidden;
position: relative;
}
.client-showcase-track {
display: flex;
animation: showcase-scroll 40s linear infinite;
width: max-content;
}
.client-showcase-track:hover {
animation-play-state: paused;
}
@keyframes showcase-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.client-card {
flex-shrink: 0;
width: 300px;
margin-right: 24px;
}
/* Hero animation */
.hero-content > * {
animation: fade-in 0.8s ease-out forwards;
opacity: 0;
}
.hero-content > *:nth-child(1) { animation-delay: 0.2s; }
.hero-content > *:nth-child(2) { animation-delay: 0.4s; }
.hero-content > *:nth-child(3) { animation-delay: 0.6s; }
.hero-content > *:nth-child(4) { animation-delay: 0.8s; }
/* Section animations */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
</style>
<%- contentFor('body') %>
<!-- Hero Section -->
<section class="mckinsey-hero relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-10"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="hero-content text-center">
<h1 class="text-4xl md:text-6xl font-bold font-serif mb-6">
<%= __('hero_title') %>
</h1>
<p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
<%= __('hero_subtitle') %>
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/about" class="mckinsey-btn inline-block text-center">
<%= __('hero_cta') %>
</a>
<a href="/contact" class="mckinsey-btn-outline inline-block text-center text-white border-white hover:bg-white hover:text-mckinsey-navy">
<%= __('hero_contact') %>
</a>
</div>
</div>
</div>
<!-- Animated background shapes -->
<div class="absolute top-20 left-10 w-20 h-20 bg-white opacity-5 rounded-full animate-pulse"></div>
<div class="absolute bottom-20 right-10 w-32 h-32 bg-white opacity-5 rounded-full animate-pulse" style="animation-delay: 2s;"></div>
<div class="absolute top-1/2 left-1/4 w-16 h-16 bg-white opacity-5 rounded-full animate-pulse" style="animation-delay: 4s;"></div>
</section>
<!-- Client Showcase Section -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 animate-on-scroll">
<h2 class="text-3xl md:text-4xl font-bold mckinsey-heading mb-4">
<%= __('portfolio_title') %>
</h2>
<p class="text-xl mckinsey-subheading">
<%= __('portfolio_subtitle') %>
</p>
</div>
<!-- Auto-scrolling client showcase -->
<div class="client-showcase-container animate-on-scroll">
<div class="client-showcase-track" id="clientShowcase">
<!-- Clients will be loaded dynamically -->
<% clients.forEach(function(client) { %>
<div class="client-card mckinsey-card p-6">
<div class="flex items-center mb-4">
<% if (client.logo_url) { %>
<img src="<%= client.logo_url %>"
alt="<%= client.company_name %>"
class="w-12 h-12 object-contain mr-4">
<% } else { %>
<div class="w-12 h-12 bg-mckinsey-gray-200 rounded-lg flex items-center justify-center mr-4">
<span class="text-mckinsey-gray-600 font-bold text-lg">
<%= client.company_name.charAt(0) %>
</span>
</div>
<% } %>
<div>
<h3 class="font-semibold text-lg mckinsey-heading">
<%= client.company_name %>
</h3>
<p class="text-sm text-mckinsey-gray-600">
<%= client.industry %>
</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-medium text-mckinsey-navy mb-2">
<%= client.project_title %>
</h4>
<p class="text-sm mckinsey-text line-clamp-3">
<%= client.project_description %>
</p>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-mckinsey-gray-600">
<%= client.project_year %>
</span>
<% if (client.project_value) { %>
<span class="font-medium text-mckinsey-blue">
$<%= (client.project_value / 1000000).toFixed(0) %>M
</span>
<% } %>
</div>
</div>
<% }); %>
<!-- Duplicate for seamless scrolling -->
<% clients.forEach(function(client) { %>
<div class="client-card mckinsey-card p-6">
<div class="flex items-center mb-4">
<% if (client.logo_url) { %>
<img src="<%= client.logo_url %>"
alt="<%= client.company_name %>"
class="w-12 h-12 object-contain mr-4">
<% } else { %>
<div class="w-12 h-12 bg-mckinsey-gray-200 rounded-lg flex items-center justify-center mr-4">
<span class="text-mckinsey-gray-600 font-bold text-lg">
<%= client.company_name.charAt(0) %>
</span>
</div>
<% } %>
<div>
<h3 class="font-semibold text-lg mckinsey-heading">
<%= client.company_name %>
</h3>
<p class="text-sm text-mckinsey-gray-600">
<%= client.industry %>
</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-medium text-mckinsey-navy mb-2">
<%= client.project_title %>
</h4>
<p class="text-sm mckinsey-text line-clamp-3">
<%= client.project_description %>
</p>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-mckinsey-gray-600">
<%= client.project_year %>
</span>
<% if (client.project_value) { %>
<span class="font-medium text-mckinsey-blue">
$<%= (client.project_value / 1000000).toFixed(0) %>M
</span>
<% } %>
</div>
</div>
<% }); %>
</div>
</div>
<div class="text-center mt-8 animate-on-scroll">
<a href="/portfolio" class="mckinsey-btn">
<%= __('portfolio_view_all') %>
</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="mckinsey-section mckinsey-gradient-subtle">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="animate-on-scroll">
<h2 class="text-3xl md:text-4xl font-bold mckinsey-heading mb-6">
<%= __('about_title') %>
</h2>
<p class="text-lg mckinsey-text mb-8">
<%= settings.company_description || __('about_description') %>
</p>
<a href="/about" class="mckinsey-btn">
Learn More About Us
</a>
</div>
<div class="animate-on-scroll">
<div class="mckinsey-card p-8">
<div class="grid grid-cols-3 gap-6 text-center">
<div>
<div class="text-3xl font-bold text-mckinsey-blue mb-2">15+</div>
<div class="text-sm mckinsey-text">Years Experience</div>
</div>
<div>
<div class="text-3xl font-bold text-mckinsey-blue mb-2">$500M+</div>
<div class="text-sm mckinsey-text">Assets Managed</div>
</div>
<div>
<div class="text-3xl font-bold text-mckinsey-blue mb-2">50+</div>
<div class="text-sm mckinsey-text">Portfolio Companies</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="mckinsey-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-3xl md:text-4xl font-bold mckinsey-heading mb-4">
<%= __('services_title') %>
</h2>
<p class="text-xl mckinsey-subheading">
Comprehensive private equity solutions for Indonesian enterprises
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="mckinsey-card p-8 text-center animate-on-scroll">
<div class="w-16 h-16 mckinsey-gradient rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-chart-line text-2xl text-white"></i>
</div>
<h3 class="text-xl font-semibold mckinsey-heading mb-4">
<%= __('services_growth_capital') %>
</h3>
<p class="mckinsey-text">
<%= __('services_growth_desc') %>
</p>
</div>
<div class="mckinsey-card p-8 text-center animate-on-scroll">
<div class="w-16 h-16 mckinsey-gradient rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-handshake text-2xl text-white"></i>
</div>
<h3 class="text-xl font-semibold mckinsey-heading mb-4">
<%= __('services_buyout') %>
</h3>
<p class="mckinsey-text">
<%= __('services_buyout_desc') %>
</p>
</div>
<div class="mckinsey-card p-8 text-center animate-on-scroll">
<div class="w-16 h-16 mckinsey-gradient rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-lightbulb text-2xl text-white"></i>
</div>
<h3 class="text-xl font-semibold mckinsey-heading mb-4">
<%= __('services_advisory') %>
</h3>
<p class="mckinsey-text">
<%= __('services_advisory_desc') %>
</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<% if (team && team.length > 0) { %>
<section class="mckinsey-section bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-3xl md:text-4xl font-bold mckinsey-heading mb-4">
<%= __('team_title') %>
</h2>
<p class="text-xl mckinsey-subheading">
<%= __('team_subtitle') %>
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<% team.forEach(function(member, index) { %>
<div class="mckinsey-card p-6 text-center animate-on-scroll" style="animation-delay: <%= index * 0.2 %>s">
<div class="mb-6">
<% if (member.avatar_url) { %>
<img src="<%= member.avatar_url %>"
alt="<%= member.name %>"
class="w-24 h-24 rounded-full mx-auto object-cover">
<% } else { %>
<div class="w-24 h-24 bg-mckinsey-gray-200 rounded-full mx-auto flex items-center justify-center">
<span class="text-2xl font-semibold text-mckinsey-gray-600">
<%= member.name.split(' ').map(n => n.charAt(0)).join('') %>
</span>
</div>
<% } %>
</div>
<h3 class="text-xl font-semibold mckinsey-heading mb-2">
<%= member.name %>
</h3>
<p class="text-mckinsey-blue font-medium mb-4">
<%= member.position %>
</p>
<p class="mckinsey-text text-sm mb-6 line-clamp-3">
<%= member.bio %>
</p>
<% if (member.linkedin_url) { %>
<a href="<%= member.linkedin_url %>"
target="_blank"
class="text-mckinsey-blue hover:text-mckinsey-navy transition-colors">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<% } %>
</div>
<% }); %>
</div>
<div class="text-center mt-12 animate-on-scroll">
<a href="/about#team" class="mckinsey-btn">
View Full Team
</a>
</div>
</div>
</section>
<% } %>
<!-- Insights Section -->
<% if (articles && articles.length > 0) { %>
<section class="mckinsey-section mckinsey-gradient-subtle">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-3xl md:text-4xl font-bold mckinsey-heading mb-4">
<%= __('insights_title') %>
</h2>
<p class="text-xl mckinsey-subheading">
<%= __('insights_subtitle') %>
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<% articles.forEach(function(article, index) { %>
<article class="mckinsey-card overflow-hidden animate-on-scroll" style="animation-delay: <%= index * 0.2 %>s">
<% if (article.featured_image_url) { %>
<img src="<%= article.featured_image_url %>"
alt="<%= article.title %>"
class="w-full h-48 object-cover">
<% } %>
<div class="p-6">
<% if (article.category) { %>
<span class="inline-block px-3 py-1 text-xs font-medium bg-mckinsey-blue text-white rounded-full mb-3">
<%= article.category %>
</span>
<% } %>
<h3 class="text-xl font-semibold mckinsey-heading mb-3 line-clamp-2">
<%= article.title %>
</h3>
<% if (article.summary) { %>
<p class="mckinsey-text text-sm mb-4 line-clamp-3">
<%= article.summary %>
</p>
<% } %>
<div class="flex justify-between items-center">
<a href="/insights/<%= article.slug %>"
class="text-mckinsey-blue hover:text-mckinsey-navy font-medium">
<%= __('insights_read_more') %> →
</a>
<span class="text-xs text-mckinsey-gray-600">
<%= new Date(article.published_at).toLocaleDateString(currentLang === 'id' ? 'id-ID' : 'en-US') %>
</span>
</div>
</div>
</article>
<% }); %>
</div>
<div class="text-center mt-12 animate-on-scroll">
<a href="/insights" class="mckinsey-btn">
<%= __('insights_view_all') %>
</a>
</div>
</div>
</section>
<% } %>
<!-- CTA Section -->
<section class="mckinsey-hero">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="animate-on-scroll">
<h2 class="text-3xl md:text-4xl font-bold font-serif mb-6">
Ready to Transform Your Business?
</h2>
<p class="text-xl mb-8 text-blue-100">
Partner with Indonesia's leading private equity firm for sustainable growth and market leadership.
</p>
<a href="/contact" class="mckinsey-btn bg-white text-mckinsey-navy hover:bg-mckinsey-gray-100">
Start the Conversation
</a>
</div>
</div>
</section>
<%- contentFor('additionalJS') %>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all elements with animate-on-scroll class
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
// Enhance client showcase with additional data loading
async function loadMoreClients() {
try {
const response = await axios.get('/api/showcase/clients');
if (response.data.success && response.data.clients.length > 0) {
// Update showcase if needed
console.log('Client showcase loaded:', response.data.clients.length, 'clients');
}
} catch (error) {
console.error('Failed to load client showcase:', error);
}
}
// Load additional clients if needed
loadMoreClients();
// Add hover effects to client cards
document.querySelectorAll('.client-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-4px)';
this.style.boxShadow = '0 12px 30px rgba(0, 51, 102, 0.2)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '0 2px 8px rgba(0, 51, 102, 0.08)';
});
});
// Pause auto-scroll on showcase hover
const showcase = document.getElementById('clientShowcase');
if (showcase) {
showcase.addEventListener('mouseenter', function() {
this.style.animationPlayState = 'paused';
});
showcase.addEventListener('mouseleave', function() {
this.style.animationPlayState = 'running';
});
}
});
</script>
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FinancialService",
"name": "<%= __('company_name') %>",
"description": "<%= __('site_tagline') %>",
"url": "<%= locals.domain || 'https://indoadvisory.com' %>",
"logo": "<%= locals.domain || 'https://indoadvisory.com' %>/static/images/logo.png",
"address": {
"@type": "PostalAddress",
"addressCountry": "ID",
"addressLocality": "Jakarta"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+62-21-1234-5678",
"contactType": "customer service"
}
}
</script>
<%
// Set page-specific variables
locals.activePage = 'home';
locals.metaDescription = __('site_tagline');
locals.canonicalUrl = (locals.domain || 'https://indoadvisory.com') + '/';
%>