Genza English

Genza English — Custom Course Website & Management System

Website kursus Bahasa Inggris modern dengan custom admin panel, sistem kelas, pricing, WhatsApp conversion flow, Meta Pixel integration, typography management, responsive UI, dan deployment production berbasis Next.js.

Bukan sekadar company profile. Website dirancang sebagai digital sales platform untuk membantu Genza English mengubah visitor menjadi calon siswa.

Genza English adalah website kursus Bahasa Inggris yang dibangun secara custom untuk menghadirkan pengalaman digital yang lebih profesional, modern, mudah digunakan, dan mendukung proses pemasaran program secara langsung.

Website ini tidak dibuat sekadar sebagai company profile, tetapi dirancang sebagai digital sales platform yang menghubungkan informasi program, kelas, harga, keunggulan metode belajar, hingga proses calon siswa menghubungi admin melalui WhatsApp.

━━━━━━━━━━━━━━━━━━
🎯 TUJUAN PEMBUATAN
━━━━━━━━━━━━━━━━━━

Website Genza English dikembangkan untuk membantu lembaga kursus:

✅ Menampilkan brand secara lebih profesional
✅ Menjelaskan program pembelajaran dengan lebih mudah dipahami
✅ Memisahkan program berdasarkan usia dan level siswa
✅ Menampilkan kelas yang sedang tersedia
✅ Menampilkan harga program secara transparan
✅ Mengarahkan calon siswa langsung ke admin
✅ Memudahkan pengelola website melakukan update tanpa harus mengedit source code
✅ Mendukung aktivitas digital marketing dan Meta Ads
✅ Memberikan pengalaman yang nyaman di desktop maupun smartphone

Konsep utama pembelajaran Genza English juga divisualisasikan langsung ke dalam website:

Learn → Practice → Communicate → Grow

Sehingga website bukan hanya terlihat menarik, tetapi juga menyampaikan positioning dan metode belajar Genza English secara jelas.

━━━━━━━━━━━━━━━━━━
🎨 CUSTOM UI/UX DESIGN
━━━━━━━━━━━━━━━━━━

Website dibuat dengan desain custom, bukan menggunakan template WordPress siap pakai.

Pendekatan visual dibuat:

✨ Modern
✨ Clean
✨ Profesional
✨ Friendly untuk anak dan remaja
✨ Mobile responsive
✨ Tidak terasa seperti website template
✨ Mengikuti identitas warna brand Genza English

Struktur konten dibuat dengan hierarchy yang jelas mulai dari Hero, Program, Kelas, Metode Pembelajaran, Skill, Progress, Pricing, Program Aktif, hingga Contact Section.

Setiap section dirancang agar pengunjung tidak hanya melihat informasi, tetapi diarahkan secara bertahap menuju tindakan berikutnya.

━━━━━━━━━━━━━━━━━━
🚀 HERO SECTION
━━━━━━━━━━━━━━━━━━

Area pertama website dibuat sebagai bagian utama untuk membangun perhatian pengunjung.

Hero menampilkan:

• Main headline
• Supporting description
• CTA utama
• CTA program
• Statistik program
• Visual siswa
• Branding Genza English

Headline:

“From Zero to Hero in English.”

Hero dirancang untuk langsung menjelaskan value proposition Genza English hanya dalam beberapa detik pertama ketika website dibuka.

━━━━━━━━━━━━━━━━━━
👦 PROGRAM GENZA ENGLISH KIDS
━━━━━━━━━━━━━━━━━━

Website memiliki program khusus anak dengan pembagian level yang jelas.

Program Kids ditujukan untuk siswa SD kelas 1–6.

Level pembelajaran:

• Starter
• Elementary
• Pre-Junior

Informasi program disajikan menggunakan card yang mudah dibaca sehingga orang tua dapat memahami jenjang belajar tanpa harus membaca halaman yang terlalu panjang.

━━━━━━━━━━━━━━━━━━
🧑 PROGRAM GENZA ENGLISH TEENS
━━━━━━━━━━━━━━━━━━

Program Teens dibuat untuk siswa SMP kelas 7–9.

Level pembelajaran:

• Junior Basic
• Junior Intermediate
• Junior Advanced

Setiap program memiliki struktur informasi yang konsisten sehingga pengunjung dapat dengan mudah membandingkan level dan memilih program yang sesuai.

━━━━━━━━━━━━━━━━━━
📚 SISTEM KELAS / COURSE
━━━━━━━━━━━━━━━━━━

Salah satu fitur utama website adalah sistem Kelas.

Admin dapat membuat dan mengelola kelas sendiri melalui panel admin.

Setiap kelas dapat memiliki:

✅ Nama kelas
✅ Deskripsi
✅ Thumbnail / gambar kelas
✅ Harga
✅ Informasi program
✅ Tombol Hubungi Admin

Kelas yang dibuat melalui admin akan otomatis tampil di website.

Hal ini membuat pengelola Genza English tidak perlu menghubungi programmer setiap kali ingin:

• Menambah kelas baru
• Mengubah nama kelas
• Mengubah harga
• Mengganti gambar
• Mengubah deskripsi
• Menghapus kelas lama

━━━━━━━━━━━━━━━━━━
💬 CTA WHATSAPP TERINTEGRASI
━━━━━━━━━━━━━━━━━━

Setiap kelas mempunyai Call To Action yang terhubung langsung ke WhatsApp admin.

Pesan WhatsApp dapat membawa informasi kelas yang dipilih oleh pengunjung.

Contohnya calon siswa memilih:

“Genza English Kids”

Kemudian menekan tombol Hubungi Admin.

Website akan mengarahkan calon siswa ke WhatsApp sehingga proses konsultasi dan closing menjadi lebih sederhana.

Konsepnya:

Visitor
↓
Melihat Program
↓
Memilih Kelas
↓
Melihat Harga
↓
Klik Hubungi Admin
↓
WhatsApp
↓
Closing

━━━━━━━━━━━━━━━━━━
🧠 METODE PEMBELAJARAN
━━━━━━━━━━━━━━━━━━

Website tidak hanya menampilkan produk, tetapi juga menjelaskan keunggulan metode belajar Genza English.

Beberapa keunggulan yang ditampilkan:

• Small Class
• Speaking Every Meeting
• Active Learning
• Progress Tracking
• Materi Sesuai Level
• Sertifikat

Dengan demikian calon siswa dan orang tua bisa memahami alasan mengapa program Genza English berbeda dari kursus biasa.

━━━━━━━━━━━━━━━━━━
📊 VISUALISASI METODE BELAJAR
━━━━━━━━━━━━━━━━━━

Website menampilkan komposisi metode pembelajaran secara visual.

Untuk program Kids:

70% Practice & Activity
20% Material
10% Evaluation

Untuk program Teens:

60% Communication Practice
25% Material
15% Evaluation

Data tersebut divisualisasikan menggunakan progress bar sehingga informasi lebih cepat dipahami dibanding hanya menggunakan paragraf panjang.

━━━━━━━━━━━━━━━━━━
🗣️ SKILL DEVELOPMENT
━━━━━━━━━━━━━━━━━━

Website juga menampilkan kemampuan yang dilatih selama program.

Di antaranya:

• Listening
• Speaking
• Reading
• Writing
• Vocabulary
• Grammar
• Pronunciation
• Presentation

Section ini membantu orang tua memahami bahwa program tidak hanya berfokus pada grammar, tetapi mengembangkan kemampuan komunikasi Bahasa Inggris secara lebih menyeluruh.

━━━━━━━━━━━━━━━━━━
👨‍👩‍👧 PROGRESS & ASSESSMENT
━━━━━━━━━━━━━━━━━━

Website menjelaskan sistem evaluasi pembelajaran agar orang tua mengetahui perkembangan anak.

Beberapa informasi progress yang ditampilkan:

• Placement Test
• Level Assessment
• Monthly Review
• Activity Learning
• Daily Assessment
• Monthly Progress
• Mid-Level Test
• Final Level Test
• Certificate

Dengan struktur seperti ini, website berfungsi sebagai sarana edukasi sekaligus meningkatkan kepercayaan calon customer.

━━━━━━━━━━━━━━━━━━
💰 PRICING SECTION
━━━━━━━━━━━━━━━━━━

Informasi harga dibuat dalam section khusus dengan tampilan yang mudah dibandingkan.

Pengunjung bisa mengetahui pilihan paket program tanpa harus mencari informasi ke banyak halaman.

Pricing section dirancang dengan:

• Nama paket
• Harga
• Periode
• Benefit
• Highlight promo
• CTA

Tujuannya mengurangi friction sebelum calon siswa melakukan kontak.

━━━━━━━━━━━━━━━━━━
📢 PROGRAM & PROMO SECTION
━━━━━━━━━━━━━━━━━━

Website menyediakan area khusus untuk menampilkan program atau promo yang sedang berjalan.

Admin dapat menggunakan visual promosi seperti flyer dan materi kampanye tanpa harus mengubah struktur halaman.

Section ini sangat berguna untuk:

• Promo periode tertentu
• Program pendaftaran siswa baru
• Diskon
• Campaign Meta Ads
• Program khusus

━━━━━━━━━━━━━━━━━━
🛠️ CUSTOM ADMIN PANEL
━━━━━━━━━━━━━━━━━━

Website Genza English memiliki panel admin custom.

Panel admin dibuat agar pemilik website dapat mengelola konten sendiri tanpa masuk ke source code.

Beberapa fitur pengelolaan yang tersedia:

✅ Pengaturan Hero
✅ Pengaturan program
✅ Pengaturan kelas
✅ Pengaturan harga
✅ Upload gambar
✅ Pengaturan logo
✅ Pengaturan ukuran logo
✅ Pengaturan kontak
✅ Pengaturan WhatsApp
✅ Pengaturan Meta Pixel
✅ Pengaturan Typography
✅ Pengaturan tampilan website

Panel ini dibuat khusus mengikuti kebutuhan bisnis Genza English, bukan menggunakan dashboard CMS generik.

━━━━━━━━━━━━━━━━━━
✍️ TYPOGRAPHY MANAGEMENT
━━━━━━━━━━━━━━━━━━

Admin juga memiliki pengaturan Typography.

Artinya tampilan font website dapat disesuaikan melalui admin.

Beberapa elemen yang dapat dikontrol antara lain:

• Body Font
• Heading Font
• H1
• H2
• H3
• Body Text
• Navigation
• Button
• Card
• Price
• Label

Ukuran font desktop dan mobile dapat disesuaikan agar website tetap nyaman dilihat di berbagai ukuran layar.

Pilihan font juga dapat disesuaikan tanpa mengubah source code.

━━━━━━━━━━━━━━━━━━
🖼️ IMAGE MANAGEMENT
━━━━━━━━━━━━━━━━━━

Admin dapat melakukan upload gambar langsung dari dashboard.

File upload kemudian digunakan oleh frontend website secara langsung.

Fitur ini berguna untuk:

• Gambar kelas
• Thumbnail
• Materi promosi
• Hero image
• Konten visual lainnya

Sehingga update visual website dapat dilakukan secara mandiri oleh pengelola.

━━━━━━━━━━━━━━━━━━
📈 META PIXEL INTEGRATION
━━━━━━━━━━━━━━━━━━

Website juga sudah disiapkan untuk kebutuhan advertising.

Meta Pixel dapat dikonfigurasi melalui panel admin tanpa harus melakukan edit source code.

Tracking digunakan untuk membantu aktivitas campaign dan analisis visitor.

Contoh event yang digunakan:

• PageView
• Contact / interaksi WhatsApp

Dengan integrasi ini website dapat digunakan sebagai landing destination untuk campaign Meta Ads.

━━━━━━━━━━━━━━━━━━
📱 MOBILE RESPONSIVE
━━━━━━━━━━━━━━━━━━

Website dirancang responsive.

Tampilan otomatis menyesuaikan:

💻 Desktop
💻 Laptop
📱 Tablet
📱 Smartphone

Layout, ukuran font, card, navigation, gambar, CTA, hingga spacing dirancang agar tetap nyaman digunakan pada layar kecil.

Pendekatan desain dilakukan secara mobile-friendly karena sebagian besar traffic digital advertising saat ini berasal dari smartphone.

━━━━━━━━━━━━━━━━━━
⚡ PERFORMANCE & TECHNOLOGY
━━━━━━━━━━━━━━━━━━

Website dibangun menggunakan teknologi modern:

⚙️ Next.js 15
⚙️ TypeScript
⚙️ Tailwind CSS
⚙️ Custom Admin System
⚙️ Dynamic Content Management
⚙️ Image Upload Management
⚙️ Meta Pixel Integration
⚙️ WhatsApp Integration
⚙️ Responsive UI
⚙️ Production Build Optimization

Website tidak bergantung pada WordPress runtime dan dibangun sebagai custom web application.

━━━━━━━━━━━━━━━━━━
🌐 SERVER & PRODUCTION
━━━━━━━━━━━━━━━━━━

Website dideploy ke VPS production menggunakan arsitektur:

Internet
↓
HTTPS
↓
Nginx
↓
Next.js Application
↓
Custom Website System

Website dilengkapi SSL HTTPS sehingga seluruh akses menggunakan koneksi yang aman.

Production service juga dikelola menggunakan process manager agar aplikasi dapat tetap berjalan sebagai service di server.

━━━━━━━━━━━━━━━━━━
🔐 SSL & SECURITY
━━━━━━━━━━━━━━━━━━

Website menggunakan HTTPS dengan SSL Certificate.

Konfigurasi web server dibuat khusus untuk domain Genza English.

Beberapa konfigurasi production mencakup:

• HTTPS
• SSL Certificate
• Nginx Reverse Proxy
• File permission
• Application process management
• Direct static upload serving
• Environment configuration

━━━━━━━━━━━━━━━━━━
🎯 BUSINESS-ORIENTED WEBSITE
━━━━━━━━━━━━━━━━━━

Fokus utama pengembangan Genza English bukan hanya membuat website yang terlihat bagus.

Website dirancang berdasarkan perjalanan calon customer:

Awareness
↓
Understand
↓
Trust
↓
Choose Program
↓
Choose Class
↓
Check Pricing
↓
Contact Admin
↓
Conversion

Dengan pendekatan tersebut website berfungsi sebagai bagian dari sistem pemasaran bisnis, bukan sekadar halaman profil perusahaan.

━━━━━━━━━━━━━━━━━━
✨ HASIL AKHIR
━━━━━━━━━━━━━━━━━━

Genza English kini memiliki website yang:

✅ Memiliki desain custom
✅ Modern dan responsive
✅ Mudah digunakan
✅ Memiliki sistem kelas
✅ Memiliki custom admin panel
✅ Bisa mengubah konten sendiri
✅ Bisa mengubah harga sendiri
✅ Bisa upload gambar sendiri
✅ Bisa mengatur Typography
✅ Terintegrasi WhatsApp
✅ Terintegrasi Meta Pixel
✅ Siap digunakan untuk Meta Ads
✅ Menggunakan HTTPS
✅ Berjalan di VPS production
✅ Tidak bergantung pada template WordPress

Website:
🌐 https://genzaenglish.com

━━━━━━━━━━━━━━━━━━
💼 PROJECT TYPE
━━━━━━━━━━━━━━━━━━

Custom Website Development
Educational Website
Course Website
Custom Admin Dashboard
UI/UX Development
Responsive Website
Digital Marketing Integration
VPS Deployment & Server Configuration

━━━━━━━━━━━━━━━━━━
🧑‍💻 DEVELOPMENT
━━━━━━━━━━━━━━━━━━

Website dikembangkan secara custom berdasarkan kebutuhan operasional dan marketing Genza English.

Mulai dari:

Strategy
→ UI/UX
→ Frontend Development
→ Admin System
→ Integration
→ Server Deployment
→ Production Optimization

Seluruh sistem dirancang agar website tidak hanya bagus saat pertama kali dibuat, tetapi juga mudah dikelola dan dikembangkan untuk kebutuhan bisnis berikutnya.