Novapay Template

A modern fintech landing page template built for businesses that move fast. NovaPay pairs a deep slate base with sky blue accents and combines the geometric weight of Outfit display typography with the readability of DM Sans body copy. The result is a premium, slightly editorial feel that sits closer to Linear or Stripe than to a generic SaaS template, deliberately avoiding the default cyan and purple gradients, the centered hero with three column icon grids, and the Inter or Poppins typography that signal an off the shelf design.

The template is engineered for visual rhythm and motion polish. Every section is constrained to a centered 1280 pixel max width while section backgrounds extend edge to edge, with diagonal grid textures anchored to opposite corners across the hero, mobile app, and FAQ sections. A custom silk cubic bezier easing curve runs throughout, giving hovers, transitions, and entrance reveals a weighted feel that reads as expensive rather than snappy. The mobile app section features a 3D phone mockup that tilts based on mouse position anywhere on the screen, and the features section uses a sticky stack pattern where cards pin to the viewport while a right side panel swaps UI mockups in sync with scroll position.

This package includes the production HTML, CSS, and JavaScript files split into a clean structure, plus a separate design prompt markdown file that documents the color system, typography choices, motion language, layout rules, and distinctive touches. The design prompt is intended as a brief that can be reused across future projects to maintain visual consistency.

Features

+ Live ticker strip above the navigation with hover pause and infinite CSS scroll
+ Fixed top navigation with smooth translateY snap behavior on scroll
+ Mobile menu with landscape safe top padding and momentum scrolling support
+ Hero section with split layout, animated dashboard mockup, and floating stat badges
+ Diagonal grid background patterns anchored to corners with radial mask fades
+ Trusted by logo carousel with edge fade masks and infinite CSS scroll
+ Animated stats grid with icon ring pulse hover effect and counter animation
+ Sticky stack features section with right panel UI swap on scroll
+ Live dashboard preview with period switcher controls for 7D, 1M, 3M, 1Y
+ Pure CSS bar charts throughout, no Chart.js or external dependencies
+ Three tier pricing cards with monthly and annual toggle plus dual price display
+ Security compliance badges grid covering SOC 2, PCI DSS, and ISO 27001
+ Auto scroll testimonial carousel with play and pause control button
+ Mobile app section with 3D mouse tracking phone mockup tilt
+ App store and Google Play buttons with matching width QR code button
+ Independent FAQ accordion with expand all and collapse all toggle
+ Translucent FAQ items that allow the diagonal grid background to show through
+ Single line minimal footer with copyright, legal links, and social icons
+ Fully responsive design with breakpoints at 900 and 600 pixels
+ Outfit and DM Sans typography pairing loaded from Google Fonts
+ Custom silk cubic bezier easing applied across all interactions
+ Scroll triggered fade and rise entrance animations via IntersectionObserver
+ Centered 1280 pixel max width with edge to edge section backgrounds
+ Separate design prompt markdown file included for design system reference
+ Clean split file delivery with index.html, style.css, and script.js