Japanese health supplement landing page
AFC Landing Page
The official distributor landing page for AFC Life Science Indonesia's Japanese supplements—trust-first design, PHP-driven React hydration, and a WhatsApp-only conversion flow.
- Role
- Full-stack developer
- Year
- 2026
- Stack
- ReactTailwind CSSPHPViteVitest
01 · The problem
Starting with the friction, not the feature list.
Indonesian supplement buyers are skeptical: counterfeit products circulate, claims are exaggerated, and reseller chains blur who is official. The official distributor needed a public page that earns trust first—while running on cPanel-native PHP hosting and letting a non-developer team update content without rebuilds.
02 · The approach
Turning observations into deliberate decisions.
- 01
Explored six-plus art directions before committing to a Japanese-inspired 'paper & forest' design system, documented as tokens, a typography ramp, and component specs.
- 02
Bootstrapped a React 19 SPA from PHP 8 through server-side __LANDING_STATE__ hydration, driving per-section visibility and database-managed content with no rebuild needed.
- 03
Built a WhatsApp-first conversion flow—validated forms composing deep-link messages, product-specific CTAs, and a sticky chat float—storing zero data server-side.
03 · Challenges
Constraints that made the solution stronger.
- Winning a skeptical audience: official distributor status, verified ingredient data, and awards had to lead before any sales copy.
- Bridging a cPanel-native PHP 8 backend with a modern React SPA—two runtimes, one page, no rebuild loop.
- Holding WCAG AA while mixing Japanese and Indonesian copy: CJK strings tagged lang="ja", proper font fallbacks, and reduced-motion-safe animation.
04 · Outcomes
What changed—and what I would improve next.
- Shipped the production landing page at afcsurabaya.id as the public face of an enterprise omnichannel AI ecosystem.
- Cut content changes down to database edits—sections toggle and copy updates ship without redeploying.
- Covered sections, content integrity, and components with eight RTL/Vitest suites alongside WCAG AA accessibility.