| Server IP : 43.129.54.214 / Your IP : 216.73.216.51 Web Server : nginx/1.24.0 System : Linux VM-4-108-ubuntu 6.8.0-134-generic #134-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 26 18:43:11 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/jawonvirtualmarketing.com/ |
Upload File : |
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jawon Virtual Marketing - Solusi Digital Marketing Elegan & Premium</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'sans-serif'],
},
colors: {
brand: {
blue: '#13639E', // Diambil dari warna biru shield logo
dark: '#0B2338', // Biru sangat gelap untuk bagian section gelap
orange: '#F38118', // Diambil dari warna orange klik mouse logo
light: '#F8FAFC',
surface: '#FFFFFF',
}
},
boxShadow: {
'premium': '0 10px 40px -10px rgba(19, 99, 158, 0.1)',
'card': '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
'card-hover': '0 20px 40px -10px rgba(19, 99, 158, 0.15)',
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-soft': 'pulse-soft 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-15px)' },
},
'pulse-soft': {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '.7' },
}
}
}
}
}
</script>
<style>
html {
scroll-behavior: smooth;
background-color: #F8FAFC;
}
body {
color: #334155;
overflow-x: hidden;
}
/* Premium Text Gradient */
.text-gradient-brand {
background: linear-gradient(135deg, #13639E 0%, #2581C4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-orange {
background: linear-gradient(135deg, #F38118 0%, #FF9933 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Card Transitions */
.service-card {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.05);
}
.service-card:hover {
transform: translateY(-10px);
border-color: rgba(19, 99, 158, 0.15);
}
/* Icon Box Transition */
.icon-box {
transition: all 0.4s ease;
}
.service-card:hover .icon-box {
background-color: #13639E;
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(19, 99, 158, 0.4);
transform: translateY(-5px);
}
/* Image Zoom on Hover */
.service-card:hover .card-img {
transform: scale(1.1);
}
/* Scroll Reveal Classes */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
}
/* Navbar active state styling */
.nav-scrolled {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
</style>
</head>
<body class="antialiased font-sans">
<!-- Navbar -->
<nav class="fixed w-full z-50 transition-all duration-300 py-3 bg-white/80 backdrop-blur-md border-b border-gray-100" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center gap-3">
<a href="https://bscjaya.com/jawon-virtual-marketing">
<img src="https://ik.imagekit.io/bscjaya/JAWON%20VIRTUAL%20MARKETING/lOGO%20JAWON%20VIRTUAL%20MARKETING.webp" alt="Jawon Virtual Marketing" class="h-12 w-auto object-contain">
</a>
</div>
<!-- Desktop Menu -->
<div class="hidden lg:flex space-x-8 items-center">
<a href="https://bscjaya.com/jawon-virtual-marketing" class="text-slate-600 hover:text-brand-blue transition-colors text-sm font-semibold tracking-wide">Home</a>
<!-- Dropdown Layanan -->
<div class="relative group">
<button class="text-slate-600 hover:text-brand-blue transition-colors text-sm font-semibold tracking-wide flex items-center gap-1.5 py-4 outline-none">
Layanan Kami <i class="fas fa-chevron-down text-[10px] transition-transform duration-300 group-hover:rotate-180"></i>
</button>
<!-- Dropdown Panel (7 Items) -->
<div class="absolute left-0 top-full pt-1 w-72 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top -translate-y-2 group-hover:translate-y-0 z-50">
<div class="bg-white rounded-2xl border border-gray-100 py-3 shadow-xl flex flex-col relative overflow-hidden">
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20Jasa%20SEO%20Website" target="_blank" class="px-5 py-2.5 text-sm text-slate-600 hover:text-brand-blue hover:bg-slate-50 transition-colors border-l-2 border-transparent hover:border-brand-blue flex justify-between items-center">Jasa SEO Website <i class="fab fa-whatsapp opacity-50"></i></a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20butuh%20Jasa%20SEO%20Google%20Maps" target="_blank" class="px-5 py-2.5 text-sm text-slate-600 hover:text-brand-blue hover:bg-slate-50 transition-colors border-l-2 border-transparent hover:border-brand-blue flex justify-between items-center"> Jasa SEO Google Maps <i class="fab fa-whatsapp opacity-50"></i></a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20butuh%20Jasa%20Kelola%20Marketplace" target="_blank" class="px-5 py-2.5 text-sm text-slate-600 hover:text-brand-blue hover:bg-slate-50 transition-colors border-l-2 border-transparent hover:border-brand-blue flex justify-between items-center">Jasa Kelola Marketplace <i class="fab fa-whatsapp opacity-50"></i></a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20Optimasi%20AI%20Overview" target="_blank" class="px-5 py-2.5 text-sm text-slate-600 hover:text-brand-blue hover:bg-slate-50 transition-colors border-l-2 border-transparent hover:border-brand-blue flex justify-between items-center">Jasa Kelola Website <i class="fab fa-whatsapp opacity-50"></i></a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20ingin%20info%20Jasa%20Kelola%20Maps" target="_blank" class="px-5 py-2.5 text-sm text-slate-600 hover:text-brand-blue hover:bg-slate-50 transition-colors border-l-2 border-transparent hover:border-brand-blue flex justify-between items-center">Jasa Kelola Maps <i class="fab fa-whatsapp opacity-50"></i></a>
<div class="h-px bg-gray-100 my-1"></div>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20layanan%20Meta%20Ads" target="_blank" class="px-5 py-2.5 text-sm text-brand-orange font-medium hover:bg-orange-50 transition-colors border-l-2 border-transparent hover:border-brand-orange bg-orange-50/30 flex justify-between items-center">Susun Strategi dan Setting Meta Ads <i class="fab fa-meta"></i></a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20layanan%20Google%20Ads" target="_blank" class="px-5 py-2.5 text-sm text-brand-blue font-medium hover:bg-blue-50 transition-colors border-l-2 border-transparent hover:border-brand-blue bg-blue-50/30 flex justify-between items-center">Susun Strategi dan Setting Google Ads <i class="fab fa-google"></i></a>
</div>
</div>
</div>
<a href="#tentang" class="text-slate-600 hover:text-brand-blue transition-colors text-sm font-semibold tracking-wide">Tentang</a>
<a href="https://wa.me/6281299971772" target="_blank" class="bg-brand-blue text-white px-6 py-2.5 rounded-full font-bold hover:bg-blue-700 shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5 ml-2 flex items-center gap-2">
<i class="fab fa-whatsapp"></i> Hubungi Kami
</a>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden flex items-center">
<button id="mobile-menu-btn" class="text-slate-600 hover:text-brand-blue focus:outline-none p-2 bg-slate-50 rounded-lg">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Panel -->
<div id="mobile-menu" class="hidden lg:hidden absolute top-[70px] left-0 right-0 bg-white border-b border-gray-100 overflow-hidden max-h-[85vh] overflow-y-auto shadow-xl">
<div class="px-4 pt-2 pb-6 space-y-1 flex flex-col">
<a href="#home" class="block px-3 py-3 text-base font-semibold text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-xl transition-colors">Home</a>
<!-- Mobile Dropdown Layanan (7 Items) -->
<div>
<button id="mobile-layanan-btn" class="w-full text-left px-3 py-3 text-base font-semibold text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-xl transition-colors flex justify-between items-center outline-none">
Layanan Kami <i class="fas fa-chevron-down text-xs transition-transform duration-300" id="mobile-layanan-icon"></i>
</button>
<div id="mobile-layanan-menu" class="hidden flex-col pl-4 pr-3 py-2 space-y-1 ml-3 mt-1 border-l-2 border-brand-blue/20">
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20Jasa%20SEO%20Website" target="_blank" class="block py-2 px-3 text-sm font-medium text-slate-600 hover:text-brand-blue">Jasa SEO Website</a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20butuh%20Jasa%20SEO%20Google%20Maps" target="_blank" class="block py-2 px-3 text-sm font-medium text-slate-600 hover:text-brand-blue">Jasa SEO Google Maps</a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20butuh%20Jasa%20Kelola%20Marketplace" target="_blank" class="block py-2 px-3 text-sm font-medium text-slate-600 hover:text-brand-blue">Jasa Kelola Marketplace</a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20Optimasi%20AI%20Overview" target="_blank" class="block py-2 px-3 text-sm font-medium text-slate-600 hover:text-brand-blue">Jasa Kelola Website</a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20ingin%20info%20Jasa%20Kelola%20Maps" target="_blank" class="block py-2 px-3 text-sm font-medium text-slate-600 hover:text-brand-blue">Jasa Kelola Maps</a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20layanan%20Meta%20Ads" target="_blank" class="block py-2 px-3 text-sm font-semibold text-brand-orange bg-orange-50 rounded-lg">Susun Strategi dan Setting Meta Ads</a>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20layanan%20Google%20Ads" target="_blank" class="block py-2 px-3 text-sm font-semibold text-brand-blue bg-blue-50 rounded-lg">Susun Strategi dan Setting Google Ads</a>
</div>
</div>
<a href="#tentang" class="block px-3 py-3 text-base font-semibold text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-xl transition-colors">Tentang</a>
<a href="https://wa.me/6281299971772" target="_blank" class="flex justify-center items-center gap-2 px-3 py-3 mt-4 text-base font-semibold text-white bg-brand-blue rounded-xl transition-colors shadow-md">
<i class="fab fa-whatsapp text-xl"></i> Konsultasi Sekarang
</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative min-h-screen flex items-center pt-24 pb-12 overflow-hidden bg-brand-light">
<!-- Abstract Background Shapes -->
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-brand-blue/5 rounded-full filter blur-[80px] -translate-y-1/4 translate-x-1/4"></div>
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-brand-orange/5 rounded-full filter blur-[80px] translate-y-1/4 -translate-x-1/4"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Hero Content -->
<div class="space-y-8">
<div class="reveal inline-flex items-center gap-2 px-4 py-2 rounded-full border border-brand-blue/20 bg-white shadow-sm">
<span class="w-2 h-2 rounded-full bg-brand-orange animate-pulse"></span>
<span class="text-brand-blue text-xs sm:text-sm font-bold tracking-wider uppercase">Premium Digital Agency Jogja</span>
</div>
<h1 class="reveal reveal-delay-1 text-5xl lg:text-7xl font-extrabold leading-[1.15] tracking-tight text-slate-900">
Akselerasi Bisnis dengan <br />
<span class="text-gradient-brand">Strategi Digital</span> <span class="text-brand-orange">Eksklusif.</span>
</h1>
<p class="reveal reveal-delay-2 text-lg lg:text-xl text-slate-600 leading-relaxed max-w-xl font-normal">
Kami merancang strategi digital yang elegan dan berorientasi pada konversi. Mulai dari website profesional, optimasi SEO Google Maps, hingga manajemen Iklan Meta & Google yang akurat.
</p>
<div class="reveal reveal-delay-3 flex flex-wrap gap-4 pt-2">
<a href="#layanan" class="bg-brand-blue text-white px-8 py-4 rounded-full font-bold shadow-[0_8px_20px_rgba(19,99,158,0.25)] hover:bg-blue-700 transition-all duration-300 flex items-center gap-3 transform hover:-translate-y-1">
Eksplorasi Layanan <i class="fas fa-arrow-down"></i>
</a>
<a href="https://wa.me/6281299971772?text=Halo%20Tim%20Jawon,%20saya%20ingin%20berkonsultasi%20mengenai%20strategi%20digital%20marketing%20bisnis%20saya" target="_blank" class="bg-white text-slate-800 px-8 py-4 rounded-full font-semibold shadow-card hover:shadow-md transition-all border border-gray-100 hover:border-brand-orange flex items-center gap-3">
<i class="fab fa-whatsapp text-2xl text-green-500"></i> Konsultasi Gratis
</a>
</div>
<!-- Trust Indicators -->
<div class="reveal reveal-delay-3 pt-8 flex items-center gap-8 border-t border-gray-200 mt-8">
<div>
<p class="text-4xl font-extrabold text-slate-900"><span class="counter" data-target="500">0</span>+</p>
<p class="text-sm text-slate-500 mt-1 font-medium tracking-wide uppercase">Klien Terpercaya</p>
</div>
<div class="w-px h-12 bg-gray-200"></div>
<div>
<p class="text-4xl font-extrabold text-slate-900"><span class="counter" data-target="99">0</span>%</p>
<p class="text-sm text-slate-500 mt-1 font-medium tracking-wide uppercase">Tingkat Kepuasan</p>
</div>
</div>
</div>
<!-- Hero Graphic -->
<div class="hidden lg:block relative reveal reveal-delay-2 animate-float">
<div class="absolute inset-0 bg-brand-blue/10 blur-[60px] rounded-full"></div>
<div class="bg-white p-6 rounded-[2rem] shadow-premium relative z-10 border border-gray-100">
<div class="flex justify-between items-center mb-6 border-b border-gray-100 pb-4">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-gray-200"></div>
<div class="w-3 h-3 rounded-full bg-gray-200"></div>
<div class="w-3 h-3 rounded-full bg-brand-orange"></div>
</div>
<div class="px-3 py-1 bg-slate-50 rounded-full border border-gray-100">
<span class="text-xs text-slate-500 font-mono">analytics.overview</span>
</div>
</div>
<div class="space-y-6">
<div class="h-48 bg-slate-50 rounded-2xl relative overflow-hidden flex items-end p-4 gap-3 border border-gray-100">
<div class="w-full bg-brand-blue/10 h-[30%] rounded-t-lg transition-all duration-1000"></div>
<div class="w-full bg-brand-blue/20 h-[45%] rounded-t-lg transition-all duration-1000 delay-100"></div>
<div class="w-full bg-brand-blue/40 h-[60%] rounded-t-lg transition-all duration-1000 delay-200"></div>
<div class="w-full bg-brand-blue/60 h-[75%] rounded-t-lg transition-all duration-1000 delay-300"></div>
<div class="w-full bg-brand-orange h-[95%] rounded-t-lg relative shadow-[0_0_15px_rgba(243,129,24,0.3)] transition-all duration-1000 delay-400">
<div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-white border-4 border-brand-orange rounded-full"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:border-brand-blue/30 transition-colors">
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mb-3">
<i class="fas fa-arrow-trend-up text-green-500 text-sm"></i>
</div>
<p class="text-xs text-slate-500 font-medium mb-1 uppercase tracking-wider">Kenaikan Traffic</p>
<p class="text-2xl font-bold text-slate-900">+428%</p>
</div>
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:border-brand-orange/30 transition-colors">
<div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center mb-3">
<i class="fas fa-crown text-brand-orange text-sm"></i>
</div>
<p class="text-xs text-slate-500 font-medium mb-1 uppercase tracking-wider">Konversi Ads</p>
<p class="text-2xl font-bold text-slate-900">Top 1%</p>
</div>
</div>
</div>
</div>
<div class="absolute -top-6 -right-6 bg-white p-4 rounded-2xl border border-gray-100 shadow-lg z-20 animate-float" style="animation-delay: 1s;">
<i class="fab fa-meta text-4xl text-blue-600"></i>
</div>
<div class="absolute -bottom-8 -left-6 bg-white p-4 rounded-2xl border border-gray-100 shadow-lg z-20 animate-float" style="animation-delay: 2.5s;">
<i class="fab fa-google text-4xl text-brand-orange"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Layanan Premium Section -->
<section id="layanan" class="py-24 relative bg-white z-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 reveal">
<h2 class="text-sm font-bold text-brand-orange tracking-[0.2em] uppercase mb-3">Katalog Layanan</h2>
<h3 class="text-3xl md:text-5xl font-extrabold text-slate-900">Layanan <span class="text-gradient-brand">Eksklusif</span></h3>
<p class="mt-5 text-slate-600 max-w-2xl mx-auto text-lg font-normal">Solusi terintegrasi untuk memastikan brand Anda tampil premium dan mendominasi mesin pencari serta media sosial.</p>
</div>
<!-- Services Grid with 7 Items -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- Service 1: Website -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100">
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Website Development" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-blue shadow-lg">
<i class="fas fa-laptop-code text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-blue transition-colors"> Jasa SEO Website</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Desain kustom profesional, responsif, dan super cepat. Dirancang khusus dengan UI/UX elegan untuk konversi maksimal.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20ingin%20membuat%20Premium%20Website%20untuk%20bisnis%20saya.%20Bisa%20minta%20info%20lebih%20lanjut?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-slate-50 text-brand-blue font-bold hover:bg-brand-blue hover:text-white transition-all duration-300 border border-brand-blue/10">
Konsultasi Website <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
<!-- Service 2: Meta Ads -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal reveal-delay-1 group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100">
<div class="absolute top-4 right-4 z-10 flex items-center gap-1 bg-brand-orange text-white text-[10px] font-bold px-3 py-1.5 rounded-full uppercase tracking-wider shadow-lg">
Unggulan
</div>
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Meta Ads" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-orange shadow-lg">
<i class="fab fa-meta text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-orange transition-colors">Susun Strategi dan Setting Meta Ads</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Jangkau jutaan audiens tertarget di FB & IG. Strategi iklan kreatif dan pengelolaan budget efisien untuk melejitkan penjualan.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20butuh%20bantuan%20untuk%20Setting%20dan%20Strategi%20Meta%20Ads%20(FB/IG).%20Bagaimana%20detailnya?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-orange-50 text-brand-orange font-bold hover:bg-brand-orange hover:text-white transition-all duration-300 border border-brand-orange/10">
Pesan Layanan <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
<!-- Service 3: Google Ads -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal reveal-delay-2 group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100">
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Google Ads" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-blue shadow-lg">
<i class="fab fa-google text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-blue transition-colors">Susun Strategi dan Setting Google Ads</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Tampil di halaman pertama Google secara instan. Maksimalkan ROI dengan penempatan kata kunci *Search Ads* yang akurat.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20beriklan%20menggunakan%20Google%20Ads.%20Bisa%20bantu%20setingkan?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-slate-50 text-brand-blue font-bold hover:bg-brand-blue hover:text-white transition-all duration-300 border border-brand-blue/10">
Pesan Layanan <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
<!-- Service 4: SEO Google Maps -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal reveal-delay-3 group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100">
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="SEO Maps" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-blue shadow-lg">
<i class="fas fa-map-marked-alt text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-blue transition-colors">Jasa SEO Google Maps</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Dominasi pencarian lokal di kota Anda. Teknik optimasi mutakhir untuk menduduki peringkat top 3 di Google Maps.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20ingin%20toko/bisnis%20saya%20tampil%20nomor%201%20di%20Google%20Maps.%20Bisa%20bantu%20SEO-nya?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-slate-50 text-brand-blue font-bold hover:bg-brand-blue hover:text-white transition-all duration-300 border border-brand-blue/10">
Tingkatkan Traffic Lokal <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
<!-- Service 5: Kelola Marketplace -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal reveal-delay-4 group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100">
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Marketplace" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-blue shadow-lg">
<i class="fas fa-store text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-blue transition-colors">Jasa Kelola Marketplace</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Terima beres operasional Shopee & Tokopedia. Mulai dari optimasi judul, desain banner elegan, hingga campaign.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20kewalahan%20mengurus%20toko%20online.%20Bisa%20bantu%20Kelola%20Marketplace%20saya?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-slate-50 text-brand-blue font-bold hover:bg-brand-blue hover:text-white transition-all duration-300 border border-brand-blue/10">
Konsultasi Toko <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
<!-- Service 6: AI Overview -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal reveal-delay-5 group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100">
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="AI Technology" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-blue shadow-lg">
<i class="fas fa-brain text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-blue transition-colors">Jasa Kelola Website</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Persiapkan bisnis Anda di era AI Google. Kami mengoptimasi entitas agar direkomendasikan langsung oleh kecerdasan buatan.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20tertarik%20dengan%20layanan%20Optimasi%20AI%20(SGE).%20Bisa%20dijelaskan%20cara%20kerjanya?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-slate-50 text-brand-blue font-bold hover:bg-brand-blue hover:text-white transition-all duration-300 border border-brand-blue/10">
Pelajari Fitur <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
<!-- Service 7: Jasa Kelola Maps (NEW) -->
<!-- Menambahkan lg:col-start-2 agar di tampilan desktop otomatis berada di posisi tengah/rapi -->
<div class="service-card rounded-2xl shadow-sm hover:shadow-card reveal reveal-delay-6 group relative overflow-hidden bg-white flex flex-col h-full border border-gray-100 lg:col-start-2">
<div class="relative h-48 w-full overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1512758117904-7b77ab685b8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Jasa Kelola Maps" class="w-full h-full object-cover transition-transform duration-700 card-img">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<div class="absolute bottom-4 left-5 icon-box w-12 h-12 rounded-xl bg-white flex items-center justify-center text-brand-blue shadow-lg">
<i class="fas fa-map-pin text-xl"></i>
</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-blue transition-colors">Jasa Kelola Maps</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">
Pemeliharaan profil Google Maps secara berkala, manajemen review, dan pembaruan informasi bisnis agar tetap relevan dan menarik pelanggan lokal.
</p>
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20ingin%20info%20Jasa%20Kelola%20Maps.%20Bisa%20dibantu?" target="_blank" class="w-full text-center px-4 py-3 rounded-xl bg-slate-50 text-brand-blue font-bold hover:bg-brand-blue hover:text-white transition-all duration-300 border border-brand-blue/10">
Konsultasi Profil <i class="fab fa-whatsapp ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Tentang Section -->
<section id="tentang" class="py-24 relative overflow-hidden bg-brand-dark">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4wNSkiLz48L3N2Zz4=')] opacity-50"></div>
<div class="absolute -top-40 -right-40 w-96 h-96 bg-brand-blue/30 rounded-full filter blur-[100px]"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8 reveal">
<div>
<h2 class="text-3xl md:text-5xl font-extrabold text-white mb-6 leading-tight">
Partner Strategis untuk <br>
<span class="text-brand-orange">Pertumbuhan Bisnis</span>
</h2>
<p class="text-gray-300 text-lg leading-relaxed font-light">
Pengalaman bertahun-tahun di industri digital marketing. Kami menggunakan pendekatan yang profesional, elegan, berbasis data, dan fokus pada satu metrik terpenting: <strong>Peningkatan Omset Anda.</strong>
</p>
</div>
<div class="space-y-6">
<div class="flex gap-5 group bg-white/5 p-4 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-brand-blue flex items-center justify-center text-white">
<i class="fas fa-shield-alt text-xl"></i>
</div>
<div>
<h5 class="text-lg font-bold text-white mb-1">Metode Aman & Beretika</h5>
<p class="text-gray-400 text-sm font-light leading-relaxed">Strategi white-hat jangka panjang tanpa trik berbahaya. Keamanan reputasi brand Anda adalah prioritas kami.</p>
</div>
</div>
<div class="flex gap-5 group bg-white/5 p-4 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-brand-orange flex items-center justify-center text-white">
<i class="fas fa-chart-pie text-xl"></i>
</div>
<div>
<h5 class="text-lg font-bold text-white mb-1">Orientasi Konversi & ROI</h5>
<p class="text-gray-400 text-sm font-light leading-relaxed">Traffic yang tinggi tidak berarti jika tidak ada penjualan. Kami mendatangkan audiens dengan intensi beli tinggi.</p>
</div>
</div>
</div>
</div>
<div class="relative reveal reveal-delay-2">
<div class="bg-white rounded-[2rem] p-8 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-brand-orange/5 rounded-full filter blur-2xl"></div>
<div class="flex justify-between items-center mb-8 relative z-10">
<div>
<h4 class="text-slate-900 font-bold text-lg">Performa Klien Rata-rata</h4>
<p class="text-xs text-slate-500 mt-1">Data Kuartal Terakhir</p>
</div>
<div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center text-brand-orange">
<i class="fas fa-chart-line"></i>
</div>
</div>
<div class="text-center mb-8 pb-8 border-b border-gray-100 relative z-10">
<p class="text-6xl font-extrabold text-brand-blue"><span class="counter" data-target="150">0</span>%</p>
<p class="text-slate-500 text-sm font-bold uppercase tracking-widest mt-2">Growth dalam 3 Bulan</p>
</div>
<div class="space-y-6 relative z-10">
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600 font-medium">Keberhasilan Campaign Ads</span>
<span class="text-brand-orange font-bold">95%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div class="bg-brand-orange h-2 rounded-full relative" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600 font-medium">Dominasi SEO & Maps</span>
<span class="text-brand-blue font-bold">92%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div class="bg-brand-blue h-2 rounded-full relative" style="width: 92%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA / Kontak -->
<section id="kontak" class="py-24 relative bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-6">Siap Mendominasi <br><span class="text-gradient-brand">Pasar Digital Anda?</span></h2>
<p class="text-lg text-slate-600 mb-10 font-normal">
Kapasitas penanganan klien bulanan kami sangat terbatas demi menjaga kualitas layanan eksklusif. Konsultasikan kebutuhan Anda sekarang juga.
</p>
<div class="flex flex-col sm:flex-row justify-center items-center gap-4">
<a href="https://wa.me/6281299971772?text=Halo%20Jawon,%20saya%20ingin%20berkonsultasi%20untuk%20membangun%20dominasi%20digital%20bisnis%20saya." target="_blank" class="w-full sm:w-auto bg-[#25D366] hover:bg-[#1EBE5C] text-white px-8 py-4 rounded-full font-bold shadow-lg transition-all flex items-center justify-center gap-3 text-lg transform hover:-translate-y-1">
<i class="fab fa-whatsapp text-2xl"></i> Konsultasi via WhatsApp
</a>
<a href="https://jawonvirtualmarketing.com" target="_blank" class="w-full sm:w-auto bg-white text-slate-700 border-2 border-gray-200 px-8 py-4 rounded-full font-bold hover:border-brand-blue hover:text-brand-blue transition-all flex items-center justify-center gap-3 text-lg">
Kunjungi Website Utama <i class="fas fa-external-link-alt"></i>
</a>
</div>
<div class="mt-8 inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-blue-50 text-brand-blue text-sm font-semibold">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-blue opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-brand-blue"></span>
</span>
Slot Konsultasi Terbatas Minggu Ini
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-brand-dark pt-16 pb-8 border-t border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<!-- Brand Info -->
<div class="space-y-6">
<div class="bg-white p-3 rounded-xl inline-block">
<img src="https://ik.imagekit.io/bscjaya/JAWON%20VIRTUAL%20MARKETING/lOGO%20JAWON%20VIRTUAL%20MARKETING.webp" alt="Jawon Virtual Marketing" class="h-10 w-auto object-contain">
</div>
<p class="text-gray-400 text-sm leading-relaxed font-light">
Agency layanan digital premium di Indonesia. Solusi elegan dan berorientasi pada hasil nyata untuk akselerasi pertumbuhan bisnis modern Anda.
</p>
<div class="flex space-x-3">
<a href="https://jawonvirtualmarketing.com" target="_blank" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center text-gray-300 hover:bg-brand-blue hover:text-white transition-all">
<i class="fab fa-facebook-f text-sm"></i>
</a>
<a href="https://jawonvirtualmarketing.com" target="_blank" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center text-gray-300 hover:bg-brand-orange hover:text-white transition-all">
<i class="fab fa-instagram text-sm"></i>
</a>
<a href="https://jawonvirtualmarketing.com" target="_blank" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center text-gray-300 hover:bg-brand-blue hover:text-white transition-all">
<i class="fab fa-linkedin-in text-sm"></i>
</a>
</div>
</div>
<!-- Fokus Layanan -->
<div>
<h4 class="text-white font-bold text-lg mb-6">Fokus Layanan</h4>
<ul class="space-y-3 text-sm text-gray-400 font-light">
<li><a href="https://wa.me/6281299971772?text=Info%20Pembuatan%20Website" target="_blank" class="hover:text-brand-orange transition-colors">Pembuatan Website Premium</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Setting%20Meta%20Ads" target="_blank" class="hover:text-brand-orange transition-colors">Setting Meta Ads (FB/IG)</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Setting%20Google%20Ads" target="_blank" class="hover:text-brand-orange transition-colors">Setting Google Ads</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20SEO%20Google%20Maps" target="_blank" class="hover:text-brand-orange transition-colors">SEO Google Maps</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Manajemen%20Marketplace" target="_blank" class="hover:text-brand-orange transition-colors">Manajemen Marketplace</a></li>
</ul>
</div>
<!-- Layanan Lainnya -->
<div>
<h4 class="text-white font-bold text-lg mb-6">Layanan Bantuan</h4>
<ul class="space-y-3 text-sm text-gray-400 font-light">
<li><a href="https://wa.me/6281299971772?text=Info%20Manajemen%20Sosial%20Media" target="_blank" class="hover:text-brand-blue transition-colors">Manajemen Social Media</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Kelola%20Review%20Maps" target="_blank" class="hover:text-brand-blue transition-colors">Kelola & Review Maps</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Optimasi%20Kecepatan%20Web" target="_blank" class="hover:text-brand-blue transition-colors">Optimasi Kecepatan Web</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Maintenance%20Website" target="_blank" class="hover:text-brand-blue transition-colors">Maintenance Website</a></li>
<li><a href="https://wa.me/6281299971772?text=Info%20Optimasi%20AI" target="_blank" class="hover:text-brand-blue transition-colors">Jasa Kelola Website</a></li>
</ul>
</div>
<!-- Kontak -->
<div>
<h4 class="text-white font-bold text-lg mb-6">Hubungi Kami</h4>
<ul class="space-y-4 text-sm text-gray-400 font-light">
<li class="flex items-start gap-3">
<i class="fas fa-map-marker-alt text-brand-orange mt-1 w-4"></i>
<span>Jl. Tembus Draman - Mutihan, RT.04 No. 99, Srimartani, Piyungan, Bantul, DIY</span>
</li>
<li class="flex items-center gap-3 group">
<i class="fab fa-whatsapp text-brand-orange w-4"></i>
<a href="https://wa.me/6281299971772" target="_blank" class="group-hover:text-white transition-colors">0812-9997-1772</a>
</li>
<li class="flex items-center gap-3 group">
<i class="fas fa-globe text-brand-orange w-4"></i>
<a href="https://jawonvirtualmarketing.com" target="_blank" class="group-hover:text-white transition-colors">jawonvirtualmarketing.com</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-white/10 pt-6 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500 font-light">
<p>© 2026 Jawon Virtual Marketing. Crafted with precision.</p>
<div class="flex gap-4">
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
// Navbar Scrolled Effect (Modern Glass transition)
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 20) {
navbar.classList.add('nav-scrolled');
} else {
navbar.classList.remove('nav-scrolled');
}
});
// Mobile Menu Toggle
const mobileBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu on link click
document.querySelectorAll('#mobile-menu a:not(#mobile-layanan-btn)').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Mobile Submenu Dropdown Toggle logic
const mobileLayananBtn = document.getElementById('mobile-layanan-btn');
const mobileLayananMenu = document.getElementById('mobile-layanan-menu');
const mobileLayananIcon = document.getElementById('mobile-layanan-icon');
mobileLayananBtn.addEventListener('click', (e) => {
e.preventDefault();
mobileLayananMenu.classList.toggle('hidden');
mobileLayananMenu.classList.toggle('flex');
mobileLayananIcon.classList.toggle('rotate-180');
});
// Intersection Observer for Scroll Reveal Animations
const revealElements = document.querySelectorAll('.reveal');
const revealOptions = {
threshold: 0.15,
rootMargin: "0px 0px -50px 0px"
};
const revealObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
entry.target.classList.add('active');
observer.unobserve(entry.target);
});
}, revealOptions);
revealElements.forEach(el => {
revealObserver.observe(el);
});
// Number Counter Animation
const counters = document.querySelectorAll('.counter');
const speed = 150;
const counterObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const counter = entry.target;
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const inc = target / speed;
if (count < target) {
counter.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 20);
} else {
counter.innerText = target;
}
};
updateCount();
observer.unobserve(counter);
}
});
}, { threshold: 0.5 });
counters.forEach(counter => {
counterObserver.observe(counter);
});
</script>
</body>
</html>