# Fintech landing page with live chart
> A clean light fintech hero: counting balance, a self-drawing line chart, transaction rows that slide in and floating notification chips.
- Category: Business
- Version: 1.0
- Source: https://ownlyplans.com/bhaskar/fintech-landing-page-with-live-chart/
## Overview
A trustworthy, modern banking-app landing page. The balance counts up, the chart line draws itself, transactions appear one by one and two notification chips float beside the phone-style card. One HTML file with a tiny script for the counter.
## Tech stack
- CSS
- HTML
- JavaScript
## Build steps
### 1. Paste the prompt
Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.
Prompt:
```text
Create a single-file HTML landing page for a fintech app called "Northpay". Light theme: background #f5f8fc, ink #0e1a2b, accent blue #1d6bff, success green #12b886.
Left column: pill tag "FDIC-style protection · 4.1% APY", H1 "Money that works while you sleep" (clamp 40-68px, tight tracking), a 18px muted paragraph, a solid blue "Open an account" button with a soft blue shadow and a white outline button "See how it works", then three small trust stats (2.4M customers, $0 monthly fees, 4.9 app rating).
Right column: a white rounded (28px) dashboard card with a big shadow:
- "Total balance" that counts up to $48,215.37 over 2.6s using requestAnimationFrame and ease-out.
- "+12.4% this quarter" in green.
- An inline SVG area chart whose line draws itself with stroke-dashoffset, then fills with a blue gradient and ends with a ring dot.
- Three transaction rows (Coffee House -$4.80, Salary deposit +$3,200.00, Savings round-up +$1.20) that slide up one after another.
- Two floating chips outside the card: dark "Goal reached - Trip fund" top right, green "Instant transfer - $250 sent" bottom left, both bobbing.
System fonts only, no libraries, responsive (stack under 860px), reduced-motion safe. Return only the complete HTML.
```
### 2. Build the dashboard card
Check: Balance, change badge and SVG chart.
### 3. Add the motion
Check: Count-up, line draw, row slide-ins and floating chips.
### 4. Make it responsive
Check: Stack below 860px and respect reduced motion.
**Done when:** You can see it working in the browser.
## Assets
### prompt.md — The full prompt.
~~~~
# Fintech landing page with live chart
Copy this prompt into Claude, Cursor or Lovable.
```text
Create a single-file HTML landing page for a fintech app called "Northpay". Light theme: background #f5f8fc, ink #0e1a2b, accent blue #1d6bff, success green #12b886.
Left column: pill tag "FDIC-style protection · 4.1% APY", H1 "Money that works while you sleep" (clamp 40-68px, tight tracking), a 18px muted paragraph, a solid blue "Open an account" button with a soft blue shadow and a white outline button "See how it works", then three small trust stats (2.4M customers, $0 monthly fees, 4.9 app rating).
Right column: a white rounded (28px) dashboard card with a big shadow:
- "Total balance" that counts up to $48,215.37 over 2.6s using requestAnimationFrame and ease-out.
- "+12.4% this quarter" in green.
- An inline SVG area chart whose line draws itself with stroke-dashoffset, then fills with a blue gradient and ends with a ring dot.
- Three transaction rows (Coffee House -$4.80, Salary deposit +$3,200.00, Savings round-up +$1.20) that slide up one after another.
- Two floating chips outside the card: dark "Goal reached - Trip fund" top right, green "Instant transfer - $250 sent" bottom left, both bobbing.
System fonts only, no libraries, responsive (stack under 860px), reduced-motion safe. Return only the complete HTML.
```
~~~~
### index.html.md — Complete code of the result in the video.
~~~~
# index.html
The finished result as one file. Save it as index.html and open it.
```html
Fintech landing page
FDIC-style protection · 4.1% APY
Money that works while you sleep
Save, spend and invest from one account with no hidden fees, instant transfers and insights that make sense.
```
~~~~
## Build instructions by tool
### Claude Code
Open a terminal in an empty folder, run `claude`, then paste the prompt.
```text
Build the "Fintech landing page with live chart" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/fintech-landing-page-with-live-chart/.
Stack: CSS, HTML, JavaScript.
Follow the plan's steps in order: Paste the prompt → Build the dashboard card → Add the motion → Make it responsive.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Claude Code.)
```
### Cursor
Open an empty folder in Cursor, start an Agent chat, then paste the prompt.
```text
Build the "Fintech landing page with live chart" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/fintech-landing-page-with-live-chart/.
Stack: CSS, HTML, JavaScript.
Follow the plan's steps in order: Paste the prompt → Build the dashboard card → Add the motion → Make it responsive.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Cursor.)
```
### Lovable
Start a new Lovable project and paste the prompt as your first message.
```text
Build the "Fintech landing page with live chart" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/fintech-landing-page-with-live-chart/.
Stack: CSS, HTML, JavaScript.
Follow the plan's steps in order: Paste the prompt → Build the dashboard card → Add the motion → Make it responsive.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Lovable.)
```
## Definition of done
- Every build step is complete and the app runs locally.
- The main user flow works end to end.
- Share your build on OwnlyPlans with a demo link, build time and tool.