Waida Studio
Fintech products are sold on clarity: a visitor has to believe, within a scroll, that the app will make their money easier to understand. Finos is built around that promise — a light, calm layout, product screens set into phone frames, a wallet balance that rolls over while they watch, and statistics that count in digit by digit. Built on the Next.js 16 App Router with React 19 and TypeScript in strict mode, it ships 15 page templates covering 35 fully static pages, with the articles and the integrations directory driven by MDX files you edit directly. No CMS or backend required.
Whether you are launching a budgeting app, a neobank, a savings or investment product, a card issuer or any fintech start-up, Finos gives you every page the pitch needs — a home page with four sliders, monthly and yearly pricing on every plan card and an FAQ, a features page, an about page with a values list and rolling statistics, a pricing page with a comparison table, nine integration pages and thirteen full-length articles behind a tabbed, paged blog. Content lives in MDX files: add an article and it appears on the blog index, in its category tab, on the home page and at its own URL without touching a component. Launch in hours.
Tech Stack
Next.js 16 — App Router, every page prerendered to static HTML at build time
React 19 — server components throughout, with one small client island for the interaction layer
TypeScript — strict mode, `npm run typecheck` clean
Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
Self-hosted webfont — Inter Tight as woff2 in five weights, no third-party font requests at runtime
MDX content layer — gray-matter frontmatter with a Markdown parser that renders into the design's own markup
Zero animation libraries — no jQuery, no GSAP, no Lenis: the scroll reveals, the rolling wallet, the digit-train counters, the four sliders, the mega menu and the smooth wheel scroll are one TypeScript file
Included Pages and Templates
Core pages
Home with the phone-frame hero and its rolling wallet balance, a fading problem-card slider, the clear-view and how-it-works sections, the choose and product-feature sections, financial insights, a cross-fading testimonials slider, the key-benefits slider with its progress bar, two pricing cards with monthly and yearly switches, the FAQ and the three newest articles
About with the exclusive values list, the three-step how-it-works cards, rolling statistics, two partner-logo marquees, the story band, the team and the three mission cards that drop into place as you scroll
Features with three key-feature cards, the "Finos fits" section, the benefits and the FAQ
Pricing with the two plans and a full key-features comparison table
Contact with the office details, a labelled enquiry form and the FAQ
Integrations
Integrations index with the nine-card grid, and 9 integration pages: Novi Bank, VeraPay, Milo Finance, Northline, Paya, Luma Invest, Oakline, Clover Money and Arcus, each with an overview, key capabilities, setup instructions and a security note
Blog
Blog index with a featured article, four category tabs (Planning, Saving, Systems, Guide) and six-at-a-time paging, and 13 full-length articles, each with an author, a reading time, a table of contents, share buttons and four sections
Utility pages
Style guide, instructions, licenses, changelog, a 401 password-protected page and a 404 page
15 page templates. 35 static pages.
Easy Content Editing
Everything you change lives in `src/content/`. Edit a file, rebuild, done.
`src/content/blog/*.mdx` — the 13 articles: the title, the excerpt, the author and company, the avatar, the date, the reading time, the category, the card and banner pictures, and the four sections of the body
`src/content/integrations/*.mdx` — the 9 integrations: the name, the excerpt, the logo and the body
`src/content/layout.json` — which article the blog index features
Every card reads the item's own entry, so a retitled article is retitled on the blog index, in its category tab, on the home page and under every other article at once — with no component to touch. Each category tab's label counts the articles it holds.
Article bodies are Markdown: small headings, bold headings, paragraphs, bold paragraphs and full-width pictures. A parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. Reach past that grammar and the build stops and names the file, rather than rendering something the design has no styling for.
Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the `:root` block of `public/assets/css/styles.css`. Change a value there and it propagates across every page.
Verified Against the Original
All 35 pages were compared against the original template tag for tag, attribute for attribute and text run for text run — in the body and in the head — and lay out to the same height at four widths. The stylesheet is the original, with three rules added so the footer's newsletter form, the home page's phone-screen cards and the style guide's alphabet specimen fit the narrowest phones; every page was swept for horizontal overflow from 320 to 1920 pixels wide with the menu open, and every interaction was driven on the original and on the port and left the same state on the page. The header, footer, closing call to action and FAQ section, and 1,549 copies of eight repeated primitives, are components that render the original markup exactly.
Performance and SEO
Every page prerendered as static HTML, ready for a CDN
Per-page title, description and Open Graph and Twitter card metadata
Absolute share-image URLs so link previews resolve
Self-hosted font with `font-display: swap` and zero third-party requests
AVIF imagery with responsive `srcset` sizes, lazy-loaded below the fold
Semantic markup with one H1 per page, real buttons and landmarks
Keyboard-reachable menus, ARIA carousels and tabs with arrow-key support, FAQ rows and billing switches built on real buttons
Full `prefers-reduced-motion` support, and readable with JavaScript off
Deployment
Deploys to Vercel, Netlify, Cloudflare Pages or any static host. `npm run build` prerenders every page; there is no server, no database and no API to configure.
What You Get
The complete Next.js 16 project source
15 page templates covering 35 static pages
13 articles and 9 integrations as editable MDX
The original stylesheet and self-hosted webfont
Full HTML documentation
Changelog and third-party license file
Requirements
Node.js 20 or newer
npm 10 or newer, or pnpm, yarn or bun