# Mobile app landing

> A mobile app landing page: phone mockup, store buttons, scroll-stacked features and reviews.

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

## When to use

- iOS and Android apps.

## When not to use

- Web-only SaaS: use the analytics or AI pages.

## Installation

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

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

Built from: Activity rings, CTA section, FAQ section, Footer section, Scroll stack, Testimonials wall

## API reference

### AppLanding

A complete mobile app landing page: phone mockup with a live screen, store buttons, scroll-stacked features, reviews, FAQ and download CTA. 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 store buttons and sections |

## Accessibility

- Store buttons are links with full names; the phone screen is decorative.

## Motion

- The phone floats in; tasks slide onto its screen; feature cards stack as you scroll.

## 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.
- Use the official store badges from Apple and Google in production.

## Related

- [Scroll stack](https://lodeui.com/components/scroll-stack) — Cards that stick and stack as you scroll, earlier ones shrinking into the pile.
- [Activity rings](https://lodeui.com/components/activity-rings) — Concentric progress rings like a fitness watch, overlapping past 100%.
- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.