2026-03-29 13:02:50 +07:00
import React , { useState , useEffect } from 'react' ;
import {
Menu , X , ChevronRight , CheckCircle ,
BarChart3 , Box , CreditCard , Smartphone ,
Store , Coffee , Scissors , ShoppingBag , Star ,
MonitorSmartphone , Printer , ShieldCheck , Wrench , Sparkles ,
Laptop , Tablet , ArrowRight , Bot , PieChart , TrendingUp , BrainCircuit ,
Package , FileText , ShoppingCart , Warehouse , Users , GitMerge , ArrowLeft ,
Utensils , Zap , Clock , UserCheck , CalendarDays , History
} from 'lucide-react' ;
export default function App ( ) {
const [ isMenuOpen , setIsMenuOpen ] = useState ( false ) ;
const [ activeIndustryTab , setActiveIndustryTab ] = useState ( 'fnb' ) ;
const [ currentPage , setCurrentPage ] = useState ( 'home' ) ; // 'home' or 'industry-detail'
// Scroll to top when changing page
useEffect ( ( ) => {
window . scrollTo ( 0 , 0 ) ;
} , [ currentPage , activeIndustryTab ] ) ;
const industries = [
{
id : 'fnb' ,
title : 'Food & Beverages' ,
headline : 'Solusi Kasir Terpadu untuk Bisnis Kuliner Modern' ,
description : 'Dari coffee shop mandiri hingga jaringan restoran berskala nasional, Kulakpos.id menyediakan fitur manajemen meja, dapur, dan stok bahan baku yang presisi.' ,
icon : < Coffee className = "w-5 h-5" / > ,
image : 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80' ,
items : [ 'Quick Services' , 'Resto Full Service' , 'Fast Casual FnB' , 'Coffee Shops' , 'Cloud Kitchen' , 'Foodcourt' , 'Lounge & Bar' ] ,
features : [
{ icon : < Utensils / > , name : "Manajemen Meja" , detail : "Atur layout meja secara visual dan pantau status pesanan tiap pelanggan." } ,
{ icon : < Zap / > , name : "Kitchen Display System" , desc : "Kirim pesanan kasir langsung ke layar dapur untuk efisiensi maksimal." } ,
{ icon : < Clock / > , name : "Split & Merge Bill" , desc : "Fleksibilitas pembayaran untuk pelanggan rombongan atau pisah pesanan." }
]
} ,
{
id : 'retail' ,
title : 'Toko Retail' ,
headline : 'Kelola Ribuan SKU dengan Inventori Terotomatisasi' ,
description : 'Sistem retail kami dirancang untuk menangani pergerakan stok yang cepat, barcode scanning, dan sinkronisasi harga antar cabang secara real-time.' ,
icon : < ShoppingBag className = "w-5 h-5" / > ,
image : 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80' ,
items : [ 'Clothing & Accessories' , 'Toko Elektronik' , 'Grosir & Minimarket' , 'Toko Online' , 'Gadget & Accessories' , 'Toko Bangunan' , 'Furniture' , 'Apotek' , 'Distributor' ] ,
features : [
{ icon : < Package / > , name : "Multi-UOM & SKU" , detail : "Jual dalam satuan pcs, lusin, atau karton dengan satu kode barang yang sama." } ,
{ icon : < TrendingUp / > , name : "Grosir & Tier Pricing" , desc : "Atur harga otomatis berdasarkan jumlah pembelian pelanggan." } ,
{ icon : < GitMerge / > , name : "Stock Opname Digital" , desc : "Lakukan audit stok tanpa harus menutup toko menggunakan scan smartphone." }
]
} ,
{
id : 'beauty' ,
title : 'Beauty' ,
headline : 'Tingkatkan Pengalaman Pelanggan Salon & Klinik' ,
description : 'Kelola jadwal janji temu (appointment), komisi staf beauty therapist, hingga riwayat perawatan pelanggan dalam satu aplikasi.' ,
icon : < Sparkles className = "w-5 h-5" / > ,
image : 'https://images.unsplash.com/photo-1560750588-73207b1ef5b8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80' ,
items : [ 'Salon Kecantikan' , 'Barbershop' , 'Klinik & Kesehatan' , 'Day Spa' , 'Pet Shops' ] ,
features : [
{ icon : < CalendarDays / > , name : "Booking Online" , detail : "Pelanggan bisa pesan jadwal lewat website tanpa perlu telepon manual." } ,
{ icon : < UserCheck / > , name : "Komisi Staf" , desc : "Hitung otomatis bagi hasil untuk tiap terapis berdasarkan layanan yang diberikan." } ,
{ icon : < History / > , name : "Customer Records" , desc : "Simpan riwayat treatment dan preferensi produk favorit pelanggan." }
]
} ,
{
id : 'jasa' ,
title : 'Jasa' ,
headline : 'Efisiensi Operasional untuk Bisnis Berbasis Layanan' ,
description : 'Lacak status pengerjaan jasa, manajemen antrean, hingga laporan produktivitas karyawan secara mendalam.' ,
icon : < Wrench className = "w-5 h-5" / > ,
image : 'https://images.unsplash.com/photo-1521671757615-16782a1705e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80' ,
items : [ 'Laundry' , 'Car Wash' , 'Reparasi' , 'Bengkel' , 'Jasa Profesional' , 'Sport & Fitness' , 'Penginapan' , 'Parkir' , 'Daycare' ] ,
features : [
{ icon : < Clock / > , name : "Tracker Pengerjaan" , detail : "Update status layanan dari 'Proses' hingga 'Selesai' dan kirim notifikasi ke pelanggan." } ,
{ icon : < ShieldCheck / > , name : "Manajemen Garansi" , desc : "Cetak kartu garansi digital dan lacak klaim perbaikan dengan mudah." } ,
{ icon : < Smartphone / > , name : "Mobile Workforce" , desc : "Karyawan lapangan dapat update pekerjaan langsung dari smartphone mereka." }
]
}
] ;
const activeIndustry = industries . find ( i => i . id === activeIndustryTab ) ;
const renderNavbar = ( ) => (
< nav className = "fixed top-0 w-full bg-white/95 backdrop-blur-md z-50 border-b border-slate-200 transition-all shadow-sm" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "flex justify-between items-center h-20" >
2026-04-01 09:19:43 +07:00
< div className = "flex-shrink-0 flex items-center gap-2 cursor-pointer" onClick = { ( ) => { setCurrentPage ( 'home' ) ; window . location . href = '/' ; } } >
< img src = "/images/logokulakpos.png" alt = "Kulakpos" className = "h-10 w-auto" / >
2026-03-29 13:02:50 +07:00
< / div >
< div className = "hidden md:flex space-x-8 items-center" >
2026-04-01 09:19:43 +07:00
< a href = "/#fitur" onClick = { ( e ) => { e . preventDefault ( ) ; setCurrentPage ( 'home' ) ; setTimeout ( ( ) => document . getElementById ( 'fitur' ) ? . scrollIntoView ( { behavior : 'smooth' } ) , 100 ) ; } } className = "text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm" > Fitur POS < / a >
< a href = "/#ai" onClick = { ( e ) => { e . preventDefault ( ) ; setCurrentPage ( 'home' ) ; setTimeout ( ( ) => document . getElementById ( 'ai' ) ? . scrollIntoView ( { behavior : 'smooth' } ) , 100 ) ; } } className = "text-teal-600 hover:text-teal-700 font-bold transition-colors text-sm flex items-center gap-1.5 bg-teal-50 px-3 py-1.5 rounded-full border border-teal-100" >
2026-03-29 13:02:50 +07:00
< Bot className = "w-4 h-4" / > AI Assistance
< / a >
2026-04-01 09:19:43 +07:00
< a href = "/#perangkat" onClick = { ( e ) => { e . preventDefault ( ) ; setCurrentPage ( 'home' ) ; setTimeout ( ( ) => document . getElementById ( 'perangkat' ) ? . scrollIntoView ( { behavior : 'smooth' } ) , 100 ) ; } } className = "text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm" > Perangkat < / a >
< a href = "/#solusi" onClick = { ( e ) => { e . preventDefault ( ) ; setCurrentPage ( 'home' ) ; setTimeout ( ( ) => document . getElementById ( 'solusi' ) ? . scrollIntoView ( { behavior : 'smooth' } ) , 100 ) ; } } className = "text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm" > Solusi Industri < / a >
< a href = "/#harga" onClick = { ( e ) => { e . preventDefault ( ) ; setCurrentPage ( 'home' ) ; setTimeout ( ( ) => document . getElementById ( 'harga' ) ? . scrollIntoView ( { behavior : 'smooth' } ) , 100 ) ; } } className = "text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm" > Harga < / a >
2026-03-29 13:02:50 +07:00
< / div >
< div className = "hidden md:flex items-center space-x-4" >
< a href = "/login" className = "text-slate-600 font-semibold hover:text-red-600 transition-colors text-sm" > Masuk < / a >
< a href = "/plans" className = "bg-teal-600 hover:bg-teal-700 text-white px-5 py-2.5 rounded-lg font-semibold transition-all shadow-md text-sm flex items-center gap-2" >
Coba Gratis < ArrowRight className = "w-4 h-4" / >
< / a >
< / div >
< div className = "md:hidden flex items-center" >
< button onClick = { ( ) => setIsMenuOpen ( ! isMenuOpen ) } className = "text-slate-600 hover:text-teal-600 focus:outline-none" >
{ isMenuOpen ? < X className = "h-7 w-7" / > : < Menu className = "h-7 w-7" / > }
< / button >
< / div >
< / div >
< / div >
< / nav >
) ;
const renderFooter = ( ) => (
< footer className = "bg-white text-slate-600 py-16 border-t border-slate-200" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-12" >
< div className = "lg:col-span-2" >
2026-04-01 09:19:43 +07:00
< div className = "flex items-center gap-2 mb-6 cursor-pointer" onClick = { ( ) => { setCurrentPage ( 'home' ) ; window . location . href = '/' ; } } >
< img src = "/images/logokulakpos.png" alt = "Kulakpos" className = "h-10 w-auto" / >
2026-03-29 13:02:50 +07:00
< / div >
< p className = "text-sm mb-6 max-w-sm leading-relaxed text-slate-500 font-medium" >
Penyedia layanan perangkat lunak kasir ( SaaS POS ) terkemuka di Indonesia . Misi kami adalah memberdayakan UMKM untuk naik kelas melalui teknologi kasir yang cerdas dan mudah .
< / p >
< / div >
< div >
< h4 className = "text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest" > Produk < / h4 >
< ul className = "space-y-3 text-sm font-medium" >
< li > < a href = "#" className = "hover:text-teal-600 transition-colors" > Aplikasi Kasir POS < / a > < / li >
< li > < a href = "#" className = "hover:text-teal-600 transition-colors" > AI Assistance < / a > < / li >
< li > < a href = "#" className = "hover:text-teal-600 transition-colors" > Manajemen Inventori < / a > < / li >
< / ul >
< / div >
< div >
< h4 className = "text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest" > Industri < / h4 >
< ul className = "space-y-3 text-sm font-medium" >
{ industries . map ( ind => (
< li key = { ind . id } > < button onClick = { ( ) => { setActiveIndustryTab ( ind . id ) ; setCurrentPage ( 'industry-detail' ) ; } } className = "hover:text-teal-600 transition-colors text-left" > { ind . title } < / button > < / li >
) ) }
< / ul >
< / div >
< div >
< h4 className = "text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest" > Bantuan < / h4 >
< ul className = "space-y-3 text-sm font-medium" >
< li > < a href = "#" className = "hover:text-teal-600 transition-colors" > FAQ < / a > < / li >
< li > < a href = "#" className = "hover:text-teal-600 transition-colors" > Kebijakan Privasi < / a > < / li >
< li > < a href = "#" className = "hover:text-teal-600 transition-colors" > Hubungi Kami < / a > < / li >
< / ul >
< / div >
< / div >
< div className = "pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-medium text-slate-500" >
< p > © { new Date ( ) . getFullYear ( ) } PT Sada Teknologi Indonesia . All rights reserved . < / p >
< div className = "flex gap-4" >
< a href = "#" className = "hover:text-teal-600" > Google Play < / a >
< a href = "#" className = "hover:text-teal-600" > App Store < / a >
< / div >
< / div >
< / div >
< / footer >
) ;
const renderHomePage = ( ) => (
< >
{ /* HERO SECTION */ }
< section className = "pt-32 pb-20 lg:pt-40 lg:pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative overflow-hidden" >
< div className = "absolute top-0 right-0 -translate-y-12 translate-x-1/3 w-96 h-96 bg-teal-50 rounded-full blur-3xl opacity-50 z-0" > < / div >
< div className = "absolute top-40 left-0 -translate-x-1/2 w-64 h-64 bg-red-50 rounded-full blur-3xl opacity-50 z-0" > < / div >
< div className = "text-center max-w-4xl mx-auto relative z-10" >
< div className = "inline-flex items-center gap-2 px-4 py-2 rounded-full bg-red-50 text-red-600 font-bold text-xs md:text-sm mb-6 border border-red-100 shadow-sm" >
< Sparkles className = "w-4 h-4" / >
Mitra Digital # 1 untuk UMKM Naik Kelas
< / div >
< h1 className = "text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.15] mb-6 tracking-tight" >
Sistem Kasir Pintar dengan < br className = "hidden md:block" / >
Teknologi < span className = "text-teal-600" > AI Assistance < / span >
< / h1 >
< p className = "text-lg sm:text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed" >
Tinggalkan cara manual . Kendalikan penjualan , pantau stok bahan baku , hingga analisis laba rugi secara real - time dari satu dashboard profesional Kulakpos . id .
< / p >
< div className = "flex flex-col sm:flex-row items-center gap-4 justify-center" >
< a href = "/plans" className = "w-full sm:w-auto bg-teal-600 hover:bg-teal-700 text-white px-8 py-4 rounded-lg text-base font-bold transition-all shadow-lg shadow-teal-600/20 flex items-center justify-center gap-2 group decoration-transparent" >
Coba Gratis Sekarang < ChevronRight className = "w-5 h-5 group-hover:translate-x-1 transition-transform" / >
< / a >
2026-04-01 09:19:43 +07:00
< a href = "/contact-us" className = "w-full sm:w-auto bg-white border-2 border-slate-200 hover:border-red-600 hover:text-red-600 text-slate-700 px-8 py-4 rounded-lg text-base font-bold transition-all text-center decoration-transparent" >
2026-03-29 13:02:50 +07:00
Jadwalkan Demo
2026-04-01 09:19:43 +07:00
< / a >
2026-03-29 13:02:50 +07:00
< / div >
< / div >
< div className = "mt-16 relative mx-auto max-w-5xl z-10 px-4 sm:px-0" >
< div className = "relative rounded-3xl p-2 md:p-3 bg-white/50 backdrop-blur-md border border-slate-200 shadow-2xl" >
< img
src = "https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
alt = ""
className = "rounded-2xl w-full object-cover shadow-sm h-[350px] md:h-[550px]"
/ >
{ /* AI Insight Badge */ }
< div className = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/90 backdrop-blur-md p-6 rounded-2xl shadow-2xl border border-teal-200 flex flex-col gap-4 max-w-xs animate-pulse z-30" >
< div className = "flex items-center gap-3" >
< div className = "w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md" >
< Bot className = "text-white w-6 h-6" / >
< / div >
< div > < h4 className = "font-bold text-slate-900 text-sm" > Saran AI Hari Ini < / h4 > < / div >
< / div >
< p className = "text-xs text-slate-600 leading-relaxed font-medium italic" > "Omset Anda naik 15% dibanding hari Senin lalu. Stok Gula menipis, disarankan restock 20 unit sekarang." < / p >
< / div >
{ /* Sales/Omset Floating Badge */ }
< div className = "absolute bottom-4 sm:bottom-8 left-2 sm:left-6 bg-white p-3 sm:p-4 rounded-xl shadow-xl border border-slate-100 z-20 flex items-center gap-3 sm:gap-4 animate-bounce" style = { { animationDuration : '3s' } } >
< div className = "w-10 h-10 sm:w-12 sm:h-12 bg-teal-100 rounded-full flex items-center justify-center flex-shrink-0" >
< BarChart3 className = "w-5 h-5 sm:w-6 sm:h-6 text-teal-600" / >
< / div >
< div >
< p className = "text-[10px] sm:text-xs text-slate-500 font-bold uppercase tracking-wider" > Pendapatan Hari Ini < / p >
< p className = "text-base sm:text-lg font-black text-slate-900" > + Rp 4.500 .000 < / p >
< / div >
< / div >
{ /* Inventory Floating Badge */ }
< div className = "absolute top-8 sm:top-12 right-2 sm:right-6 bg-white p-3 sm:p-4 rounded-xl shadow-xl border border-slate-100 z-20 flex items-center gap-3 sm:gap-4 animate-bounce" style = { { animationDuration : '4s' , animationDelay : '1s' } } >
< div className = "w-10 h-10 sm:w-12 sm:h-12 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0" >
< Box className = "w-5 h-5 sm:w-6 sm:h-6 text-red-600" / >
< / div >
< div >
< p className = "text-[10px] sm:text-xs text-slate-500 font-bold uppercase tracking-wider" > Update Stok Pusat < / p >
< p className = "text-sm sm:text-base font-black text-slate-900" > Tersinkronisasi < / p >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* AI SPOTLIGHT */ }
< section id = "ai" className = "py-24 bg-teal-900 relative overflow-hidden" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10" >
< div className = "grid lg:grid-cols-2 gap-16 items-center" >
< div className = "text-white" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-400 font-bold text-xs mb-6 border border-red-500/30" >
< BrainCircuit className = "w-4 h-4" / > Teknologi AI
< / div >
< h2 className = "text-3xl md:text-5xl font-black mb-8 leading-tight text-teal-400" > Asisten Cerdas Business Owner < / h2 >
< p className = "text-teal-100 text-lg mb-10 leading-relaxed" > Lupakan ribetnya membaca tabel laporan manual . AI Kulakpos melakukan analisis mendalam untuk Anda secara otomatis . < / p >
< div className = "space-y-6" >
{ [ "Analisis Omset & Revenue" , "Laporan Laba Rugi (P&L)" , "Prediksi Inventori Otomatis" ] . map ( ( title , idx ) => (
< div key = { idx } className = "flex gap-4" > < CheckCircle className = "w-6 h-6 text-teal-400" / > < span className = "font-bold text-lg" > { title } < / span > < / div >
) ) }
< / div >
< / div >
< div className = "bg-white/10 backdrop-blur-xl rounded-3xl p-8 border border-white/20 shadow-2xl text-white" >
< div className = "flex justify-between mb-8" > < span className = "font-bold" > AI Dashboard < / span > < Bot className = "w-6 h-6" / > < / div >
< div className = "p-4 bg-teal-800/40 rounded-xl mb-4 border border-teal-700" >
< span className = "text-xs font-bold text-teal-300" > ESTIMASI PROFIT < / span >
< div className = "text-2xl font-black" > Rp 24.500 .000 < / div >
< / div >
< div className = "p-4 bg-white/5 rounded-xl border border-white/10" >
< div className = "h-2 bg-white/10 rounded-full flex overflow-hidden" >
< div className = "bg-teal-500 w-[60%]" > < / div > < div className = "bg-red-500 w-[25%]" > < / div >
< / div >
< div className = "flex justify-between mt-3 text-xs font-bold" > < span > FnB 60 % < / span > < span > Retail 25 % < / span > < / div >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* FITUR POS SECTION */ }
< section id = "fitur" className = "py-24 bg-white border-b border-slate-100" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center max-w-3xl mx-auto mb-16" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm" >
< Star className = "w-4 h-4" / > Modul Terintegrasi
< / div >
< h2 className = "text-3xl font-extrabold text-slate-900 mb-4 tracking-tight" > Ekosistem Fitur Terlengkap < / h2 >
< p className = "text-slate-600 text-lg" > Semua modul operasional yang Anda butuhkan untuk memantau dan mengembangkan bisnis dalam satu aplikasi cerdas . < / p >
< / div >
< div className = "grid md:grid-cols-2 lg:grid-cols-4 gap-6" >
{ [
{ icon : < MonitorSmartphone className = "w-6 h-6" / > , title : "Sales Management" , desc : "Kelola transaksi kasir, pencatatan pesanan, dan riwayat penjualan dengan cepat." } ,
{ icon : < ShoppingCart className = "w-6 h-6" / > , title : "Purchase Management" , desc : "Pantau PO (Purchase Order) dan pembelian stok barang ke supplier." } ,
{ icon : < GitMerge className = "w-6 h-6" / > , title : "3rd Party Management" , desc : "Integrasi sistem dengan layanan pihak ketiga, payment gateway, dan kurir." } ,
{ icon : < TrendingUp className = "w-6 h-6" / > , title : "Pricing Management" , desc : "Atur harga dinamis, harga grosir, diskon, dan tier pricing dengan mudah." } ,
{ icon : < Package className = "w-6 h-6" / > , title : "Inventory Management" , desc : "Pantau pergerakan barang, stok opname, dan resep bahan baku (BOM)." } ,
{ icon : < Warehouse className = "w-6 h-6" / > , title : "Warehouse Management" , desc : "Kelola transfer dan ketersediaan stok antar gudang pusat secara real-time." } ,
{ icon : < Store className = "w-6 h-6" / > , title : "Multi Branch Management" , desc : "Pantau dan sinkronisasi data puluhan cabang dari satu dashboard." } ,
{ icon : < Bot className = "w-6 h-6" / > , title : "AI Assistance" , desc : "Analisis cerdas untuk performa omset, laba rugi, dan prediksi restock otomatis." }
] . map ( ( feature , idx ) => (
< div key = { idx } className = "p-6 border border-slate-200 rounded-2xl hover:shadow-xl hover:border-teal-200 transition-all bg-slate-50 group" >
< div className = "w-12 h-12 bg-white text-teal-600 rounded-xl flex items-center justify-center mb-5 shadow-sm group-hover:bg-teal-600 group-hover:text-white transition-colors" >
{ feature . icon }
< / div >
< h3 className = "text-lg font-bold text-slate-900 mb-2" > { feature . title } < / h3 >
< p className = "text-slate-600 text-sm leading-relaxed" > { feature . desc } < / p >
< / div >
) ) }
< / div >
< / div >
< / section >
{ /* PERANGKAT SECTION */ }
< section id = "perangkat" className = "py-24 bg-slate-50 border-y border-slate-100" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center max-w-3xl mx-auto mb-16" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm" >
< MonitorSmartphone className = "w-4 h-4" / > Multi Platform
< / div >
< h2 className = "text-3xl font-extrabold text-slate-900 mb-4 tracking-tight" > Fleksibel di Semua Perangkat Anda < / h2 >
< p className = "text-slate-600 text-lg" > Tanpa perlu investasi mesin kasir mahal . Gunakan perangkat cerdas yang sudah Anda miliki untuk mulai berjualan . < / p >
< / div >
< div className = "grid md:grid-cols-3 gap-8" >
{ /* Laptop/PC Card */ }
< div className = "bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-teal-300 transition-all group" >
< div className = "h-48 w-full relative" >
< img
src = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt = ""
className = "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/ >
< div className = "absolute inset-0 bg-teal-900/10 group-hover:bg-transparent transition-colors" > < / div >
< div className = "absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-teal-600" >
< Laptop className = "w-6 h-6" / >
< / div >
< / div >
< div className = "p-8 text-center" >
< h3 className = "text-xl font-extrabold text-slate-900 mb-3" > Laptop & PC < / h3 >
< p className = "text-slate-600 text-sm leading-relaxed" >
Akses dashboard backoffice via browser . Sangat ideal untuk pantau analitik mendalam , manajemen stok pusat , dan laporan keuangan komprehensif .
< / p >
< / div >
< / div >
{ /* Tablet Card */ }
< div className = "bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-red-300 transition-all group" >
< div className = "h-48 w-full relative" >
< img
src = "https://images.unsplash.com/photo-1556742044-3c52d6e88c62?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt = ""
className = "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/ >
< div className = "absolute inset-0 bg-red-900/10 group-hover:bg-transparent transition-colors" > < / div >
< div className = "absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-red-600" >
< Tablet className = "w-6 h-6" / >
< / div >
< / div >
< div className = "p-8 text-center" >
< h3 className = "text-xl font-extrabold text-slate-900 mb-3" > Tablet Android < / h3 >
< p className = "text-slate-600 text-sm leading-relaxed" >
Tampilan antarmuka kasir yang lega dan interaktif . Memberikan kesan elegan di meja kasir restoran , butik , atau toko retail modern Anda .
< / p >
< / div >
< / div >
{ /* Smartphone Card */ }
< div className = "bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-teal-300 transition-all group" >
< div className = "h-48 w-full relative" >
< img
src = "https://images.unsplash.com/photo-1512428559087-560fa5ceab42?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt = ""
className = "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/ >
< div className = "absolute inset-0 bg-teal-900/10 group-hover:bg-transparent transition-colors" > < / div >
< div className = "absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-teal-600" >
< Smartphone className = "w-6 h-6" / >
< / div >
< / div >
< div className = "p-8 text-center" >
< h3 className = "text-xl font-extrabold text-slate-900 mb-3" > Smartphone < / h3 >
< p className = "text-slate-600 text-sm leading-relaxed" >
Mobilitas maksimal . Gunakan untuk pelayan ( waiter ) mencatat pesanan dari meja , atau operasional bisnis dinamis seperti food truck .
< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* SOLUTIONS SECTION */ }
< section id = "solusi" className = "py-24 bg-white" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "flex flex-col lg:flex-row gap-16 items-center" >
< div className = "flex-1 w-full" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm" >
< Store className = "w-4 h-4" / > Solusi Spesifik
< / div >
< h2 className = "text-3xl font-extrabold text-slate-900 mb-6 tracking-tight" > Satu Platform , Solusi Berbagai Industri < / h2 >
< div className = "space-y-3" >
{ industries . map ( ( industry ) => (
< div
key = { industry . id }
onClick = { ( ) => setActiveIndustryTab ( industry . id ) }
className = { ` p-5 rounded-xl border transition-all cursor-pointer relative ${ activeIndustryTab === industry . id ? 'bg-slate-50 border-teal-200' : 'bg-white border-slate-100' } ` }
>
< div className = "flex items-center gap-4" >
< div className = { ` w-12 h-12 rounded-xl flex items-center justify-center ${ activeIndustryTab === industry . id ? 'bg-teal-600 text-white shadow-md' : 'bg-slate-100 text-slate-500' } ` } >
{ industry . icon }
< / div >
< h4 className = "font-bold text-lg" > { industry . title } < / h4 >
< / div >
< / div >
) ) }
< / div >
< / div >
< div className = "flex-1 w-full" >
< div className = "bg-slate-50 p-8 rounded-3xl border border-slate-200 shadow-xl min-h-[420px] flex flex-col justify-between" >
< div >
< h3 className = "text-2xl font-extrabold text-slate-900 mb-6" > { activeIndustry ? . title } < / h3 >
< div className = "flex flex-wrap gap-2.5" >
{ activeIndustry ? . items . map ( ( item , idx ) => (
< span key = { idx } className = "inline-flex items-center px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-semibold text-sm shadow-sm" > < CheckCircle className = "w-4 h-4 mr-2 text-teal-500" / > { item } < / span >
) ) }
< / div >
< / div >
< button
onClick = { ( ) => setCurrentPage ( 'industry-detail' ) }
className = "mt-8 bg-teal-600 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 w-max hover:bg-teal-700 transition-colors"
>
Pelajari Solusi { activeIndustry ? . title } < ArrowRight className = "w-5 h-5" / >
< / button >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* PRICING SECTION */ }
< section id = "harga" className = "py-24 bg-slate-50" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center max-w-3xl mx-auto mb-16" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm" >
< CreditCard className = "w-4 h-4" / > Harga Terbaik
< / div >
< h2 className = "text-3xl font-extrabold text-slate-900 mb-4 tracking-tight" > Investasi Transparan UMKM < / h2 >
< p className = "text-lg text-slate-600" > Skema harga yang ramah di kantong tanpa biaya tersembunyi . Skalakan sesuai pertumbuhan bisnis Anda . < / p >
< / div >
< div className = "grid md:grid-cols-3 gap-8 max-w-6xl mx-auto" >
{ /* Basic */ }
< div className = "bg-white rounded-3xl p-8 border border-slate-200 flex flex-col shadow-sm" >
< h3 className = "text-xl font-extrabold text-slate-900 mb-2" > Basic < / h3 >
< div className = "text-4xl font-black text-slate-900 mb-6 pb-6 border-b" > Rp 50. k < span className = "text-sm font-medium" > / bln < / span > < / div >
< ul className = "space-y-4 mb-8 flex-1" >
{ [ "POS Full Features" , "Inventory Management" , "Finance & Accounting" , "Purchase Management" , "Warehouse Management" , "3rd Party Management" ] . map ( f => (
< li key = { f } className = "flex gap-2 text-sm font-medium" > < CheckCircle className = "w-5 h-5 text-teal-500" / > { f } < / li >
) ) }
< li className = "flex gap-2 text-sm font-medium italic opacity-50" > < X className = "w-5 h-5" / > Multi - branch Allowed < / li >
< / ul >
< button className = "w-full py-3 rounded-xl border-2 font-bold hover:border-teal-600 transition-colors" > Pilih Basic < / button >
< / div >
{ /* Pro */ }
< div className = "bg-teal-900 rounded-3xl p-8 border border-teal-800 flex flex-col transform md:-translate-y-4 shadow-2xl text-white" >
< div className = "bg-red-600 text-white px-4 py-1.5 rounded-full text-[10px] font-black uppercase w-max mb-4" > Paling Laris < / div >
< h3 className = "text-xl font-extrabold mb-2" > Pro Business < / h3 >
< div className = "text-4xl font-black mb-6 pb-6 border-b text-teal-400" > Rp 100. k < span className = "text-sm font-medium text-white" > / bln < / span > < / div >
< ul className = "space-y-4 mb-8 flex-1" >
< li className = "flex gap-2 text-sm font-bold text-teal-300" > < Bot className = "w-5 h-5" / > Akses AI Assistance < / li >
{ [ "POS Full Features" , "Inventory Management" , "Finance & Accounting" , "Purchase Management" , "Warehouse Management" , "3rd Party Management" , "Multi-branch Allowed" ] . map ( f => (
< li key = { f } className = "flex gap-2 text-sm font-medium" > < CheckCircle className = "w-5 h-5 text-teal-400" / > { f } < / li >
) ) }
< / ul >
< button className = "w-full py-3 rounded-xl bg-teal-500 text-teal-950 font-black hover:bg-teal-400 transition-all" > Pilih Pro < / button >
< / div >
{ /* Enterprise */ }
< div className = "bg-white rounded-3xl p-8 border border-slate-200 flex flex-col shadow-sm" >
< h3 className = "text-xl font-extrabold text-slate-900 mb-2" > Enterprise < / h3 >
< div className = "text-2xl font-black text-slate-900 mb-6 pb-6 border-b" > Hubungi Kami < / div >
< ul className = "space-y-4 mb-8 flex-1" >
{ [ "Custom AI Model" , "Unlimited Outlets" , "SLA Support 24/7" , "Dedicated Manager" ] . map ( f => (
< li key = { f } className = "flex gap-2 text-sm font-medium" > < CheckCircle className = "w-5 h-5 text-teal-500" / > { f } < / li >
) ) }
< / ul >
< button className = "w-full py-3 rounded-xl border-2 font-bold hover:bg-slate-50 transition-colors" > Konsultasi Sales < / button >
< / div >
< / div >
< / div >
< / section >
< / >
) ;
const renderIndustryDetail = ( ) => (
< div className = "pt-20" >
{ /* Detail Hero */ }
< section className = "relative h-[400px] md:h-[500px] overflow-hidden" >
< img src = { activeIndustry ? . image } alt = { activeIndustry ? . title } className = "w-full h-full object-cover" / >
< div className = "absolute inset-0 bg-gradient-to-r from-teal-950 via-teal-900/70 to-transparent" > < / div >
< div className = "absolute inset-0 max-w-7xl mx-auto px-4 flex flex-col justify-center text-white" >
< button
onClick = { ( ) => setCurrentPage ( 'home' ) }
className = "flex items-center gap-2 text-teal-400 font-bold mb-8 hover:text-white transition-colors w-max"
>
< ArrowLeft className = "w-5 h-5" / > Kembali ke Beranda
< / button >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-300 font-bold text-xs mb-4 border border-red-500/30 w-max" >
< Sparkles className = "w-4 h-4" / > Spesialisasi { activeIndustry ? . title }
< / div >
< h1 className = "text-4xl md:text-6xl font-black mb-6 max-w-3xl leading-tight" >
{ activeIndustry ? . headline }
< / h1 >
< p className = "text-lg md:text-xl text-teal-100 max-w-2xl leading-relaxed" >
{ activeIndustry ? . description }
< / p >
< / div >
< / section >
{ /* Industry Specific Features */ }
< section className = "py-24 bg-white" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center max-w-3xl mx-auto mb-16" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm" >
< Star className = "w-4 h-4" / > Fitur Spesifik
< / div >
< h2 className = "text-3xl font-extrabold text-slate-900 tracking-tight" > Modul Khusus { activeIndustry ? . title } < / h2 >
< / div >
< div className = "grid md:grid-cols-3 gap-8" >
{ activeIndustry ? . features . map ( ( feat , idx ) => (
< div key = { idx } className = "p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:border-teal-200 transition-all group" >
< div className = "w-14 h-14 bg-white rounded-xl flex items-center justify-center shadow-md mb-6 text-teal-600 group-hover:bg-teal-600 group-hover:text-white transition-all" >
{ React . cloneElement ( feat . icon , { className : "w-7 h-7" } ) }
< / div >
< h3 className = "text-xl font-black text-slate-900 mb-4" > { feat . name } < / h3 >
< p className = "text-slate-600 leading-relaxed text-sm" >
{ feat . detail || feat . desc }
< / p >
< / div >
) ) }
< / div >
< / div >
< / section >
{ /* List of Sub-industries */ }
< section className = "py-24 bg-slate-50 border-y border-slate-200" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center mb-16" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm" >
< Users className = "w-4 h-4" / > Fleksibilitas Skala
< / div >
< h2 className = "text-3xl font-black text-center text-slate-900" > Mendukung Berbagai Jenis { activeIndustry ? . title } < / h2 >
< / div >
< div className = "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4" >
{ activeIndustry ? . items . map ( ( item , idx ) => (
< div key = { idx } className = "bg-white p-4 rounded-xl border border-slate-200 text-center font-bold text-slate-700 shadow-sm hover:text-teal-600 transition-colors" >
{ item }
< / div >
) ) }
< / div >
< / div >
< / section >
{ /* Specialized CTA */ }
< section className = "py-24 bg-teal-600 text-white" >
< div className = "max-w-4xl mx-auto px-4 text-center" >
< div className = "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-100 font-bold text-xs mb-6 border border-red-400/30 shadow-sm" >
< Zap className = "w-4 h-4" / > Mulai Sekarang
< / div >
< h2 className = "text-3xl md:text-4xl font-black mb-6" > Siap Menjalankan Bisnis { activeIndustry ? . title } yang Lebih Efisien ? < / h2 >
< p className = "text-xl text-teal-100 mb-10 font-medium" > Ribuan pemilik bisnis seperti Anda telah bertransformasi bersama Kulakpos . id . < / p >
< div className = "flex flex-col sm:flex-row gap-4 justify-center" >
< a href = "/plans" className = "bg-white text-teal-600 px-10 py-4 rounded-xl font-black hover:bg-teal-50 transition-colors inline-block decoration-transparent" > Mulai Gratis Sekarang < / a >
< button className = "bg-teal-700 text-white px-10 py-4 rounded-xl font-black border border-teal-500 hover:bg-teal-800 transition-colors" > Tanya Tim Kami < / button >
< / div >
< / div >
< / section >
< / div >
) ;
return (
< div className = "min-h-screen font-sans text-slate-800 bg-white" >
{ renderNavbar ( ) }
< main >
{ currentPage === 'home' ? renderHomePage ( ) : renderIndustryDetail ( ) }
< / main >
{ renderFooter ( ) }
{ /* WHATSAPP WIDGET */ }
< a
href = "https://wa.me/6281234567890?text=Halo%20Kulakpos.id,%20saya%20tertarik%20dengan%20solusi%20POS%20dan%20AI%20Assistance%20Anda."
target = "_blank"
rel = "noopener noreferrer"
className = "fixed bottom-6 right-6 z-[60] group flex items-center gap-3"
>
< div className = "bg-white px-4 py-2 rounded-full shadow-xl border border-slate-100 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0 pointer-events-none hidden md:block" >
< span className = "text-sm font-bold text-slate-700" > Butuh Konsultasi ? < / span >
< / div >
< div className = "w-14 h-14 bg-[#25D366] rounded-full shadow-2xl flex items-center justify-center text-white relative hover:scale-110 transition-transform duration-300" >
< div className = "absolute inset-0 bg-[#25D366] rounded-full animate-ping opacity-25" > < / div >
< svg viewBox = "0 0 24 24" className = "w-8 h-8 fill-current" >
< path d = "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.653a11.888 11.888 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" / >
< / svg >
< / div >
< / a >
< / div >
) ;
}
