Merge branch 'main' of https://kode.sadateknologi.site/yanto/kulakpos_web

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "public_html",
+    "name": "kulakpos_web",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

public/images/gopay.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63" height="16" viewBox="0 0 63 16">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" fill-opacity=".01" d="M0 0h63v16H0z"/>
+        <g transform="translate(0 1.143)">
+            <ellipse cx="6.811" cy="6.857" fill="#00AED6" fill-rule="nonzero" rx="6.811" ry="6.857"/>
+            <path fill="#FFF" d="M10.778 6.644a1.587 1.587 0 0 0-1.652-1.5H4.824a.285.285 0 0 1-.284-.286c0-.158.127-.286.284-.286h4.359a1.362 1.362 0 0 0-.993-1.26 10.97 10.97 0 0 0-3.84 0 1.82 1.82 0 0 0-1.362 1.526 13.711 13.711 0 0 0 0 4.06 1.92 1.92 0 0 0 1.552 1.526 19.13 19.13 0 0 0 4.748 0 1.669 1.669 0 0 0 1.317-1.44c.14-.772.199-1.556.173-2.34zm-1.413.96v.254a.285.285 0 0 1-.284.286.285.285 0 0 1-.284-.286v-.254a.427.427 0 0 1 .284-.746.427.427 0 0 1 .284.746z"/>
+        </g>
+        <g fill="#000" fill-rule="nonzero">
+            <path d="M18.937 11.414a2.921 2.921 0 0 0 2.545 1.252c1.187 0 2.059-.763 2.059-1.8v-.547h-.029c-.65.64-1.537.974-2.444.922a3.955 3.955 0 0 1-3.513-1.94 4.012 4.012 0 0 1-.037-4.033 3.956 3.956 0 0 1 3.478-2.002 3.39 3.39 0 0 1 2.516.892h.029V3.41h2.03v7.428c0 2.159-1.7 3.656-4.089 3.656a4.87 4.87 0 0 1-4.06-1.814l1.515-1.266zm4.519-4.622c0-.863-.973-1.655-2.059-1.655-1.373 0-2.288.835-2.288 2.087-.04.594.18 1.175.605 1.588a1.995 1.995 0 0 0 1.597.557c1.187 0 2.145-.748 2.145-1.684v-.893zM30.916 3.194c2.474 0 4.276 1.77 4.276 4.03 0 2.26-1.802 4.031-4.276 4.031a4.005 4.005 0 0 1-3.692-1.935 4.063 4.063 0 0 1 0-4.191 4.005 4.005 0 0 1 3.692-1.935zm0 1.87a2.152 2.152 0 0 0-2.13 2.17 2.152 2.152 0 0 0 2.15 2.15 2.152 2.152 0 0 0 2.14-2.16 2.075 2.075 0 0 0-.605-1.562 2.045 2.045 0 0 0-1.555-.597zM36.29 3.41h2.03v.676h.03a3.359 3.359 0 0 1 2.444-.892c2.18.04 3.928 1.828 3.932 4.023.004 2.196-1.738 3.99-3.918 4.038-.86.02-1.7-.265-2.373-.806h-.029v3.829H36.29V3.41zm4.176 1.67c-1.116 0-2.06.791-2.06 1.655v.964c0 .922.916 1.684 2.073 1.684a2.145 2.145 0 0 0 2.131-2.158 2.145 2.145 0 0 0-2.144-2.146zM48.803 6.49c1.387-.187 1.802-.388 1.802-.777 0-.504-.53-.806-1.344-.806a1.79 1.79 0 0 0-1.888 1.367l-2.002-.417c.286-1.555 1.874-2.663 3.832-2.663 2.216 0 3.59 1.137 3.59 2.993v4.852H50.89v-.835h-.03a3.117 3.117 0 0 1-2.559 1.051c-1.673 0-2.83-.921-2.83-2.275 0-1.425.943-2.159 3.331-2.49zm1.973.806h-.028c-.187.274-.587.432-1.616.62-1.244.23-1.687.474-1.687.92 0 .461.372.663 1.172.663 1.216 0 2.16-.562 2.16-1.296v-.907zM56.82 10.622L53.317 3.41h2.331l2.302 4.98h.028l2.274-4.98h2.345L57.35 14.278h-2.331z"/>
+        </g>
+    </g>
+</svg>

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 = () => (
     <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 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" />
           </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">
+            <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>
+            <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">
+            <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">
@@ -117,6 +126,7 @@ export default function App() {
           </div>
         </div>
       </div>
+
     </nav>
   );
 
@@ -125,13 +135,8 @@ export default function App() {
       <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 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" />
             </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.
@@ -176,7 +181,7 @@ export default function App() {
   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">
+      <section className="pt-28 pb-16 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>
 
@@ -185,7 +190,7 @@ export default function App() {
             <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">
+          <h1 className="text-3xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-tight md: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>
@@ -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.
           </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 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>
+            <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>
           </div>
         </div>
 
@@ -460,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">
@@ -473,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">
@@ -580,19 +601,222 @@ 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="/images/gopay.svg" 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="/images/ovo.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'}`}
+                      >
+                        <img src="/images/shopeepay.png" alt="ShopeePay" className="h-6 object-contain" />
+                      </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 && (
+        <div 
+          className="fixed inset-0 z-[10000] bg-white flex flex-col md:hidden"
+          style={{ backgroundColor: 'white', opacity: 1 }}
+        >
+          <div className="flex justify-between items-center h-20 px-4 border-b border-slate-100 flex-shrink-0">
+            <div className="flex items-center gap-2">
+              <img src="/images/logokulakpos.png" alt="Kulakpos" className="h-8 w-auto" />
+            </div>
+            <button onClick={() => setIsMenuOpen(false)} className="text-slate-600 p-2 border border-slate-200 rounded-lg">
+              <X className="h-7 w-7" />
+            </button>
+          </div>
+          
+          <div className="flex-1 overflow-y-auto py-4 px-6 bg-white">
+            <div className="flex flex-col gap-4 font-bold text-base text-slate-800">
+              <a href="/#fitur" onClick={() => { 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 <ChevronRight className="w-4 h-4 text-slate-300" /></a>
+              <a href="/#ai" onClick={() => { 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 <Bot className="w-4 h-4" /></a>
+              <a href="/#perangkat" onClick={() => { 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 <ChevronRight className="w-4 h-4 text-slate-300" /></a>
+              <a href="/#solusi" onClick={() => { 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 <ChevronRight className="w-4 h-4 text-slate-300" /></a>
+              <a href="/#harga" onClick={() => { 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 <ChevronRight className="w-4 h-4 text-slate-300" /></a>
+              
+              <div className="grid grid-cols-2 gap-3 mt-2">
+                <a href="/login" className="text-center py-3 rounded-lg border border-slate-200 text-slate-700 text-sm">Masuk</a>
+                <a href="/plans" className="text-center py-3 rounded-lg bg-teal-600 text-white shadow-md text-sm">Coba Gratis</a>
+              </div>
+            </div>
+          </div>
+          
+          <div className="p-6 border-t border-slate-100 bg-slate-50 text-center text-xs text-slate-500 font-medium flex-shrink-0">
+            © {new Date().getFullYear()} PT Sada Teknologi Indonesia.
+          </div>
+        </div>
+      )}
     </main>
 
       {renderFooter()}
 
       {/* WHATSAPP WIDGET */}
       <a 
-        href="https://wa.me/6281234567890?text=Halo%20Kulakpos.id,%20saya%20tertarik%20dengan%20solusi%20POS%20dan%20AI%20Assistance%20Anda."
+        href="https://wa.me/6287783275818?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"

resources/views/admin/settings/general.blade.php

@@ -62,7 +62,7 @@ class="form-control" placeholder="{{ __('Enter Link') }}">
                                         <label>{{ __('WhatsApp Number (For Floating Button)') }}</label>
                                         <input type="text" name="whatsapp_number"
                                             value="{{ $general->value['whatsapp_number'] ?? '' }}" class="form-control"
-                                            placeholder="{{ __('e.g., 6289620324323') }}">
+                                            placeholder="{{ __('e.g., 6287783275818') }}">
                                     </div>
 
                                     <div class="col-lg-6">

resources/views/index.blade.php

@@ -2,7 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>KulakPOS</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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')
 </head>
 <body>

resources/views/layouts/web/partials/footer.blade.php

@@ -4,7 +4,7 @@
         <div class="row mt-5">
             <div class="col-md-6 col-lg-5">
                 <a href="{{ route('home') }}">
-                    <img src="{{ asset($general->value['footer_logo'] ?? '') }}" alt="footer-logo" class="footer-logo" />
+                    <img src="/images/logokulakpos.png" alt="footer-logo" class="footer-logo" style="height: 40px; width: auto;" />
                 </a>
                 <p class="mt-3 footer-details">
                     {{ $page_data['headings']['footer_short_title'] ?? '' }}

resources/views/layouts/web/partials/header.blade.php

@@ -114,12 +114,8 @@
     <nav class="navbar navbar-expand-lg h-100" style="min-height:80px;">
         <div class="container" style="max-width:80rem;">
             <!-- Logo -->
-            <a class="navbar-brand d-flex align-items-center m-0 p-0" href="{{ route('home') }}">
-                <div class="rh-logo-icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7"/></svg>
-                </div>
-                <!-- Hide text on mobile using d-none d-sm-block -->
-                <span class="rh-logo-text d-none d-md-block">Kulak<span>pos</span></span>
+            <a href="{{ route('home') }}">
+                <img src="/images/logokulakpos.png" alt="footer-logo" class="footer-logo" style="height: 40px; width: auto;" />
             </a>
 
             <!-- Mobile Toggle -->

resources/views/payments/index.blade.php

@@ -113,7 +113,7 @@ class="form-select w-auto country-input" required>
                                                                     </select>
                                                                     <input type="text" name="phone" id="phone"
                                                                         class="form-control number-input w-100"
-                                                                        placeholder="{{ __('Enter your phone number') }}" required>
+                                                                        placeholder="{{ __('e.g., 6287783275818') }}" required>
                                                                 </div>
                                                             </td>
                                                         </tr>
@@ -165,7 +165,7 @@ class="btn btn-md payment-btn">{{ __('Pay Now') }}</button>
 
     <!-- Floating WhatsApp Button -->
     @php
-        $whatsapp_number = \App\Models\Option::where('key', 'general')->first()->value['whatsapp_number'] ?? '6289620324323';
+        $whatsapp_number = \App\Models\Option::where('key', 'general')->first()->value['whatsapp_number'] ?? '6287783275818';
     @endphp
     @if($whatsapp_number)
         <a href="https://wa.me/{{ $whatsapp_number }}?text=Halo%20Admin,%20saya%20butuh%20bantuan%20terkait%20pembayaran"