Massma Solusindo®
Website company profile B2B premium untuk penyedia LED Videotron, Sound System, VOD, dan Multimedia Entertainment System korporat. Dual theme system, B2B copywriting, dan komponen trust-building yang dirancang untuk decision maker level enterprise.
Saat Semua Mata Tertuju pada Stage Anda,
Pastikan Tidak Ada yang Gagal.
Mock hero section (dark) dan stats section (light mode preview)
Fitur & Implementasi
Setiap keputusan teknis dan desain dibuat berdasarkan kebutuhan spesifik klien B2B korporat, bukan template generik.
Dual Theme System
CSS variable-based light/dark mode. Default = light. FOUC prevention via inline script yang membaca localStorage + prefers-color-scheme sebelum React hydration.
B2B Copywriting
Setiap headline dirancang untuk decision maker korporat. Benefit-first, risk-elimination language — bukan feature list. Menciptakan urgensi tanpa hard sell.
Static Generation
Next.js 16 App Router dengan Turbopack. Zero hydration mismatch, scroll-reveal via IntersectionObserver, font loading dioptimasi — Lighthouse score tinggi.
Alternating Services
4 layanan dalam alternating row layout — dark visual panel (simulasi LED display) di kiri/kanan, text panel tanpa border di sisi lainnya.
Multi-CS WhatsApp FAB
Floating Action Button expandable dengan 3 CS Admin berbeda. Pulse ring animation, online indicator, dan deep link WA dengan template pesan otomatis per CS.
B2B Trust Signals
Count-up statistics, client logo ticker (15 korporasi besar), testimoni, portofolio event, dan CTA yang berbicara tentang garansi dan eliminasi risiko vendor.
Database-Ready Schema
Drizzle ORM schema untuk services, portfolios, testimonials. API routes mengembalikan static data — siap switch ke CMS dinamis saat DATABASE_URL dipasang.
Video Showreel
YouTube embed dengan custom dark thumbnail dan lightbox modal. Section always-dark — visual seperti studio video profesional tanpa perlu asset video sendiri.
Pricing & CTA Funnel
3-tier pricing section dengan highlighted middle card. Setiap CTA membawa ke WhatsApp dengan pesan pre-filled yang berbeda sesuai konteks — meningkatkan konversi.
Scroll-Reveal Animations
Semua section menggunakan .reveal / .reveal-left / .reveal-right yang di-trigger oleh IntersectionObserver. Ditambahkan is-visible class — tidak pakai JS animation library.
Struktur Halaman
Single-page layout — 11 section disusun sesuai B2B buyer journey.
- 1Hero — centered, no slider, always-dark bg
- 2Client Logo Ticker — 15 korporasi Indonesia
- 3Tentang Perusahaan — 3 pilar brand
- 4Statistik — count-up animation on scroll
- 5Video Showreel — YouTube + lightbox
- 64 Layanan — alternating row layout
- 7Portofolio — 6 event korporat
- 8Harga — 3-tier pricing dengan highlight
- 9Testimoni — klien korporat
- 10Kontak — info + Google Maps embed
- 11Footer — 4 column + Floating WA FAB
Tantangan & Solusi
Keputusan teknis non-obvious yang dibuat selama development.
Tailwind v4 Config Conflict
tailwind.config.ts tidak kompatibel dengan Tailwind v4 — dihapus sepenuhnya. Semua konfigurasi pindah ke @theme inline di globals.css.
Semua Konten opacity:0
CSS memakai class .is-visible tapi IntersectionObserver menambahkan .visible. Fixed dengan satu rename di scroll-reveal-provider.tsx.
Navbar Hilang di Hero Light Mode
Navbar dan ThemeToggle membaca useTheme(). Logic: !scrolled && light → teks gelap; !scrolled && dark → teks putih; scrolled → CSS var.
Hero Always-Dark di Dual Theme
Hero menggunakan bg statis (#020B18) dengan dark: prefix untuk elemen teks. Section lain pakai CSS variables — tidak ada konflik.
Lihat Website-nya Langsung
Kunjungi live demo untuk melihat dual theme system, animasi scroll-reveal, floating WA FAB, dan semua komponen dalam kondisi production.