# Analytics landing

> An analytics SaaS landing page with an embedded live realtime dashboard demo.

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

## When to use

- Analytics, monitoring and dashboard products.

## When not to use

- Products without a visual dashboard to show.

## Installation

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

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

npm dependencies: lucide-react

## Usage

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

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

Built from: CTA section, FAQ section, Feature bento, Footer section, Hero section, Logo cloud, Pricing section, Realtime analytics, Testimonials wall

## API reference

### AnalyticsLanding

A complete analytics SaaS landing page with an animated dashboard hero and an embedded live realtime demo, plus features, reviews, pricing and FAQ. 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 the live demo, plans and FAQ |

## Accessibility

- The live demo can be paused; numbers are text.

## Motion

- Hero KPIs roll and bars grow; the realtime demo streams visitors.

## 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.
- Point the live demo at a public demo account when you have one.

## Related

- [Realtime analytics](https://lodeui.com/blocks/realtime-analytics) — Live visitors counter, per-second bars, event feed, top pages and devices.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.