TopXPay

A responsive payment-service marketing website with animated presentation, a progressive video hero, lead capture, email delivery, and analytics event tracking.

Turning a fintech service proposition into a responsive, animated lead-generation website.

TopXPay is a marketing website for a payment-service brand focused on B2B payment infrastructure in Vietnam. My contribution centers on explaining the service, presenting its business use cases, and giving prospective customers a clear route to make contact.

The site combines a strong visual hero with service sections, integration information, contact handling, and supporting legal pages. It is a useful example of a marketing site that includes practical server-side functionality.

A fintech service can be difficult to explain through a single headline. Visitors need to understand who it serves, which problem it addresses, how integration works, and what to do next. Motion and visual effects must support that sequence while keeping the call to action clear.

The technical challenge also includes media delivery: a large hero video should not become the only way the page communicates its message.

1. Understand proposition.
2. Explore use cases.
3. Review integration.
4. Submit inquiry.
5. Sales follow-up.

The flow above describes the product journey. The following sections explain the implementation and the boundaries of this case study.

The application uses the Next.js app directory. Presentation components handle the page sections, while server API routes handle lead submissions and email-related behavior. This gives the marketing experience a clear boundary between what is displayed and what happens when a visitor submits information.

The hero media has its own progressive-delivery strategy: prefer supported video formats, retain a static poster, and use an image when reduced-motion or data-saving preferences call for it. The repository includes scripts for generating the loop assets rather than treating a large source video as an ordinary page dependency.

Technology stack

Hero video improves visual impact but adds bandwidth and production-asset complexity. The fallback image is therefore part of the experience, not an afterthought. SMTP lead delivery also needs environment configuration and operational checks.

The public screenshot verifies the website presentation. Payment-service claims, compliance statements, and advertised commercial performance are outside the website implementation scope and are not independently certified by this case study.

A successful marketing implementation has both a visual path and a functional path. The page needs to make the service understandable, and the contact interaction needs to reach a meaningful destination.

Open the application