# E-commerce landing

> A storefront landing page: perks ticker, editorial hero, product grid with cart, story and reviews.

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

## When to use

- Direct-to-consumer brands and small stores.

## When not to use

- Large catalogs: add search and filters.

## Installation

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

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

Built from: CTA section, Footer section, Marquee, Product card, Testimonials wall

## API reference

### EcommerceLanding

A complete storefront landing page: perks ticker, editorial hero, product grid with a live bag count, brand story, reviews, newsletter 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 products, swatches and add-to-bag |

## Accessibility

- Product cards have labelled swatches and buttons; the hero image has a description.

## Motion

- Products rise in; add-to-bag confirms in place and updates the header count.

## 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.
- Pass real product images via the ProductCard image prop.

## Related

- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.