POSI Nexus

A single gateway for exams, learning, apps, and store purchases.

POSI Nexus is a responsive landing page for Pusat Olimpiade Sains Indonesia that helps students, parents, teachers, and schools discover active competitions, download the POSI app, and shop educational products. It is designed to drive registrations, app installs, and fast checkout conversions from a single high-trust entry point.

Business Goals

Increase competition registration conversion from landing page visits by 20% within 90 days of launch.
Grow Android APK downloads for POSI Informasi by 30% within 60 days.
Lift POSI Store click-through to checkout by 15% within 90 days.
Reduce bounce rate on mobile landing traffic to below 45% within 8 weeks.
Increase partner and sponsor visibility impressions by 25% through the homepage modules within one quarter.

User Goals

Help students find active competitions in fewer than 2 clicks.
Let parents and teachers verify competition details, fees, schedules, and rules quickly.
Make APK download and manual installation instructions easy to follow on Android devices.
Allow users to buy books and merchandise with minimal checkout friction.
Provide a trusted overview of POSI programs, partners, and archives in one place.

Non-Goals

Building a full competition management backend or registration workflow inside the landing page.
Creating a custom e-commerce warehouse, inventory, or fulfillment system for POSI Store.
Replacing the existing exam app or learning platform; this page only routes users to those experiences.
Supporting iOS APK downloads or non-Android app installation flows beyond informational guidance.

Alya, Grade 8 Student, 14 - Alya wants to join a science olympiad but needs a clear, mobile-friendly page to find current competitions, understand the requirements, and register quickly. She is impatient and will leave if the page is cluttered or slow.

Alya, Grade 8 Student, 14

As a student, I want to see active competitions and deadlines immediately, so that I can decide which event to join.
As a student, I want to open the guide PDF and copy the registration link, so that I can submit my entry without asking a teacher for help.
As a student, I want to try the Mimpi.mu feature preview, so that I can prepare more effectively for UTBK and OSN exams.

Bu Rina, Parent, 38 - Bu Rina supports her child’s study and wants to confirm that POSI is credible before paying for a product or competition. She values official information, transparent pricing, and safe payment flows.

Bu Rina, Parent, 38

As a parent, I want to read concise program information and sponsor references, so that I can trust the platform before buying.
As a parent, I want to see competition fees, dates, and locations clearly, so that I can plan my child’s participation.
As a parent, I want a straightforward checkout path for books and merchandise, so that I can complete a purchase without creating an account.

Pak Dedi, Teacher, 45 - Pak Dedi manages multiple students and needs an efficient way to share competition details, downloadable rules, and app installation instructions. He also needs a reliable reference archive for past events.

Pak Dedi, Teacher, 45

As a teacher, I want to filter competitions by level and format, so that I can recommend the right contest to my students.
As a teacher, I want to download Juknis PDFs and archive examples, so that I can explain the rules in class.
As a teacher, I want to send a single link to the POSI app and store, so that students and parents can access everything from one source.

Hero and Primary Navigation · High priority

The landing page must present the brand value proposition immediately and route users to the most important journeys.
Display a header badge, headline, supporting description, and two primary CTAs: Mulai Ujian Sekarang and Lihat Panduan.
Show real-time or frequently refreshed counters for participants, competitions, and partner schools.
Primary CTA should deep-link to the app or login destination with fallback handling if the app is unavailable.
Secondary CTA should open a guide section or PDF asset in a new tab.
The hero must remain readable and tappable on 360px wide mobile screens without layout shift.

Competition Discovery and Detail Cards · High priority

Users must be able to find active and past competitions quickly and understand core logistics before clicking through.
Provide tabs or filters for online, offline, and status-based competition views.
Each card must show title, fee badge, level, date, registration period, region, quota, and participant count.
Cards must expose actions for Salin Link Kompetisi, Juknis download, and Lihat Detail Kompetisi.
Past competitions should be visually distinct and clearly archived rather than appearing open for registration.
If a competition is full or closed, the card must show a disabled state and an accurate status label.

Product and App Promotion Modules · Medium priority

The page should promote the broader POSI ecosystem without distracting from registration conversion.
Display the featured national competition banner with current registration status and promotional visuals.
Show the Mimpi.mu module with a CTA that routes to the platform landing page or relevant product page.
Show the POSI Informasi app section with Android-only APK download instructions and direct file download.
Include the POSI Store banner with fast checkout messaging and route users to product listing or cart.
The module order should prioritize competitions first, then app and store discovery.

Commerce and Payment Flow · High priority

The POSI Store section must support low-friction product discovery and a direct checkout experience.
Use Midtrans for payment processing with guest checkout and no forced account creation.
Support product entry points for books, bundles, and merchandise with quantity selection and cart summary.
Open checkout in a clear, secure flow with payment status callbacks handled by the backend.
If payment initiation fails, show a retry path and preserve cart contents for at least 30 minutes.
Order confirmation should include transaction reference and next-step messaging for buyers.

Footer, Trust, and File Distribution · Medium priority

The footer and supporting sections must reinforce trust, offer helpful resources, and deliver downloadable files reliably.
Show company or foundation information, office address, WhatsApp, email, and quick links to key destination pages.
Display a visitor counter in the footer that updates automatically without harming performance.
Serve PDFs and APK files from CDN-backed storage with versioned URLs.
Ensure sponsor logos load lazily and remain accessible with alt text or text fallback.
Provide consistent navigation to Home, Jadwal, Pengumuman, Hasil, Leaderboard, Berita, and Pemesanan Mandiri.

First Visit to Action

Open the landing page on mobile, tablet, or desktop in under 2 seconds on a standard 4G connection.
Immediately see the hero headline, current participant metrics, and the two main CTAs.
Skim active competitions or the featured banner to identify the most relevant opportunity.
Tap one of three paths: start exam, read guide, or browse store/app content.
Reach a useful destination within 3 clicks and under 30 seconds from arrival.
If the user is on Android and chooses the app, they should reach the APK download or app route in under 15 seconds.

1. Landing and Trust Building

The page opens with a confident hero section that explains what POSI offers and why it is credible.
Show dynamic counts for participants, competitions, and partner schools with a graceful loading placeholder.
Prevent layout jumps while counters load and keep CTA buttons visible above the fold.
If metrics fail to load, fall back to cached values with a last-updated timestamp.

2. Discover Active Competitions

Users scan the competition grid to find an event that matches level, schedule, and region.
Filters should update results instantly without a full page reload.
Cards must include visual status cues such as open, ongoing, full, or closed.
If the user copies a competition link, show a confirmation toast and preserve filter state.

3. Review Rules and Archive

Users open competition details or historical competitions to validate legitimacy and learn event patterns.
Juknis PDFs should open in-browser or download cleanly depending on device.
Past competitions should not allow registration actions and must clearly state archive status.
Broken file links should display a friendly error state and a support contact.

4. Route to App or Learning Product

Users can move from the landing page to the Mimpi.mu platform or the POSI Information app when they want deeper preparation.
Mimpi.mu CTA should deep-link to the correct platform page and include analytics tracking.
APK download should include Android installation guidance and a visible warning for non-Android devices.
If a destination is unavailable, provide a fallback web page with the same product explanation.

5. Purchase Products Quickly

Users can browse POSI Store highlights and complete a fast guest checkout with Midtrans.
Cart should persist through refreshes and basic navigation within the session.
Show price, shipping or pickup notes where applicable, and a clear payment handoff state.
If payment is declined or pending, display the current status and next action without losing the cart.

Power User and Edge Case Support

Deep links from competition cards to specific registration or guide pages with UTM tracking.
Role-aware content variants for students, parents, teachers, and partners.
Cached offline-friendly access to previously viewed PDFs and competition details.
Regional or level-based sorting for schools managing multiple student cohorts.
Graceful degradation for disabled scripts, ad blockers, or slow network conditions.

Visual, Accessibility, and Performance Principles

Mobile-first responsive layout with touch-friendly tap targets and clear hierarchy.
High contrast typography and accessible color ratios across banners, cards, and badges.
Lazy-load below-the-fold images, sponsor logos, and carousel assets to keep initial render fast.
Provide meaningful alt text, keyboard focus states, and visible error messages for downloads.
Use skeleton loaders and stable component sizing to prevent content shift during data refreshes.

Bu Rina hears from her daughter about an upcoming olympiad but does not know whether the event is official, open, or worth the fee. She opens the POSI landing page on her phone and immediately sees active competitions, clear dates, and trust markers from sponsors and partner schools.

She checks the competition card, opens the Juknis PDF, and compares it with a past competition archive to understand the structure. Then she sees the POSI Store and app download sections, which give her a one-stop path to support her child’s preparation without hunting across multiple sites.

Within a few minutes, Bu Rina copies the registration link, downloads the guide, and starts a purchase checkout for study materials. POSI benefits from higher conversions, better trust, and fewer abandoned journeys because the page removes friction across discovery, learning, and commerce.

User-Centric Metrics

At least 60% of mobile visitors interact with one primary CTA within the first session.
Guide PDF open rate reaches 25% of landing page visitors within 60 days.
Competition card click-through reaches 18% of landing page sessions.
APK download click-through reaches 12% of Android sessions.
POSI Store product detail or cart clicks reach 10% of total sessions.
Average time to first meaningful action stays under 30 seconds.

Business Metrics

Competition registration conversion increases by 20% within 90 days.
POSI Store checkout conversion increases by 15% within 90 days.
Android app download volume increases by 30% within 60 days.
Bounce rate decreases below 45% on mobile within 8 weeks.
Referral traffic and repeat visits increase by 15% quarter over quarter.

Technical Metrics

Landing page uptime is at least 99.9% monthly.
Largest contentful paint stays below 2.5 seconds on 4G for the 75th percentile.
File download success rate for PDFs and APKs exceeds 99%.
No critical security vulnerabilities in production and all payment flows remain PCI-compliant through Midtrans handling.

Tracking Plan

Track hero_cta_click for Mulai Ujian Sekarang and Lihat Panduan.
Track competition_filter_applied with filter type and result count.
Track competition_card_open and competition_link_copied.
Track juknis_download_started and juknis_download_completed.
Track apk_download_click and apk_instruction_viewed.
Track store_product_click, add_to_cart, and checkout_started.
Track payment_success and payment_failed through Midtrans callbacks.

Technical Needs

Use a modern frontend stack such as Next.js with React and TypeScript for SSR and SEO.
Use Tailwind CSS or CSS modules for responsive component styling.
Use a lightweight headless CMS or JSON-backed content layer for banners, sponsor logos, and featured program copy.
Use a backend API layer with Node.js or serverless functions for counters, competition feeds, and checkout orchestration.
Host PDFs and APKs on a CDN-backed object store such as AWS S3 plus CloudFront or equivalent.
Implement analytics using GA4 or PostHog with event naming aligned to product funnels.
Use image optimization and caching headers for carousel and logo assets.

Integration Points

Midtrans for guest checkout and payment status callbacks.
Google Analytics 4 or PostHog for behavior tracking.
WhatsApp click-to-chat and mailto links for support contacts.
Cloud storage CDN for PDF Juknis files and APK downloads.
Optional competition data source or admin CMS for updating schedules, banners, and archive cards.

Data Storage & Privacy

Store only the minimum user data required for analytics, downloads, and checkout events.
Treat payment data as processor-handled via Midtrans and never store raw card data on POSI systems.
Provide privacy notice and cookie consent where required, with opt-out controls for analytics in applicable regions.
Protect downloadable assets with signed or versioned URLs where appropriate and log access for audit purposes.
If any user-level data is collected for checkout or support, define retention limits and deletion procedures consistent with GDPR and CCPA expectations.

Scalability & Performance

Cache homepage content and competition lists at the edge to handle traffic spikes during registration openings.
Lazy-load noncritical banners, sponsor logos, and past competition archives to keep initial payload small.
Use pagination or virtualized rendering if the competition archive grows beyond 50 cards.
Ensure counters and feeds are fetched asynchronously so a slow analytics or stats service does not block page render.

Potential Challenges

Dynamic counters may show inconsistent numbers during high traffic; mitigate with cached snapshots and clear refresh intervals.
APK downloads can be blocked or misunderstood on non-Android devices; mitigate with device detection and explicit install guidance.
Competition data may change frequently; mitigate with a content admin workflow and timestamped updates.
Midtrans callbacks may be delayed or duplicated; mitigate with idempotent payment handling and status reconciliation.
Large media assets can slow the page; mitigate with compressed images, responsive variants, and lazy loading.

Team & resourcing - Small cross-functional team - 2 frontend engineers, 1 backend engineer, 1 product designer, part-time PM, shared QA.

Phase 1: MVP Landing Page · Weeks 1-3

Responsive homepage with hero, competition grid, featured banner, sponsor bar, and footer.
Static or CMS-driven content model for banners, cards, logos, and quick links.
Basic analytics events for page view, CTA clicks, and competition card opens.
Initial CDN delivery for PDFs and APK assets.

Phase 2: Commerce and Downloads · Weeks 4-6

Midtrans guest checkout flow for POSI Store.
APK download section with Android instructions and file delivery links.
Juknis PDF download handling with success and error states.
Copy link and deep-link routing for competition actions.

Phase 3: Dynamic Content and Counters · Weeks 7-8

Participant, visitor, and metric counter service with caching.
Admin-editable featured competition and archive content.
SEO improvements, structured metadata, and performance tuning.
Enhanced analytics dashboard for funnel visibility.

Phase 4: Hardening and Optimization · Weeks 9-10

Cross-device QA across mobile, tablet, and desktop.
Accessibility pass for keyboard navigation, contrast, and screen readers.
Error handling for file failures, payment failures, and unavailable destinations.
Launch monitoring, alerting, and rollback plan.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a responsive marketing and conversion landing page for POSI Nexus, the official POSI landing page for science olympiad competitions, Android app downloads, and educational product sales.

Use Next.js 14, React, TypeScript, and Tailwind CSS. Create a polished, mobile-first UI with SEO-friendly server rendering. The product must include these primary sections:
1. Hero section with brand badge, headline, short description, participant/competition/school counters, and two CTAs: Mulai Ujian Sekarang and Lihat Panduan.
2. Featured competition banner for national programs with status label and poster visual.
3. Active competitions grid with filter tabs, cards showing title, fee, level, date, registration period, region, quota, participant count, and actions: Salin Link Kompetisi, Juknis download, Lihat Detail Kompetisi.
4. Past competitions archive section.
5. Mimpi.mu promo section with CTA to external platform.
6. POSI Informasi app section with Android APK download button and manual install instructions.
7. Sponsor and collaboration logo bar.
8. POSI Store banner with product highlights and CTA to product list and cart, using a simple guest checkout flow powered by Midtrans.
9. Footer with foundation info, quick links, office address, WhatsApp, email, and visitor counter.

Data model:
Competition { id, title, status, mode, fee, level, date, registrationStart, registrationEnd, region, quota, participantCount, detailUrl, juknisUrl, copyLinkUrl, archived }
Product { id, name, price, summary, imageUrl, category, stockStatus }
Banner { id, title, subtitle, imageUrl, statusText, ctaLabel, ctaUrl }
Sponsor { id, name, logoUrl, websiteUrl }
Metric { label, value, updatedAt }
DownloadAsset { id, type: pdf|apk, fileUrl, version, deviceTarget }
Order { id, items, total, paymentProvider, paymentStatus, createdAt }

Core flows:
1. Browse landing page and click primary CTA.
2. Filter competitions and open details or copy links.
3. Download Juknis PDFs and APK files with clear success and error states.
4. Browse POSI Store products and start guest checkout through Midtrans.
5. Track events with GA4 or PostHog.

Implement: reusable components, skeleton loading states, lazy-loaded media, accessible focus states, alt text, responsive cards, and graceful fallback when metrics or downloads fail. Use CDN-backed storage for PDFs and APKs. Add a simple admin-friendly content source, either local JSON or a headless CMS abstraction, so banners, sponsors, metrics, and competition cards can be updated without code changes. Include realistic sample content for Indonesian science olympiad users, and make the homepage feel trustworthy, fast, and conversion-focused.

Business Idea

**Product Requirement Document (PRD): OLIMPIADE.KIDS (Pusat Olimpiade Sains Indonesia) Landing Page** --- ### 1. Document Overview Dokumen ini mendefinisikan persyaratan fungsional dan teknis untuk pengembangan ulang Landing Page platform **Pusat Olimpiade Sains Indonesia (POSI)** berdasarkan wireframe UI terbaru. --- ### 2. Objectives & User Goals * **Tujuan Platform:** Meningkatkan konversi pendaftaran kompetisi, unduhan aplikasi Android, serta penjualan produk edukasi (buku & merchandise). * **Target Pengguna:** Siswa SD, SMP, SMA/K, Guru, dan Orang Tua murid. --- ### 3. Component Breakdown & Features | Key Section | Core Elements | Functional Requirements | | --- | --- | --- | | **Hero Section** | Header badge, Tagline utama, Deskripsi, CTA buttons, Metric counter | • **CTA Utama:** "Mulai Ujian Sekarang" (redirect ke app/login), "Lihat Panduan". • **Metrics Counter:** Menampilkan total peserta (10,000+), kompetisi (200+), dan sekolah mitra (50+). | | **Featured Competition Banner** | Carousel/Banner MSO & SSO 2026, Detail Informasi & Poster | • Dynamic banner yang menampilkan highlight program nasional POSI. • Menampilkan status pendaftaran (e.g., "Pendaftaran sedang berlangsung"). | | **Active Competitions Grid** | Filter tab, Competition cards (Status: Online/Offline, Tanggal, Kuota, Lokasi) | • **Card Elements:** Judul, Biaya (Badge), Modul/Jenjang (SD, SMP, SMA), Tanggal Pelaksanaan, Periode Registrasi, Wilayah, & Jumlah Peserta. • **Actions:** "Salin Link Kompetisi", "Juknis" (Download PDF), "Lihat Detail Kompetisi". | | **Past Competitions Section** | Card archive kompetisi yang telah selesai | • Menampilkan histori kompetisi relevan sebagai referensi format ujian/juknis. | | **Mimpi.mu Platform Feature** | Text overlay feature list, Visual dashboard preview | • **CTA:** "Coba Gratis Sekarang" (Redirect ke platform Mimpi.mu). • Showcase analisis performa berbasis AI dan persiapan UTBK/OSN. | | **POSI Information App Section** | APK Download guide, Direct APK download button | • Menampilkan instruksi manual installation APK Android. • **CTA:** "Download APK POSI Informasi" (Direct file download link). | | **Sponsor & Collaboration Bar** | Logo carousel / grid mitra | • Menampilkan logo-logo sponsor resmi (ELCI, Foton, Thinker Academy, Millenial Berdaya, POSI Store). | | **POSI Store Banner** | Feature highlights (Ringkasan materi, Soal HOTS, Akses simulasi), Product preview | • Integrasi cepat checkout (tanpa daftar/login via Midtrans). • **CTA:** "Lihat Produk POSI", "Lanjut ke Keranjang". | | **Footer** | Info Yayasan POSI, Quick Links (Produk, Perusahaan, Kantor, Kontak), Visitor Counter | • Links ke Halaman Utama, Jadwal, Pengumuman, Hasil, Leaderboard, Berita, & Pemesanan Mandiri. • Alamat kantor fisik, kontak WhatsApp/Email, dan widget statistik pengunjung. | --- ### 4. Technical & Non-Functional Requirements * **Responsive Design:** Tampilan harus responsif dan teroptimasi penuh untuk perangkat Mobile, Tablet, dan Desktop. * **Integrasi Payment Gateway:** Support Midtrans pada POSI Store section untuk *express checkout*. * **Analytics & Counter:** Integrasi dynamic counter untuk statistik peserta dan visitor counter otomatis pada bagian footer. * **File Management:** CDN storage untuk pengunduhan file berkas Juknis (PDF) dan APK POSI Informasi.

Design by The Resonance | Powered by GPC – The AI Transformation Company

TL;DR

Goals