// NekoShop — pages: Home, Category, Browse, Product detail const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React; // ────────────────────────────────────────────────────────────────── // HOME // ────────────────────────────────────────────────────────────────── function HomePage() { const { go } = useRouter(); const { currency } = useCurrency(); const [q, setQ] = useStateP(""); const data = window.NEKO_DATA; const recent = data.products.slice(0, 7); const flagship = data.products.find(p => p.id === "nekoclubkit"); const featured = ["nekodono-v3", "nekovip-gift-advanced", "nekodj-v4", "nekocarry-v6", "avabooth-v2", "nekovip-nekodono-v3", "advance-confessionboard", "nekocampro"].map(id => data.products.find(p => p.id === id)); return (
{/* HERO */}
Marketplace — Roblox systems

NoMen Roblox
paid systems.

Donation flows, VIP gifting, synced DJ booths, club kits — production-ready modules built in Jakarta. Install today, ship tonight.

go("/browse")}>Browse the catalog → go("/p/nekoclubkit")}>See the flagship
24 systems QRIS + PayPal Lifetime updates
{/* Hero composition: real youtube thumb of NekoClubKit + supporting card */}
NekoClubKit
NekoVIP
NOW INSTALLED
NekoClubKit v1.2
{/* SEARCH */}
setQ(e.target.value)} placeholder="Search for systems — try ‘DJ’, ‘donation’, ‘camera’…" onKeyDown={(e) => { if (e.key === "Enter" && q) go("/browse"); }} style={{ flex: 1, border: "none", outline: "none", fontFamily: "var(--sans)", fontSize: 15, background: "transparent", color: "var(--ink)" }} /> ↵
{q && (
{data.products .filter(p => p.name.toLowerCase().includes(q.toLowerCase())) .slice(0, 5) .map(p => ( ))}
)}
{/* CATEGORIES */}
{Object.values(data.cats).map((c, i) => ( ))}
{/* FLAGSHIP — NekoClubKit */} {flagship && (
Bundled — paket bundel — flagship

{flagship.name}

{flagship.tagline}

    {flagship.features.map(f => (
  • + {f}
    • ))}
go(`/p/${flagship.id}`)} style={{ background: "var(--accent)", borderColor: "var(--accent)", color: "white" }}> Buy NekoClubKit →
Flagship
)} {/* RECENTLY UPDATED — horizontal */}
go("/browse")} style={{ background: "transparent", border: "none", cursor: "pointer", fontSize: 13, color: "var(--muted)", fontFamily: "var(--sans)" }}>View all →} />
{recent.slice(0, 4).map(p => go(`/p/${p.id}`)} />)}
{/* MOST POPULAR */}
{featured.slice(0, 8).map(p => go(`/p/${p.id}`)} />)}
{/* HOW PAYMENT WORKS */}
} /> } /> } />
); } function SectionHeading({ kicker, title, action }) { return (
{kicker}

{title}

{action}
); } function PaymentMethodCard({ title, subtitle, body, icon }) { return (
{icon}
{title}
{subtitle}

); } function QrisIcon() { // simple QR-ish glyph return ( {[[0,0,3,3],[11,0,3,3],[0,11,3,3],[5,5,1,1],[7,5,2,2],[5,8,2,2],[8,8,1,1],[10,8,1,1],[10,10,1,1]].map((r,i) => )} {[[1,1,1,1],[12,1,1,1],[1,12,1,1]].map((r,i) => )} ); } function PaypalIcon() { return ( ); } function RobuxIcon() { return ( R$ ); } Object.assign(window, { QrisIcon, PaypalIcon, RobuxIcon }); // ────────────────────────────────────────────────────────────────── // BROWSE — all products with filters // ────────────────────────────────────────────────────────────────── function BrowsePage({ initialCat }) { const { go } = useRouter(); const [cat, setCat] = useStateP(initialCat || "all"); const [sort, setSort] = useStateP("popular"); const [q, setQ] = useStateP(""); const data = window.NEKO_DATA; const filtered = useMemoP(() => { let r = data.products; if (cat !== "all") r = r.filter(p => p.cat === cat); if (q) r = r.filter(p => p.name.toLowerCase().includes(q.toLowerCase())); if (sort === "price-low") r = [...r].sort((a,b) => a.price.idr - b.price.idr); if (sort === "price-high") r = [...r].sort((a,b) => b.price.idr - a.price.idr); if (sort === "name") r = [...r].sort((a,b) => a.name.localeCompare(b.name)); return r; }, [cat, sort, q]); const catObj = cat === "all" ? null : data.cats[cat]; return (
{/* Breadcrumb */}
{e.preventDefault();go("/");}}>NekoShop / {catObj ? catObj.label : "All systems"}
{/* Header */}

{catObj ? catObj.label : "All systems"}

{catObj ? catObj.blurb : "24 systems, all from NekoStudio. Pick what you need, pay with QRIS or PayPal."}

{filtered.length} results
{/* Controls */}
setCat("all")}>All {Object.values(data.cats).map(c => ( setCat(c.id)}>{c.label} ))}
setQ(e.target.value)} placeholder="Search…" style={{ padding: "8px 14px", border: "1px solid var(--border)", borderRadius: 999, fontFamily: "var(--sans)", fontSize: 13, outline: "none", background: "var(--bg)", color: "var(--ink)", width: 200, }} />
{/* Grid */} {filtered.length === 0 ? (
NOTHING MATCHES — try clearing filters.
) : (
{filtered.map(p => go(`/p/${p.id}`)} />)}
)}
); } function FilterChip({ active, onClick, children }) { return ( ); } // ────────────────────────────────────────────────────────────────── // PRODUCT DETAIL // ────────────────────────────────────────────────────────────────── // Media block: YouTube video, single image, or an image gallery w/ thumbs. function ProductMedia({ p, hue }) { const gallery = Array.isArray(p.images) && p.images.length > 0 ? p.images : null; const [active, setActive] = useStateP(0); const ytId = p.video && p.video.kind === "youtube" ? p.video.id : undefined; // Plain YouTube or single-image (no gallery) → existing VideoPlayer handles it if (!gallery) { return ( ); } // Image gallery — big image + thumbnail strip return (
{`${p.name}
{gallery.map((src, i) => ( ))}
); } function ProductPage({ id }) { const { go } = useRouter(); const { currency } = useCurrency(); const { add } = useCart(); const data = window.NEKO_DATA; const p = data.products.find(x => x.id === id); const [added, setAdded] = useStateP(false); if (!p) { return (

Not found

That system doesn't exist anymore. Try browsing.

go("/browse")}>← Back to browse
); } const cat = data.cats[p.cat]; const hue = data.hue[p.cat]; const related = data.products.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4); const handleAdd = () => { add(p.id, 1); setAdded(true); setTimeout(() => setAdded(false), 1600); }; return (
{/* Breadcrumb */}
{e.preventDefault();go("/");}}>NekoShop / {e.preventDefault();go(`/c/${cat.id}`);}}>{cat.label} / {p.name}
{/* Media */}
{p.video && p.video.kind === "mediafire" && ( )} {/* Long description */}

About this system

{p.tagline} Delivered directly to your Roblox toolbox once payment is confirmed. Whitelist-protected — 1 account + 1 community included. For additional communities, purchase the Whitelist Addition add-on.

What's included

    {p.features.map(f => (
  • ✓ {f}
    • ))}

Compatibility

{[ ["Engine", "Roblox 2025+"], ["Required", "Whitelist system"], ["License", "1 account + 1 community"], ["Mobile / PC", "Fully supported"], ["Delivery", "To your Toolbox"], ["Updates", "Patch updates included"], ].map(([k,v]) => (
{k}
{v}
))}
{/* Buy panel — sticky */}
{/* Related */} {related.length > 0 && (
{related.map(r => go(`/p/${r.id}`)} />)}
)}
); } function ThumbBtn({ active, onClick, children }) { return ( ); } function ThumbLabel({ children }) { return (
{children}
); } Object.assign(window, { HomePage, BrowsePage, ProductPage, SectionHeading, });