kitebill — Next.js 企业官网模板

SHA-256: 6d1256cbbcc88f1d847b5ce8f1b76d0f43502420e5f528c85dce5848a6b6454e

2026-10-18T03:20:00.145Z

# Kitebill

A landing page for **Kitebill**, a concept invoicing app for freelancers in India and abroad. It is a design and front-end study built with Next.js, React and Tailwind CSS, exported as a fully static site.

**Live:** https://kitebill-app.pages.dev

![Kitebill hero: "Send the invoice. Kitebill does the chasing." next to a live invoice](public/og.jpg)

> Kitebill is not a real service. Nothing on the page takes payments or stores data; every interactive part runs in the browser.

## What's on the page

- **A live invoice in the hero.** Edit the client, the lines, the quantities and the rates, switch between INR, USD, EUR and GBP, and toggle GST. Totals, the CGST and SGST split and the export-under-LUT line update as you type. Press Send to watch it go out, get opened, get nudged and get paid.
- **A scroll story.** The four steps scroll past while the stage on the right stays pinned and plays a scene for each one: an invoice filling itself in, a chat share, a reminder timeline and a payment that counts up.
- **A template carousel.** Six invoice looks with scroll-snap, mouse drag, arrow and dot controls, and an autoplay that pauses on hover and focus. "Use this look" re-themes the live invoice in the hero.
- **A payments marquee**, two rows moving in opposite directions, which pauses on hover.
- **Feature cards** with a cursor-following spotlight, a reminder-tone switcher, a place-of-supply GST calculator and a cashflow chart whose bars grow in.
- **Pricing** with monthly/yearly and INR/USD toggles that cross-fade through the View Transitions API.
- **Kinetic type and drifting kites** in the hero, a scroll-progress line under the nav, and a parallax sky at the end.

Every animation is switched off under `prefers-reduced-motion`. The scroll-linked effects use CSS scroll-driven animations, and browsers that don't support them simply skip them.

## Stack

- [Next.js 16](https://nextjs.org) (App Router, Turbopack, `output: "export"`)
- React 19
- Tailwind CSS 4, with the design tokens in `src/app/globals.css`
- `next/font` for Familjen Grotesk, Public Sans and JetBrains Mono
- No UI or animation libraries

## Run it

```bash
npm install
npm run dev        # http://localhost:3000
npm run build      # static site in out/
```

`out/` can be served from any static host. This one runs on Cloudflare Pages.

## How it's put together

```
src/app/            layout, page, global styles and tokens, favicons
src/components/     one file per section (Hero, InvoiceDemo, Story, Templates, Features, …)
src/lib/money.ts    currency formatting (en-IN lakh grouping for rupees) and sample invoices
src/lib/themes.ts   the six invoice looks, each just a set of colour and font tokens
src/lib/motion.ts   View Transition helper, count-up hook and reduced-motion check
scripts/images.mjs  resizes the source art into public/img and cuts the logo out of its background
```

The sections talk to each other through two window events. "Load this invoice" sends a sample invoice to the hero, and "Use this look" sends a theme. No state library needed.

Images are resized ahead of time to every width `next/image` asks for, and served through a small custom loader (`src/lib/image-loader.ts`), because the built-in optimizer needs a server.

## Images

The photographs and the kite mark were generated with FLUX.2 [klein] on Cloudflare Workers AI. The interface vignettes are built in HTML and CSS.

## Need a site like this?

I'm a Shopify and frontend developer. I turn designs into fast, responsive Next.js and Shopify sites, interactive parts included. You can hire me on [Fiverr](https://www.fiverr.com/vaibhavshukl11) or [Upwork](https://www.upwork.com/freelancers/~01e34c5fa04da53175).

## License

The code is MIT © Vaibhav Shukla. The generated images are for this demo.