ff:"ExplicitChatIdProvider" 100:I[903690,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$7a","$80","$81","$7b","$79","$82"],"$ff"] 101:I[838238,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$7a","$80","$81","$7b","$79","$82"],"SWRDataProvider"] 103:[] 104:[["b_3zdX5qkxwnL",null],["b_EQrCB9f2Erg",null],["b_e6O67xLcace",null],["b_c6ZiINJBy9t",null],["b_BTyLgngVhWS",null],["b_mX5WxvgxV81",null],["b_in83zJRDJs7",null],["b_thrVlFOh74C",null],["b_o0UI74WJx1v",null],["b_KOXBJmJ2LMq",null],["b_EYMlaQFnTSc",null],["b_MxgK09XbC3p",null],["b_kw7yewRiDcv",null]] 105:[["b_3zdX5qkxwnL",{"templateVersionId":null,"templateCanonId":null}],["b_EQrCB9f2Erg",{"templateVersionId":null,"templateCanonId":null}],["b_e6O67xLcace",{"templateVersionId":null,"templateCanonId":null}],["b_c6ZiINJBy9t",{"templateVersionId":null,"templateCanonId":null}],["b_BTyLgngVhWS",{"templateVersionId":null,"templateCanonId":null}],["b_mX5WxvgxV81",{"templateVersionId":null,"templateCanonId":null}],["b_in83zJRDJs7",{"templateVersionId":null,"templateCanonId":null}],["b_thrVlFOh74C",{"templateVersionId":null,"templateCanonId":null}],["b_o0UI74WJx1v",{"templateVersionId":null,"templateCanonId":null}],["b_KOXBJmJ2LMq",{"templateVersionId":null,"templateCanonId":null}],["b_EYMlaQFnTSc",{"templateVersionId":null,"templateCanonId":null}],["b_MxgK09XbC3p",{"templateVersionId":null,"templateCanonId":null}],["b_kw7yewRiDcv",{"templateVersionId":null,"templateCanonId":null}]] 106:[["jE1y39yEWDV","$D2025-12-16T22:55:30.761Z"],["b_ZEBGXPct4Fd","$D2025-12-16T22:57:17.590Z"],["b_ctJP5mhfTRM","$D2025-12-16T23:05:43.056Z"],["b_FnBTvvHD1UN","$D2025-12-16T23:19:06.133Z"],["b_LJ72XXZw7vW","$D2025-12-16T23:19:41.613Z"],["b_OPjDkpddjLy","$D2025-12-16T23:33:29.890Z"],["b_2MW07g3Dc6y","$D2025-12-16T23:34:01.295Z"],["b_zWc8WCHcvvC","$D2025-12-17T02:08:45.942Z"],["b_2QhPuYy2Eqd","$D2025-12-17T02:17:42.530Z"],["b_K3QO4E5Lr06","$D2025-12-17T03:06:49.207Z"],["b_NkLU63SgwPH","$D2025-12-17T03:07:43.273Z"],["b_RAwk3n5f9QV","$D2025-12-17T03:51:12.359Z"],["b_hypaH7EXLuH","$D2025-12-17T03:53:33.307Z"],["b_xfMcbfJnrxh","$D2025-12-17T03:54:02.488Z"],["b_b4IZdQHiCxk","$D2025-12-17T04:20:21.197Z"],["b_nIRzreuPt2w","$D2025-12-17T04:22:37.648Z"],["b_x0xH68SBBxE","$D2025-12-17T04:24:28.295Z"],["b_Qz9E6QBEyiF","$D2025-12-17T07:40:20.851Z"],["b_yZbeGJbTYSv","$D2025-12-17T07:40:59.443Z"],["b_MZStdAwGFUe","$D2025-12-17T07:41:43.988Z"],["b_uJHJ1yPuLMz","$D2025-12-17T08:29:32.715Z"],["b_0fN1k2IGvUZ","$D2025-12-17T08:41:48.160Z"],["b_MhBe2X9SWxh","$D2025-12-17T09:00:03.382Z"],["b_pPhJKJryhps","$D2025-12-17T09:05:49.897Z"],["b_eRALK8lG6tE","$D2025-12-17T09:12:27.872Z"],["b_lNbOGcdxumh","$D2025-12-17T09:13:08.399Z"],["b_nJLK7aupeG0","$D2025-12-17T09:16:18.702Z"],["b_sWODoYLK5MZ","$D2025-12-17T09:34:47.370Z"],["b_zx705mRp1xl","$D2025-12-17T09:52:22.407Z"],["b_TIOcK9luo0Y","$D2025-12-17T09:53:05.776Z"],["b_XCMq8kgPxLC","$D2025-12-17T10:08:54.944Z"],["b_gj9CSqWoNeh","$D2025-12-17T10:14:54.558Z"],["b_Ecmfx5lH2ze","$D2025-12-17T10:29:11.347Z"],["b_qQk0AcWF6Mp","$D2025-12-17T10:29:56.899Z"],["b_WAHzZATuCb2","$D2025-12-17T11:14:54.463Z"],["b_0rr2jRcKbY8","$D2025-12-17T11:15:48.555Z"],["b_0i843hQlVN8","$D2025-12-17T22:31:40.843Z"],["b_9l8908pWhpd","$D2025-12-17T23:38:49.763Z"],["b_670bxC4ZDcT","$D2025-12-17T23:51:22.414Z"],["b_XKN999fA3iW","$D2025-12-18T01:13:50.708Z"],["b_MiCZauIpOaF","$D2025-12-18T01:24:48.820Z"],["b_Xi2e4scWzfJ","$D2025-12-18T01:47:56.435Z"],["b_sjqTcfkvuWN","$D2025-12-18T01:48:27.304Z"],["b_kvSIqkV6kcA","$D2025-12-18T02:26:46.746Z"],["b_fzDAJLGjUuP","$D2025-12-18T02:30:14.080Z"],["b_yZ9PSDHLfF1","$D2025-12-18T02:31:17.628Z"],["b_mqiLDCm0hB0","$D2025-12-18T02:32:37.155Z"],["b_S4CBcNzmDLy","$D2025-12-18T02:48:25.956Z"],["b_ZLwlJXPGcAc","$D2025-12-18T02:49:45.411Z"],["b_IqTHFlQGa3N","$D2025-12-18T02:53:35.652Z"],["b_WW0jCVUzGTV","$D2025-12-18T03:12:28.809Z"],["b_dZEkrZJwMwY","$D2026-01-16T13:32:42.005Z"],["b_x6ODDgIt2ah","$D2026-01-16T22:45:14.863Z"],["b_d7OS3X2Z3Tq","$D2026-01-16T22:53:38.679Z"],["b_0uSaX1N7odT","$D2026-01-17T08:51:01.057Z"],["b_PyIeQDruP8W","$D2026-01-17T09:12:27.040Z"],["b_XFpPvBaKBpE","$D2026-01-17T09:20:54.182Z"],["b_PPTQG2G4mdx","$D2026-01-17T09:26:46.044Z"],["b_78dZa6o5sYe","$D2026-01-17T09:31:22.606Z"],["b_nznXINxs00K","$D2026-01-17T09:35:42.369Z"],["b_5b9cl1wbFhW","$D2026-01-17T09:41:18.555Z"],["b_lnsimsn3TVB","$D2026-01-17T09:42:05.161Z"],["b_TOYthF8WEbE","$D2026-02-08T00:15:19.772Z"],["b_YPo86Srkg5r","$D2026-02-08T00:15:39.101Z"],["b_gyTYVmv44YI","$D2026-02-08T00:16:00.521Z"],["b_z2e6ee1MH3T","$D2026-02-08T00:16:19.657Z"],["b_0PY31oLdF9K","$D2026-02-08T00:16:38.003Z"],["b_LJsYGritcw4","$D2026-02-08T00:17:04.667Z"],["b_QsUgzcoUvIo","$D2026-02-08T00:17:29.654Z"],["b_x2RSC0BMJ51","$D2026-02-08T00:17:54.375Z"],["b_Jzs1RBQPy1y","$D2026-02-08T00:18:41.198Z"],["b_JTQ2EdZeAHD","$D2026-02-08T00:37:14.360Z"],["b_IlSMY4ZfN9C","$D2026-02-08T00:37:34.210Z"],["b_kM3dqhiKlq5","$D2026-02-08T00:38:04.247Z"],["b_ROoLFO6m2cg","$D2026-02-08T10:29:28.601Z"],["b_H1OQrpaBnKC","$D2026-02-08T10:29:43.605Z"],["b_s428MQA9uaa","$D2026-02-08T12:10:14.175Z"],["b_djnUvfHuAzi","$D2026-02-08T12:10:32.513Z"],["b_BWLPwDjIzvB","$D2026-02-08T12:10:48.997Z"],["b_uN6VGRRr3b9","$D2026-02-08T12:11:06.423Z"],["b_2Jq8pz5Djwd","$D2026-02-08T13:08:32.097Z"],["b_jazi3BkGAMX","$D2026-02-08T13:08:48.945Z"],["b_yPfYpQAVJsm","$D2026-02-08T13:09:07.409Z"],["b_RoX0MKaMizk","$D2026-02-08T13:09:32.838Z"],["b_MDWKB1SbOMD","$D2026-02-08T13:10:20.638Z"],["b_07b6lUwBOTb","$D2026-02-08T13:10:42.039Z"],["b_tYYWjwbSdCo","$D2026-02-09T03:48:42.911Z"],["b_OOuonFKFMT2","$D2026-02-09T03:49:06.042Z"],["b_zr9p97ACzAL","$D2026-02-09T03:49:25.491Z"],["b_eD7r55H07dy","$D2026-02-09T03:49:45.391Z"],["b_ucfKu4LW9sZ","$D2026-02-09T03:50:04.026Z"],["b_ZcifgD1Hiv4","$D2026-02-09T03:58:28.617Z"],["b_TctuNzjLbzE","$D2026-02-09T03:58:48.639Z"],["b_sUZiun3U4lQ","$D2026-02-09T03:59:10.176Z"],["b_QVX1VevSwPD","$D2026-02-09T03:59:29.023Z"],["b_Yv6YoWXnP9S","$D2026-02-09T04:00:12.231Z"],["b_SuHDdEaozQZ","$D2026-02-09T04:06:05.465Z"],["b_GNfHEq5NCG5","$D2026-02-09T04:13:08.931Z"],["b_bEkQ64pZi7v","$D2026-02-09T04:13:25.087Z"],["b_3zdX5qkxwnL","$D2026-02-09T04:13:49.013Z"],["b_EQrCB9f2Erg","$D2026-02-09T04:14:04.854Z"],["b_e6O67xLcace","$D2026-02-09T04:14:26.412Z"],["b_c6ZiINJBy9t","$D2026-02-09T04:14:58.166Z"],["b_BTyLgngVhWS","$D2026-02-09T04:15:26.183Z"],["b_mX5WxvgxV81","$D2026-02-09T04:43:50.654Z"],["b_in83zJRDJs7","$D2026-02-09T04:44:06.810Z"],["b_thrVlFOh74C","$D2026-02-09T08:16:23.610Z"],["b_o0UI74WJx1v","$D2026-02-09T08:16:45.011Z"],["b_KOXBJmJ2LMq","$D2026-02-09T08:17:10.241Z"],["b_EYMlaQFnTSc","$D2026-02-09T08:17:45.523Z"],["b_MxgK09XbC3p","$D2026-02-09T08:18:12.969Z"],["b_kw7yewRiDcv","$D2026-02-09T08:18:40.532Z"]] 107:[["b_3zdX5qkxwnL",false],["b_EQrCB9f2Erg",false],["b_e6O67xLcace",false],["b_c6ZiINJBy9t",false],["b_BTyLgngVhWS",false],["b_mX5WxvgxV81",false],["b_in83zJRDJs7",false],["b_thrVlFOh74C",false],["b_o0UI74WJx1v",false],["b_KOXBJmJ2LMq",false],["b_EYMlaQFnTSc",false],["b_MxgK09XbC3p",false],["b_kw7yewRiDcv",false]] 108:[["b_3zdX5qkxwnL","$undefined"],["b_EQrCB9f2Erg","$undefined"],["b_e6O67xLcace","$undefined"],["b_c6ZiINJBy9t","$undefined"],["b_BTyLgngVhWS","$undefined"],["b_mX5WxvgxV81","$undefined"],["b_in83zJRDJs7","$undefined"],["b_thrVlFOh74C","$undefined"],["b_o0UI74WJx1v","$undefined"],["b_KOXBJmJ2LMq","$undefined"],["b_EYMlaQFnTSc","$undefined"],["b_MxgK09XbC3p","$undefined"],["b_kw7yewRiDcv","$undefined"]] 109:[["b_3zdX5qkxwnL",null],["b_EQrCB9f2Erg",null],["b_e6O67xLcace",null],["b_c6ZiINJBy9t",null],["b_BTyLgngVhWS",null],["b_mX5WxvgxV81",null],["b_in83zJRDJs7",null],["b_thrVlFOh74C",null],["b_o0UI74WJx1v",null],["b_KOXBJmJ2LMq",null],["b_EYMlaQFnTSc",null],["b_MxgK09XbC3p",null],["b_kw7yewRiDcv",null]] 10a:[["b_3zdX5qkxwnL",true],["b_EQrCB9f2Erg",true],["b_e6O67xLcace",true],["b_c6ZiINJBy9t",true],["b_BTyLgngVhWS",true],["b_mX5WxvgxV81",true],["b_in83zJRDJs7",true],["b_thrVlFOh74C",true],["b_o0UI74WJx1v",true],["b_KOXBJmJ2LMq",true],["b_EYMlaQFnTSc",true],["b_MxgK09XbC3p",true],["b_kw7yewRiDcv",true]] 10b:[["b_3zdX5qkxwnL",true],["b_EQrCB9f2Erg",true],["b_e6O67xLcace",true],["b_c6ZiINJBy9t",true],["b_BTyLgngVhWS",true],["b_mX5WxvgxV81",true],["b_in83zJRDJs7",true],["b_thrVlFOh74C",true],["b_o0UI74WJx1v",true],["b_KOXBJmJ2LMq",true],["b_EYMlaQFnTSc",true],["b_MxgK09XbC3p",true],["b_kw7yewRiDcv",true]] 10c:[] 10d:T240f53,[V0_FILE]javascriptreact:file="components/testimonials.jsx" isMerged="true" export default function Testimonials() { const testimonials = [ { id: 1, name: "Budi Santoso", role: "Lolos CPNS Kementerian", image: "bg-gradient-to-br from-pink-400 to-purple-600", text: "Platform ini sangat membantu saya dalam persiapan CPNS. Materi lengkap dan instruktur yang berpengalaman membuat pembelajaran jadi menyenangkan.", }, { id: 2, name: "Siti Nur Azizah", role: "Lolos POLRI", image: "bg-gradient-to-br from-blue-400 to-purple-600", text: "Terima kasih Edukasi! Berkat kursus yang ada di sini, saya berhasil lolos seleksi POLRI. Semua materi sangat relevan dan praktis.", }, { id: 3, name: "Ahmad Wijaya", role: "Diterima TNI AD", image: "bg-gradient-to-br from-green-400 to-purple-600", text: "Kualitas konten di Edukasi luar biasa. Tim support yang responsif dan community yang solid membuat journey saya jadi lebih mudah.", }, ] return (

{/* Header */}

Kisah Sukses Mereka

Ribuan pelajar telah mencapai impian mereka bersama kami

{/* Testimonials Grid */}

{testimonials.map((testimonial) => (

{testimonial.name}

{testimonial.role}

"{testimonial.text}"

{[...Array(5)].map((_, i) => ( ⭐ ))}

))}

) } [V0_FILE]javascriptreact:file="app/layout.jsx" isMerged="true" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata = { title: "Edukasi - Platform Persiapan Karir", description: "Persiapan terbaik untuk karir CASN, POLRI, dan TNI dengan instruktur berpengalaman", generator: "v0.app", } export default function RootLayout({ children }) { return ( {children} ) } [V0_FILE]javascriptreact:file="components/products.jsx" isMerged="true" "use client" import { useState } from "react" import ProductCard from "./product-card" const tabsData = { casn: [ { id: 1, title: "Persiapan CPNS 2024 Lengkap", category: "CASN", students: 2500, rating: 4.8, price: "Rp 299.000", image: "bg-gradient-to-br from-blue-400 to-blue-600", instructor: "Pak Ahmad", lessons: 24, level: "Beginner", }, { id: 2, title: "Materi Tes Wawancara & SKD", category: "CASN", students: 1800, rating: 4.9, price: "Rp 199.000", image: "bg-gradient-to-br from-blue-500 to-cyan-600", instructor: "Ibu Siti", lessons: 18, level: "Intermediate", }, { id: 3, title: "Latihan Soal Lengkap 3000+", category: "CASN", students: 3200, rating: 4.7, price: "Rp 249.000", image: "bg-gradient-to-br from-cyan-400 to-blue-500", instructor: "Pak Budi", lessons: 32, level: "Intermediate", }, ], polri: [ { id: 4, title: "Persiapan Seleksi POLRI 2024", category: "POLRI", students: 1900, rating: 4.8, price: "Rp 349.000", image: "bg-gradient-to-br from-red-400 to-red-600", instructor: "Pak Rudi", lessons: 28, level: "Intermediate", }, { id: 5, title: "Tes Kesehatan & Fisik POLRI", category: "POLRI", students: 1500, rating: 4.9, price: "Rp 199.000", image: "bg-gradient-to-br from-red-500 to-orange-600", instructor: "Pak Hendra", lessons: 20, level: "Beginner", }, { id: 6, title: "Psikotes & Interview Sukses", category: "POLRI", students: 2100, rating: 4.7, price: "Rp 279.000", image: "bg-gradient-to-br from-orange-400 to-red-500", instructor: "Ibu Dewi", lessons: 22, level: "Advanced", }, ], tni: [ { id: 7, title: "Persiapan Seleksi TNI 2024", category: "TNI", students: 2200, rating: 4.8, price: "Rp 329.000", image: "bg-gradient-to-br from-green-400 to-green-600", instructor: "Pak Joko", lessons: 26, level: "Intermediate", }, { id: 8, title: "Panduan Akademik TNI Terpadu", category: "TNI", students: 1600, rating: 4.9, price: "Rp 229.000", image: "bg-gradient-to-br from-green-500 to-emerald-600", instructor: "Pak Andi", lessons: 21, level: "Beginner", }, { id: 9, title: "Persiapan Komando TNI Unggul", category: "TNI", students: 1300, rating: 4.7, price: "Rp 289.000", image: "bg-gradient-to-br from-emerald-400 to-green-500", instructor: "Pak Yanto", lessons: 25, level: "Advanced", }, ], } export default function Products() { const [activeTab, setActiveTab] = useState("casn") return (

{/* Header */}

Kursus Populer Kami

Dipercaya oleh ribuan peserta sukses lulus seleksi

{/* Tabs */}

{["casn", "polri", "tni"].map((tab) => ( ))}

{/* Product Grid */}

{tabsData[activeTab].map((product) => ( ))}

{/* CTA */}

) } [V0_FILE]javascriptreact:file="components/navbar.jsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) return (

{/* Logo */}

Edukasi

{/* Desktop Navigation */}

Tentang Produk Berita Kontak

{/* CTA Button */}

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {isOpen && (

Tentang Produk Berita Kontak

)}

) } [V0_FILE]javascriptreact:file="components/wave-animator.jsx" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" export default function WaveAnimator({ variant = "default" }) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") const width = (canvas.width = window.innerWidth) const height = (canvas.height = 180) let time = 0 const drawWave = () => { time += 0.02 // Clear canvas with transparent background ctx.clearRect(0, 0, width, height) if (variant === "footer") { // Draw first wave ctx.strokeStyle = "rgba(6, 182, 212, 0.3)" ctx.lineWidth = 3 ctx.beginPath() for (let x = 0; x < width; x++) { const y = height / 2 + Math.sin((x * 0.01 + time) * 2) * 20 + Math.sin((x * 0.005 + time * 0.5) * 2) * 15 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() // Draw second wave ctx.strokeStyle = "rgba(34, 211, 238, 0.5)" ctx.lineWidth = 3 ctx.beginPath() for (let x = 0; x < width; x++) { const y = height / 2 + 20 + Math.sin((x * 0.01 + time * 0.7) * 2) * 20 + Math.sin((x * 0.005 + time * 0.3) * 2) * 15 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() // Draw third wave ctx.strokeStyle = "rgba(15, 23, 42, 0.4)" ctx.lineWidth = 3 ctx.beginPath() for (let x = 0; x < width; x++) { const y = height / 2 + 40 + Math.sin((x * 0.01 + time * 0.4) * 2) * 20 + Math.sin((x * 0.005 + time * 0.2) * 2) * 15 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() } else { // Draw first wave ctx.strokeStyle = "rgba(168, 85, 247, 0.2)" ctx.lineWidth = 3 ctx.beginPath() for (let x = 0; x < width; x++) { const y = height / 2 + Math.sin((x * 0.01 + time) * 2) * 20 + Math.sin((x * 0.005 + time * 0.5) * 2) * 15 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() // Draw second wave ctx.strokeStyle = "rgba(147, 51, 234, 0.4)" ctx.lineWidth = 3 ctx.beginPath() for (let x = 0; x < width; x++) { const y = height / 2 + 20 + Math.sin((x * 0.01 + time * 0.7) * 2) * 20 + Math.sin((x * 0.005 + time * 0.3) * 2) * 15 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() // Draw third wave ctx.strokeStyle = "rgba(124, 58, 255, 0.6)" ctx.lineWidth = 3 ctx.beginPath() for (let x = 0; x < width; x++) { const y = height / 2 + 40 + Math.sin((x * 0.01 + time * 0.4) * 2) * 20 + Math.sin((x * 0.005 + time * 0.2) * 2) * 15 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() // Fill gradient below const gradient = ctx.createLinearGradient(0, 0, 0, height) gradient.addColorStop(0, "rgba(147, 51, 234, 0.1)") gradient.addColorStop(0.5, "rgba(168, 85, 247, 0.05)") gradient.addColorStop(1, "rgba(168, 85, 247, 0.01)") ctx.fillStyle = gradient ctx.beginPath() ctx.moveTo(0, height / 2) for (let x = 0; x < width; x++) { const y = height / 2 + 40 + Math.sin((x * 0.01 + time * 0.4) * 2) * 20 + Math.sin((x * 0.005 + time * 0.2) * 2) * 15 ctx.lineTo(x, y) } ctx.lineTo(width, height) ctx.lineTo(0, height) ctx.closePath() ctx.fill() } requestAnimationFrame(drawWave) } drawWave() // Handle resize const handleResize = () => { canvas.width = window.innerWidth } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, [variant]) return (

) } [V0_FILE]javascriptreact:file="components/footer.jsx" isQuickEdit="true" isMerged="true" "use client" import WaveAnimator from "@/components/wave-animator" export default function Footer() { return ( ) } [V0_FILE]jpg:file="public/professional-woman-smiling-learning-online-course-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-smiling-learning-online-course--Hi4wsPa9FJhFSRMQa7deOHdC3RmKdo.jpg" isMerged="true" [V0_FILE]javascriptreact:file="components/online-learning.jsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export default function OnlineLearning() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight let animationTime = 0 const drawDashedWave = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) const centerX = canvas.width / 2 const centerY = canvas.height / 2 const baseRadius = 120 const waveAmplitude = 15 const points = 200 const dashLength = 8 const gapLength = 4 // Draw animated dashed wave circle ctx.strokeStyle = "rgba(255, 255, 255, 0.8)" ctx.lineWidth = 2.5 ctx.setLineDash([dashLength, gapLength]) ctx.lineDashOffset = -animationTime * 2 ctx.beginPath() for (let i = 0; i < points; i++) { const angle = (i / points) * Math.PI * 2 const wave = Math.sin(angle * 4 + animationTime * 0.03) * waveAmplitude const radius = baseRadius + wave const x = centerX + Math.cos(angle) * radius const y = centerY + Math.sin(angle) * radius if (i === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) } ctx.closePath() ctx.stroke() ctx.setLineDash([]) animationTime += 1 requestAnimationFrame(drawDashedWave) } drawDashedWave() }, []) const learningMethods = [ { title: "Video Berkualitas", description: "Pembelajaran interaktif dengan video HD berkualitas tinggi" }, { title: "Kuis Interaktif", description: "Test pengetahuan Anda dengan kuis yang dirancang khusus" }, { title: "Materi Lengkap", description: "Akses semua materi pembelajaran kapan saja" }, { title: "Sertifikat", description: "Dapatkan sertifikat setelah menyelesaikan kursus" }, ] const certificationFeatures = [ { title: "Online Learning", icon: "📚" }, { title: "Certification", icon: "🏆" }, { title: "24/7 Support", icon: "💬" }, ] return (

{/* Left - Learning Methods */}

Kembangkan Skill Baru dengan{" "} Cara Modern

Bergabunglah dengan ribuan peserta yang telah mengubah karir mereka melalui platform belajar kami yang inovatif dan interaktif.

{learningMethods.map((method, idx) => (

{idx + 1}

{method.title}

{method.description}

))}

{certificationFeatures.map((feature, idx) => (

{feature.icon}

{feature.title}

))}

{/* Right - Image with Wave Animator */}

{/* Wave Animator Canvas */}

) } [V0_FILE]javascriptreact:file="components/login-form-backup.jsx" isMerged="true" "use client" import { useState } from "react" import { Eye, EyeOff, Mail, Lock, ArrowRight } from "lucide-react" export function LoginForm() { const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const handleLogin = (e) => { e.preventDefault() setLoading(true) setTimeout(() => { setLoading(false) }, 1500) } return (

setEmail(e.target.value)} className="w-full pl-12 pr-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:bg-white focus:outline-none transition-all duration-200" />

Password

setPassword(e.target.value)} className="w-full pl-12 pr-12 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:bg-white focus:outline-none transition-all duration-200" />

) } [V0_FILE]jpg:file="public/cpns-preparation-course.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cpns-preparation-course-rG7l54jjjlbjmMRGDcluCa34nZg4tr.jpg" isMerged="true" [V0_FILE]javascriptreact:file="app/home/page.jsx" isMerged="true" "use client" import Navbar from "@/components/navbar" import Hero from "@/components/hero" import Products from "@/components/products" import WhyStudyHere from "@/components/why-study-here" import Testimonials from "@/components/testimonials" import Footer from "@/components/footer" import WaveAnimator from "@/components/wave-animator" export default function Home() { return (

) } [V0_FILE]javascriptreact:file="app/register/page.jsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Mail, Lock, User, Eye, EyeOff, ArrowRight, Loader2, BookOpen, Award, Users, Zap } from "lucide-react" import Navbar from "@/components/navbar" export default function Register() { const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", }) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) setError("") } const handleSubmit = (e) => { e.preventDefault() if (!formData.name || !formData.email || !formData.password || !formData.confirmPassword) { setError("Semua field harus diisi") return } if (formData.password !== formData.confirmPassword) { setError("Password tidak cocok") return } if (formData.password.length < 8) { setError("Password minimal 8 karakter") return } setLoading(true) setTimeout(() => { setLoading(false) setFormData({ name: "", email: "", password: "", confirmPassword: "" }) alert("Registrasi berhasil! Silakan login.") }, 2000) } const benefits = [ { icon: BookOpen, title: "Ribuan Kursus", description: "Pelajari berbagai topik dari instruktur berpengalaman", }, { icon: Award, title: "Sertifikat Resmi", description: "Dapatkan sertifikat yang diakui industri", }, { icon: Users, title: "Komunitas Besar", description: "Bergabung dengan jutaan pelajar di seluruh dunia", }, { icon: Zap, title: "Belajar Kapan Saja", description: "Akses seumur hidup ke semua materi pembelajaran", }, ] return ( <>

{/* Left Side - Benefits */}

Mulai Perjalanan Belajarmu

Bergabunglah dengan ribuan pelajar yang telah mencapai impian mereka

{benefits.map((benefit, index) => { const Icon = benefit.icon return (

{benefit.title}

{benefit.description}

) })}

Penawaran Spesial

Gratis 7 Hari

Coba semua fitur premium tanpa biaya

{/* Right Side - Register Form */}

{/* Header */}

Buat Akun Baru

Daftar sekarang dan mulai belajar dengan ribuan kursus terbaik

{/* Form */}

{/* Name Field */}

Nama Lengkap

{/* Email Field */}

{/* Password Field */}

Password

{/* Confirm Password Field */}

Konfirmasi Password

{/* Error Message */} {error && (

{error}

)} {/* Submit Button */}

{/* Social Auth */}

Atau daftar dengan

{/* Footer */}

Sudah punya akun?{" "} Login di sini

) } [V0_FILE]javascriptreact:file="app/verify-otp/page.jsx" isMerged="true" "use client" import { useState } from "react" import { ArrowRight, Lock, Loader2, CheckCircle2, ShieldCheck, Zap, Award, BookOpen } from "lucide-react" import Link from "next/link" import Navbar from "@/components/navbar" export default function VerifyOTPPage() { const [otp, setOtp] = useState(["", "", "", "", "", ""]) const [loading, setLoading] = useState(false) const [verified, setVerified] = useState(false) const handleInputChange = (index, value) => { if (!/^\d*$/.test(value)) return const newOtp = [...otp] newOtp[index] = value setOtp(newOtp) // Auto focus next input if (value && index < 5) { document.getElementById(`otp-${index + 1}`).focus() } } const handleKeyDown = (index, e) => { if (e.key === "Backspace" && !otp[index] && index > 0) { document.getElementById(`otp-${index - 1}`).focus() } } const handleVerify = () => { if (otp.join("").length !== 6) { alert("Mohon isi semua 6 digit OTP") return } setLoading(true) setTimeout(() => { setLoading(false) setVerified(true) }, 2000) } const benefits = [ { icon: ShieldCheck, title: "Akun Aman", description: "Verifikasi 2 langkah untuk keamanan maksimal", }, { icon: BookOpen, title: "Ribuan Kursus", description: "Akses semua kursus berkualitas tinggi", }, { icon: Award, title: "Sertifikat Resmi", description: "Dapatkan sertifikat yang diakui industri", }, { icon: Zap, title: "Belajar Kapan Saja", description: "Fleksibilitas penuh dalam pembelajaran Anda", }, ] return ( <>

{/* Left Side - Benefits */}

Verifikasi Akun Anda

Keamanan akun Anda adalah prioritas utama kami

{benefits.map((benefit, index) => { const Icon = benefit.icon return (

{benefit.title}

{benefit.description}

) })}

Keamanan Terjamin

SSL Encrypted

Semua data Anda terenkripsi dengan aman

{/* Right Side - OTP Form */}

{verified ? (

Verifikasi Berhasil!

Akun Anda telah berhasil diverifikasi dan siap digunakan

Lanjut ke Dashboard

) : (

{/* Header */}

Masukkan Kode OTP

Kami telah mengirim kode 6 digit ke email Anda

{/* OTP Input Fields */}

{otp.map((digit, index) => ( handleInputChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} className="w-14 h-14 text-center text-2xl font-bold border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition-all duration-200 bg-gray-50 focus:bg-white" /> ))}

Masukkan kode 6 digit

{/* Verify Button */} {/* Resend Code */}

Tidak menerima kode?

{/* Back Link */}

Kembali ke login

)}

) } [V0_FILE]javascriptreact:file="app/login/page.jsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Eye, EyeOff, Mail, Lock, LogIn, ArrowRight, Users, Award, BookOpen, Zap } from "lucide-react" import Link from "next/link" import Navbar from "@/components/navbar" export default function LoginPage() { const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const handleLogin = (e) => { e.preventDefault() setLoading(true) setTimeout(() => { setLoading(false) }, 1500) } const benefits = [ { icon: BookOpen, title: "Ribuan Kursus", description: "Pelajari berbagai topik dari instruktur berpengalaman", }, { icon: Award, title: "Sertifikat Resmi", description: "Dapatkan sertifikat yang diakui industri", }, { icon: Users, title: "Komunitas Besar", description: "Bergabung dengan jutaan pelajar di seluruh dunia", }, { icon: Zap, title: "Akses Selamanya", description: "Belajar kapan saja, di mana saja tanpa batasan waktu", }, ] return ( <>

{/* Background decoration */}

{/* Left Side - Benefits */}

Selamat Datang Kembali

Lanjutkan perjalanan belajarmu bersama ribuan kursus berkualitas

{benefits.map((benefit, index) => { const Icon = benefit.icon return (

{benefit.title}

{benefit.description}

) })}

Penawaran Terbatas

Diskon hingga 50%

Untuk member baru yang mendaftar bulan ini

{/* Right Side - Login Form */}

{/* Header */}

Masuk Akun

Gunakan email dan password Anda untuk masuk

{/* Login Form Card */}

{/* Email Input */}

setEmail(e.target.value)} className="w-full pl-12 pr-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:bg-white focus:outline-none transition-all duration-200 text-gray-900 placeholder-gray-500" />

{/* Password Input */}

Password Lupa Password?

{/* Remember Me */}

Ingat saya

{/* Login Button */} {/* Divider */}

atau

{/* Social Login */}

{/* Sign Up Link */}

Belum punya akun?{" "} Daftar di sini

) } [V0_FILE]javascriptreact:file="app/my-courses/page.jsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Navbar from "@/components/navbar" import { Search, Grid, List, Clock, Star, BookOpen, ArrowRight } from "lucide-react" export default function MyCoursesPage() { const [viewMode, setViewMode] = useState("grid") const [searchQuery, setSearchQuery] = useState("") // Sample user courses data const myCourses = [ { id: "1", title: "Persiapan CPNS 2025 - Paket Lengkap", category: "CASN", image: "/cpns-preparation-course.jpg", progress: 65, instructor: "Budi Santoso, S.E., M.PA", rating: 4.8, lessons: 156, completed: 102, duration: "120 jam", }, { id: "2", title: "Strategi Ujian Kepolisian 2025", category: "POLRI", image: "/cpns-preparation-course.jpg", progress: 40, instructor: "Hendro Sutanto, S.H., M.SI", rating: 4.7, lessons: 120, completed: 48, duration: "100 jam", }, { id: "3", title: "Persiapan Akademi Militer", category: "TNI", image: "/cpns-preparation-course.jpg", progress: 85, instructor: "Ciptro Hardono, M.M", rating: 4.9, lessons: 140, completed: 119, duration: "110 jam", }, { id: "4", title: "TWK Expert - Tes Wawasan Kebangsaan", category: "CASN", image: "/cpns-preparation-course.jpg", progress: 20, instructor: "Ani Widiyanti, M.Pd", rating: 4.6, lessons: 80, completed: 16, duration: "60 jam", }, ] const filteredCourses = myCourses.filter( (course) => course.title.toLowerCase().includes(searchQuery.toLowerCase()) || course.category.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

{/* Header Section */}

Kursus Saya

Lanjutkan belajar dan capai target Anda

{/* Search & Filter Bar */}

setSearchQuery(e.target.value)} className="w-full pl-12 pr-4 py-3 bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" />

{/* Courses Grid/List */} {viewMode === "grid" ? (

{filteredCourses.map((course) => (

{/* Image Container */}

{course.category}

{/* Content */}

{course.title}

{course.instructor}

{/* Rating */}

{course.rating}

{/* Progress Bar */}

Progress {course.progress}%

{/* Stats */}

{course.completed}/{course.lessons}

{course.duration}

{/* CTA */}

))}

) : (

{filteredCourses.map((course) => (

{course.title}

{course.instructor}

{course.progress}%

{course.completed}/{course.lessons} pelajaran

))}

)} {/* Empty State */} {filteredCourses.length === 0 && (

Tidak ada kursus yang ditemukan

Jelajahi Kursus

)}

) } [V0_FILE]javascriptreact:file="app/my-courses/loading.jsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascriptreact:file="app/course-learning/[id]/page.jsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Navbar from "@/components/navbar" import { ArrowLeft, Play, CheckCircle2, ChevronDown } from "lucide-react" export default function CourseLearningPage({ params }) { const [expandedModule, setExpandedModule] = useState(0) // Sample course learning data const course = { id: params.id, title: "Persiapan CPNS 2025 - Paket Lengkap", category: "CASN", description: "Kursus persiapan CPNS 2025 yang paling lengkap dengan materi terbaru dan soal-soal yang sering keluar.", instructor: "Budi Santoso, S.E., M.PA", youtubeId: "dQw4w9WgXcQ", modules: [ { id: 1, title: "Modul 1: TWK - Pancasila dan Nilai-Nilai Dasar", lessons: [ { id: 1, title: "Pengenalan Pancasila", type: "pretest", duration: 15, completed: true, }, { id: 2, title: "Materi: Sejarah Penyusunan Pancasila", type: "materi", duration: 45, completed: true, hasVideo: true, }, { id: 3, title: "Posttest: Evaluasi Pemahaman TWK", type: "posttest", duration: 20, completed: true, hasDiscussion: true, }, ], }, { id: 2, title: "Modul 2: TWK - UUD 1945 dan Perubahannya", lessons: [ { id: 4, title: "Pretest: Persiapan UUD 1945", type: "pretest", duration: 15, completed: false, }, { id: 5, title: "Materi: Struktur dan Isi UUD 1945", type: "materi", duration: 50, completed: false, hasVideo: true, }, { id: 6, title: "Posttest: Evaluasi UUD 1945", type: "posttest", duration: 20, completed: false, hasDiscussion: true, }, ], }, { id: 3, title: "Modul 3: TIU - Penalaran Logis dan Analitik", lessons: [ { id: 7, title: "Pretest: Logika Dasar", type: "pretest", duration: 15, completed: false, }, { id: 8, title: "Materi: Penalaran Deduktif dan Induktif", type: "materi", duration: 60, completed: false, hasVideo: true, }, { id: 9, title: "Posttest: Soal-Soal Penalaran", type: "posttest", duration: 25, completed: false, hasDiscussion: true, }, ], }, ], } return (

{/* Header */}

Kembali ke Kursus Saya

{course.title}

Instruktur: {course.instructor}

{/* Main Content */}

{/* Video Player */}