Skip to content
codexa

Landing pages · React

Budgeting app launch

Launch page for a household budgeting app with a live budget mock, pricing, beta reviews and an early-access form.

Budgeting app launch starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A launch page for a mobile budgeting app: a hero with an in-app budget preview, beta numbers, features, a shared-budget story, tester quotes, two plans, an FAQ and an early-access sign-up. All content lives in src/site.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/landing-budget-app

src/types.ts
src/types.ts
/** The shape of src/site.ts: every word, colour and section of this site lives there. */import type { IconName } from "./Icon"; export type Link = { label: string; href: string }; export type Visual =  | { type: "tiles"; tones: string[]; caption?: string }  | { type: "mock"; title: string; rows: { label: string; value: string; tone?: string }[]; footer?: string }  | { type: "card"; tone: string; title: string; lines: string[] }  | { type: "none" }; export type Section =  | { kind: "hero"; variant: "split" | "center" | "editorial"; eyebrow?: string; title: string; text: string; primary: Link; secondary?: Link; visual: Visual; note?: string }  | { kind: "features"; id?: string; eyebrow?: string; title: string; text?: string; columns?: 2 | 3 | 4; items: { title: string; text: string; icon: IconName }[] }  | { kind: "split"; id?: string; eyebrow?: string; title: string; text: string; bullets: string[]; visual: Visual; reverse?: boolean }  | { kind: "menu"; id?: string; eyebrow?: string; title: string; text?: string; groups: { name: string; items: { name: string; text?: string; price: string }[] }[] }  | { kind: "pricing"; id?: string; eyebrow?: string; title: string; text?: string; plans: { name: string; price: string; period?: string; text: string; features: string[]; featured?: boolean; cta: Link }[] }  | { kind: "gallery"; id?: string; eyebrow?: string; title: string; text?: string; items: { title: string; caption?: string; tone: string }[] }  | { kind: "projects"; id?: string; eyebrow?: string; title: string; items: { title: string; tag: string; year: string; tone: string }[] }  | { kind: "quotes"; id?: string; eyebrow?: string; title: string; items: { quote: string; name: string; role: string }[] }  | { kind: "stats"; id?: string; items: { value: string; label: string }[] }  | { kind: "steps"; id?: string; eyebrow?: string; title: string; items: { title: string; text: string }[] }  | { kind: "team"; id?: string; eyebrow?: string; title: string; items: { name: string; role: string; tone: string }[] }  | { kind: "timeline"; id?: string; eyebrow?: string; title: string; items: { period: string; title: string; text: string }[] }  | { kind: "faq"; id?: string; eyebrow?: string; title: string; items: { q: string; a: string }[] }  | { kind: "products"; id?: string; eyebrow?: string; title: string; text?: string; currency: string; items: { name: string; price: number; category: string; tone: string; text: string; badge?: string }[] }  | { kind: "hours"; id?: string; eyebrow?: string; title: string; text?: string; rows: { day: string; time: string }[]; address: string; phone?: string; email?: string }  | { kind: "cta"; id?: string; title: string; text: string; primary: Link; secondary?: Link }  | { kind: "contact"; id?: string; eyebrow?: string; title: string; text: string; fields: ("name" | "email" | "phone" | "date" | "guests" | "company" | "message")[]; button: string }; export type Site = {  brand: string;  nav: Link[];  navCta?: Link;  sections: Section[];  footer: { text: string; columns?: { title: string; links: string[] }[]; legal: string };};

Remix

Remix this template

Describe what to change and the agent starts from Budgeting app launch's files. The box is already started for you: finish “Start from Budgeting app launch and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

All templates
  • Design conference

    Bold two-day design conference page with speakers, programme, venue, ticket tiers and an FAQ, ready for ticket sales.

    React · 13 files · Beginner

  • 30-day running plan

    Friendly sign-up page for a free 30-day plan that takes beginners from walking to running 20 minutes without stopping.

    React · 13 files · Beginner

  • Browser extension

    Clean install page for a tab-management browser extension with features, privacy promise, free and Pro plans, and an FAQ.

    React · 13 files · Beginner

Build on Budgeting app launch

Create a free account, start from this template, and ask the AI agent to turn it into your app.