yanto/kulakpos_web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perbaikan Button Pilih Basic dan Pilih Pro
All checks were successful
Build, Push and Deploy / build-and-push (push) Successful in 3m13s
Details
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 15s
Details
Build, Push and Deploy / deploy-staging (push) Successful in 43s
Details
Build, Push and Deploy / deploy-production (push) Has been skipped
Details
Build, Push and Deploy / cleanup (push) Successful in 1s
Details

Browse Source
This commit is contained in:
triagungbiantoro
2026-04-02 09:12:29 +07:00
parent 80f4d8f046
commit ac43e83b38
1 changed files with 207 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
resources/js/App.jsx
View File

@@ -6,13 +6,16 @@ import {
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
Utensils, Zap, Clock, UserCheck, CalendarDays, History, Lock, Wallet
} 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'
const [currentPage, setCurrentPage] = useState('home'); // 'home', 'industry-detail', or 'checkout'
const [selectedPlan, setSelectedPlan] = useState(null);
const [paymentMethod, setPaymentMethod] = useState('credit_card');
const [selectedEWallet, setSelectedEWallet] = useState('gopay');
// Scroll to top when changing page
useEffect(() => {
@@ -80,6 +83,13 @@ export default function App() {
const activeIndustry = industries.find(i => i.id === activeIndustryTab);
// Generate Date for Next Month
const getNextMonthDate = () => {
const nextMonth = new Date();
nextMonth.setMonth(nextMonth.getMonth() + 1);
return nextMonth.toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });
};
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">
@@ -100,9 +110,13 @@ export default function App() {
<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">
<button
type="button"
onClick={() => { setSelectedPlan({ name: 'Pro Business', price: 100000 }); setCurrentPage('checkout'); window.scrollTo(0, 0); }}
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>
</button>
</div>
<div className="md:hidden flex items-center">
@@ -184,9 +198,13 @@ export default function App() {
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">
<button
type="button"
onClick={() => { setSelectedPlan({ name: 'Pro Business', price: 100000 }); setCurrentPage('checkout'); window.scrollTo(0, 0); }}
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>
<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">
Jadwalkan Demo
</a>
@@ -451,7 +469,13 @@ export default function App() {
))}
<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>
<button
type="button"
onClick={() => { setSelectedPlan({ name: 'Basic', price: 50000 }); setCurrentPage('checkout'); window.scrollTo(0, 0); }}
className="w-full py-3 rounded-xl border-2 font-bold hover:border-teal-600 text-slate-700 hover:text-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">
@@ -464,7 +488,13 @@ export default function App() {
<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>
<button
type="button"
onClick={() => { setSelectedPlan({ name: 'Pro Business', price: 100000 }); setCurrentPage('checkout'); window.scrollTo(0, 0); }}
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">
@@ -571,12 +601,179 @@ export default function App() {
</div>
);
const renderCheckoutPage = () => {
// Default fallback if directly opened without selecting
const plan = selectedPlan || { name: 'Pro Business', price: 100000 };
return (
<div className="min-h-screen bg-slate-50 pt-28 pb-20">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<button
onClick={() => setCurrentPage('home')}
className="flex items-center gap-2 text-slate-500 hover:text-teal-600 font-bold mb-8 transition-colors"
>
<ArrowLeft className="w-5 h-5" /> Kembali
</button>
<div className="grid lg:grid-cols-3 gap-8">
{/* Left Column: Form & Payment Methods */}
<div className="lg:col-span-2 space-y-8">
<div className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
<h2 className="text-2xl font-extrabold text-slate-900 mb-6">Detail Pendaftaran</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-bold text-slate-700 mb-2">Nama Lengkap</label>
<input type="text" className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all" placeholder="John Doe" />
</div>
<div>
<label className="block text-sm font-bold text-slate-700 mb-2">Email Perusahaan</label>
<input type="email" className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all" placeholder="john@bisnis.com" />
</div>
<div className="md:col-span-2">
<label className="block text-sm font-bold text-slate-700 mb-2">Nama Toko / Bisnis</label>
<input type="text" className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all" placeholder="Kedai Kopi Nusantara" />
</div>
</div>
</div>
<div className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-6">
<div>
<h2 className="text-2xl font-extrabold text-slate-900">Metode Pembayaran</h2>
<p className="text-sm text-slate-500 font-medium mt-1">Untuk penagihan bulan ke-2</p>
</div>
<div className="flex items-center gap-2 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 w-max">
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Powered by</span>
<span className="font-black text-[#013550] text-lg tracking-tighter">xendit</span>
</div>
</div>
<div className="grid grid-cols-2 gap-4 mb-8">
<div
onClick={() => setPaymentMethod('credit_card')}
className={`p-4 rounded-xl border-2 cursor-pointer flex flex-col items-center gap-3 transition-all ${paymentMethod === 'credit_card' ? 'border-teal-500 bg-teal-50 text-teal-700' : 'border-slate-200 bg-white hover:border-slate-300'}`}
>
<CreditCard className={`w-8 h-8 ${paymentMethod === 'credit_card' ? 'text-teal-600' : 'text-slate-400'}`} />
<span className="font-bold text-sm">Kartu Kredit</span>
</div>
<div
onClick={() => setPaymentMethod('ewallet')}
className={`p-4 rounded-xl border-2 cursor-pointer flex flex-col items-center gap-3 transition-all ${paymentMethod === 'ewallet' ? 'border-teal-500 bg-teal-50 text-teal-700' : 'border-slate-200 bg-white hover:border-slate-300'}`}
>
<Wallet className={`w-8 h-8 ${paymentMethod === 'ewallet' ? 'text-teal-600' : 'text-slate-400'}`} />
<span className="font-bold text-sm">E-Wallet</span>
</div>
</div>
{/* Conditional Form Inputs */}
{paymentMethod === 'credit_card' ? (
<div className="space-y-6 animate-fade-in-up">
<div>
<label className="block text-sm font-bold text-slate-700 mb-2">Nomor Kartu</label>
<div className="relative">
<input type="text" className="w-full px-4 py-3 pl-12 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all" placeholder="0000 0000 0000 0000" />
<CreditCard className="w-5 h-5 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" />
</div>
</div>
<div className="grid grid-cols-2 gap-6">
<div>
<label className="block text-sm font-bold text-slate-700 mb-2">Masa Berlaku (MM/YY)</label>
<input type="text" className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all" placeholder="12/26" />
</div>
<div>
<label className="block text-sm font-bold text-slate-700 mb-2">CVC</label>
<input type="text" className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-2 focus:ring-teal-200 outline-none transition-all" placeholder="123" />
</div>
</div>
</div>
) : (
<div className="space-y-6 animate-fade-in-up p-6 bg-slate-50 rounded-xl border border-slate-200">
<label className="block text-sm font-bold text-slate-700 mb-2 text-center">Pilih E-Wallet</label>
<div className="grid grid-cols-3 gap-4 mb-2">
<div
onClick={() => setSelectedEWallet('gopay')}
className={`p-3 rounded-xl border-2 cursor-pointer flex items-center justify-center bg-white transition-all ${selectedEWallet === 'gopay' ? 'border-teal-500 ring-2 ring-teal-200' : 'border-slate-200 hover:border-teal-300'}`}
>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Gopay_logo.svg/1200px-Gopay_logo.svg.png" alt="GoPay" className="h-6 object-contain" />
</div>
<div
onClick={() => setSelectedEWallet('ovo')}
className={`p-3 rounded-xl border-2 cursor-pointer flex items-center justify-center bg-white transition-all ${selectedEWallet === 'ovo' ? 'border-teal-500 ring-2 ring-teal-200' : 'border-slate-200 hover:border-teal-300'}`}
>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/OVO_logo.svg/1200px-OVO_logo.svg.png" alt="OVO" className="h-6 object-contain" />
</div>
<div
onClick={() => setSelectedEWallet('shopeepay')}
className={`p-3 rounded-xl border-2 cursor-pointer flex items-center justify-center bg-white transition-all ${selectedEWallet === 'shopeepay' ? 'border-teal-500 ring-2 ring-teal-200' : 'border-slate-200 hover:border-teal-300'}`}
>
<span className="font-extrabold text-[#EE4D2D] text-lg tracking-tight">ShopeePay</span>
</div>
</div>
<p className="text-sm text-slate-600 font-medium text-center mt-4">
Anda akan diarahkan ke aplikasi <strong className="text-slate-900 capitalize">{selectedEWallet === 'gopay' ? 'Gojek' : selectedEWallet === 'ovo' ? 'OVO' : 'Shopee'}</strong> untuk menghubungkan akun {selectedEWallet === 'gopay' ? 'GoPay' : selectedEWallet === 'ovo' ? 'OVO' : 'ShopeePay'} Anda sebagai metode pembayaran langganan.
</p>
</div>
)}
<div className="mt-8 flex items-start gap-3 bg-teal-50 p-4 rounded-xl border border-teal-100">
<Lock className="w-5 h-5 text-teal-600 flex-shrink-0 mt-0.5" />
<p className="text-xs text-teal-800 leading-relaxed font-medium">
Kami menggunakan sistem enkripsi tingkat bank yang diproses secara aman oleh <strong>Xendit</strong>. Detail pembayaran Anda tersimpan aman. Anda tidak akan dikenakan biaya apapun hari ini.
</p>
</div>
</div>
</div>
{/* Right Column: Order Summary */}
<div className="lg:col-span-1">
<div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xl sticky top-28">
<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">
<Sparkles className="w-4 h-4" /> 1 Bulan Gratis
</div>
<h3 className="text-xl font-extrabold text-slate-900 mb-6 pb-6 border-b border-slate-100">Ringkasan Pesanan</h3>
<div className="space-y-4 mb-6">
<div className="flex justify-between items-center">
<span className="font-bold text-slate-700">Paket {plan.name}</span>
<span className="font-medium text-slate-600">Rp {(plan.price).toLocaleString('id-ID')}</span>
</div>
<div className="flex justify-between items-center text-red-600">
<span className="font-bold">Promo 1 Bulan Gratis</span>
<span className="font-bold">- Rp {(plan.price).toLocaleString('id-ID')}</span>
</div>
</div>
<div className="pt-6 border-t border-slate-100 mb-6">
<div className="flex justify-between items-end mb-2">
<span className="text-sm font-bold text-slate-500 uppercase tracking-widest">Total Hari Ini</span>
<span className="text-3xl font-black text-teal-600">Rp 0</span>
</div>
</div>
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-8">
<p className="text-xs text-slate-600 leading-relaxed font-medium">
Penagihan normal sebesar <strong className="text-slate-900">Rp {(plan.price).toLocaleString('id-ID')} / bulan</strong> akan dimulai pada tanggal <strong className="text-slate-900">{getNextMonthDate()}</strong>. Anda dapat membatalkan langganan kapan saja sebelum tanggal tersebut.
</p>
</div>
<button className="w-full bg-teal-600 text-white py-4 rounded-xl font-black text-lg shadow-lg hover:bg-teal-700 transition-all flex justify-center items-center gap-2">
Mulai Uji Coba Gratis
</button>
</div>
</div>
</div>
</div>
</div>
);
};
return (
<div className="min-h-screen font-sans text-slate-800 bg-white">
{renderNavbar()}
<main>
{currentPage === 'home' ? renderHomePage() : renderIndustryDetail()}
<main className="flex-1">
{currentPage === 'home' && renderHomePage()}
{currentPage === 'industry-detail' && renderIndustryDetail()}
{currentPage === 'checkout' && renderCheckoutPage()}
{/* MOBILE MENU DRAWER OUTSIDE NAVBAR */}
{isMenuOpen && (