# Fintech — Page Template for React

> A business-banking product landing page for the fictional "Keelson": sticky header, a hero with email capture and a code-built payment card that tilts with a holographic sheen above a live account panel (Tally balance, transactions sliding in), an FX ticker + Ledger stat band, a feature grid of working UI vignettes (spend controls, multi-currency, instant payouts), a security & compliance band with a disclaimer slot, a Touchstone plan comparison, a Slipway app download, Hallmarks + Casebook customer proof, an Assay FAQ and a Tailstock footer with a regulatory disclaimer — every section a prop, one accent.

- Page: https://crucibleui.com/components/templates/fintech
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/fintech
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/fintech`.

## Props (`FintechHeaderProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand?` | `string` | `"Keelson"` | Brand name beside the logo. |
| `logo?` | `React.ReactNode` | `a keel monogram` | Logo mark (a 1em SVG using currentColor). |
| `nav?` | `FintechNavItem[]` | — | Nav links (hidden behind a menu button in narrow containers). |
| `signIn?` | `FintechAction \| false` | — | Ghost sign-in link. `false` hides it. |
| `cta?` | `FintechAction` | — | Accent-filled header CTA. |

## Usage example

```tsx
import { FintechTemplate } from "@/components/crucible/fintech";

export default function FintechTemplateDemo() {
  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <FintechTemplate className="h-full overflow-y-auto overflow-x-hidden overscroll-contain" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.