# CRM landing

> A CRM landing page: live pipeline hero, feature bento, results stats and plan comparison.

Template · Pro · https://lodeui.com/templates/crm-landing

## When to use

- Sales, CRM and revenue tools.

## When not to use

- Consumer products.

## Installation

```bash
npx shadcn@latest add @lode/crm-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { CrmLanding } from "@/components/templates/crm-landing";

export default function Page() {
  return <CrmLanding />;
}
```

Built from: CTA section, Feature bento, Footer section, Hero section, Logo cloud, Number ticker, Pricing comparison, Stats section

## API reference

### CrmLanding

A complete CRM landing page: a live pipeline hero, logos, a feature bento, results stats, plan comparison, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through header, features and plans |

## Accessibility

- The pipeline preview is real text; stats are read as final values.

## Motion

- Deals drop into pipeline stages; the weighted total rolls; stats count up.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Replace STAGES with a screenshot-like preview of your own product.

## Related

- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.
- [Pricing comparison](https://lodeui.com/blocks/pricing-comparison) — Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.