E-commerce landingPro

• Perks ticker
• Editorial hero
• Product grid with live bag count
• Reviews and newsletter

• Direct-to-consumer brands and small stores.

• Large catalogs: add search and filters.

Import it from @/components/templates/ecommerce-landing after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

// app/page.tsx
import { EcommerceLanding } from "@/components/templates/ecommerce-landing";

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

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

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

• Every section stacks on phones; the header collapses into a menu below 768px.
• Tested from 320px to 1920px.

• Section animations start when they scroll into view and run once.
• No data fetching: copy and sample data live in the file.

• 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.