harga pada beranda terhubung ke manage plans di dashboard admin
All checks were successful
Build, Push and Deploy / build-and-push (push) Successful in 3m27s
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 16s
Build, Push and Deploy / deploy-staging (push) Successful in 31s
Build, Push and Deploy / deploy-production (push) Has been skipped

This commit is contained in:
triagungbiantoro
2026-04-25 21:57:25 +07:00
parent f25542ea0d
commit 417b7b7453
21707 changed files with 179493 additions and 328 deletions

View File

@@ -458,55 +458,98 @@ export default function App() {
<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
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">
<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
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">
<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 className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{(window.plans && window.plans.length > 0) ? (
window.plans.map((plan, idx) => {
const isFeatured = window.plans.length === 3 ? idx === 1 : idx === window.plans.length - 1;
const features = typeof plan.features === 'string' ? JSON.parse(plan.features) : (plan.features || {});
return (
<div key={plan.id} className={`${isFeatured ? 'bg-teal-900 text-white transform md:-translate-y-4 shadow-2xl' : 'bg-white text-slate-900 border-slate-200 shadow-sm'} rounded-3xl p-8 border flex flex-col relative`}>
{isFeatured && <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 ${isFeatured ? 'text-white' : 'text-slate-900'}`}>{plan.subscriptionName}</h3>
<div className={`text-4xl font-black mb-6 pb-6 border-b ${isFeatured ? 'text-teal-400 border-teal-800' : 'text-slate-900 border-slate-100'}`}>
Rp {Number(plan.offerPrice || plan.subscriptionPrice).toLocaleString('id-ID')}
<span className={`text-sm font-medium ${isFeatured ? 'text-white' : 'text-slate-500'}`}> /{plan.duration === 'Monthly' ? 'bln' : (plan.duration === 'Yearly' ? 'thn' : plan.duration)}</span>
</div>
<ul className="space-y-4 mb-8 flex-1">
{Object.values(features).map((feat, fidx) => (
<li key={fidx} className="flex gap-2 text-sm font-medium">
{feat[1] === 'True' || feat[1] === true || feat[1] === '1' ? (
<CheckCircle className={`w-5 h-5 ${isFeatured ? 'text-teal-400' : 'text-teal-500'}`} />
) : (
<X className="w-5 h-5 opacity-50" />
)}
{feat[0]}
</li>
))}
</ul>
<button
type="button"
onClick={() => {
setSelectedPlan({ name: plan.subscriptionName, price: Number(plan.offerPrice || plan.subscriptionPrice) });
setCurrentPage('checkout');
window.scrollTo(0, 0);
}}
className={`w-full py-3 rounded-xl font-bold transition-all ${isFeatured ? 'bg-teal-500 text-teal-950 hover:bg-teal-400' : 'border-2 hover:border-teal-600 text-slate-700 hover:text-teal-600'}`}
>
Pilih {plan.subscriptionName}
</button>
</div>
);
})
) : (
/* Fallback if no plans in DB */
<>
{/* 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>
))}
</ul>
<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">
<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
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">
<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>

View File

@@ -6,6 +6,10 @@
<meta name="description" content="Kulakpos.id - Solusi Kasir Pintar (SaaS POS) Terlengkap dengan Teknologi AI Assistance untuk UMKM Naik Kelas.">
<title>KulakPOS | Solusi Kasir Pintar Berbasis AI</title>
@vite('resources/js/app.jsx')
<script>
window.plans = {!! json_encode($plans) !!};
</script>
<meta name="diagnostic" content="v2-dynamic-plans">
</head>
<body>
<div id="app"></div>

File diff suppressed because it is too large Load Diff