# Agency landing

> A studio landing page: word-by-word headline, capabilities ticker, morphing case studies and services.

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

## When to use

- Design and development studios, freelancers and portfolios.

## When not to use

- Product companies.

## Installation

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

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

Built from: CTA section, Footer section, Marquee, Morphing dialog, Stats section, Testimonials wall, Text reveal

## API reference

### AgencyLanding

A complete studio landing page: word-by-word headline, capabilities ticker, case studies that morph into dialogs, services, stats, testimonials and contact. 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 work, services and contact |
| Enter | Open a case study |
| Esc | Close it |

## Accessibility

- Case studies open as modal dialogs with focus trapping; the headline is read as one sentence.

## Motion

- The headline reveals word by word; the ticker scrolls; cards morph into dialogs; services slide in.

## 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.
- Swap gradient covers for project images with the MorphingDialog image prop.

## Related

- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Testimonials wall](https://lodeui.com/blocks/testimonials-wall) — Testimonials in slowly scrolling columns that pause on hover, rows on phones.