Alternating Rows With Mixed Media

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature72.tsx instead.

Usage

The file also exports feature72Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature72, feature72Demo } from "@/components/blocks/feature/feature72";

export default function Page() {
  return <Feature72 {...feature72Demo} />;
}

Props

Types

type HeaderCta = { label: string; href: string };

type AlternatingRow = {
  title: string;
  description: string;
  image: MediaSlotImage; // { src: string; alt: string }
};

Behavior notes

• Server component, no client-side interactivity: the header CTA renders as a real Next.js Link via the button's render prop but has no destination behavior beyond navigating wherever href points.
• Each row's media is a static image via MediaSlot; the brief's 'mixed media' simplifies to image-only, swap in your own video/embed by replacing the MediaSlot usage.
• Rows alternate purely by array index (even rows image-left, odd rows image-right), independent of how many rows are supplied.