| 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/kampusdosenjualan.id_statis_page/ |
Upload File : |
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kampus Dosen Jualan - Belajar Jualan Online dari Nol</title>
<meta name="description" content="Kampus Dosen Jualan adalah tempat belajar jualan online, digital marketing, closing, dan bisnis digital untuk pemula hingga mahir.">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Feather Icons -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
colors: {
facebook: '#1877F2',
orangeBrand: '#F97316',
}
}
}
}
</script>
<style>
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
}
.hero-pattern {
background-image:
radial-gradient(circle at top left, rgba(249, 115, 22, 0.18), transparent 35%),
radial-gradient(circle at bottom right, rgba(24, 119, 242, 0.22), transparent 35%);
}
</style>
</head>
<body class="bg-slate-50 text-slate-800">
<!-- NAVBAR -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav class="flex items-center justify-between h-20">
<!-- Logo -->
<a href="#home" class="flex items-center gap-3">
<div class="w-11 h-11 rounded-2xl bg-facebook flex items-center justify-center shadow-lg shadow-blue-200">
<i data-feather="book-open" class="w-6 h-6 text-white"></i>
</div>
<div>
<h1 class="text-lg sm:text-xl font-black text-slate-900 leading-tight">
Kampus Dosen Jualan
</h1>
<p class="text-xs text-slate-500 -mt-1">
Belajar Jualan Online
</p>
</div>
</a>
<!-- Desktop Menu -->
<div class="hidden lg:flex items-center gap-8 font-semibold text-sm">
<a href="#home" class="text-slate-700 hover:text-facebook transition">Home</a>
<a href="#about" class="text-slate-700 hover:text-facebook transition">About</a>
<a href="#kelas" class="text-slate-700 hover:text-facebook transition">Kelas</a>
<a href="#kontak" class="text-slate-700 hover:text-facebook transition">Kontak</a>
<a href="#faq" class="text-slate-700 hover:text-facebook transition">FAQ</a>
</div>
<!-- CTA Desktop -->
<div class="hidden lg:block">
<a href="https://wa.me/6282296569339?text=Halo%20Kampus%20Dosen%20Jualan%2C%20saya%20ingin%20konsultasi%20kelas"
target="_blank"
class="inline-flex items-center gap-2 bg-orangeBrand hover:bg-orange-600 text-white px-5 py-3 rounded-2xl font-bold text-sm transition shadow-lg shadow-orange-200">
<i data-feather="message-circle" class="w-4 h-4"></i>
Konsultasi Gratis
</a>
</div>
<!-- Mobile Button -->
<button id="mobileMenuBtn" class="lg:hidden w-11 h-11 rounded-xl bg-slate-100 flex items-center justify-center">
<i data-feather="menu" class="w-6 h-6 text-slate-800"></i>
</button>
</nav>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden lg:hidden pb-5">
<div class="grid gap-2 bg-white rounded-2xl border border-slate-200 p-3 shadow-xl">
<a href="#home" class="mobile-link px-4 py-3 rounded-xl font-semibold hover:bg-blue-50 hover:text-facebook">Home</a>
<a href="#about" class="mobile-link px-4 py-3 rounded-xl font-semibold hover:bg-blue-50 hover:text-facebook">About</a>
<a href="#kelas" class="mobile-link px-4 py-3 rounded-xl font-semibold hover:bg-blue-50 hover:text-facebook">Kelas</a>
<a href="#kontak" class="mobile-link px-4 py-3 rounded-xl font-semibold hover:bg-blue-50 hover:text-facebook">Kontak</a>
<a href="#faq" class="mobile-link px-4 py-3 rounded-xl font-semibold hover:bg-blue-50 hover:text-facebook">FAQ</a>
<a href="https://wa.me/6282296569339?text=Halo%20Kampus%20Dosen%20Jualan%2C%20saya%20ingin%20konsultasi%20kelas"
target="_blank"
class="mt-2 inline-flex justify-center items-center gap-2 bg-orangeBrand text-white px-5 py-3 rounded-xl font-bold">
<i data-feather="message-circle" class="w-4 h-4"></i>
Konsultasi Gratis
</a>
</div>
</div>
</div>
</header>
<!-- HERO -->
<section id="home" class="pt-32 pb-20 lg:pt-40 lg:pb-28 hero-pattern overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Hero Text -->
<div>
<div class="inline-flex items-center gap-2 bg-blue-100 text-facebook px-4 py-2 rounded-full font-bold text-sm mb-6">
<i data-feather="zap" class="w-4 h-4"></i>
Belajar Jualan Online dari Nol sampai Bisa
</div>
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-black text-slate-950 leading-tight">
Naikkan Skill Jualan Online Bersama
<span class="text-facebook">Kampus Dosen Jualan</span>
</h2>
<p class="mt-6 text-lg text-slate-600 leading-relaxed max-w-xl">
Tempat belajar praktis untuk memahami digital marketing, copywriting, closing, konten jualan,
marketplace, WhatsApp marketing, dan strategi membangun bisnis online yang lebih terarah.
</p>
<div class="mt-8 flex flex-col sm:flex-row gap-4">
<a href="#kelas"
class="inline-flex justify-center items-center gap-2 bg-facebook hover:bg-blue-700 text-white px-7 py-4 rounded-2xl font-extrabold transition shadow-xl shadow-blue-200">
<i data-feather="play-circle" class="w-5 h-5"></i>
Lihat Kelas
</a>
<a href="https://wa.me/6282296569339?text=Halo%20Kampus%20Dosen%20Jualan%2C%20saya%20mau%20tanya%20kelas"
target="_blank"
class="inline-flex justify-center items-center gap-2 bg-white hover:bg-slate-100 text-slate-900 border border-slate-200 px-7 py-4 rounded-2xl font-extrabold transition shadow-lg">
<i data-feather="phone-call" class="w-5 h-5 text-orangeBrand"></i>
Tanya Admin
</a>
</div>
<div class="mt-10 grid grid-cols-3 gap-4 max-w-lg">
<div class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm">
<h3 class="text-2xl font-black text-facebook">1K+</h3>
<p class="text-xs sm:text-sm text-slate-500 font-semibold">Peserta Belajar</p>
</div>
<div class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm">
<h3 class="text-2xl font-black text-orangeBrand">20+</h3>
<p class="text-xs sm:text-sm text-slate-500 font-semibold">Materi Praktis</p>
</div>
<div class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm">
<h3 class="text-2xl font-black text-facebook">24/7</h3>
<p class="text-xs sm:text-sm text-slate-500 font-semibold">Akses Belajar</p>
</div>
</div>
</div>
<!-- Hero Card -->
<div class="relative">
<div class="absolute -top-8 -right-8 w-40 h-40 bg-orangeBrand/20 rounded-full blur-3xl"></div>
<div class="absolute -bottom-8 -left-8 w-40 h-40 bg-facebook/20 rounded-full blur-3xl"></div>
<div class="relative bg-white rounded-[2rem] border border-slate-200 shadow-2xl overflow-hidden">
<div class="bg-facebook p-6 text-white">
<div class="flex items-center justify-between">
<div>
<p class="text-blue-100 font-semibold text-sm">Program Unggulan</p>
<h3 class="text-2xl font-black mt-1">Kelas Jualan Online</h3>
</div>
<div class="w-14 h-14 rounded-2xl bg-white/15 flex items-center justify-center">
<i data-feather="trending-up" class="w-8 h-8"></i>
</div>
</div>
</div>
<div class="p-6 sm:p-8">
<div class="space-y-5">
<div class="flex gap-4">
<div class="w-12 h-12 rounded-2xl bg-orange-100 flex items-center justify-center shrink-0">
<i data-feather="target" class="w-6 h-6 text-orangeBrand"></i>
</div>
<div>
<h4 class="font-black text-slate-900">Materi Fokus Praktik</h4>
<p class="text-slate-500 text-sm mt-1">Belajar langsung ke hal yang bisa diterapkan untuk jualan.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-12 h-12 rounded-2xl bg-blue-100 flex items-center justify-center shrink-0">
<i data-feather="users" class="w-6 h-6 text-facebook"></i>
</div>
<div>
<h4 class="font-black text-slate-900">Cocok untuk Pemula</h4>
<p class="text-slate-500 text-sm mt-1">Dibuat sederhana agar mudah dipahami dari dasar.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-12 h-12 rounded-2xl bg-orange-100 flex items-center justify-center shrink-0">
<i data-feather="award" class="w-6 h-6 text-orangeBrand"></i>
</div>
<div>
<h4 class="font-black text-slate-900">Bimbingan Terarah</h4>
<p class="text-slate-500 text-sm mt-1">Ada arahan langkah demi langkah agar tidak bingung mulai dari mana.</p>
</div>
</div>
</div>
<div class="mt-8 bg-slate-50 border border-slate-200 rounded-3xl p-5">
<div class="flex items-center justify-between gap-4">
<div>
<p class="text-sm text-slate-500 font-semibold">Mulai belajar hari ini</p>
<h4 class="text-xl font-black text-slate-950">Konsultasi dulu gratis</h4>
</div>
<a href="https://wa.me/6282296569339"
target="_blank"
class="w-12 h-12 bg-orangeBrand hover:bg-orange-600 rounded-2xl flex items-center justify-center text-white transition">
<i data-feather="arrow-right" class="w-6 h-6"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 bg-orange-100 text-orangeBrand px-4 py-2 rounded-full font-bold text-sm mb-5">
<i data-feather="info" class="w-4 h-4"></i>
Tentang Kami
</div>
<h2 class="text-3xl sm:text-4xl font-black text-slate-950 leading-tight">
Kampus untuk Belajar Jualan dengan Cara yang Lebih Mudah Dipahami
</h2>
<p class="mt-5 text-slate-600 leading-relaxed">
Kampus Dosen Jualan hadir untuk membantu pelaku usaha, pemula, reseller, affiliate,
UMKM, dan siapa saja yang ingin belajar cara menjual produk atau jasa secara online.
</p>
<p class="mt-4 text-slate-600 leading-relaxed">
Materi disusun agar praktis, ringan dipahami, dan bisa langsung diterapkan. Fokusnya bukan hanya teori,
tetapi juga cara membuat penawaran, konten, funnel sederhana, database pelanggan, dan strategi follow up.
</p>
<div class="mt-8 grid sm:grid-cols-2 gap-4">
<div class="flex items-start gap-3 bg-slate-50 border border-slate-200 rounded-2xl p-5">
<i data-feather="check-circle" class="w-6 h-6 text-facebook shrink-0"></i>
<div>
<h3 class="font-black text-slate-900">Materi Sistematis</h3>
<p class="text-sm text-slate-500 mt-1">Belajar dari pondasi sampai strategi lanjutan.</p>
</div>
</div>
<div class="flex items-start gap-3 bg-slate-50 border border-slate-200 rounded-2xl p-5">
<i data-feather="check-circle" class="w-6 h-6 text-orangeBrand shrink-0"></i>
<div>
<h3 class="font-black text-slate-900">Bahasa Sederhana</h3>
<p class="text-sm text-slate-500 mt-1">Cocok untuk pemula yang baru mulai jualan online.</p>
</div>
</div>
</div>
</div>
<div class="bg-slate-50 border border-slate-200 rounded-[2rem] p-6 sm:p-8">
<div class="grid gap-5">
<div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center">
<i data-feather="shopping-bag" class="w-7 h-7 text-facebook"></i>
</div>
<div>
<h3 class="text-xl font-black text-slate-950">Untuk Pebisnis Online</h3>
<p class="text-slate-500 text-sm mt-1">Bangun cara jualan yang lebih rapi dan terukur.</p>
</div>
</div>
</div>
<div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-orange-100 flex items-center justify-center">
<i data-feather="edit-3" class="w-7 h-7 text-orangeBrand"></i>
</div>
<div>
<h3 class="text-xl font-black text-slate-950">Untuk Content Creator</h3>
<p class="text-slate-500 text-sm mt-1">Belajar membuat konten yang menarik dan menjual.</p>
</div>
</div>
</div>
<div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center">
<i data-feather="briefcase" class="w-7 h-7 text-facebook"></i>
</div>
<div>
<h3 class="text-xl font-black text-slate-950">Untuk UMKM</h3>
<p class="text-slate-500 text-sm mt-1">Bantu bisnis lokal naik kelas lewat pemasaran digital.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- KELAS -->
<section id="kelas" class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto">
<div class="inline-flex items-center gap-2 bg-blue-100 text-facebook px-4 py-2 rounded-full font-bold text-sm mb-5">
<i data-feather="layers" class="w-4 h-4"></i>
Pilihan Kelas
</div>
<h2 class="text-3xl sm:text-4xl font-black text-slate-950">
Kelas yang Bisa Kamu Ikuti
</h2>
<p class="mt-4 text-slate-600 leading-relaxed">
Pilih kelas sesuai kebutuhan. Mulai dari dasar jualan online, membuat konten, sampai strategi closing dan follow up pelanggan.
</p>
</div>
<div class="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white rounded-[2rem] border border-slate-200 p-6 shadow-sm hover:shadow-xl transition">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center mb-5">
<i data-feather="compass" class="w-7 h-7 text-facebook"></i>
</div>
<h3 class="text-xl font-black text-slate-950">Kelas Dasar Jualan Online</h3>
<p class="mt-3 text-slate-600 leading-relaxed">
Belajar pondasi jualan online, menentukan produk, mengenali target market, dan membuat penawaran.
</p>
<ul class="mt-5 space-y-3 text-sm text-slate-600">
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-orangeBrand shrink-0"></i>
Cocok untuk pemula
</li>
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-orangeBrand shrink-0"></i>
Materi mudah dipahami
</li>
</ul>
<a href="https://wa.me/6282296569339?text=Halo%2C%20saya%20tertarik%20Kelas%20Dasar%20Jualan%20Online"
target="_blank"
class="mt-6 inline-flex items-center gap-2 text-facebook font-black hover:text-orangeBrand transition">
Daftar Kelas
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-[2rem] border border-slate-200 p-6 shadow-sm hover:shadow-xl transition">
<div class="w-14 h-14 rounded-2xl bg-orange-100 flex items-center justify-center mb-5">
<i data-feather="pen-tool" class="w-7 h-7 text-orangeBrand"></i>
</div>
<h3 class="text-xl font-black text-slate-950">Kelas Copywriting Jualan</h3>
<p class="mt-3 text-slate-600 leading-relaxed">
Belajar menulis caption, headline, script promosi, dan kalimat penawaran yang lebih menarik.
</p>
<ul class="mt-5 space-y-3 text-sm text-slate-600">
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-facebook shrink-0"></i>
Formula promosi
</li>
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-facebook shrink-0"></i>
Contoh langsung praktik
</li>
</ul>
<a href="https://wa.me/6282296569339?text=Halo%2C%20saya%20tertarik%20Kelas%20Copywriting%20Jualan"
target="_blank"
class="mt-6 inline-flex items-center gap-2 text-facebook font-black hover:text-orangeBrand transition">
Daftar Kelas
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-[2rem] border border-slate-200 p-6 shadow-sm hover:shadow-xl transition">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center mb-5">
<i data-feather="message-square" class="w-7 h-7 text-facebook"></i>
</div>
<h3 class="text-xl font-black text-slate-950">Kelas Closing WhatsApp</h3>
<p class="mt-3 text-slate-600 leading-relaxed">
Pelajari cara membalas chat calon pembeli, follow up, handling objection, dan mengubah chat jadi order.
</p>
<ul class="mt-5 space-y-3 text-sm text-slate-600">
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-orangeBrand shrink-0"></i>
Script chat penjualan
</li>
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-orangeBrand shrink-0"></i>
Teknik follow up
</li>
</ul>
<a href="https://wa.me/6282296569339?text=Halo%2C%20saya%20tertarik%20Kelas%20Closing%20WhatsApp"
target="_blank"
class="mt-6 inline-flex items-center gap-2 text-facebook font-black hover:text-orangeBrand transition">
Daftar Kelas
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 4 -->
<div class="bg-white rounded-[2rem] border border-slate-200 p-6 shadow-sm hover:shadow-xl transition">
<div class="w-14 h-14 rounded-2xl bg-orange-100 flex items-center justify-center mb-5">
<i data-feather="camera" class="w-7 h-7 text-orangeBrand"></i>
</div>
<h3 class="text-xl font-black text-slate-950">Kelas Konten Jualan</h3>
<p class="mt-3 text-slate-600 leading-relaxed">
Belajar membuat ide konten harian, konten edukasi, konten soft selling, dan konten promosi.
</p>
<ul class="mt-5 space-y-3 text-sm text-slate-600">
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-facebook shrink-0"></i>
Ide konten siap pakai
</li>
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-facebook shrink-0"></i>
Cocok untuk Instagram/TikTok
</li>
</ul>
<a href="https://wa.me/6282296569339?text=Halo%2C%20saya%20tertarik%20Kelas%20Konten%20Jualan"
target="_blank"
class="mt-6 inline-flex items-center gap-2 text-facebook font-black hover:text-orangeBrand transition">
Daftar Kelas
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 5 -->
<div class="bg-white rounded-[2rem] border border-slate-200 p-6 shadow-sm hover:shadow-xl transition">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center mb-5">
<i data-feather="bar-chart-2" class="w-7 h-7 text-facebook"></i>
</div>
<h3 class="text-xl font-black text-slate-950">Kelas Iklan Digital</h3>
<p class="mt-3 text-slate-600 leading-relaxed">
Kenali dasar iklan digital, struktur campaign, target audiens, budget, dan evaluasi hasil iklan.
</p>
<ul class="mt-5 space-y-3 text-sm text-slate-600">
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-orangeBrand shrink-0"></i>
Dasar Meta Ads
</li>
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-orangeBrand shrink-0"></i>
Evaluasi performa iklan
</li>
</ul>
<a href="https://wa.me/6282296569339?text=Halo%2C%20saya%20tertarik%20Kelas%20Iklan%20Digital"
target="_blank"
class="mt-6 inline-flex items-center gap-2 text-facebook font-black hover:text-orangeBrand transition">
Daftar Kelas
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 6 -->
<div class="bg-white rounded-[2rem] border border-slate-200 p-6 shadow-sm hover:shadow-xl transition">
<div class="w-14 h-14 rounded-2xl bg-orange-100 flex items-center justify-center mb-5">
<i data-feather="database" class="w-7 h-7 text-orangeBrand"></i>
</div>
<h3 class="text-xl font-black text-slate-950">Kelas Database Pelanggan</h3>
<p class="mt-3 text-slate-600 leading-relaxed">
Belajar mengumpulkan, mengelola, dan memanfaatkan database pelanggan untuk penjualan berulang.
</p>
<ul class="mt-5 space-y-3 text-sm text-slate-600">
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-facebook shrink-0"></i>
Strategi repeat order
</li>
<li class="flex gap-2">
<i data-feather="check" class="w-4 h-4 text-facebook shrink-0"></i>
Follow up lebih rapi
</li>
</ul>
<a href="https://wa.me/6282296569339?text=Halo%2C%20saya%20tertarik%20Kelas%20Database%20Pelanggan"
target="_blank"
class="mt-6 inline-flex items-center gap-2 text-facebook font-black hover:text-orangeBrand transition">
Daftar Kelas
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- KONTAK -->
<section id="kontak" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div>
<div class="inline-flex items-center gap-2 bg-orange-100 text-orangeBrand px-4 py-2 rounded-full font-bold text-sm mb-5">
<i data-feather="send" class="w-4 h-4"></i>
Kontak Kami
</div>
<h2 class="text-3xl sm:text-4xl font-black text-slate-950">
Mau Tanya Kelas yang Cocok?
</h2>
<p class="mt-4 text-slate-600 leading-relaxed">
Hubungi admin Kampus Dosen Jualan untuk konsultasi kelas, jadwal belajar,
materi yang tersedia, atau rekomendasi kelas sesuai kebutuhan bisnis kamu.
</p>
<div class="mt-8 grid gap-4">
<a href="https://wa.me/6282296569339"
target="_blank"
class="flex items-center gap-4 bg-slate-50 border border-slate-200 rounded-3xl p-5 hover:border-facebook transition">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center">
<i data-feather="message-circle" class="w-7 h-7 text-facebook"></i>
</div>
<div>
<h3 class="font-black text-slate-950">WhatsApp</h3>
<p class="text-slate-500 text-sm">0822-9656-9339</p>
</div>
</a>
<div class="flex items-center gap-4 bg-slate-50 border border-slate-200 rounded-3xl p-5">
<div class="w-14 h-14 rounded-2xl bg-orange-100 flex items-center justify-center">
<i data-feather="globe" class="w-7 h-7 text-orangeBrand"></i>
</div>
<div>
<h3 class="font-black text-slate-950">Website</h3>
<p class="text-slate-500 text-sm">kampusdosenjualan.id</p>
</div>
</div>
<div class="flex items-center gap-4 bg-slate-50 border border-slate-200 rounded-3xl p-5">
<div class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center">
<i data-feather="clock" class="w-7 h-7 text-facebook"></i>
</div>
<div>
<h3 class="font-black text-slate-950">Jam Layanan</h3>
<p class="text-slate-500 text-sm">Senin - Sabtu, 08.00 - 17.00 WIB</p>
</div>
</div>
</div>
</div>
<!-- Contact Form -->
<div class="bg-slate-50 border border-slate-200 rounded-[2rem] p-6 sm:p-8">
<h3 class="text-2xl font-black text-slate-950">Kirim Pesan Cepat</h3>
<p class="mt-2 text-slate-500">
Isi form berikut, lalu klik kirim ke WhatsApp.
</p>
<form id="contactForm" class="mt-6 space-y-5">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Nama Lengkap</label>
<input type="text" id="nama" required
class="w-full px-5 py-4 bg-white border border-slate-200 rounded-2xl outline-none focus:ring-4 focus:ring-blue-100 focus:border-facebook"
placeholder="Contoh: Budi Santoso">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Nomor WhatsApp</label>
<input type="text" id="wa" required
class="w-full px-5 py-4 bg-white border border-slate-200 rounded-2xl outline-none focus:ring-4 focus:ring-blue-100 focus:border-facebook"
placeholder="Contoh: 08123456789">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Kelas yang Diminati</label>
<select id="kelasDipilih"
class="w-full px-5 py-4 bg-white border border-slate-200 rounded-2xl outline-none focus:ring-4 focus:ring-blue-100 focus:border-facebook">
<option value="Kelas Dasar Jualan Online">Kelas Dasar Jualan Online</option>
<option value="Kelas Copywriting Jualan">Kelas Copywriting Jualan</option>
<option value="Kelas Closing WhatsApp">Kelas Closing WhatsApp</option>
<option value="Kelas Konten Jualan">Kelas Konten Jualan</option>
<option value="Kelas Iklan Digital">Kelas Iklan Digital</option>
<option value="Kelas Database Pelanggan">Kelas Database Pelanggan</option>
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Pesan</label>
<textarea id="pesan" rows="4"
class="w-full px-5 py-4 bg-white border border-slate-200 rounded-2xl outline-none focus:ring-4 focus:ring-blue-100 focus:border-facebook"
placeholder="Tulis pertanyaan kamu di sini..."></textarea>
</div>
<button type="submit"
class="w-full inline-flex justify-center items-center gap-2 bg-orangeBrand hover:bg-orange-600 text-white px-7 py-4 rounded-2xl font-black transition shadow-xl shadow-orange-200">
<i data-feather="send" class="w-5 h-5"></i>
Kirim ke WhatsApp
</button>
</form>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 bg-slate-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<div class="inline-flex items-center gap-2 bg-blue-100 text-facebook px-4 py-2 rounded-full font-bold text-sm mb-5">
<i data-feather="help-circle" class="w-4 h-4"></i>
FAQ
</div>
<h2 class="text-3xl sm:text-4xl font-black text-slate-950">
Pertanyaan yang Sering Ditanyakan
</h2>
<p class="mt-4 text-slate-600">
Beberapa pertanyaan umum sebelum bergabung di Kampus Dosen Jualan.
</p>
</div>
<div class="mt-12 space-y-4">
<div class="faq-item bg-white border border-slate-200 rounded-3xl overflow-hidden">
<button class="faq-question w-full flex items-center justify-between gap-4 p-6 text-left">
<span class="font-black text-slate-950">Apakah kelas ini cocok untuk pemula?</span>
<i data-feather="chevron-down" class="faq-icon w-5 h-5 text-facebook transition"></i>
</button>
<div class="faq-answer hidden px-6 pb-6 text-slate-600 leading-relaxed">
Ya, kelas dirancang agar mudah dipahami oleh pemula. Materinya dimulai dari dasar jualan online,
mengenali target pasar, membuat penawaran, hingga strategi promosi.
</div>
</div>
<div class="faq-item bg-white border border-slate-200 rounded-3xl overflow-hidden">
<button class="faq-question w-full flex items-center justify-between gap-4 p-6 text-left">
<span class="font-black text-slate-950">Apakah materi bisa diakses kapan saja?</span>
<i data-feather="chevron-down" class="faq-icon w-5 h-5 text-facebook transition"></i>
</button>
<div class="faq-answer hidden px-6 pb-6 text-slate-600 leading-relaxed">
Bisa. Peserta dapat mengakses materi sesuai ketentuan kelas yang dipilih, sehingga proses belajar
bisa lebih fleksibel.
</div>
</div>
<div class="faq-item bg-white border border-slate-200 rounded-3xl overflow-hidden">
<button class="faq-question w-full flex items-center justify-between gap-4 p-6 text-left">
<span class="font-black text-slate-950">Apakah ada bimbingan setelah daftar?</span>
<i data-feather="chevron-down" class="faq-icon w-5 h-5 text-facebook transition"></i>
</button>
<div class="faq-answer hidden px-6 pb-6 text-slate-600 leading-relaxed">
Ada arahan dan pendampingan sesuai program kelas. Kamu juga bisa berkonsultasi dengan admin untuk
memilih kelas yang paling sesuai.
</div>
</div>
<div class="faq-item bg-white border border-slate-200 rounded-3xl overflow-hidden">
<button class="faq-question w-full flex items-center justify-between gap-4 p-6 text-left">
<span class="font-black text-slate-950">Saya sudah punya bisnis, apakah tetap cocok?</span>
<i data-feather="chevron-down" class="faq-icon w-5 h-5 text-facebook transition"></i>
</button>
<div class="faq-answer hidden px-6 pb-6 text-slate-600 leading-relaxed">
Cocok. Materi dapat membantu kamu merapikan strategi konten, promosi, closing, dan pengelolaan
database pelanggan agar penjualan lebih terarah.
</div>
</div>
<div class="faq-item bg-white border border-slate-200 rounded-3xl overflow-hidden">
<button class="faq-question w-full flex items-center justify-between gap-4 p-6 text-left">
<span class="font-black text-slate-950">Bagaimana cara daftar kelas?</span>
<i data-feather="chevron-down" class="faq-icon w-5 h-5 text-facebook transition"></i>
</button>
<div class="faq-answer hidden px-6 pb-6 text-slate-600 leading-relaxed">
Klik tombol konsultasi atau daftar kelas, lalu kamu akan diarahkan ke WhatsApp admin untuk mendapatkan
informasi lengkap dan proses pendaftaran.
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 bg-facebook">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="w-16 h-16 mx-auto rounded-3xl bg-white/15 flex items-center justify-center mb-6">
<i data-feather="rocket" class="w-8 h-8 text-white"></i>
</div>
<h2 class="text-3xl sm:text-4xl font-black text-white">
Siap Mulai Belajar Jualan Online?
</h2>
<p class="mt-4 text-blue-100 leading-relaxed max-w-2xl mx-auto">
Jangan bingung mulai dari mana. Konsultasikan dulu kebutuhanmu, lalu pilih kelas yang paling sesuai
untuk meningkatkan skill jualan online.
</p>
<a href="https://wa.me/6282296569339?text=Halo%20Kampus%20Dosen%20Jualan%2C%20saya%20siap%20mulai%20belajar"
target="_blank"
class="mt-8 inline-flex items-center gap-2 bg-orangeBrand hover:bg-orange-600 text-white px-8 py-4 rounded-2xl font-black transition shadow-xl shadow-blue-950/20">
<i data-feather="message-circle" class="w-5 h-5"></i>
Mulai Konsultasi Sekarang
</a>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-slate-950 text-white py-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<div class="flex items-center gap-3">
<div class="w-11 h-11 rounded-2xl bg-facebook flex items-center justify-center">
<i data-feather="book-open" class="w-6 h-6 text-white"></i>
</div>
<div>
<h3 class="text-lg font-black">Kampus Dosen Jualan</h3>
<p class="text-sm text-slate-400">Belajar jualan online lebih terarah.</p>
</div>
</div>
<p class="mt-5 text-slate-400 leading-relaxed max-w-md">
Platform belajar untuk meningkatkan kemampuan jualan online, digital marketing,
copywriting, konten, closing, dan pengelolaan pelanggan.
</p>
</div>
<div class="md:text-right">
<div class="flex md:justify-end gap-3">
<a href="#home" class="w-11 h-11 rounded-xl bg-white/10 hover:bg-facebook flex items-center justify-center transition">
<i data-feather="home" class="w-5 h-5"></i>
</a>
<a href="https://wa.me/6282296569339" target="_blank" class="w-11 h-11 rounded-xl bg-white/10 hover:bg-orangeBrand flex items-center justify-center transition">
<i data-feather="message-circle" class="w-5 h-5"></i>
</a>
<a href="#kelas" class="w-11 h-11 rounded-xl bg-white/10 hover:bg-facebook flex items-center justify-center transition">
<i data-feather="book" class="w-5 h-5"></i>
</a>
</div>
<p class="mt-5 text-slate-400 text-sm">
© 2026 Kampus Dosen Jualan. All Rights Reserved.
</p>
</div>
</div>
</div>
</footer>
<!-- Floating WhatsApp -->
<a href="https://wa.me/6282296569339?text=Halo%20Kampus%20Dosen%20Jualan%2C%20saya%20ingin%20bertanya"
target="_blank"
class="fixed bottom-5 right-5 z-50 w-14 h-14 rounded-2xl bg-orangeBrand hover:bg-orange-600 text-white flex items-center justify-center shadow-2xl shadow-orange-300 transition">
<i data-feather="message-circle" class="w-7 h-7"></i>
</a>
<!-- SCRIPT -->
<script>
feather.replace();
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const mobileLinks = document.querySelectorAll('.mobile-link');
mobileMenuBtn.addEventListener('click', function () {
mobileMenu.classList.toggle('hidden');
});
mobileLinks.forEach(function (link) {
link.addEventListener('click', function () {
mobileMenu.classList.add('hidden');
});
});
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(function (question) {
question.addEventListener('click', function () {
const item = question.closest('.faq-item');
const answer = item.querySelector('.faq-answer');
const icon = item.querySelector('.faq-icon');
answer.classList.toggle('hidden');
icon.classList.toggle('rotate-180');
});
});
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', function (e) {
e.preventDefault();
const nama = document.getElementById('nama').value.trim();
const wa = document.getElementById('wa').value.trim();
const kelasDipilih = document.getElementById('kelasDipilih').value;
const pesan = document.getElementById('pesan').value.trim();
const nomorAdmin = '6282296569339';
const text = `Halo Kampus Dosen Jualan,%0A%0A` +
`Nama: ${encodeURIComponent(nama)}%0A` +
`Nomor WA: ${encodeURIComponent(wa)}%0A` +
`Kelas yang diminati: ${encodeURIComponent(kelasDipilih)}%0A` +
`Pesan: ${encodeURIComponent(pesan || 'Saya ingin konsultasi kelas.')}`;
window.open(`https://wa.me/${nomorAdmin}?text=${text}`, '_blank');
});
</script>
</body>
</html>