Amper

Global business account fintech SaaS

by Owais

Repo Live site

Description

Amper is a one-page marketing site for a made-up fintech: a business account with 40 currencies, cards, payouts to 160+ countries, treasury yield and a payments API. The hero puts a live banking app onto a photo of a hand holding a phone, and the app scrolls as you scroll the page. Every section shares one bright card style, with a fee calculator, a flag orbit and a code window along the way.

Use it for:

a landing page for a fintech, banking or payments product
a SaaS launch page that shows the product inside a real device photo
a starting point for a consistent, card-based design system

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript and adds GSAP and Lenis.
Add photos from Unsplash
Download about 16 bright studio photos on coloured backdrops from Unsplash, including one of a hand holding a phone with a blank screen for the hero. Put them in an images folder and ask Claude to use them.
Preview and fix
Ask Claude to start a local preview and open it in your browser. Check it at desktop and phone width, then ask for one fix per message, for example text cut off by an animation.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a one-page marketing site for Amper, a fintech company with a global business account: accounts in 40 currencies, cards, batch payouts to 160+ countries, treasury yield at 4.6% APY and a payments API. Tagline: "Money, fully charged ⚡".

Use plain HTML, CSS and JavaScript in three files, with GSAP ScrollTrigger and Lenis smooth scroll. No framework.

Design:
- Colours: paper #f4f4f1, ink #0d1f12, forest green #16451f and lime #c4f43e. Pastel sky #a9cdf7, blush #ffcfe0 and lemon #fbe96a only as card backgrounds.
- One font: Inter Tight, with tight, bold headings.
- One card style in every section: 28px corners, a small white label chip at the top left, thin outlined details and one floating notification pill.
- Bright studio photos on coloured backdrops, never dark or moody.
- The ⚡ bolt is the only brand symbol.

Sections, in order:
1. Loader: "Charging" followed by a word that rolls through accounts, cards, payouts and treasury, with a counter to 100% and the ⚡ logo filling with lime.
2. Navigation: a pill of links with a sliding highlight and a scroll progress line.
3. Hero: the headline next to a photo of a hand holding a phone. Fit a live HTML banking app onto the phone's screen (balance, cards, quick send, transactions) and make it scroll as the page scrolls. Three notification pills float around the phone.
4. A logo grid where one logo flips every 1.6 seconds.
5. Why Amper: the headline surrounded by a collage of photo cards with count-up stat tags.
6. Products: four photo cards for Accounts, Cards, Payouts and Treasury.
7. Global: a currency card, an orbit of 12 flags around "160+" and an incoming transfer notification.
8. A working fee calculator comparing Amper with a bank, a card network and a wire transfer.
9. Developers: uptime and speed stats and a code window with Node, Python and cURL tabs.
10. Customer stories, security, a pricing toggle, an FAQ, a poster-style call to action and a footer with a giant "Fully charged."

Motion: one easing everywhere, headings rise word by word, labels roll on hover and numbers count up. Never let an animation clip text. Make it responsive down to 390px wide with no horizontal scroll.