{"id":16,"date":"2026-03-09T13:26:54","date_gmt":"2026-03-09T13:26:54","guid":{"rendered":"https:\/\/didikplus.com\/webpage\/?page_id=16"},"modified":"2026-03-09T23:26:24","modified_gmt":"2026-03-09T23:26:24","slug":"landing-page","status":"publish","type":"page","link":"https:\/\/didikplus.com\/webpage\/landing-page\/","title":{"rendered":"Landing-page"},"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\nDidik Plus \u2013 Belajar Lebih Seronok!<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --sky: #e0f4ff;\r\n --yellow: #ffe566;\r\n --orange: #ff8c42;\r\n --pink: #ff6b9d;\r\n --green: #4ecb71;\r\n --blue: #3b9eff;\r\n --purple: #a855f7;\r\n --white: #ffffff;\r\n --text: #2d2d5e;\r\n --soft: #f8f0ff;\r\n }\r\n\r\n * { margin:0; padding:0; box-sizing:border-box; }\r\n html { scroll-behavior:smooth; }\r\n\r\n body {\r\n font-family: 'Nunito', sans-serif;\r\n background: var(--sky);\r\n color: var(--text);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== ANIMATED BACKGROUND BLOBS ===== *\/\r\n .blob-bg {\r\n position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;\r\n }\r\n .blob {\r\n position: absolute; border-radius: 50%;\r\n filter: blur(70px); opacity: 0.35;\r\n animation: blobmove 10s ease-in-out infinite alternate;\r\n }\r\n .blob1 { width:500px; height:500px; background:#ffe566; top:-100px; left:-100px; animation-duration:12s; }\r\n .blob2 { width:400px; height:400px; background:#ff6b9d; top:30%; right:-80px; animation-duration:9s; animation-delay:2s; }\r\n .blob3 { width:350px; height:350px; background:#4ecb71; bottom:20%; left:5%; animation-duration:11s; animation-delay:4s; }\r\n .blob4 { width:300px; height:300px; background:#3b9eff; bottom:-80px; right:20%; animation-duration:8s; animation-delay:1s; }\r\n .blob5 { width:250px; height:250px; background:#a855f7; top:60%; left:40%; animation-duration:13s; animation-delay:3s; }\r\n @keyframes blobmove {\r\n 0% { transform: translate(0,0) scale(1); }\r\n 100% { transform: translate(40px, 30px) scale(1.08); }\r\n }\r\n\r\n \/* ===== STARS \/ DOTS decoration ===== *\/\r\n .stars {\r\n position: fixed; inset:0; pointer-events:none; z-index:0;\r\n }\r\n .star {\r\n position: absolute;\r\n width: 8px; height: 8px;\r\n border-radius: 50%;\r\n animation: twinkle 3s ease-in-out infinite alternate;\r\n }\r\n @keyframes twinkle { 0%{opacity:0.2; transform:scale(0.8);} 100%{opacity:0.9; transform:scale(1.3);} }\r\n\r\n \/* ===== NAVBAR ===== *\/\r\n nav {\r\n position: fixed; top:0; width:100%; z-index:200;\r\n padding: 14px 5%;\r\n display: flex; justify-content:space-between; align-items:center;\r\n background: rgba(255,255,255,0.75);\r\n backdrop-filter: blur(16px);\r\n border-bottom: 3px solid rgba(255,255,255,0.9);\r\n box-shadow: 0 4px 24px rgba(100,100,200,0.1);\r\n }\r\n .logo {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.9rem;\r\n color: var(--blue);\r\n text-shadow: 3px 3px 0px rgba(59,158,255,0.2);\r\n letter-spacing: 1px;\r\n }\r\n .logo span { color: var(--orange); }\r\n .nav-btn {\r\n background: linear-gradient(135deg, var(--orange), var(--pink));\r\n color: #fff; font-family:'Fredoka One',cursive; font-size:1rem; letter-spacing:0.5px;\r\n padding: 10px 26px; border-radius:50px; border:none;\r\n cursor:pointer; text-decoration:none;\r\n box-shadow: 0 4px 0 rgba(200,60,80,0.3), 0 6px 20px rgba(255,107,53,0.3);\r\n transition: transform 0.15s, box-shadow 0.15s;\r\n }\r\n .nav-btn:hover { transform:translateY(-3px); box-shadow: 0 7px 0 rgba(200,60,80,0.3), 0 10px 24px rgba(255,107,53,0.35); }\r\n .nav-btn:active { transform:translateY(1px); box-shadow: 0 2px 0 rgba(200,60,80,0.3); }\r\n\r\n \/* ===== HERO ===== *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex; align-items:center; justify-content:center;\r\n text-align:center;\r\n padding: 130px 5% 80px;\r\n position: relative; z-index:1;\r\n }\r\n .hero-content { max-width: 800px; }\r\n\r\n .hero-badge {\r\n display:inline-flex; align-items:center; gap:8px;\r\n background: linear-gradient(135deg, #fff9c4, #fff);\r\n border: 2.5px solid var(--yellow);\r\n color: #b45309;\r\n padding: 7px 22px; border-radius:50px;\r\n font-size:0.88rem; font-weight:800;\r\n margin-bottom:28px;\r\n box-shadow: 0 4px 12px rgba(255,200,0,0.2);\r\n animation: fadeDown 0.7s ease both;\r\n }\r\n\r\n .hero h1 {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: clamp(2.8rem, 8vw, 5.5rem);\r\n line-height: 1.1; color: var(--text);\r\n animation: fadeDown 0.7s 0.1s ease both;\r\n }\r\n .hero h1 .hi1 { color: var(--blue); }\r\n .hero h1 .hi2 { color: var(--orange); }\r\n .hero h1 .hi3 { color: var(--green); }\r\n\r\n .hero-sub {\r\n font-size: clamp(1rem,2.5vw,1.2rem);\r\n color: #5a5a8a;\r\n max-width:560px; margin:18px auto 36px;\r\n line-height:1.8;\r\n animation: fadeDown 0.7s 0.2s ease both;\r\n }\r\n .hero-btns {\r\n display:flex; gap:16px; justify-content:center; flex-wrap:wrap;\r\n animation: fadeDown 0.7s 0.3s ease both;\r\n }\r\n .btn-main {\r\n background: linear-gradient(135deg, var(--orange), var(--pink));\r\n color:#fff; font-family:'Fredoka One',cursive; font-size:1.2rem;\r\n padding:16px 40px; border-radius:60px; border:none;\r\n cursor:pointer; text-decoration:none;\r\n box-shadow: 0 6px 0 rgba(200,60,80,0.3), 0 10px 30px rgba(255,107,53,0.35);\r\n transition:transform 0.15s, box-shadow 0.15s;\r\n animation: bounceIn 0.8s 0.5s ease both;\r\n }\r\n .btn-main:hover { transform:translateY(-4px) scale(1.03); }\r\n .btn-main:active { transform:translateY(2px); }\r\n .btn-ghost {\r\n background:#fff;\r\n color: var(--blue); font-family:'Fredoka One',cursive; font-size:1.1rem;\r\n padding:16px 36px; border-radius:60px;\r\n border: 3px solid var(--blue);\r\n cursor:pointer; text-decoration:none;\r\n box-shadow: 0 4px 0 rgba(59,158,255,0.25);\r\n transition:transform 0.15s;\r\n }\r\n .btn-ghost:hover { transform:translateY(-3px); }\r\n\r\n \/* floating subject pills *\/\r\n .float-pills {\r\n display:flex; gap:12px; justify-content:center; flex-wrap:wrap;\r\n margin-top:44px;\r\n animation: fadeDown 0.7s 0.45s ease both;\r\n }\r\n .fpill {\r\n background:#fff;\r\n border: 2.5px solid transparent;\r\n border-radius:50px;\r\n padding:10px 22px;\r\n font-size:0.95rem; font-weight:800;\r\n box-shadow:0 4px 16px rgba(0,0,0,0.08);\r\n display:flex; align-items:center; gap:8px;\r\n animation: floaty 5s ease-in-out infinite;\r\n }\r\n .fpill:nth-child(1){border-color:var(--blue);color:var(--blue);animation-delay:0s;}\r\n .fpill:nth-child(2){border-color:var(--purple);color:var(--purple);animation-delay:1s;}\r\n .fpill:nth-child(3){border-color:var(--orange);color:var(--orange);animation-delay:2s;}\r\n .fpill:nth-child(4){border-color:var(--green);color:var(--green);animation-delay:3s;}\r\n\r\n \/* bouncing emoji mascot *\/\r\n .mascot {\r\n font-size:5rem;\r\n display:block; margin:0 auto 20px;\r\n animation: mascotBounce 1.5s ease-in-out infinite;\r\n filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));\r\n }\r\n @keyframes mascotBounce {\r\n 0%,100%{transform:translateY(0) rotate(-4deg);}\r\n 50%{transform:translateY(-18px) rotate(4deg);}\r\n }\r\n @keyframes floaty {\r\n 0%,100%{transform:translateY(0);}\r\n 50%{transform:translateY(-10px);}\r\n }\r\n @keyframes fadeDown {\r\n from{opacity:0;transform:translateY(-20px);}\r\n to{opacity:1;transform:translateY(0);}\r\n }\r\n @keyframes bounceIn {\r\n 0%{opacity:0;transform:scale(0.5);}\r\n 60%{transform:scale(1.1);}\r\n 100%{opacity:1;transform:scale(1);}\r\n }\r\n\r\n \/* ===== WAVY DIVIDER ===== *\/\r\n .wave { display:block; width:100%; line-height:0; }\r\n\r\n \/* ===== SECTION COMMON ===== *\/\r\n section { position:relative; z-index:1; padding:80px 5%; }\r\n .section-label {\r\n display:inline-block;\r\n font-family:'Fredoka One',cursive; font-size:0.9rem; letter-spacing:1.5px;\r\n padding:6px 20px; border-radius:50px;\r\n margin-bottom:12px;\r\n }\r\n .section-title {\r\n font-family:'Fredoka One',cursive;\r\n font-size:clamp(1.9rem,4vw,3rem);\r\n line-height:1.2; color:var(--text);\r\n margin-bottom:12px;\r\n }\r\n .section-desc {\r\n font-size:1.05rem; color:#5a5a8a;\r\n max-width:560px; line-height:1.8;\r\n }\r\n .center { text-align:center; }\r\n .center .section-desc { margin:0 auto; }\r\n .container { max-width:1100px; margin:0 auto; }\r\n\r\n \/* ===== PROBLEMS ===== *\/\r\n .problems { background: linear-gradient(180deg,#fff8f0 0%,#fff0f8 100%); }\r\n\r\n .prob-tabs {\r\n display: flex; justify-content: center; gap: 14px;\r\n margin-top: 36px; margin-bottom: 30px;\r\n }\r\n .prob-tab {\r\n font-family: 'Fredoka One', cursive; font-size: 1.05rem;\r\n padding: 12px 34px; border-radius: 50px;\r\n border: 3px solid #e5e7eb;\r\n cursor: pointer; transition: all 0.25s;\r\n background: #fff; color: #9ca3af;\r\n box-shadow: 0 3px 10px rgba(0,0,0,0.06);\r\n }\r\n .prob-tab.active { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }\r\n .prob-tab.tab-parent.active { background: linear-gradient(135deg, var(--pink), #f472b6); }\r\n .prob-tab.tab-kid.active { background: linear-gradient(135deg, var(--orange), #fbbf24); }\r\n\r\n .prob-panel { display: none; }\r\n .prob-panel.active { display: block; }\r\n\r\n .prob-grid-4 {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n }\r\n .prob-card-v3 {\r\n background: #fff;\r\n border-radius: 22px;\r\n padding: 28px 16px;\r\n text-align: center;\r\n box-shadow: 0 4px 18px rgba(200,100,150,0.09);\r\n border: 2.5px solid #ffe4f0;\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n }\r\n .prob-card-v3.kid { border-color: #fde68a; }\r\n .prob-card-v3:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(255,107,157,0.2); }\r\n .prob-card-v3.kid:hover { box-shadow: 0 14px 30px rgba(255,140,66,0.18); }\r\n .prob-card-v3 .pe { font-size: 2.8rem; display: block; margin-bottom: 12px; }\r\n .prob-card-v3 p { font-size: 0.88rem; font-weight: 700; color: #5a5a8a; line-height: 1.5; }\r\n\r\n \/* ===== SUBJECTS ===== *\/\r\n\r\n .subjects { background: linear-gradient(180deg,#f0f8ff 0%,#f8f0ff 100%); }\r\n .subj-grid {\r\n display:grid; grid-template-columns:repeat(4,1fr); gap:20px;\r\n margin-top:52px;\r\n }\r\n .subj-card {\r\n border-radius:28px;\r\n padding:36px 20px;\r\n text-align:center;\r\n position:relative; overflow:hidden;\r\n transition:transform 0.25s, box-shadow 0.25s;\r\n cursor:pointer;\r\n box-shadow:0 8px 0 rgba(0,0,0,0.07);\r\n }\r\n .subj-card:hover { transform:translateY(-8px) rotate(-1deg); }\r\n .subj-card.bm { background:linear-gradient(145deg,#dbeafe,#bfdbfe); border:3px solid #93c5fd; }\r\n .subj-card.bi { background:linear-gradient(145deg,#ede9fe,#ddd6fe); border:3px solid #c4b5fd; }\r\n .subj-card.mat { background:linear-gradient(145deg,#ffedd5,#fed7aa); border:3px solid #fdba74; }\r\n .subj-card.sci { background:linear-gradient(145deg,#dcfce7,#bbf7d0); border:3px solid #86efac; }\r\n .subj-emoji { font-size:3.2rem; display:block; margin-bottom:14px; animation:floaty 4s ease-in-out infinite; }\r\n .subj-card.bi .subj-emoji { animation-delay:1s; }\r\n .subj-card.mat .subj-emoji { animation-delay:2s; }\r\n .subj-card.sci .subj-emoji { animation-delay:3s; }\r\n .subj-card h3 { font-family:'Fredoka One',cursive; font-size:1.3rem; color:var(--text); margin-bottom:6px; }\r\n .subj-card p { font-size:0.82rem; color:#5a5a8a; line-height:1.5; }\r\n .subj-badge {\r\n display:inline-block; margin-top:14px;\r\n background:rgba(255,255,255,0.7); border-radius:50px;\r\n padding:4px 14px; font-size:0.76rem; font-weight:800; color:var(--text);\r\n }\r\n\r\n \/* ===== FEATURES ===== *\/\r\n .features { background: linear-gradient(180deg,#f8f0ff 0%,#f0fff8 100%); }\r\n .feat-grid {\r\n display:grid; grid-template-columns:repeat(3,1fr); gap:22px;\r\n margin-top:52px;\r\n }\r\n .feat-card {\r\n background:#fff;\r\n border-radius:28px;\r\n padding:32px 26px;\r\n border: 3px solid transparent;\r\n box-shadow:0 8px 28px rgba(100,100,200,0.08);\r\n transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;\r\n position:relative; overflow:hidden;\r\n }\r\n .feat-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(100,100,200,0.15); }\r\n .feat-card:nth-child(1):hover{border-color:var(--blue);}\r\n .feat-card:nth-child(2):hover{border-color:var(--orange);}\r\n .feat-card:nth-child(3):hover{border-color:var(--green);}\r\n .feat-card:nth-child(4):hover{border-color:var(--purple);}\r\n .feat-card:nth-child(5):hover{border-color:var(--pink);}\r\n .feat-card:nth-child(6):hover{border-color:var(--yellow);}\r\n .feat-icon-wrap {\r\n width:60px; height:60px; border-radius:18px;\r\n display:flex; align-items:center; justify-content:center;\r\n font-size:1.8rem; margin-bottom:18px;\r\n }\r\n .feat-card h3 { font-family:'Fredoka One',cursive; font-size:1.15rem; color:var(--text); margin-bottom:8px; }\r\n .feat-card p { font-size:0.9rem; color:#5a5a8a; line-height:1.65; }\r\n\r\n \/* ===== OUTCOMES ===== *\/\r\n .outcomes { background: linear-gradient(180deg,#f0fff8 0%,#fff8f0 100%); }\r\n .outcome-grid {\r\n display:grid; grid-template-columns:repeat(5,1fr); gap:18px;\r\n margin-top:52px;\r\n }\r\n .outcome-card {\r\n background:#fff;\r\n border-radius:24px;\r\n padding:28px 18px;\r\n text-align:center;\r\n box-shadow:0 6px 22px rgba(0,150,100,0.08);\r\n border:3px solid #bbf7d0;\r\n transition:transform 0.3s, border-color 0.3s;\r\n }\r\n .outcome-card:hover { transform:translateY(-8px) scale(1.03); border-color:var(--green); }\r\n .outcome-icon { font-size:2.5rem; margin-bottom:12px; display:block; }\r\n .outcome-card p { font-size:0.88rem; color:#5a5a8a; line-height:1.6; font-weight:700; }\r\n\r\n \/* ===== CTA ===== *\/\r\n .cta-section {\r\n background: linear-gradient(135deg, #fef9c3, #fce7f3, #dbeafe);\r\n text-align:center;\r\n position:relative; overflow:hidden;\r\n }\r\n .cta-section::before {\r\n content:'\ud83c\udf08';\r\n position:absolute; font-size:20rem; opacity:0.04;\r\n top:-60px; left:-60px; pointer-events:none;\r\n }\r\n .cta-content { max-width:780px; margin:0 auto; position:relative; z-index:1; }\r\n .cta-section h2 {\r\n font-family:'Fredoka One',cursive;\r\n font-size:clamp(2rem,5vw,3.5rem);\r\n color:var(--text); margin-bottom:16px; line-height:1.2;\r\n }\r\n .cta-section h2 span { color:var(--orange); }\r\n .cta-section > .cta-content > p { font-size:1.1rem; color:#5a5a8a; margin-bottom:44px; line-height:1.8; }\r\n\r\n .steps-row {\r\n display:flex; gap:0; justify-content:center; flex-wrap:wrap;\r\n margin-bottom:48px;\r\n }\r\n .step-item {\r\n display:flex; flex-direction:column; align-items:center; gap:10px;\r\n width:160px; padding:8px;\r\n position:relative;\r\n }\r\n .step-item:not(:last-child)::after {\r\n content:'\u2192';\r\n position:absolute; right:-10px; top:18px;\r\n font-size:1.5rem; color:var(--orange); opacity:0.6;\r\n }\r\n .step-num {\r\n width:50px; height:50px; border-radius:50%;\r\n background:linear-gradient(135deg,var(--orange),var(--pink));\r\n color:#fff; font-family:'Fredoka One',cursive; font-size:1.4rem;\r\n display:flex; align-items:center; justify-content:center;\r\n box-shadow:0 4px 0 rgba(200,60,80,0.25);\r\n }\r\n .step-item p { font-size:0.84rem; color:#5a5a8a; text-align:center; font-weight:700; line-height:1.5; }\r\n\r\n .cta-big {\r\n display:inline-block;\r\n background:linear-gradient(135deg, var(--orange), var(--pink));\r\n color:#fff; font-family:'Fredoka One',cursive; font-size:1.4rem; letter-spacing:0.5px;\r\n padding:20px 56px; border-radius:70px; border:none;\r\n cursor:pointer; text-decoration:none;\r\n box-shadow:0 8px 0 rgba(200,60,80,0.3), 0 12px 40px rgba(255,107,53,0.3);\r\n transition:transform 0.15s;\r\n animation:ctaPulse 2s ease-in-out infinite;\r\n }\r\n .cta-big:hover { transform:translateY(-4px) scale(1.04); }\r\n @keyframes ctaPulse {\r\n 0%,100%{box-shadow:0 8px 0 rgba(200,60,80,0.3),0 12px 40px rgba(255,107,53,0.3);}\r\n 50%{box-shadow:0 8px 0 rgba(200,60,80,0.3),0 12px 60px rgba(255,107,53,0.55),0 0 0 14px rgba(255,107,53,0.08);}\r\n }\r\n .cta-note { margin-top:18px; font-size:0.88rem; color:#9ca3af; font-weight:700; }\r\n .cta-chips {\r\n display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px;\r\n }\r\n .cta-chip {\r\n background:#fff; border-radius:50px; padding:5px 16px;\r\n font-size:0.82rem; font-weight:800; color:var(--text);\r\n box-shadow:0 2px 8px rgba(0,0,0,0.08);\r\n }\r\n\r\n \/* ===== FOOTER ===== *\/\r\n footer {\r\n background:#fff;\r\n border-top:3px dashed #e9d5ff;\r\n padding:32px 5%;\r\n display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;\r\n gap:16px; position:relative; z-index:1;\r\n }\r\n .footer-logo { font-family:'Fredoka One',cursive; font-size:1.5rem; color:var(--blue); }\r\n .footer-logo span { color:var(--orange); }\r\n footer p { font-size:0.82rem; color:#9ca3af; }\r\n\r\n \/* ===== RESPONSIVE ===== *\/\r\n @media(max-width:900px){\r\n .prob-grid{grid-template-columns:1fr;}\r\n .feat-grid{grid-template-columns:repeat(2,1fr);}\r\n .outcome-grid{grid-template-columns:repeat(3,1fr);}\r\n .subj-grid{grid-template-columns:repeat(2,1fr);}\r\n }\r\n @media(max-width:600px){\r\n .feat-grid{grid-template-columns:1fr;}\r\n .outcome-grid{grid-template-columns:repeat(2,1fr);}\r\n .step-item::after{display:none;}\r\n .step-item{width:140px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ANIMATED BACKGROUND -->\r\n<div class=\"blob-bg\">\r\n <div class=\"blob blob1\"><\/div>\r\n <div class=\"blob blob2\"><\/div>\r\n <div class=\"blob blob3\"><\/div>\r\n <div class=\"blob blob4\"><\/div>\r\n <div class=\"blob blob5\"><\/div>\r\n<\/div>\r\n<div class=\"stars\" id=\"stars\"><\/div>\r\n\r\n<!-- NAVBAR -->\r\n<nav>\r\n <div class=\"logo\">\ud83c\udf93 Didik<span>Plus<\/span><\/div>\r\n <a href=\"#cta\" class=\"nav-btn\">\ud83d\udcf2 Muat Turun Percuma!<\/a>\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\">\ud83c\uddf2\ud83c\uddfe Aplikasi Pendidikan Terbaik Malaysia<\/div>\r\n <span class=\"mascot\">\ud83e\udd89<\/span>\r\n <h1>\r\n <span class=\"hi1\">Belajar<\/span> Lebih<br>\r\n <span class=\"hi2\">Seronok<\/span> &\r\n <span class=\"hi3\">Mudah!<\/span>\r\n <\/h1>\r\n <p class=\"hero-sub\">Aplikasi pembelajaran interaktif untuk pelajar Tahun 1\u20136. Kuiz seru, ranking best, dan mengikut silibus KSSR! \ud83c\udf89<\/p>\r\n <div class=\"hero-btns\">\r\n <a href=\"#cta\" class=\"btn-main\">\ud83d\ude80 Cuba PERCUMA Sekarang!<\/a>\r\n <a href=\"#features\" class=\"btn-ghost\">\u2728 Tahu Lebih Lanjut<\/a>\r\n <\/div>\r\n <div class=\"float-pills\">\r\n <div class=\"fpill\">\ud83d\udcd8 Bahasa Melayu<\/div>\r\n <div class=\"fpill\">\ud83c\udf0f English<\/div>\r\n <div class=\"fpill\">\ud83d\udd22 Matematik<\/div>\r\n <div class=\"fpill\">\ud83d\udd2c Sains<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WAVE -->\r\n<svg class=\"wave\" viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z\" fill=\"#fff8f0\"\/>\r\n<\/svg>\r\n\r\n<!-- ===== MASALAH ===== -->\r\n<section class=\"problems\" id=\"problems\">\r\n <div class=\"container\">\r\n <div class=\"center\">\r\n <div class=\"section-label\" style=\"background:#ffe0ee;color:#be185d;\">\ud83d\ude30 Masalah Ibu Bapa & Anak<\/div>\r\n <h2 class=\"section-title\">Adakah Ini Masalah Anda?<\/h2>\r\n <p class=\"section-desc\">Didik Plus hadir untuk selesaikan semua ini! \ud83d\udcaa<\/p>\r\n <\/div>\r\n\r\n <div class=\"prob-tabs\">\r\n <button class=\"prob-tab tab-parent active\" onclick=\"switchTab('parent')\">\ud83d\ude30 Ibu Bapa<\/button>\r\n <button class=\"prob-tab tab-kid\" onclick=\"switchTab('kid')\">\ud83d\ude1f Anak-Anak<\/button>\r\n <\/div>\r\n\r\n <div class=\"prob-panel active\" id=\"panel-parent\">\r\n <div class=\"prob-grid-4\">\r\n <div class=\"prob-card-v3\"><span class=\"pe\">\ud83d\udcf1<\/span><p>Anak tengok TikTok je, bukan belajar<\/p><\/div>\r\n <div class=\"prob-card-v3\"><span class=\"pe\">\u23f0<\/span><p>Tiada masa nak teman anak ulangkaji<\/p><\/div>\r\n <div class=\"prob-card-v3\"><span class=\"pe\">\ud83d\udcb8<\/span><p>Tuisyen mahal, tak semua mampu<\/p><\/div>\r\n <div class=\"prob-card-v3\"><span class=\"pe\">\ud83d\udcca<\/span><p>Susah pantau perkembangan anak<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"prob-panel\" id=\"panel-kid\">\r\n <div class=\"prob-grid-4\">\r\n <div class=\"prob-card-v3 kid\"><span class=\"pe\">\ud83d\ude34<\/span><p>Buku latihan boring, tiada semangat<\/p><\/div>\r\n <div class=\"prob-card-v3 kid\"><span class=\"pe\">\ud83e\udd2f<\/span><p>Hilang fokus belajar sorang-sorang<\/p><\/div>\r\n <div class=\"prob-card-v3 kid\"><span class=\"pe\">\u2753<\/span><p>Tak tahu subjek mana yang lemah<\/p><\/div>\r\n <div class=\"prob-card-v3 kid\"><span class=\"pe\">\ud83d\udcdd<\/span><p>Exam dah dekat, latihan tak cukup<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WAVE -->\r\n<svg class=\"wave\" viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0,40 C360,0 1080,80 1440,40 L1440,80 L0,80 Z\" fill=\"#f0f8ff\"\/>\r\n<\/svg>\r\n\r\n<!-- ===== SUBJEK ===== -->\r\n<section class=\"subjects\" id=\"subjects\">\r\n <div class=\"container\">\r\n <div class=\"center\">\r\n <div class=\"section-label\" style=\"background:#dbeafe;color:#1d4ed8;\">\ud83d\udcda 4 Subjek Teras<\/div>\r\n <h2 class=\"section-title\">Semua Dalam Satu Apps! \ud83c\udf92<\/h2>\r\n <p class=\"section-desc\">BM, BI, Matematik & Sains \u2014 lengkap untuk semua tahun mengikut silibus KSSR Malaysia.<\/p>\r\n <\/div>\r\n <div class=\"subj-grid\">\r\n <div class=\"subj-card bm\">\r\n <span class=\"subj-emoji\">\ud83d\udcd8<\/span>\r\n <h3>Bahasa Melayu<\/h3>\r\n <p>Pemahaman, tatabahasa, karangan & peribahasa<\/p>\r\n <div class=\"subj-badge\">Tahun 1 \u2013 6<\/div>\r\n <\/div>\r\n <div class=\"subj-card bi\">\r\n <span class=\"subj-emoji\">\ud83c\udf0f<\/span>\r\n <h3>Bahasa Inggeris<\/h3>\r\n <p>Vocabulary, grammar, reading & writing skills<\/p>\r\n <div class=\"subj-badge\">Year 1 \u2013 6<\/div>\r\n <\/div>\r\n <div class=\"subj-card mat\">\r\n <span class=\"subj-emoji\">\ud83d\udd22<\/span>\r\n <h3>Matematik<\/h3>\r\n <p>Operasi asas, pecahan, perpuluhan & penyelesaian masalah<\/p>\r\n <div class=\"subj-badge\">Tahun 1 \u2013 6<\/div>\r\n <\/div>\r\n <div class=\"subj-card sci\">\r\n <span class=\"subj-emoji\">\ud83d\udd2c<\/span>\r\n <h3>Sains<\/h3>\r\n <p>Alam semula jadi, jirim, tenaga & tubuh badan<\/p>\r\n <div class=\"subj-badge\">Tahun 1 \u2013 6<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WAVE -->\r\n<svg class=\"wave\" viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0,20 C480,80 960,0 1440,60 L1440,80 L0,80 Z\" fill=\"#f8f0ff\"\/>\r\n<\/svg>\r\n\r\n<!-- ===== FEATURES ===== -->\r\n<section class=\"features\" id=\"features\">\r\n <div class=\"container\">\r\n <div class=\"center\">\r\n <div class=\"section-label\" style=\"background:#ede9fe;color:#7c3aed;\">\u2728 Ciri-Ciri Menarik<\/div>\r\n <h2 class=\"section-title\">Kenapa Didik Plus Lain Dari Yang Lain? \ud83c\udf1f<\/h2>\r\n <p class=\"section-desc\">Direka khas untuk pelajar Malaysia. Bukan sekadar apps biasa \u2014 ini rakan belajar terbaik anak anda!<\/p>\r\n <\/div>\r\n <div class=\"feat-grid\">\r\n <div class=\"feat-card\">\r\n <div class=\"feat-icon-wrap\" style=\"background:#dbeafe;\">\ud83c\udfaf<\/div>\r\n <h3>Mesra Silibus KSSR<\/h3>\r\n <p>Soalan direka khas mengikut tahap pembelajaran dari Darjah 1 hingga Darjah 6. Tepat dan bersesuaian!<\/p>\r\n <\/div>\r\n <div class=\"feat-card\">\r\n <div class=\"feat-icon-wrap\" style=\"background:#ffedd5;\">\ud83c\udfc6<\/div>\r\n <h3>Sistem Ranking & Markah<\/h3>\r\n <p>Persaingan sihat dengan ranking membuat anak semakin semangat dan termotivasi untuk terus belajar!<\/p>\r\n <\/div>\r\n <div class=\"feat-card\">\r\n <div class=\"feat-icon-wrap\" style=\"background:#dcfce7;\">\ud83c\uddf2\ud83c\uddfe<\/div>\r\n <h3>100% Bahasa Melayu<\/h3>\r\n <p>Antaramuka sepenuhnya dalam Bahasa Melayu \u2014 mudah difahami tanpa kekeliruan bahasa sama sekali.<\/p>\r\n <\/div>\r\n <div class=\"feat-card\">\r\n <div class=\"feat-icon-wrap\" style=\"background:#ede9fe;\">\ud83d\udcf1<\/div>\r\n <h3>Belajar Di Mana Sahaja<\/h3>\r\n <p>Dalam kereta, di kedai makan, atau masa lapang \u2014 belajar boleh berlaku di mana-mana sahaja!<\/p>\r\n <\/div>\r\n <div class=\"feat-card\">\r\n <div class=\"feat-icon-wrap\" style=\"background:#fff9c4;\">\ud83c\udfae<\/div>\r\n <h3>Kuiz Interaktif & Seru!<\/h3>\r\n <p>Ribuan soalan latihan dalam format yang lebih menyeronokkan berbanding buku latihan biasa.<\/p>\r\n <\/div>\r\n <div class=\"feat-card\">\r\n <div class=\"feat-icon-wrap\" style=\"background:#fce7f3;\">\ud83d\udc69\u200d\ud83c\udfeb<\/div>\r\n <h3>Alat Bantu Guru<\/h3>\r\n <p>Guru boleh sarankan untuk kerja rumah hujung minggu tanpa perlu mencetak kertas latihan lagi!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WAVE -->\r\n<svg class=\"wave\" viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0,60 C360,0 1080,80 1440,20 L1440,80 L0,80 Z\" fill=\"#f0fff8\"\/>\r\n<\/svg>\r\n\r\n<!-- ===== OUTCOMES ===== -->\r\n<section class=\"outcomes\" id=\"outcomes\">\r\n <div class=\"container\">\r\n <div class=\"center\">\r\n <div class=\"section-label\" style=\"background:#dcfce7;color:#15803d;\">\ud83c\udf1f Kesan Positif<\/div>\r\n <h2 class=\"section-title\">Apa Yang Akan Berubah? \ud83c\udf89<\/h2>\r\n <p class=\"section-desc\">Selepas menggunakan Didik Plus secara konsisten, perubahan positif ini akan anda lihat pada anak!<\/p>\r\n <\/div>\r\n <div class=\"outcome-grid\">\r\n <div class=\"outcome-card\">\r\n <span class=\"outcome-icon\">\ud83d\udcc8<\/span>\r\n <p>Markah peperiksaan meningkat secara konsisten<\/p>\r\n <\/div>\r\n <div class=\"outcome-card\">\r\n <span class=\"outcome-icon\">\ud83d\ude0a<\/span>\r\n <p>Anak lebih kerap ulangkaji tanpa perlu dipaksa<\/p>\r\n <\/div>\r\n <div class=\"outcome-card\">\r\n <span class=\"outcome-icon\">\ud83d\ude0c<\/span>\r\n <p>Ibu bapa lebih tenang \u2014 screen time jadi study time!<\/p>\r\n <\/div>\r\n <div class=\"outcome-card\">\r\n <span class=\"outcome-icon\">\ud83d\udcaa<\/span>\r\n <p>Anak lebih yakin menjawab soalan di sekolah<\/p>\r\n <\/div>\r\n <div class=\"outcome-card\">\r\n <span class=\"outcome-icon\">\ud83d\uddd3\ufe0f<\/span>\r\n <p>Tabiat belajar lebih konsisten dan berdisiplin setiap hari<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WAVE -->\r\n<svg class=\"wave\" viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0,40 C720,80 1080,0 1440,50 L1440,80 L0,80 Z\" fill=\"#fef9c3\"\/>\r\n<\/svg>\r\n\r\n<!-- ===== CTA ===== -->\r\n<section class=\"cta-section\" id=\"cta\">\r\n <div class=\"cta-content\">\r\n <div class=\"section-label\" style=\"background:rgba(255,140,66,0.15);color:#c2410c;\">\ud83d\ude80 Jangan Tunggu Lagi!<\/div>\r\n <h2>Mulakan Perjalanan<br>Belajar Anak Anda <span>Sekarang!<\/span> \ud83c\udf93<\/h2>\r\n <p>Jangan biar anak tertinggal. Ribuan ibu bapa Malaysia dah percaya Didik Plus untuk masa depan anak mereka!<\/p>\r\n\r\n <div class=\"steps-row\">\r\n <div class=\"step-item\">\r\n <div class=\"step-num\">1<\/div>\r\n <p>Muat turun Didik Plus \u2014 percuma!<\/p>\r\n <\/div>\r\n <div class=\"step-item\">\r\n <div class=\"step-num\">2<\/div>\r\n <p>Pilih tahun persekolahan anak<\/p>\r\n <\/div>\r\n <div class=\"step-item\">\r\n <div class=\"step-num\">3<\/div>\r\n <p>Cuba 10 soalan pertama \u2014 seronok!<\/p>\r\n <\/div>\r\n <div class=\"step-item\">\r\n <div class=\"step-num\">4<\/div>\r\n <p>Pantau markah & ranking anak<\/p>\r\n <\/div>\r\n <div class=\"step-item\">\r\n <div class=\"step-num\">5<\/div>\r\n <p>Kongsi dengan ibu bapa lain!<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#\" class=\"cta-big\">\ud83d\udcf2 Muat Turun PERCUMA Sekarang!<\/a>\r\n <p class=\"cta-note\">Percuma \u00b7 Selamat \u00b7 Dibuat Untuk Malaysia \ud83c\uddf2\ud83c\uddfe<\/p>\r\n <div class=\"cta-chips\">\r\n <div class=\"cta-chip\">\u2705 Tiada Bayaran<\/div>\r\n <div class=\"cta-chip\">\ud83d\udd12 Selamat Untuk Kanak-Kanak<\/div>\r\n <div class=\"cta-chip\">\ud83d\udcda Silibus KSSR<\/div>\r\n <div class=\"cta-chip\">\ud83c\uddf2\ud83c\uddfe 100% BM<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <div class=\"footer-logo\">\ud83c\udf93 Didik<span>Plus<\/span><\/div>\r\n <p>\u00a9 2025 Didik Plus \u00b7 Dibuat dengan \u2764\ufe0f untuk pelajar Malaysia<\/p>\r\n <p>Tahun 1\u20136 \u00b7 BM \u00b7 BI \u00b7 Matematik \u00b7 Sains<\/p>\r\n<\/footer>\r\n\r\n<script>\r\n function switchTab(tab) {\r\n document.querySelectorAll('.prob-tab').forEach(t => t.classList.remove('active'));\r\n document.querySelectorAll('.prob-panel').forEach(p => p.classList.remove('active'));\r\n document.querySelector('.tab-' + tab).classList.add('active');\r\n document.getElementById('panel-' + tab).classList.add('active');\r\n }\r\n<\/script>\r\n\r\n<script>\r\n \/\/ Generate cute floating dots\r\n const starsEl = document.getElementById('stars');\r\n const colors = ['#ffe566','#ff6b9d','#4ecb71','#3b9eff','#a855f7','#ff8c42'];\r\n for(let i=0;i<40;i++){\r\n const s=document.createElement('div');\r\n s.className='star';\r\n s.style.cssText=`\r\n left:${Math.random()*100}%;\r\n top:${Math.random()*100}%;\r\n background:${colors[Math.floor(Math.random()*colors.length)]};\r\n width:${6+Math.random()*8}px;\r\n height:${6+Math.random()*8}px;\r\n animation-delay:${Math.random()*3}s;\r\n animation-duration:${2+Math.random()*3}s;\r\n `;\r\n starsEl.appendChild(s);\r\n }\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>Didik Plus \u2013 Belajar Lebih Seronok! \ud83c\udf93 DidikPlus \ud83d\udcf2 Muat Turun Percuma! \ud83c\uddf2\ud83c\uddfe Aplikasi Pendidikan Terbaik Malaysia \ud83e\udd89 Belajar Lebih Seronok & Mudah! Aplikasi pembelajaran interaktif untuk pelajar Tahun 1\u20136. Kuiz seru, ranking best, dan mengikut silibus KSSR! \ud83c\udf89 \ud83d\ude80 Cuba PERCUMA Sekarang! \u2728 Tahu Lebih Lanjut \ud83d\udcd8 Bahasa Melayu \ud83c\udf0f English \ud83d\udd22 Matematik \ud83d\udd2c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":8,"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/pages\/16\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/didikplus.com\/webpage\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}