612 lines
40 KiB
JavaScript
612 lines
40 KiB
JavaScript
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">
|
|
<div className="flex-shrink-0 flex items-center gap-2 cursor-pointer" onClick={() => setCurrentPage('home')}>
|
|
<div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md">
|
|
<Store className="text-white w-6 h-6" />
|
|
</div>
|
|
<span className="font-extrabold text-2xl text-slate-900 tracking-tight hidden sm:block">
|
|
Kulak<span className="text-teal-600">pos</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="hidden md:flex space-x-8 items-center">
|
|
<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">
|
|
<Bot className="w-4 h-4" /> AI Assistance
|
|
</a>
|
|
<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>
|
|
</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">
|
|
<div className="flex items-center gap-2 mb-6 cursor-pointer" onClick={() => setCurrentPage('home')}>
|
|
<div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md">
|
|
<Store className="text-white w-6 h-6" />
|
|
</div>
|
|
<span className="font-extrabold text-2xl text-slate-900 tracking-tight">
|
|
Kulak<span className="text-teal-600">pos</span>
|
|
</span>
|
|
</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>
|
|
<button 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">
|
|
Jadwalkan Demo
|
|
</button>
|
|
</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>
|
|
);
|
|
} |