{"id":8,"date":"2026-04-23T10:40:44","date_gmt":"2026-04-23T10:40:44","guid":{"rendered":"https:\/\/mudahpay.com.my\/?page_id=8"},"modified":"2026-05-09T14:05:07","modified_gmt":"2026-05-09T14:05:07","slug":"main","status":"publish","type":"page","link":"https:\/\/mudahpay.com.my\/","title":{"rendered":"main"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nMudahPay \u2014 Sistem Kutipan Bayaran untuk JMB & MC<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --navy: #0B1F3A;\r\n --navy-mid: #152D52;\r\n --teal: #00B894;\r\n --teal-light: #00D4A8;\r\n --teal-dim: rgba(0,184,148,0.12);\r\n --cream: #F7F4EF;\r\n --cream-dark: #EDE8E0;\r\n --text: #0B1F3A;\r\n --muted: #5A6B82;\r\n --white: #FFFFFF;\r\n --border: rgba(11,31,58,0.1);\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--cream);\r\n color: var(--text);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* NAV *\/\r\n nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 1.1rem 5%;\r\n background: rgba(247,244,239,0.92);\r\n backdrop-filter: blur(12px);\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .logo {\r\n font-family: 'DM Serif Display', serif;\r\n font-size: 1.5rem;\r\n color: var(--navy);\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .logo span { color: var(--teal); }\r\n\r\n nav ul {\r\n list-style: none;\r\n display: flex; gap: 2rem;\r\n }\r\n\r\n nav ul a {\r\n text-decoration: none;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: var(--muted);\r\n transition: color 0.2s;\r\n }\r\n\r\n nav ul a:hover { color: var(--navy); }\r\n\r\n .nav-cta {\r\n background: var(--navy);\r\n color: var(--white) !important;\r\n padding: 0.55rem 1.3rem;\r\n border-radius: 6px;\r\n transition: background 0.2s !important;\r\n }\r\n\r\n .nav-cta:hover { background: var(--teal) !important; color: var(--white) !important; }\r\n\r\n \/* HERO *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n padding: 8rem 5% 5rem;\r\n gap: 4rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: -200px; right: -200px;\r\n width: 600px; height: 600px;\r\n background: radial-gradient(circle, rgba(0,184,148,0.08) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: var(--teal-dim);\r\n border: 1px solid rgba(0,184,148,0.3);\r\n color: #007A63;\r\n font-size: 0.78rem;\r\n font-weight: 600;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n padding: 0.4rem 1rem;\r\n border-radius: 100px;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .hero-badge::before {\r\n content: '';\r\n width: 6px; height: 6px;\r\n border-radius: 50%;\r\n background: var(--teal);\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.5; transform: scale(1.4); }\r\n }\r\n\r\n h1 {\r\n font-family: 'DM Serif Display', serif;\r\n font-size: clamp(2.4rem, 4vw, 3.6rem);\r\n line-height: 1.1;\r\n color: var(--navy);\r\n letter-spacing: -0.03em;\r\n margin-bottom: 1.4rem;\r\n }\r\n\r\n h1 em {\r\n font-style: italic;\r\n color: var(--teal);\r\n }\r\n\r\n .hero-sub {\r\n font-size: 1.05rem;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n max-width: 480px;\r\n margin-bottom: 2.5rem;\r\n }\r\n\r\n .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }\r\n\r\n .btn-primary {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: var(--teal);\r\n color: var(--white);\r\n font-family: 'DM Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n padding: 0.85rem 1.8rem;\r\n border-radius: 8px;\r\n text-decoration: none;\r\n border: none; cursor: pointer;\r\n transition: all 0.2s;\r\n box-shadow: 0 4px 20px rgba(0,184,148,0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--teal-light);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 30px rgba(0,184,148,0.4);\r\n }\r\n\r\n .btn-secondary {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: transparent;\r\n color: var(--navy);\r\n font-family: 'DM Sans', sans-serif;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n padding: 0.85rem 1.8rem;\r\n border-radius: 8px;\r\n text-decoration: none;\r\n border: 1.5px solid var(--border);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .btn-secondary:hover {\r\n border-color: var(--navy);\r\n background: var(--white);\r\n }\r\n\r\n .hero-trust {\r\n margin-top: 2.5rem;\r\n display: flex; align-items: center; gap: 1rem;\r\n }\r\n\r\n .trust-avatars {\r\n display: flex;\r\n }\r\n\r\n .trust-avatars span {\r\n width: 34px; height: 34px;\r\n border-radius: 50%;\r\n border: 2px solid var(--cream);\r\n background: var(--navy-mid);\r\n color: var(--white);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-left: -8px;\r\n }\r\n\r\n .trust-avatars span:first-child { margin-left: 0; }\r\n\r\n .trust-text {\r\n font-size: 0.82rem;\r\n color: var(--muted);\r\n line-height: 1.4;\r\n }\r\n\r\n .trust-text strong { color: var(--navy); }\r\n\r\n \/* HERO VISUAL *\/\r\n .hero-visual {\r\n position: relative;\r\n }\r\n\r\n .dashboard-card {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 1.5rem;\r\n box-shadow: 0 20px 60px rgba(11,31,58,0.12);\r\n border: 1px solid var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .dashboard-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--teal), var(--teal-light));\r\n }\r\n\r\n .dc-header {\r\n display: flex; justify-content: space-between; align-items: center;\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n .dc-title {\r\n font-size: 0.78rem;\r\n font-weight: 600;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n }\r\n\r\n .dc-badge {\r\n background: var(--teal-dim);\r\n color: #007A63;\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n padding: 3px 10px;\r\n border-radius: 100px;\r\n }\r\n\r\n .stat-row {\r\n display: grid; grid-template-columns: 1fr 1fr 1fr;\r\n gap: 0.8rem; margin-bottom: 1.2rem;\r\n }\r\n\r\n .stat-box {\r\n background: var(--cream);\r\n border-radius: 10px;\r\n padding: 0.8rem;\r\n }\r\n\r\n .stat-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; }\r\n .stat-val { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--navy); }\r\n .stat-val.green { color: var(--teal); }\r\n\r\n .progress-section { margin-bottom: 1rem; }\r\n\r\n .prog-row {\r\n display: flex; justify-content: space-between; align-items: center;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .prog-label { font-size: 0.78rem; color: var(--text); }\r\n .prog-pct { font-size: 0.78rem; font-weight: 600; color: var(--navy); }\r\n\r\n .prog-bar {\r\n height: 6px;\r\n background: var(--cream-dark);\r\n border-radius: 100px;\r\n overflow: hidden;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .prog-fill {\r\n height: 100%;\r\n border-radius: 100px;\r\n background: var(--teal);\r\n }\r\n\r\n .prog-fill.amber { background: #F39C12; }\r\n .prog-fill.red { background: #E74C3C; }\r\n\r\n .recent-list { border-top: 1px solid var(--border); padding-top: 1rem; }\r\n\r\n .recent-title { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.7rem; }\r\n\r\n .recent-item {\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 0.5rem 0;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .recent-item:last-child { border-bottom: none; }\r\n\r\n .ri-left { display: flex; align-items: center; gap: 10px; }\r\n\r\n .ri-dot {\r\n width: 8px; height: 8px; border-radius: 50%;\r\n }\r\n\r\n .ri-dot.paid { background: var(--teal); }\r\n .ri-dot.pending { background: #F39C12; }\r\n .ri-dot.overdue { background: #E74C3C; }\r\n\r\n .ri-unit { font-size: 0.82rem; font-weight: 500; color: var(--navy); }\r\n .ri-type { font-size: 0.72rem; color: var(--muted); }\r\n .ri-amount { font-size: 0.85rem; font-weight: 600; color: var(--navy); }\r\n\r\n .float-notif {\r\n position: absolute;\r\n bottom: -20px; right: -20px;\r\n background: var(--navy);\r\n color: var(--white);\r\n border-radius: 12px;\r\n padding: 0.8rem 1.1rem;\r\n display: flex; align-items: center; gap: 10px;\r\n box-shadow: 0 10px 30px rgba(11,31,58,0.25);\r\n font-size: 0.82rem;\r\n white-space: nowrap;\r\n }\r\n\r\n .notif-icon {\r\n width: 32px; height: 32px; border-radius: 8px;\r\n background: var(--teal);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1rem;\r\n }\r\n\r\n .notif-text strong { display: block; font-size: 0.85rem; }\r\n .notif-text span { font-size: 0.72rem; color: rgba(255,255,255,0.6); }\r\n\r\n \/* MASALAH SECTION *\/\r\n .pain-section {\r\n padding: 6rem 5%;\r\n background: var(--navy);\r\n color: var(--white);\r\n }\r\n\r\n .section-tag {\r\n font-size: 0.78rem;\r\n font-weight: 600;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: var(--teal);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-title {\r\n font-family: 'DM Serif Display', serif;\r\n font-size: clamp(1.8rem, 3vw, 2.8rem);\r\n line-height: 1.15;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-sub {\r\n font-size: 1rem;\r\n color: rgba(255,255,255,0.6);\r\n line-height: 1.7;\r\n max-width: 520px;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .pain-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: 1.2rem;\r\n }\r\n\r\n .pain-card {\r\n background: rgba(255,255,255,0.05);\r\n border: 1px solid rgba(255,255,255,0.1);\r\n border-radius: 12px;\r\n padding: 1.5rem;\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .pain-card:hover { border-color: rgba(0,184,148,0.4); }\r\n\r\n .pain-icon {\r\n font-size: 1.8rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .pain-card h3 {\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n color: var(--white);\r\n }\r\n\r\n .pain-card p {\r\n font-size: 0.85rem;\r\n color: rgba(255,255,255,0.55);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* FEATURES *\/\r\n .features-section {\r\n padding: 6rem 5%;\r\n background: var(--cream);\r\n }\r\n\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .feat-card {\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n border-radius: 14px;\r\n padding: 1.8rem;\r\n transition: all 0.2s;\r\n }\r\n\r\n .feat-card:hover {\r\n border-color: rgba(0,184,148,0.3);\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 40px rgba(11,31,58,0.08);\r\n }\r\n\r\n .feat-num {\r\n font-family: 'DM Serif Display', serif;\r\n font-size: 2rem;\r\n color: var(--teal);\r\n margin-bottom: 0.8rem;\r\n opacity: 0.6;\r\n }\r\n\r\n .feat-card h3 {\r\n font-size: 1.05rem;\r\n font-weight: 600;\r\n color: var(--navy);\r\n margin-bottom: 0.6rem;\r\n }\r\n\r\n .feat-card p {\r\n font-size: 0.88rem;\r\n color: var(--muted);\r\n line-height: 1.65;\r\n }\r\n\r\n \/* HOW IT WORKS *\/\r\n .how-section {\r\n padding: 6rem 5%;\r\n background: var(--white);\r\n }\r\n\r\n .steps-container {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 0;\r\n margin-top: 3.5rem;\r\n position: relative;\r\n }\r\n\r\n .step {\r\n text-align: center;\r\n padding: 0 1.5rem;\r\n position: relative;\r\n }\r\n\r\n .step:not(:last-child)::after {\r\n content: '\u2192';\r\n position: absolute;\r\n right: -12px; top: 28px;\r\n font-size: 1.2rem;\r\n color: var(--teal);\r\n }\r\n\r\n .step-circle {\r\n width: 56px; height: 56px;\r\n border-radius: 50%;\r\n background: var(--teal-dim);\r\n border: 2px solid rgba(0,184,148,0.3);\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: 'DM Serif Display', serif;\r\n font-size: 1.3rem;\r\n color: var(--teal);\r\n margin: 0 auto 1.2rem;\r\n }\r\n\r\n .step h3 {\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n color: var(--navy);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .step p {\r\n font-size: 0.82rem;\r\n color: var(--muted);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* PRICING *\/\r\n .pricing-section {\r\n padding: 6rem 5%;\r\n background: var(--cream);\r\n }\r\n\r\n .pricing-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n max-width: 900px;\r\n margin-left: auto; margin-right: auto;\r\n }\r\n\r\n .price-card {\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 2rem;\r\n position: relative;\r\n }\r\n\r\n .price-card.featured {\r\n background: var(--navy);\r\n border-color: var(--navy);\r\n color: var(--white);\r\n }\r\n\r\n .price-popular {\r\n position: absolute;\r\n top: -12px; left: 50%; transform: translateX(-50%);\r\n background: var(--teal);\r\n color: var(--white);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n padding: 4px 14px;\r\n border-radius: 100px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n white-space: nowrap;\r\n }\r\n\r\n .price-tier {\r\n font-size: 0.78rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.08em;\r\n color: var(--muted);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .price-card.featured .price-tier { color: rgba(255,255,255,0.5); }\r\n\r\n .price-amount {\r\n font-family: 'DM Serif Display', serif;\r\n font-size: 2.5rem;\r\n color: var(--navy);\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .price-card.featured .price-amount { color: var(--white); }\r\n\r\n .price-amount sup {\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 1rem;\r\n vertical-align: super;\r\n font-weight: 500;\r\n }\r\n\r\n .price-per {\r\n font-size: 0.82rem;\r\n color: var(--muted);\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .price-card.featured .price-per { color: rgba(255,255,255,0.5); }\r\n\r\n .price-features {\r\n list-style: none;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .price-features li {\r\n font-size: 0.88rem;\r\n color: var(--muted);\r\n padding: 0.45rem 0;\r\n border-bottom: 1px solid var(--border);\r\n display: flex; align-items: center; gap: 8px;\r\n }\r\n\r\n .price-card.featured .price-features li { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }\r\n\r\n .price-features li::before {\r\n content: '\u2713';\r\n color: var(--teal);\r\n font-weight: 700;\r\n font-size: 0.85rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* TESTIMONIAL *\/\r\n .testimony-section {\r\n padding: 6rem 5%;\r\n background: var(--white);\r\n }\r\n\r\n .testi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .testi-card {\r\n background: var(--cream);\r\n border-radius: 14px;\r\n padding: 1.8rem;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .testi-quote {\r\n font-size: 0.95rem;\r\n color: var(--text);\r\n line-height: 1.7;\r\n margin-bottom: 1.5rem;\r\n font-style: italic;\r\n }\r\n\r\n .testi-author {\r\n display: flex; align-items: center; gap: 10px;\r\n }\r\n\r\n .testi-avatar {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n background: var(--navy);\r\n color: var(--white);\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 600; font-size: 0.85rem;\r\n }\r\n\r\n .testi-name { font-size: 0.88rem; font-weight: 600; color: var(--navy); }\r\n .testi-role { font-size: 0.78rem; color: var(--muted); }\r\n\r\n \/* CTA FINAL *\/\r\n .cta-section {\r\n padding: 6rem 5%;\r\n background: var(--navy);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .cta-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 700px; height: 700px;\r\n background: radial-gradient(circle, rgba(0,184,148,0.1) 0%, transparent 65%);\r\n pointer-events: none;\r\n }\r\n\r\n .cta-section .section-title { color: var(--white); }\r\n\r\n .cta-section .section-sub { margin: 0 auto 2.5rem; color: rgba(255,255,255,0.6); }\r\n\r\n \/* FOOTER *\/\r\n footer {\r\n background: #070F1C;\r\n color: rgba(255,255,255,0.4);\r\n text-align: center;\r\n padding: 2rem 5%;\r\n font-size: 0.82rem;\r\n }\r\n\r\n footer a { color: var(--teal); text-decoration: none; }\r\n\r\n \/* UTILS *\/\r\n .text-center { text-align: center; }\r\n\r\n .animate-in {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.6s ease, transform 0.6s ease;\r\n }\r\n\r\n .animate-in.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero {\r\n grid-template-columns: 1fr;\r\n padding: 7rem 5% 4rem;\r\n gap: 3rem;\r\n }\r\n nav ul { display: none; }\r\n .step:not(:last-child)::after { display: none; }\r\n .float-notif { position: static; margin-top: 1.5rem; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAV -->\r\n<nav>\r\n <div class=\"logo\">Mudah<span>Pay<\/span><\/div>\r\n <ul>\r\n <li><a href=\"#features\">Ciri-ciri<\/a><\/li>\r\n <li><a href=\"#how\">Cara Guna<\/a><\/li>\r\n <li><a href=\"#pricing\">Harga<\/a><\/li>\r\n <li><a href=\"#demo\" class=\"nav-cta\">Cuba Percuma<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<!-- HERO -->\r\n<section class=\"hero\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\">Platform #1 untuk JMB & MC Malaysia<\/div>\r\n <h1>Kutipan Bayaran<br><em>Tanpa Sakit Kepala<\/em><\/h1>\r\n <p class=\"hero-sub\">Dari resit manual ke sistem digital dalam masa 24 jam. MudahPay uruskan maintenance fee, sinking fund, dan laporan \u2014 semua secara automatik.<\/p>\r\n <div class=\"btn-group\">\r\n <a href=\"#demo\" class=\"btn-primary\">Cuba 30 Hari Percuma \u2192<\/a>\r\n <a href=\"#how\" class=\"btn-secondary\">Tengok Demo<\/a>\r\n <\/div>\r\n <div class=\"hero-trust\">\r\n <div class=\"trust-avatars\">\r\n <span>SB<\/span>\r\n <span>KP<\/span>\r\n <span>MR<\/span>\r\n <span>+<\/span>\r\n <\/div>\r\n <div class=\"trust-text\">\r\n <strong>47 JMB & MC<\/strong> sudah guna MudahPay<br>\r\n di seluruh Selangor & KL\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"dashboard-card\">\r\n <div class=\"dc-header\">\r\n <div class=\"dc-title\">Pangsapuri Sri Damansara \u2014 Nov 2025<\/div>\r\n <div class=\"dc-badge\">Live<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-row\">\r\n <div class=\"stat-box\">\r\n <div class=\"stat-label\">Kutipan<\/div>\r\n <div class=\"stat-val green\">RM 38,200<\/div>\r\n <\/div>\r\n <div class=\"stat-box\">\r\n <div class=\"stat-label\">Unit Bayar<\/div>\r\n <div class=\"stat-val\">191\/240<\/div>\r\n <\/div>\r\n <div class=\"stat-box\">\r\n <div class=\"stat-label\">Koleksi<\/div>\r\n <div class=\"stat-val\">79.6%<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"progress-section\">\r\n <div class=\"prog-row\">\r\n <span class=\"prog-label\">Maintenance Fee<\/span>\r\n <span class=\"prog-pct\">84%<\/span>\r\n <\/div>\r\n <div class=\"prog-bar\"><div class=\"prog-fill\" style=\"width:84%\"><\/div><\/div>\r\n\r\n <div class=\"prog-row\">\r\n <span class=\"prog-label\">Sinking Fund<\/span>\r\n <span class=\"prog-pct\">72%<\/span>\r\n <\/div>\r\n <div class=\"prog-bar\"><div class=\"prog-fill amber\" style=\"width:72%\"><\/div><\/div>\r\n\r\n <div class=\"prog-row\">\r\n <span class=\"prog-label\">Overdue (3 bulan+)<\/span>\r\n <span class=\"prog-pct\">8%<\/span>\r\n <\/div>\r\n <div class=\"prog-bar\"><div class=\"prog-fill red\" style=\"width:8%\"><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"recent-list\">\r\n <div class=\"recent-title\">Transaksi Terkini<\/div>\r\n <div class=\"recent-item\">\r\n <div class=\"ri-left\">\r\n <div class=\"ri-dot paid\"><\/div>\r\n <div>\r\n <div class=\"ri-unit\">Unit A-12-3<\/div>\r\n <div class=\"ri-type\">Maintenance + Sinking Fund<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ri-amount\">RM 350<\/div>\r\n <\/div>\r\n <div class=\"recent-item\">\r\n <div class=\"ri-left\">\r\n <div class=\"ri-dot pending\"><\/div>\r\n <div>\r\n <div class=\"ri-unit\">Unit B-05-1<\/div>\r\n <div class=\"ri-type\">Menunggu pembayaran<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ri-amount\">RM 280<\/div>\r\n <\/div>\r\n <div class=\"recent-item\">\r\n <div class=\"ri-left\">\r\n <div class=\"ri-dot overdue\"><\/div>\r\n <div>\r\n <div class=\"ri-unit\">Unit C-08-7<\/div>\r\n <div class=\"ri-type\">Tertunggak \u2014 3 bulan<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ri-amount\">RM 840<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"float-notif\">\r\n <div class=\"notif-icon\">\u2705<\/div>\r\n <div class=\"notif-text\">\r\n <strong>Bayaran diterima!<\/strong>\r\n <span>Unit A-15-2 \u00b7 RM 280 via DuitNow<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- MASALAH -->\r\n<section class=\"pain-section\">\r\n <div class=\"section-tag\">Situasi sekarang<\/div>\r\n <h2 class=\"section-title\">Masalah JMB & MC<br>yang tiada penghujungnya<\/h2>\r\n <p class=\"section-sub\">Kami faham \u2014 kerja JMB bukan mudah. Belum bayar, susah nak kejar. Dah bayar, resit hilang. Laporan? Tunggu hujung bulan baru tahu.<\/p>\r\n\r\n <div class=\"pain-grid\">\r\n <div class=\"pain-card\">\r\n <div class=\"pain-icon\">\ud83d\udccb<\/div>\r\n <h3>Rekod Manual<\/h3>\r\n <p>Excel, buku rekod, atau nota tangan \u2014 mudah hilang, mudah silap, susah nak audit bila ada dispute.<\/p>\r\n <\/div>\r\n <div class=\"pain-card\">\r\n <div class=\"pain-icon\">\ud83d\udcf1<\/div>\r\n <h3>Chase Bayaran via WhatsApp<\/h3>\r\n <p>Hantar reminder satu-satu kepada 200+ unit \u2014 makan masa, awkward, dan still ada yang ignore.<\/p>\r\n <\/div>\r\n <div class=\"pain-card\">\r\n <div class=\"pain-icon\">\ud83e\uddfe<\/div>\r\n <h3>Resit Tak Teratur<\/h3>\r\n <p>Penghuni minta resit, tapi resit lama dah tak jumpa. Argument pasal bayaran yang konon dah bayar.<\/p>\r\n <\/div>\r\n <div class=\"pain-card\">\r\n <div class=\"pain-icon\">\ud83d\udcca<\/div>\r\n <h3>Laporan Lambat<\/h3>\r\n <p>Mesyuarat AGM seminggu lagi, laporan kewangan masih belum siap. Ahli JMB pula tanya soalan tajam.<\/p>\r\n <\/div>\r\n <div class=\"pain-card\">\r\n <div class=\"pain-icon\">\ud83c\udfe6<\/div>\r\n <h3>Kutipan Tak Konsisten<\/h3>\r\n <p>Ada yang bayar cash, ada yang transfer, ada yang letak sampul bawah pintu. Susah nak track semuanya.<\/p>\r\n <\/div>\r\n <div class=\"pain-card\">\r\n <div class=\"pain-icon\">\u2696\ufe0f<\/div>\r\n <h3>Isu Tunggakan<\/h3>\r\n <p>Nak ambil tindakan undang-undang pun kena ada rekod lengkap. Tanpa sistem, kes jadi lemah.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FEATURES -->\r\n<section class=\"features-section\" id=\"features\">\r\n <div class=\"text-center\">\r\n <div class=\"section-tag\">Penyelesaian MudahPay<\/div>\r\n <h2 class=\"section-title\">Semua dalam satu platform<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Direka khas untuk JMB dan MC Malaysia \u2014 bukan software korporat yang complicated.<\/p>\r\n <\/div>\r\n\r\n <div class=\"features-grid\">\r\n <div class=\"feat-card animate-in\">\r\n <div class=\"feat-num\">01<\/div>\r\n <h3>Portal Pembayaran Online<\/h3>\r\n <p>Penghuni bayar terus dari handphone \u2014 FPX, DuitNow, kad kredit. Tak perlu turun pejabat, tak perlu cash.<\/p>\r\n <\/div>\r\n <div class=\"feat-card animate-in\">\r\n <div class=\"feat-num\">02<\/div>\r\n <h3>Reminder Automatik<\/h3>\r\n <p>WhatsApp dan email reminder dihantar automatik sebelum dan selepas due date. Anda tak perlu buat apa-apa.<\/p>\r\n <\/div>\r\n <div class=\"feat-card animate-in\">\r\n <div class=\"feat-num\">03<\/div>\r\n <h3>Resit Digital Serta-merta<\/h3>\r\n <p>Penghuni dapat resit terus dalam WhatsApp selepas bayar. Tiada lagi dispute \"saya dah bayar tapi resit tak ada\".<\/p>\r\n <\/div>\r\n <div class=\"feat-card animate-in\">\r\n <div class=\"feat-num\">04<\/div>\r\n <h3>Dashboard Real-time<\/h3>\r\n <p>Tengok siapa dah bayar, siapa belum, berapa tunggakan \u2014 semua live tanpa perlu kira manual.<\/p>\r\n <\/div>\r\n <div class=\"feat-card animate-in\">\r\n <div class=\"feat-num\">05<\/div>\r\n <h3>Laporan Auto untuk AGM<\/h3>\r\n <p>Generate laporan kewangan bulanan dan tahunan dalam satu klik. Sedia untuk mesyuarat, audit, dan Tribunal.<\/p>\r\n <\/div>\r\n <div class=\"feat-card animate-in\">\r\n <div class=\"feat-num\">06<\/div>\r\n <h3>Pengurusan Tunggakan<\/h3>\r\n <p>Track unit yang tertunggak, hantar notis automatik, dan jana surat rasmi untuk tindakan lanjut jika perlu.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- HOW -->\r\n<section class=\"how-section\" id=\"how\">\r\n <div class=\"text-center\">\r\n <div class=\"section-tag\">Cara guna<\/div>\r\n <h2 class=\"section-title\">Mula dalam 24 jam<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Setup mudah, tiada kepakaran teknikal diperlukan. Tim kami bantu onboard dari A ke Z.<\/p>\r\n <\/div>\r\n\r\n <div class=\"steps-container\">\r\n <div class=\"step\">\r\n <div class=\"step-circle\">1<\/div>\r\n <h3>Daftar & Setup<\/h3>\r\n <p>Masukkan maklumat kondominium, bilangan unit, dan jenis bayaran yang dikenakan.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-circle\">2<\/div>\r\n <h3>Import Data Unit<\/h3>\r\n <p>Upload senarai unit dari Excel atau masukkan satu-satu. Kami bantu jika perlu.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-circle\">3<\/div>\r\n <h3>Hantar Jemputan<\/h3>\r\n <p>Penghuni dapat link bayaran terus ke WhatsApp mereka. Semua serba mudah.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-circle\">4<\/div>\r\n <h3>Duduk Santai<\/h3>\r\n <p>Sistem uruskan reminder, resit, dan laporan. Anda fokus pada perkara lain.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PRICING -->\r\n<section class=\"pricing-section\" id=\"pricing\">\r\n <div class=\"text-center\">\r\n <div class=\"section-tag\">Pelan & Harga<\/div>\r\n <h2 class=\"section-title\">Harga yang berpatutan<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Tanpa kontrak jangka panjang. Batal bila-bila masa. Harga tetap, tiada kos tersembunyi.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pricing-grid\">\r\n <div class=\"price-card\">\r\n <div class=\"price-tier\">Starter<\/div>\r\n <div class=\"price-amount\"><sup>RM<\/sup>149<\/div>\r\n <div class=\"price-per\">sebulan \u00b7 sehingga 100 unit<\/div>\r\n <ul class=\"price-features\">\r\n <li>Portal bayaran online<\/li>\r\n <li>Reminder automatik (WhatsApp)<\/li>\r\n <li>Resit digital<\/li>\r\n <li>Dashboard asas<\/li>\r\n <li>Laporan bulanan<\/li>\r\n <\/ul>\r\n <a href=\"#demo\" class=\"btn-secondary\" style=\"display:block;text-align:center;padding:0.75rem;\">Mulakan Percuma<\/a>\r\n <\/div>\r\n\r\n <div class=\"price-card featured\">\r\n <div class=\"price-popular\">Paling Popular<\/div>\r\n <div class=\"price-tier\">Professional<\/div>\r\n <div class=\"price-amount\"><sup>RM<\/sup>299<\/div>\r\n <div class=\"price-per\">sebulan \u00b7 sehingga 300 unit<\/div>\r\n <ul class=\"price-features\">\r\n <li>Semua dalam Starter<\/li>\r\n <li>Pengurusan tunggakan<\/li>\r\n <li>Laporan AGM automatik<\/li>\r\n <li>Multi-admin access<\/li>\r\n <li>Notis & surat rasmi<\/li>\r\n <li>Sokongan prioriti<\/li>\r\n <\/ul>\r\n <a href=\"#demo\" class=\"btn-primary\" style=\"display:block;text-align:center;padding:0.75rem;\">Cuba 30 Hari Percuma<\/a>\r\n <\/div>\r\n\r\n <div class=\"price-card\">\r\n <div class=\"price-tier\">Enterprise<\/div>\r\n <div class=\"price-amount\" style=\"font-size:2rem;\">Custom<\/div>\r\n <div class=\"price-per\">untuk 300+ unit atau berbilang blok<\/div>\r\n <ul class=\"price-features\">\r\n <li>Semua dalam Professional<\/li>\r\n <li>Onboarding dedicated<\/li>\r\n <li>Integrasi akaun bank<\/li>\r\n <li>SLA & kontrak rasmi<\/li>\r\n <li>API access<\/li>\r\n <\/ul>\r\n <a href=\"tel:+60123456789\" class=\"btn-secondary\" style=\"display:block;text-align:center;padding:0.75rem;\">Hubungi Kami<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TESTIMONIAL -->\r\n<section class=\"testimony-section\">\r\n <div class=\"text-center\">\r\n <div class=\"section-tag\">Kata mereka<\/div>\r\n <h2 class=\"section-title\">JMB dah selesai,<br>penghuni pun happy<\/h2>\r\n <\/div>\r\n\r\n <div class=\"testi-grid\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\">\"Sebelum ni kami kejar bayaran sampai stress. Sekarang rate kutipan kami dah naik dari 60% ke 89% dalam 3 bulan pertama pakai MudahPay.\"<\/div>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">HN<\/div>\r\n <div>\r\n <div class=\"testi-name\">Hairul Nizam<\/div>\r\n <div class=\"testi-role\">Pengerusi JMB, Alam Damai Residency, Cheras<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\">\"Laporan AGM yang dulu ambil masa 2 minggu nak siap, sekarang boleh generate dalam 5 minit. Ahli lembaga semua impressed.\"<\/div>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">SR<\/div>\r\n <div>\r\n <div class=\"testi-name\">Sharifah Roslina<\/div>\r\n <div class=\"testi-role\">Setiausaha MC, Residensi Bukit Jalil<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\">\"Penghuni muda terutamanya sangat suka \u2014 boleh bayar terus dari phone. Dah tak ada lagi alasan 'saya tak sempat pergi pejabat'.\"<\/div>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">RJ<\/div>\r\n <div>\r\n <div class=\"testi-name\">Razif Johari<\/div>\r\n <div class=\"testi-role\">Bendahari JMB, Platinum Hill Condo, Setapak<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CTA -->\r\n<section class=\"cta-section\" id=\"demo\">\r\n <h2 class=\"section-title\">Sedia nak mudahkan<br>kerja JMB anda?<\/h2>\r\n <p class=\"section-sub\">Cuba percuma selama 30 hari. Tiada kad kredit diperlukan. Setup dalam masa 24 jam.<\/p>\r\n <div class=\"btn-group\" style=\"justify-content:center;\">\r\n <a href=\"#\" class=\"btn-primary\" style=\"font-size:1rem;padding:1rem 2rem;\">Daftar Sekarang \u2014 Percuma \u2192<\/a>\r\n <a href=\"https:\/\/wa.me\/60123456789\" class=\"btn-secondary\" style=\"background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.2);font-size:1rem;padding:1rem 2rem;\">WhatsApp Kami<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <p>\u00a9 2025 MudahPay \u00b7 Sistem Pengurusan Bayaran untuk JMB & MC Malaysia<\/p>\r\n <p style=\"margin-top:0.5rem;\">\r\n <a href=\"#\">Privasi<\/a> \u00b7 <a href=\"#\">Terma<\/a> \u00b7 \r\n Mematuhi <strong>PDPA 2010<\/strong> \u00b7 SSM Berdaftar\r\n <\/p>\r\n<\/footer>\r\n\r\n<script>\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => {\r\n entry.target.classList.add('visible');\r\n }, i * 100);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n document.querySelectorAll('.animate-in').forEach(el => observer.observe(el));\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MudahPay \u2014 Sistem Kutipan Bayaran untuk JMB & MC MudahPay Ciri-ciri Cara Guna Harga Cuba Percuma Platform #1 untuk JMB & MC Malaysia Kutipan BayaranTanpa Sakit Kepala Dari resit manual ke sistem digital dalam masa 24 jam. MudahPay uruskan maintenance fee, sinking fund, dan laporan \u2014 semua secara automatik. Cuba 30 Hari Percuma \u2192 Tengok […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":16,"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/mudahpay.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}