"use client"; import { motion, useReducedMotion } from "motion/react"; export type TypographyRhythmCardItem = { /** Large display mark: a figure, initial, or short numeral. */ mark: string; title: string; body: string; }; type TypographyRhythmCardsProps = { items?: TypographyRhythmCardItem[]; className?: string; /** Disables the hover lift, even when the OS allows motion. */ reducedMotion?: boolean; }; const defaultItems: TypographyRhythmCardItem[] = [ { mark: "14", title: "Stations audited", body: "Wayfinding reviews from Lisbon to Osaka, focused on platforms that sign in three scripts at once.", }, { mark: "3", title: "Typefaces retired", body: "Two display faces and one mono were dropped after failing legibility tests at 11px on arrival boards.", }, { mark: "62%", title: "Shorter signs", body: "Average label length after rewriting platform directions as verbs instead of nouns.", }, { mark: "1", title: "Shared grid", body: "A 6-column, 8px baseline system now used by the print, kiosk, and app teams.", }, ]; export function TypographyRhythmCards({ items = defaultItems, className = "", reducedMotion }: TypographyRhythmCardsProps) { const systemReducedMotion = useReducedMotion(); const shouldReduceMotion = Boolean(reducedMotion) || Boolean(systemReducedMotion); return (

{items.map((item, index) => (

{item.mark}

{item.title}

{item.body}

))}

); }