# AI startup landing

> A landing page for an AI assistant: streaming chat hero, animated data-flow diagram, features, pricing and FAQ.

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

## When to use

- Launching an AI assistant, copilot or knowledge product.

## When not to use

- Products where AI isn't the main story.

## Installation

```bash
npx shadcn@latest add @lode/ai-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 { AiLanding } from "@/components/templates/ai-landing";

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

Built from: Animated beam, Chat message, CTA section, FAQ section, Feature bento, Footer section, Hero section, Logo cloud, Pricing section, Testimonials wall, Voice orb

## API reference

### AiLanding

A complete landing page for an AI assistant: streaming chat hero with a voice orb, an animated data-flow diagram, features, testimonials, pricing, FAQ, 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, sections and forms |
| Enter | Open the mobile menu or submit |

## Accessibility

- One h1; every section has a heading; diagram nodes are labelled images.
- Motion is reduced or removed under prefers-reduced-motion.

## Motion

- The hero answer streams in while the orb speaks; beams pulse from your tools into the assistant.

## 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.
- Rename "Atlas" and replace the sample Q&A in AssistantPreview.

## Related

- [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.
- [Voice orb](https://lodeui.com/components/voice-orb) — A living orb for voice assistants: idle, listening, thinking and speaking states.
- [Animated beam](https://lodeui.com/components/animated-beam) — A glowing pulse travelling along a curved line between two elements.
- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.