{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-pocket", "title": "Pocket: mobile money app", "author": "Ballmac ", "description": "A bold five-page landing site for a money app: a working app inside a phone frame, live feature demos (freeze a card, round-up calculator, bill splitting, currency conversion), pricing with a yearly switch, security and download.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/phone-frame.json", "https://ui.ballmac.com/r/switch.json", "https://ui.ballmac.com/r/slider.json" ], "files": [ { "path": "registry/ballmac/components/templates/pocket/pocket-fonts.ts", "content": "// Ballmac UI: Pocket template fonts. https://ui.ballmac.com/templates/template-pocket\nimport { Gabarito } from \"next/font/google\"\n\nexport const pocketSans = Gabarito({ variable: \"--pocket-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-fonts.ts" }, { "path": "registry/ballmac/components/templates/pocket/pocket-data.ts", "content": "// Ballmac UI: Pocket template data. https://ui.ballmac.com/templates/template-pocket\nexport const transactions = [\n { name: \"Corner Café\", detail: \"Today, 8:12\", amount: -4.8, tone: 1, emoji: \"☕\" },\n { name: \"From Sam\", detail: \"Yesterday\", amount: 120, tone: 0, emoji: \"↓\" },\n { name: \"City Transit\", detail: \"Yesterday\", amount: -2.75, tone: 3, emoji: \"🚆\" },\n { name: \"Market Hall\", detail: \"Monday\", amount: -38.12, tone: 2, emoji: \"🥬\" },\n { name: \"Pilates Studio\", detail: \"Sunday\", amount: -22, tone: 4, emoji: \"🧘\" },\n]\n\nexport type Plan = { id: string; name: string; monthly: number; annual: number; blurb: string; features: string[]; featured?: boolean }\nexport const plans: Plan[] = [\n { id: \"free\", name: \"Free\", monthly: 0, annual: 0, blurb: \"Everything you need to stop using a spreadsheet.\", features: [\"Free virtual card\", \"Instant transfers to friends\", \"Round-ups to one pot\", \"Spending insights\"] },\n { id: \"plus\", name: \"Plus\", monthly: 6, annual: 5, blurb: \"For people who travel, save and split things.\", features: [\"Everything in Free\", \"Fee-free spending in 40 currencies\", \"Unlimited savings pots\", \"Bill splitting with reminders\", \"Priority chat support\"], featured: true },\n { id: \"metal\", name: \"Metal\", monthly: 16, annual: 13, blurb: \"A heavy card and a lot of perks.\", features: [\"Everything in Plus\", \"Metal card, engraved\", \"Airport lounge passes\", \"Travel and phone insurance\", \"Cashback on every purchase\"] },\n]\n\nexport const compare = [\n [\"Virtual card\", true, true, true],\n [\"Physical card\", \"$5\", true, true],\n [\"Savings pots\", \"1\", \"Unlimited\", \"Unlimited\"],\n [\"Foreign spending fee\", \"1.5%\", \"None\", \"None\"],\n [\"ATM withdrawals a month\", \"$200\", \"$800\", \"Unlimited\"],\n [\"Bill splitting\", false, true, true],\n [\"Cashback\", false, false, \"1%\"],\n [\"Support\", \"Chat\", \"Priority chat\", \"24/7 phone\"],\n] as const\n\nexport const faqs = [\n { q: \"Is Pocket a bank?\", a: \"Pocket is a money app. Accounts are held at Harbor Bank, N.A., Member FDIC, and your deposits are insured up to $250,000.\" },\n { q: \"How do round-ups work?\", a: \"Every card purchase is rounded up to the next dollar and the difference moves to your pot. Spend $4.20 and $0.80 is saved.\" },\n { q: \"Are there hidden fees?\", a: \"No. The Free plan has no monthly fee, no overdraft fee and no minimum balance. Paid plans show their price on this page and nowhere else.\" },\n { q: \"What if I lose my phone?\", a: \"Sign in on another device, freeze the card in one tap and revoke the old phone. Nothing is stored on the device.\" },\n { q: \"Which countries does it work in?\", a: \"The card works anywhere Visa does. Sending money to friends is available in 31 countries today.\" },\n { q: \"Can I close my account?\", a: \"Yes, any time, in the app. Your balance goes to the bank account you choose within one working day.\" },\n]\n\nexport const currencies = [[\"USD\", 1, \"$\"], [\"EUR\", 0.92, \"€\"], [\"GBP\", 0.79, \"£\"], [\"JPY\", 156.4, \"¥\"], [\"MXN\", 17.1, \"MX$\"]] as const\n\nexport const money = (n: number, digits = 2) => `${n < 0 ? \"−\" : \"\"}$${Math.abs(n).toLocaleString(\"en-US\", { minimumFractionDigits: digits, maximumFractionDigits: digits })}`\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-data.ts" }, { "path": "registry/ballmac/components/templates/pocket/pocket-theme.tsx", "content": "// Ballmac UI: Pocket template shell. https://ui.ballmac.com/templates/template-pocket\n\"use client\"\n\nimport * as React from \"react\"\nimport { Apple, Bell, CreditCard, Home as HomeIcon, Menu, PiggyBank, Play, QrCode, Send, X } from \"lucide-react\"\n\nimport { PhoneFrame } from \"@/components/ballmac/phone-frame\"\nimport { Switch } from \"@/components/ballmac/switch\"\nimport { money, transactions } from \"@/components/ballmac/templates/pocket/pocket-data\"\nimport { pocketSans } from \"@/components/ballmac/templates/pocket/pocket-fonts\"\nimport { cn } from \"@/lib/utils\"\n\ntype PocketPage = \"home\" | \"features\" | \"pricing\" | \"security\" | \"download\"\ntype PocketHrefs = Record\n\nconst defaultHrefs: PocketHrefs = { home: \"/pocket\", features: \"/pocket/features\", pricing: \"/pocket/pricing\", security: \"/pocket/security\", download: \"/pocket/download\" }\n\n/** Pocket's palette: mint paper, navy ink, cobalt and one loud lime. Dark mode is midnight with the lime turned up. */\nconst pocketCss = `\n.pocket-theme,body:not(:has([data-gallery])):has(.pocket-theme){--background:oklch(0.985 0.012 165);--foreground:oklch(0.2 0.06 265);--card:oklch(1 0 0);--card-foreground:oklch(0.2 0.06 265);--popover:oklch(1 0 0);--popover-foreground:oklch(0.2 0.06 265);--primary:oklch(0.47 0.22 267);--primary-foreground:oklch(0.99 0.005 165);--secondary:oklch(0.95 0.025 165);--secondary-foreground:oklch(0.2 0.06 265);--muted:oklch(0.95 0.02 165);--muted-foreground:oklch(0.45 0.05 265);--accent:oklch(0.93 0.04 150);--accent-foreground:oklch(0.2 0.06 265);--border:oklch(0.2 0.06 265 / 12%);--input:oklch(0.2 0.06 265 / 20%);--ring:oklch(0.55 0.22 267);--surface:oklch(0.965 0.02 165);--destructive:oklch(0.52 0.21 27);--chart-1:oklch(0.9 0.2 125);--chart-2:oklch(0.72 0.17 30);--chart-3:oklch(0.62 0.2 300);--chart-4:oklch(0.78 0.13 200);--chart-5:oklch(0.85 0.14 85);--pocket-ink:oklch(0.2 0.06 265);--pocket-on-lime:oklch(0.2 0.06 265);--pocket-navy:oklch(0.2 0.07 265);--pocket-on-navy:oklch(0.98 0.01 165);--radius:1.5rem}\n.dark .pocket-theme,.dark body:not(:has([data-gallery])):has(.pocket-theme){--background:oklch(0.16 0.045 265);--foreground:oklch(0.96 0.015 165);--card:oklch(0.21 0.05 265);--card-foreground:oklch(0.96 0.015 165);--popover:oklch(0.23 0.05 265);--popover-foreground:oklch(0.96 0.015 165);--primary:oklch(0.9 0.2 125);--primary-foreground:oklch(0.2 0.06 265);--secondary:oklch(0.26 0.05 265);--secondary-foreground:oklch(0.96 0.015 165);--muted:oklch(0.25 0.05 265);--muted-foreground:oklch(0.76 0.04 250);--accent:oklch(0.3 0.06 265);--accent-foreground:oklch(0.96 0.015 165);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.9 0.2 125);--surface:oklch(0.19 0.047 265);--destructive:oklch(0.7 0.19 27);--chart-1:oklch(0.9 0.2 125);--chart-2:oklch(0.76 0.15 30);--chart-3:oklch(0.74 0.17 300);--chart-4:oklch(0.8 0.12 200);--chart-5:oklch(0.86 0.13 85);--pocket-navy:oklch(0.12 0.045 265)}\nbody:not(:has([data-gallery])):has(.pocket-theme){font-family:var(--pocket-sans),ui-sans-serif,system-ui,sans-serif}\n@keyframes pocket-bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}\n.pocket-bob{animation:pocket-bob 5s ease-in-out infinite}\n@media (prefers-reduced-motion:reduce){.pocket-bob{animation:none}}\n`\n\nconst display = \"font-black tracking-[-0.035em]\"\nconst onLime = \"text-[var(--pocket-on-lime)]\"\nconst txTone = [\"bg-chart-1\", \"bg-chart-5\", \"bg-chart-4\", \"bg-chart-2\", \"bg-chart-3\"]\n\n/** The Pocket app inside a phone: balance, quick actions and three tabs (Home, Card, Save). Tap around. */\nfunction PocketApp({ className, defaultTab = \"home\" }: { className?: string; defaultTab?: \"home\" | \"card\" | \"save\" }) {\n const [tab, setTab] = React.useState<\"home\" | \"card\" | \"save\">(defaultTab)\n const [frozen, setFrozen] = React.useState(false)\n const id = React.useId()\n const tabs = [[\"home\", \"Home\", HomeIcon], [\"card\", \"Card\", CreditCard], [\"save\", \"Save\", PiggyBank]] as const\n return (\n \n
\n
\n
M

Good morning

Maya

\n \n
\n
\n {tab === \"home\" && (\n <>\n
\n

Total balance

\n

$12,480.62

\n

+$212.40 this week

\n
\n
{[[\"Send\", Send], [\"Request\", Apple], [\"Top up\", QrCode], [\"More\", Play]].map(([l, Icon]) => { const I = Icon as typeof Send; return
{l as string}
})}
\n

Recent

\n
    {transactions.slice(0, 4).map((t) =>
  • {t.emoji}{t.name}{t.detail} 0 && \"text-primary\")}>{t.amount > 0 ? \"+\" : \"\"}{money(t.amount)}
    • )}
\n \n )}\n {tab === \"card\" && (\n <>\n
\n
\n

pocket

•••• 4821

MAYA OKAFOR · 09/29

\n {frozen && Frozen}\n
\n
Freeze cardStops every payment instantly
\n
{[[\"Daily limit\", \"$2,000\"], [\"Online payments\", \"On\"], [\"Contactless\", \"On\"]].map(([k, v]) =>
{k}
{v}
)}
\n \n )}\n {tab === \"save\" && (\n <>\n

Holiday fund

$1,240

62% of $2,000 · Lisbon, June

\n

Round-ups this month

\n

$37.20

\n
    {[[\"Corner Café\", \"+$0.20\"], [\"City Transit\", \"+$0.25\"], [\"Market Hall\", \"+$0.88\"]].map(([n, a]) =>
  • {n}{a}
    • )}
\n \n )}\n
\n
\n {tabs.map(([k, label, Icon]) => )}\n
\n
\n \n )\n}\n\n/** App Store and Google Play buttons that go to the download page. */\nfunction StoreButtons({ href, className }: { href: string; className?: string }) {\n const b = \"bg-[var(--pocket-navy)] text-[var(--pocket-on-navy)] focus-visible:ring-ring inline-flex h-14 items-center gap-3 rounded-2xl px-5 outline-none transition-transform hover:-translate-y-0.5 focus-visible:ring-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0\"\n return (\n \n )\n}\n\nconst links: { key: PocketPage; label: string }[] = [{ key: \"features\", label: \"Features\" }, { key: \"pricing\", label: \"Pricing\" }, { key: \"security\", label: \"Security\" }]\n\ntype PocketShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: PocketPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Pocket's frame: a floating pill header, and a navy footer with a giant wordmark. */\nfunction PocketShell({ page, hrefs: overrides, className, style, children, ...props }: PocketShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n React.useEffect(() => {\n const classes = [pocketSans.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n return (\n \n \n
\n
\n ppocket\n \n
\n Get the app\n \n
\n
\n {open && }\n
\n {children}\n
\n
\n

Money that keeps up with you.

a]:bg-white/10\" />
\n {[[\"Product\", [[\"Features\", hrefs.features], [\"Pricing\", hrefs.pricing], [\"Download\", hrefs.download]]], [\"Trust\", [[\"Security\", hrefs.security], [\"Status\", hrefs.security], [\"Bug bounty\", hrefs.security]]], [\"Company\", [[\"About\", hrefs.home], [\"Careers\", hrefs.home], [\"Press\", hrefs.home]]]].map(([t, items]) =>

{t as string}

    {(items as string[][]).map(([l, h]) =>
  • {l}
    • )}
)}\n
\n

pocket

\n

Pocket is a financial technology company, not a bank. Banking services by Harbor Bank, N.A., Member FDIC. © 2026 Pocket Labs.

\n
\n
\n )\n}\n\nexport { PocketApp, PocketShell, StoreButtons, defaultHrefs as pocketDefaultHrefs, display as pocketDisplayClass, onLime as pocketOnLime, type PocketHrefs, type PocketPage, type PocketShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-theme.tsx" }, { "path": "registry/ballmac/components/templates/pocket/pocket-home.tsx", "content": "// Ballmac UI: Pocket home page. https://ui.ballmac.com/templates/template-pocket\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Globe2, PiggyBank, ShieldCheck, Snowflake, Users } from \"lucide-react\"\n\nimport { PocketApp, PocketShell, StoreButtons, pocketDisplayClass, type PocketHrefs } from \"@/components/ballmac/templates/pocket/pocket-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst cards = [\n { icon: PiggyBank, title: \"Round-ups that add up\", body: \"Every purchase rounds up to the next dollar and the change lands in a pot. Most people save $40 a month without noticing.\", tone: \"bg-chart-1\" },\n { icon: Snowflake, title: \"Freeze it in one tap\", body: \"Lost your card? Tap once and every payment stops. Tap again and you are back.\", tone: \"bg-chart-4\" },\n { icon: Globe2, title: \"Spend anywhere\", body: \"Pay in 40 currencies at the real exchange rate with no fee. The rate you see is the rate you get.\", tone: \"bg-chart-5\" },\n { icon: Users, title: \"Split without the awkward\", body: \"Send a request for your share of dinner, with a gentle reminder so you do not have to be the one who asks.\", tone: \"bg-chart-2\" },\n]\nconst reviews = [\n [\"It’s the first money app I open on purpose.\", \"Priya N.\", \"App Store\"],\n [\"Round-ups paid for our entire holiday. I did nothing.\", \"Tom & Lucia\", \"Google Play\"],\n [\"Froze my card from a taxi in Lisbon. Unfroze it at the hotel.\", \"Dev R.\", \"App Store\"],\n]\n\ntype PocketHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Pocket home page: a hero with a working app in a phone, four feature blocks, proof and the download buttons. */\nfunction PocketHome({ hrefs, ...props }: PocketHomeProps) {\n const link = { features: \"/pocket/features\", pricing: \"/pocket/pricing\", download: \"/pocket/download\", security: \"/pocket/security\", ...hrefs }\n return (\n \n
\n
\n
\n
\n

2.4 million pockets and counting

\n

Money that keeps up.

\n

One app for spending, saving and splitting. No fees to open, no fees to leave, and a card you can freeze from the back of a taxi.

\n \n

FDIC insured up to $250,000 · Rated 4.8 by 61,000 people

\n
\n
\n \n

+$0.20 saved

\n

Card frozen

\n
\n
\n\n
\n
As seen in{[\"The Daily Ledger\", \"Fast Money\", \"Wired Weekly\", \"Product Hunt\"].map((n) => {n})}
\n
\n\n
\n

Everything your money app should have done years ago.

\n
    {cards.map((c) =>

  • {c.title}

    {c.body}

    • )}
\n See every feature \n
\n\n
\n
    {[[\"$0\", \"to open, hold or close an account\"], [\"40\", \"currencies at the real rate\"], [\"11 min\", \"average wait for a human reply\"]].map(([n, l]) =>
  • {n}{l}
    • )}
\n
\n\n
\n

People say nice things

\n
    {reviews.map(([q, n, s], i) =>

  • “{q}”

    {n} · {s}

    • )}
\n
\n\n
\n
\n

Open an account in about four minutes.

\n

All you need is your phone and a photo ID. We will do the rest.

\n \n
\n
\n
\n \n )\n}\n\nexport { PocketHome, type PocketHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-home.tsx" }, { "path": "registry/ballmac/components/templates/pocket/pocket-features.tsx", "content": "// Ballmac UI: Pocket features page. https://ui.ballmac.com/templates/template-pocket\n\"use client\"\n\nimport * as React from \"react\"\nimport { Send, Snowflake } from \"lucide-react\"\n\nimport { Slider } from \"@/components/ballmac/slider\"\nimport { Switch } from \"@/components/ballmac/switch\"\nimport { currencies, money } from \"@/components/ballmac/templates/pocket/pocket-data\"\nimport { PocketShell, pocketDisplayClass, type PocketHrefs } from \"@/components/ballmac/templates/pocket/pocket-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst bars = [[\"Food\", 340, \"bg-chart-1\"], [\"Travel\", 215, \"bg-chart-4\"], [\"Fun\", 180, \"bg-chart-5\"], [\"Home\", 120, \"bg-chart-2\"]] as const\nconst people = [[\"Sam\", \"bg-chart-1\", true], [\"Ana\", \"bg-chart-4\", true], [\"Joe\", \"bg-chart-5\", false], [\"Mei\", \"bg-chart-2\", false]] as const\n\ntype PocketFeaturesProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The features page: five live demos instead of five screenshots. Freeze a card, tune round-ups, split a bill, convert money. */\nfunction PocketFeatures({ hrefs, ...props }: PocketFeaturesProps) {\n const [frozen, setFrozen] = React.useState(false)\n const [spend, setSpend] = React.useState(900)\n const [paid, setPaid] = React.useState([\"Sam\", \"Ana\"])\n const [amount, setAmount] = React.useState(\"100\")\n const [cur, setCur] = React.useState<(typeof currencies)[number][0]>(\"EUR\")\n const savedPerMonth = Math.round(spend * 0.045)\n const rate = currencies.find((c) => c[0] === cur)!\n const converted = (Number(amount) || 0) * rate[1]\n const bill = 128\n const share = bill / people.length\n const total = bars.reduce((n, b) => n + b[1], 0)\n const card = \"rounded-[2rem] border p-8 sm:p-10\"\n return (\n \n
\n

Try it right here.

\n

Everything below works. Freeze the card, drag the slider, split the bill.

\n\n
\n
\n

Freeze it in one tap

\n

Lost it? Misplaced it? Stop every payment instantly, then undo it when you find it in a coat.

\n
\n

pocket

•••• •••• •••• 4821

\n {frozen && Frozen}\n
\n \n

{frozen ? \"Payments are off. Nothing can be charged.\" : \"Your card is live.\"}

\n
\n\n
\n

Round-ups, calculated

\n

Tell us roughly what you spend on your card each month.

\n

Monthly card spending{money(spend, 0)}

\n setSpend(v[0]!)} className=\"mt-4 [&_[data-slot=slider-track]]:bg-black/20 [&_[data-slot=slider-range]]:bg-[var(--pocket-ink)] [&_[data-slot=slider-thumb]]:border-[var(--pocket-ink)] [&_[data-slot=slider-thumb]]:bg-white\" />\n

You would save about

{money(savedPerMonth, 0)}

a month · {money(savedPerMonth * 12, 0)} a year

\n
\n\n
\n

Where it went

\n

{money(total, 0)} in August

\n
    {bars.map(([n, v, c]) =>
  • {n}{money(v, 0)}
    • )}
\n
\n\n
\n

Split the bill

\n

Dinner, {money(bill, 0)} · {money(share, 0)} each

\n
    {people.map(([n, c]) => { const isPaid = paid.includes(n); return
  • {n[0]}{n}{isPaid ? Paid : }
    • })}
\n

{paid.length === people.length ? \"Everyone has paid.\" : `${people.length - paid.length} still to pay.`}

\n
\n\n
\n

Real exchange rate

\n

No fee, no markup.

\n
\n
setAmount(e.target.value.replace(/[^\\d.]/g, \"\"))} className=\"h-12 rounded-2xl border-2 border-[var(--pocket-ink)] bg-white/60 px-4 text-lg font-extrabold tabular-nums outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--pocket-ink)]/40\" />
\n
{currencies.slice(1).map(([c]) => )}
\n

They receive

\n

{rate[2]}{converted.toLocaleString(\"en-US\", { maximumFractionDigits: cur === \"JPY\" ? 0 : 2, minimumFractionDigits: cur === \"JPY\" ? 0 : 2 })}

\n

1 USD = {rate[1]} {cur}

\n
\n
\n
\n
\n \n )\n}\n\nexport { PocketFeatures, type PocketFeaturesProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-features.tsx" }, { "path": "registry/ballmac/components/templates/pocket/pocket-pricing.tsx", "content": "// Ballmac UI: Pocket pricing page. https://ui.ballmac.com/templates/template-pocket\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { compare, faqs, plans } from \"@/components/ballmac/templates/pocket/pocket-data\"\nimport { PocketShell, pocketDisplayClass, type PocketHrefs } from \"@/components/ballmac/templates/pocket/pocket-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype PocketPricingProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Pricing: a monthly or yearly switch, three plans, a real comparison table and the questions people ask. */\nfunction PocketPricing({ hrefs, ...props }: PocketPricingProps) {\n const link = { download: \"/pocket/download\", ...hrefs }\n const [yearly, setYearly] = React.useState(true)\n const cell = (v: string | boolean) => (v === true ? <>Included : v === false ? <>Not included : v)\n return (\n \n
\n
\n

Pay for perks, not for banking.

\n

The Free plan is free forever. Upgrade only when you want the extras.

\n
\n {([[false, \"Monthly\"], [true, \"Yearly\"]] as const).map(([v, l]) => )}\n
\n
\n\n
    \n {plans.map((p) => {\n const price = yearly ? p.annual : p.monthly\n return (\n
  • \n {p.featured && Most popular}\n

    {p.name}

    \n

    {p.blurb}

    \n

    ${price}{price === 0 ? \"forever\" : \"a month\"}

    \n

    {price > 0 && yearly ? `Billed $${price * 12} a year` : price > 0 ? \"Billed monthly\" : \"No card needed\"}

    \n
      {p.features.map((f) =>
    • {f}
      • )}
    \n {p.monthly === 0 ? \"Get Pocket Free\" : `Try ${p.name} free for 30 days`}\n
    • \n )\n })}\n
\n\n
\n

Compare plans

\n
\n \n {plans.map((p) => )}\n {compare.map((r) => {[r[1], r[2], r[3]].map((v, i) => )})}\n
Feature{p.name}
{r[0]}{cell(v)}
\n
\n
\n\n
\n

Questions

\n
{faqs.map((f) =>
{f.q}

{f.a}

)}
\n
\n
\n \n )\n}\n\nexport { PocketPricing, type PocketPricingProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-pricing.tsx" }, { "path": "registry/ballmac/components/templates/pocket/pocket-security.tsx", "content": "// Ballmac UI: Pocket security page. https://ui.ballmac.com/templates/template-pocket\n\"use client\"\n\nimport * as React from \"react\"\nimport { Fingerprint, KeyRound, LockKeyhole, ShieldCheck, Smartphone, Snowflake } from \"lucide-react\"\n\nimport { PocketShell, pocketDisplayClass, type PocketHrefs } from \"@/components/ballmac/templates/pocket/pocket-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst pillars = [\n { icon: Fingerprint, title: \"Only you get in\", body: \"Face or fingerprint on your phone, plus a passkey that never leaves the device. No passwords to leak.\", tone: \"bg-chart-1\" },\n { icon: LockKeyhole, title: \"Encrypted end to end\", body: \"Everything is encrypted in transit and at rest. Card numbers live in a hardware vault, not in a database.\", tone: \"bg-chart-4\" },\n { icon: KeyRound, title: \"You decide every payment\", body: \"Set limits, switch off online or contactless, and approve unusual payments with a tap.\", tone: \"bg-chart-5\" },\n { icon: ShieldCheck, title: \"Insured and audited\", body: \"Deposits are FDIC insured up to $250,000, and independent auditors test us every quarter.\", tone: \"bg-chart-2\" },\n]\nconst steps = [\n { icon: Smartphone, t: \"0:00\", title: \"You notice it’s gone\", body: \"Open Pocket on any other device and sign in with your passkey.\" },\n { icon: Snowflake, t: \"0:20\", title: \"Freeze the card\", body: \"One tap stops every payment. The old phone is signed out at the same time.\" },\n { icon: LockKeyhole, t: \"1:30\", title: \"Nothing was on the phone\", body: \"No balances or card numbers are stored on the device, so there is nothing to find.\" },\n { icon: ShieldCheck, t: \"5:00\", title: \"A new card is on its way\", body: \"Order a replacement and it arrives in three days. The virtual card works in minutes.\" },\n]\n\ntype PocketSecurityProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The security page: four pillars, a minute-by-minute lost-phone timeline, live status and a bug bounty. */\nfunction PocketSecurity({ hrefs, ...props }: PocketSecurityProps) {\n return (\n \n
\n
\n
\n

All systems normal · 99.99% uptime this year

\n

Boring on purpose.

\n

Money should be the least exciting thing about your phone. This is how we make sure it is.

\n
\n
\n
\n 256-bitPasskeys\n
\n
\n\n
    {pillars.map((p) =>

  • {p.title}

    {p.body}

    • )}
\n\n
\n

What happens when you lose your phone

\n
    {steps.map((s, i) =>
  1. {s.t}

    {s.title}

    {s.body}

    Step {i + 1} of {steps.length}
    2. )}
\n
\n\n
\n

Find a bug, get paid.

Our bug bounty pays up to $50,000 for serious findings. We publish every fixed report and credit the researcher.

$50k

\n

Checked by others

    {[\"SOC 2 Type II\", \"ISO 27001\", \"PCI DSS Level 1\", \"FDIC insured\"].map((c) =>
  • {c}
    • )}

Reports are available to customers on request. Last audit: August 2026.

\n
\n
\n \n )\n}\n\nexport { PocketSecurity, type PocketSecurityProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-security.tsx" }, { "path": "registry/ballmac/components/templates/pocket/pocket-download.tsx", "content": "// Ballmac UI: Pocket download page. https://ui.ballmac.com/templates/template-pocket\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Smartphone } from \"lucide-react\"\n\nimport { PocketApp, PocketShell, StoreButtons, pocketDisplayClass, type PocketHrefs } from \"@/components/ballmac/templates/pocket/pocket-theme\"\nimport { cn } from \"@/lib/utils\"\n\n/** A decorative QR-style code: three finder squares and a fixed pseudo-random fill, so server and client agree. */\nfunction QrArt({ className }: { className?: string }) {\n const n = 21\n const finder = (x: number, y: number) => (x < 7 && y < 7) || (x >= n - 7 && y < 7) || (x < 7 && y >= n - 7)\n const cells: React.ReactNode[] = []\n let seed = 7\n for (let y = 0; y < n; y++)\n for (let x = 0; x < n; x++) {\n seed = (seed * 1103515245 + 12345) & 0x7fffffff\n if (finder(x, y)) continue\n if ((seed >> 8) % 100 < 46) cells.push()\n }\n const eye = (x: number, y: number) => (\n \n )\n return (\n \n {cells}{eye(0, 0)}{eye(n - 7, 0)}{eye(0, n - 7)}\n \n )\n}\n\ntype PocketDownloadProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The download page: store buttons, a QR code, and a “text me the link” form that validates and confirms. */\nfunction PocketDownload({ hrefs, ...props }: PocketDownloadProps) {\n const link = { download: \"/pocket/download\", ...hrefs }\n const [value, setValue] = React.useState(\"\")\n const [device, setDevice] = React.useState<\"iphone\" | \"android\">(\"iphone\")\n const [error, setError] = React.useState(\"\")\n const [sent, setSent] = React.useState(null)\n function submit(e: React.FormEvent) {\n e.preventDefault()\n const v = value.trim()\n const ok = /^\\S+@\\S+\\.\\S+$/.test(v) || v.replace(/\\D/g, \"\").length >= 10\n if (!ok) return setError(\"Enter a mobile number or an email address.\")\n setError(\"\")\n setSent(v)\n }\n return (\n \n
\n
\n
\n

Get Pocket in your pocket.

\n

Free on iPhone and Android. Open an account in about four minutes, with a photo ID and your phone.

\n \n\n
\n

On your computer? Text yourself the link.

\n {sent ? (\n

Sent to {sent}. Open it on your {device === \"iphone\" ? \"iPhone\" : \"Android\"}.

\n ) : (\n
\n
Your phone\n
{([[\"iphone\", \"iPhone\"], [\"android\", \"Android\"]] as const).map(([v, l]) => )}
\n
\n
\n
setValue(e.target.value)} aria-invalid={!!error} aria-describedby={error ? \"pd-err\" : undefined} placeholder=\"(555) 010-2030\" className=\"bg-background focus-visible:ring-ring/50 aria-invalid:border-destructive h-14 min-w-0 flex-1 rounded-full border-2 px-6 text-lg font-bold outline-none focus-visible:ring-[3px]\" />
\n {error &&

{error}

}\n
\n

We send one message and do not keep your number.

\n
\n )}\n
\n
\n\n
\n \n

Point your camera here to download

\n
\n
\n\n
\n

What you need

\n {[[\"A phone\", \"iOS 16 or later, or Android 10 or later. Face or fingerprint unlock turned on.\"], [\"A photo ID\", \"A passport or driver’s licence. We check it in the app, usually in under a minute.\"], [\"Four minutes\", \"That is the median. You can fund the account straight away from a bank account or card.\"]].map(([t, b]) =>

{t}

{b}

)}\n
\n
\n \n )\n}\n\nexport { PocketDownload, QrArt, type PocketDownloadProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/pocket/pocket-download.tsx" }, { "path": "registry/ballmac/app/pocket/page.tsx", "content": "// Ballmac UI: Pocket template route. https://ui.ballmac.com/templates/template-pocket\nimport type { Metadata } from \"next\"\n\nimport { PocketHome } from \"@/components/ballmac/templates/pocket/pocket-home\"\n\nexport const metadata: Metadata = {\n title: \"Pocket: money that keeps up\",\n description: \"One app for spending, saving and splitting. No fees to open or to leave.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/pocket/page.tsx" }, { "path": "registry/ballmac/app/pocket/features/page.tsx", "content": "// Ballmac UI: Pocket template route. https://ui.ballmac.com/templates/template-pocket\nimport type { Metadata } from \"next\"\n\nimport { PocketFeatures } from \"@/components/ballmac/templates/pocket/pocket-features\"\n\nexport const metadata: Metadata = {\n title: \"Features · Pocket\",\n description: \"Freeze a card, tune round-ups, split a bill and convert money, live.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/pocket/features/page.tsx" }, { "path": "registry/ballmac/app/pocket/pricing/page.tsx", "content": "// Ballmac UI: Pocket template route. https://ui.ballmac.com/templates/template-pocket\nimport type { Metadata } from \"next\"\n\nimport { PocketPricing } from \"@/components/ballmac/templates/pocket/pocket-pricing\"\n\nexport const metadata: Metadata = {\n title: \"Pricing · Pocket\",\n description: \"Free forever, with Plus and Metal for extras.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/pocket/pricing/page.tsx" }, { "path": "registry/ballmac/app/pocket/security/page.tsx", "content": "// Ballmac UI: Pocket template route. https://ui.ballmac.com/templates/template-pocket\nimport type { Metadata } from \"next\"\n\nimport { PocketSecurity } from \"@/components/ballmac/templates/pocket/pocket-security\"\n\nexport const metadata: Metadata = {\n title: \"Security · Pocket\",\n description: \"How Pocket keeps your money safe, and what happens if you lose your phone.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/pocket/security/page.tsx" }, { "path": "registry/ballmac/app/pocket/download/page.tsx", "content": "// Ballmac UI: Pocket template route. https://ui.ballmac.com/templates/template-pocket\nimport type { Metadata } from \"next\"\n\nimport { PocketDownload } from \"@/components/ballmac/templates/pocket/pocket-download\"\n\nexport const metadata: Metadata = {\n title: \"Download · Pocket\",\n description: \"Free on iPhone and Android.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/pocket/download/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "mobile app", "fintech", "landing", "pricing", "phone", "download" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a five-page mobile-app landing site with a working app in a phone frame, live feature demos, pricing with a yearly toggle, a security page and a download page. Edit pocket-data.ts and pocketCss.", "whenToUse": [ "Mobile app and fintech landing sites", "Any product that benefits from a live demo inside a phone" ], "whenNotToUse": [ "Real banking flows (this is marketing; connect your own auth and APIs)" ], "composesWith": [ "phone-frame", "switch", "slider" ], "a11y": [ { "keys": "Bottom tab bar in the phone", "action": "Arrow-free tabs: Tab to a button and press Enter to switch screens" }, { "keys": "Freeze card switch", "action": "Space toggles it; a polite status message confirms the state" }, { "keys": "Round-up slider", "action": "Arrow keys change monthly spending; the result is announced" } ], "customization": [ "Replace plans, comparison rows and FAQ in pocket-data.ts", "Rebuild the screens inside PocketApp", "Edit pocketCss for the mint, cobalt and lime palette", "Replace QrArt with a real QR code" ] }, "examples": [ "template-pocket-demo", "template-pocket-features", "template-pocket-pricing", "template-pocket-security", "template-pocket-download" ], "url": "https://ui.ballmac.com/components/template-pocket" }, "docs": "Pages are at /pocket, /pocket/features, /pocket/pricing, /pocket/security and /pocket/download. Plans, comparison rows, FAQ and transactions live in pocket-data.ts. PocketApp (in pocket-theme.tsx) is the working app inside the phone; replace its content with your own screens. The palette is pocketCss.", "categories": [ "templates" ], "type": "registry:block" }