diff --git a/package-lock.json b/package-lock.json index 1f22d961..a5c9ddc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "public_html", + "name": "kulakpos_web", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/public/images/gopay.svg b/public/images/gopay.svg new file mode 100644 index 00000000..c33e4f07 --- /dev/null +++ b/public/images/gopay.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/logokulakpos.png b/public/images/logokulakpos.png new file mode 100644 index 00000000..32a8cd37 Binary files /dev/null and b/public/images/logokulakpos.png differ diff --git a/public/images/ovo.png b/public/images/ovo.png new file mode 100644 index 00000000..2b29aeb6 Binary files /dev/null and b/public/images/ovo.png differ diff --git a/public/images/shopeepay.png b/public/images/shopeepay.png new file mode 100644 index 00000000..40f36caa Binary files /dev/null and b/public/images/shopeepay.png differ diff --git a/resources/js/App.jsx b/resources/js/App.jsx index d3cd786e..42c698e8 100644 --- a/resources/js/App.jsx +++ b/resources/js/App.jsx @@ -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,34 +83,40 @@ 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 = () => ( ); @@ -125,13 +135,8 @@ export default function App() {
-
setCurrentPage('home')}> -
- -
- - Kulakpos - +
{ setCurrentPage('home'); window.location.href = '/'; }}> + Kulakpos

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. @@ -176,7 +181,7 @@ export default function App() { const renderHomePage = () => ( <> {/* HERO SECTION */} -

+
@@ -185,7 +190,7 @@ export default function App() { Mitra Digital #1 untuk UMKM Naik Kelas
-

+

Sistem Kasir Pintar dengan
Teknologi AI Assistance

@@ -193,12 +198,16 @@ 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.

- + + + Jadwalkan Demo +
@@ -460,7 +469,13 @@ export default function App() { ))}
  • Multi-branch Allowed
    • - +
    {/* Pro */}
    @@ -473,7 +488,13 @@ export default function App() {
  • {f}
    • ))} - +
    {/* Enterprise */}
    @@ -580,19 +601,222 @@ export default function App() {
    ); + const renderCheckoutPage = () => { + // Default fallback if directly opened without selecting + const plan = selectedPlan || { name: 'Pro Business', price: 100000 }; + + return ( +
    +
    + + +
    + {/* Left Column: Form & Payment Methods */} +
    +
    +

    Detail Pendaftaran

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    +
    +
    +

    Metode Pembayaran

    +

    Untuk penagihan bulan ke-2

    +
    +
    + Powered by + xendit +
    +
    +
    +
    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'}`} + > + + Kartu Kredit +
    +
    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'}`} + > + + E-Wallet +
    +
    + + {/* Conditional Form Inputs */} + {paymentMethod === 'credit_card' ? ( +
    +
    + +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    + ) : ( +
    + +
    +
    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'}`} + > + GoPay +
    +
    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'}`} + > + OVO +
    +
    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'}`} + > + ShopeePay +
    +
    +

    + Anda akan diarahkan ke aplikasi {selectedEWallet === 'gopay' ? 'Gojek' : selectedEWallet === 'ovo' ? 'OVO' : 'Shopee'} untuk menghubungkan akun {selectedEWallet === 'gopay' ? 'GoPay' : selectedEWallet === 'ovo' ? 'OVO' : 'ShopeePay'} Anda sebagai metode pembayaran langganan. +

    +
    + )} + +
    + +

    + Kami menggunakan sistem enkripsi tingkat bank yang diproses secara aman oleh Xendit. Detail pembayaran Anda tersimpan aman. Anda tidak akan dikenakan biaya apapun hari ini. +

    +
    +
    +
    + + {/* Right Column: Order Summary */} +
    +
    +
    + 1 Bulan Gratis +
    +

    Ringkasan Pesanan

    + +
    +
    + Paket {plan.name} + Rp {(plan.price).toLocaleString('id-ID')} +
    +
    + Promo 1 Bulan Gratis + - Rp {(plan.price).toLocaleString('id-ID')} +
    +
    + +
    +
    + Total Hari Ini + Rp 0 +
    +
    + +
    +

    + Penagihan normal sebesar Rp {(plan.price).toLocaleString('id-ID')} / bulan akan dimulai pada tanggal {getNextMonthDate()}. Anda dapat membatalkan langganan kapan saja sebelum tanggal tersebut. +

    +
    + + +
    +
    +
    +
    +
    + ); + }; + return (
    {renderNavbar()} -
    - {currentPage === 'home' ? renderHomePage() : renderIndustryDetail()} -
    +
    + {currentPage === 'home' && renderHomePage()} + {currentPage === 'industry-detail' && renderIndustryDetail()} + {currentPage === 'checkout' && renderCheckoutPage()} + + {/* MOBILE MENU DRAWER OUTSIDE NAVBAR */} + {isMenuOpen && ( +
    +
    +
    + Kulakpos +
    + +
    + +
    +
    + { setIsMenuOpen(false); setCurrentPage('home'); setTimeout(() => document.getElementById('fitur')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="pb-3 border-b border-slate-100 flex items-center justify-between">Fitur POS + { setIsMenuOpen(false); setCurrentPage('home'); setTimeout(() => document.getElementById('ai')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="pb-3 border-b border-slate-100 flex items-center justify-between text-teal-600 font-extrabold">AI Assistance + { setIsMenuOpen(false); setCurrentPage('home'); setTimeout(() => document.getElementById('perangkat')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="pb-3 border-b border-slate-100 flex items-center justify-between">Perangkat + { setIsMenuOpen(false); setCurrentPage('home'); setTimeout(() => document.getElementById('solusi')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="pb-3 border-b border-slate-100 flex items-center justify-between">Solusi Industri + { setIsMenuOpen(false); setCurrentPage('home'); setTimeout(() => document.getElementById('harga')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="pb-3 border-b border-slate-100 flex items-center justify-between">Harga + + +
    +
    + +
    + © {new Date().getFullYear()} PT Sada Teknologi Indonesia. +
    +
    + )} +
    {renderFooter()} {/* WHATSAPP WIDGET */} + placeholder="{{ __('e.g., 6287783275818') }}">
    diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 3fc25e48..795207ca 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -2,7 +2,9 @@ - KulakPOS + + + KulakPOS | Solusi Kasir Pintar Berbasis AI @vite('resources/js/app.jsx') diff --git a/resources/views/layouts/web/partials/footer.blade.php b/resources/views/layouts/web/partials/footer.blade.php index c55febe0..7aa27adc 100644 --- a/resources/views/layouts/web/partials/footer.blade.php +++ b/resources/views/layouts/web/partials/footer.blade.php @@ -4,7 +4,7 @@
    - +

    {{ $page_data['headings']['footer_short_title'] ?? '' }} diff --git a/resources/views/layouts/web/partials/header.blade.php b/resources/views/layouts/web/partials/header.blade.php index 1b085388..44fbd09e 100644 --- a/resources/views/layouts/web/partials/header.blade.php +++ b/resources/views/layouts/web/partials/header.blade.php @@ -114,12 +114,8 @@