@lar-works/design-system 0.0.0-stage → 0.1.0

package/src/showcase/Cards.tsx

@@ -0,0 +1,133 @@
+import { ArrowRightIcon } from 'lucide-react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Heading, Text } from '../typography/Typography';
+
+interface ProductCardProps {
+    /** A lar-brand app hue; omit for Factory's neutral graphite. */
+    hue?: number;
+    icon: ReactNode;
+    name: string;
+    status: ReactNode;
+    title: string;
+    description: string;
+    linkLabel: string;
+    href: string;
+    onNavigate: (href: string) => void;
+    media: ReactNode;
+}
+
+/** A product on the home page: its name and promise above a screenshot that runs off the card's edge. */
+export function ProductCard({
+    hue,
+    icon,
+    name,
+    status,
+    title,
+    description,
+    linkLabel,
+    href,
+    onNavigate,
+    media,
+}: ProductCardProps) {
+    return (
+        <article
+            className="group/product border-base-300 bg-base-100 hover:border-base-400 dark:bg-base-100/80 relative isolate flex flex-col overflow-hidden rounded-[1.5rem] border shadow-[0_1px_0_rgb(255_255_255/4%)_inset] transition-[border-color,box-shadow] duration-300 hover:shadow-[0_30px_80px_-40px_rgb(0_0_0/45%)]"
+            style={
+                { '--lar-card-hue': hue ?? 264, '--lar-card-chroma': hue === undefined ? 0.01 : 0.12 } as CSSProperties
+            }
+        >
+            <div
+                aria-hidden="true"
+                className="absolute inset-0 -z-10 bg-[radial-gradient(80%_60%_at_100%_0%,oklch(0.6_var(--lar-card-chroma)_var(--lar-card-hue)/0.16),transparent_70%)] transition-opacity duration-500 group-hover/product:opacity-150 dark:bg-[radial-gradient(80%_60%_at_100%_0%,oklch(0.5_var(--lar-card-chroma)_var(--lar-card-hue)/0.3),transparent_70%)]"
+            />
+            <div className="flex flex-col gap-5 p-7 pb-8 sm:p-9 sm:pb-10">
+                <div className="flex items-center gap-3">
+                    {icon}
+                    <div className="flex min-w-0 flex-col">
+                        <Text as="span" variant="label">
+                            {name}
+                        </Text>
+                    </div>
+                    <span className="ml-auto">{status}</span>
+                </div>
+                <Heading as="h3" variant="feature" className="max-w-[440px]">
+                    {title}
+                </Heading>
+                <Text variant="prose" tone="muted" className="max-w-[460px]">
+                    {description}
+                </Text>
+                <a
+                    {...tabbable}
+                    href={href}
+                    onClick={(event) => {
+                        if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+
+                        event.preventDefault();
+                        onNavigate(href);
+                    }}
+                    className="text-base-content focus-visible:before:outline-primary inline-flex w-fit items-center gap-1.5 text-[15px] font-medium before:absolute before:inset-0 before:z-10 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-[-2px] [&_svg]:size-4"
+                >
+                    {linkLabel}
+                    <span className="inline-flex transition-transform duration-200 group-hover/product:translate-x-1">
+                        <ArrowRightIcon />
+                    </span>
+                </a>
+            </div>
+            <div className="relative h-[240px] overflow-hidden [mask-image:linear-gradient(to_bottom,#000_calc(100%-56px),transparent)] pl-7 sm:h-[320px] sm:pl-9">
+                <div className="transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover/product:-translate-y-2">
+                    {media}
+                </div>
+            </div>
+        </article>
+    );
+}
+
+/** Two or three product cards side by side. */
+export function ProductGrid({ children }: { children: ReactNode }) {
+    return <div className="grid gap-5 lg:grid-cols-2">{children}</div>;
+}
+
+interface FeatureTileProps {
+    icon: ReactNode;
+    title: string;
+    children: ReactNode;
+    hue?: number;
+}
+
+/** A short benefit: an icon in a tinted square, a title and a sentence or two. */
+export function FeatureTile({ icon, title, children, hue }: FeatureTileProps) {
+    return (
+        <div className="sm:border-base-300/80 sm:bg-base-100/60 sm:dark:bg-base-100/40 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 p-4 sm:flex sm:flex-col sm:gap-3 sm:rounded-[1.125rem] sm:border sm:p-6">
+            <span
+                className={`row-span-2 inline-flex size-8 items-center justify-center rounded-[0.6rem] ring-1 ring-inset sm:size-10 sm:rounded-[0.7rem] [&>svg]:size-4 sm:[&>svg]:size-5 ${hue === undefined ? 'bg-primary/10 text-primary ring-primary/15 dark:bg-primary/20 dark:ring-primary/30 dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]' : 'kind-badge ring-current/10'}`}
+                style={hue === undefined ? undefined : ({ '--lar-kind-hue': hue } as CSSProperties)}
+            >
+                {icon}
+            </span>
+            <Heading as="h3" variant="subsection" className="self-center sm:mt-1 sm:self-auto">
+                {title}
+            </Heading>
+            <Text variant="prose" tone="muted" className="col-start-2">
+                {children}
+            </Text>
+        </div>
+    );
+}
+
+export function FeatureGrid({ children, columns = 3 }: { children: ReactNode; columns?: 2 | 3 | 4 }) {
+    const layouts = {
+        2: 'sm:grid-cols-2',
+        3: 'sm:grid-cols-2 lg:grid-cols-3',
+        4: 'sm:grid-cols-2 lg:grid-cols-4',
+    };
+
+    return (
+        <div
+            className={`divide-base-300/70 border-base-300/80 bg-base-100/60 dark:bg-base-100/40 grid divide-y rounded-2xl border sm:gap-4 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent sm:dark:bg-transparent ${layouts[columns]}`}
+        >
+            {children}
+        </div>
+    );
+}

package/src/showcase/Devices.tsx

@@ -0,0 +1,259 @@
+import type { ReactNode } from 'react';
+
+export interface ScreenshotProps {
+    /** The screenshot shown with the dark theme, and with both when there is no light one. */
+    dark: string;
+    light?: string;
+    alt: string;
+    /** Loads at once, for the first screen of a page. */
+    eager?: boolean;
+    /** Natural pixel size, so the browser can reserve the space before the image arrives. */
+    width?: number;
+    height?: number;
+}
+
+/** A product screenshot that follows the page's theme when it has a light and a dark capture. */
+export function Screenshot({ dark, light, alt, eager, width, height }: ScreenshotProps) {
+    const loading = eager ? 'eager' : 'lazy';
+    const priority = eager ? 'high' : 'auto';
+
+    if (!light)
+        return (
+            <img
+                src={dark}
+                alt={alt}
+                loading={loading}
+                fetchPriority={priority}
+                width={width}
+                height={height}
+                decoding="async"
+            />
+        );
+
+    return (
+        <>
+            <img
+                src={light}
+                alt={alt}
+                loading={loading}
+                fetchPriority={priority}
+                width={width}
+                height={height}
+                decoding="async"
+                className="dark:hidden!"
+            />
+            <img
+                src={dark}
+                alt={alt}
+                loading={loading}
+                width={width}
+                height={height}
+                decoding="async"
+                className="hidden! dark:block!"
+            />
+        </>
+    );
+}
+
+interface FrameProps {
+    children: ReactNode;
+    /** A soft contact shadow under the device. */
+    shadow?: boolean;
+}
+
+/** A MacBook Pro: a notched display with the macOS menu bar, on an aluminium base that follows the theme. */
+export function LaptopFrame({
+    children,
+    shadow = true,
+    app,
+    menu = [],
+    time,
+}: FrameProps & { app: string; menu?: readonly string[]; time?: string }) {
+    return (
+        <div className="lar-device lar-laptop" data-shadow={shadow ? 'float' : undefined}>
+            <div className="lar-laptop__lid">
+                <div className="lar-laptop__screen">
+                    <div className="lar-laptop__menubar" aria-hidden="true">
+                        <LarMenuMark />
+                        <span>{app}</span>
+                        {menu.map((item) => (
+                            <span key={item}>{item}</span>
+                        ))}
+                        {time ? <time>{time}</time> : null}
+                    </div>
+                    <div className="lar-laptop__notch" aria-hidden="true" />
+                    <div className="lar-laptop__app">{children}</div>
+                </div>
+            </div>
+            <div className="lar-laptop__base" aria-hidden="true" />
+        </div>
+    );
+}
+
+/** The menu bar's leading glyph: the Lar mark stands in for the Apple menu, so the frame claims no one's logo. */
+function LarMenuMark() {
+    return (
+        <svg viewBox="0 0 100 100" className="size-[1.3cqi] shrink-0" aria-hidden="true">
+            <path d="M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z" fill="currentColor" />
+            <path
+                d="M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
+
+/** An iPhone Pro with its Dynamic Island and side buttons, for an iOS screenshot at 1206 × 2622. */
+export function PhoneFrame({ children, shadow = true }: FrameProps) {
+    return (
+        <div className="lar-device" data-shadow={shadow ? 'float' : undefined}>
+            <div className="lar-phone">
+                <i className="lar-phone__button lar-phone__button--action" aria-hidden="true" />
+                <i className="lar-phone__button lar-phone__button--volume-up" aria-hidden="true" />
+                <i className="lar-phone__button lar-phone__button--volume-down" aria-hidden="true" />
+                <i className="lar-phone__button lar-phone__button--side" aria-hidden="true" />
+                <div className="lar-phone__screen">
+                    <div className="lar-phone__island" aria-hidden="true" />
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/** An iPad Pro with even, thin bezels; the screenshot sets the aspect ratio. */
+export function TabletFrame({ children, shadow = true, aspect = '4 / 3' }: FrameProps & { aspect?: string }) {
+    return (
+        <div className="lar-device" data-shadow={shadow ? 'float' : undefined}>
+            <div className="lar-tablet">
+                <div className="lar-tablet__screen" style={{ aspectRatio: aspect }}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/** A slim television on a pedestal, for a 16:9 capture. */
+export function TvFrame({ children, shadow = true, stand = true }: FrameProps & { stand?: boolean }) {
+    return (
+        <div className="lar-device lar-tv" data-shadow={shadow ? 'float' : undefined}>
+            <div className="lar-tv__panel">
+                <div className="lar-tv__screen">{children}</div>
+            </div>
+            {stand ? <div className="lar-tv__stand" aria-hidden="true" /> : null}
+        </div>
+    );
+}
+
+/** A Safari-style window with traffic lights and an address field. */
+export function BrowserFrame({
+    children,
+    shadow = true,
+    address,
+    aspect = '16 / 10',
+    fade,
+    tone,
+}: FrameProps & {
+    address: string;
+    aspect?: string;
+    fade?: 'right' | 'bottom' | 'both' | 'under' | 'tail';
+    tone?: 'dark';
+}) {
+    return (
+        <div
+            className={`lar-device ${tone === 'dark' ? 'dark lar-dark-palette' : ''}`}
+            data-shadow={shadow ? 'float' : undefined}
+        >
+            <div className="lar-window" data-fade={fade === 'bottom' || fade === 'tail' ? fade : undefined}>
+                <div className="lar-window__bar" aria-hidden="true">
+                    <span className="lar-window__lights">
+                        <i />
+                        <i />
+                        <i />
+                    </span>
+                    <span className="lar-window__address">{address}</span>
+                </div>
+                <div
+                    className="lar-window__screen"
+                    data-fade={fade === 'bottom' || fade === 'tail' ? undefined : fade}
+                    style={{ aspectRatio: aspect }}
+                >
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/** A Mac app window whose screenshot already carries its own title bar: corners, a hairline and depth only.
+ *  A bezel sets a dark-only capture in a dark display edge, so it reads as a deliberate dark shot on a light page;
+ *  a fade dissolves an edge where the capture is cropped. */
+export function AppWindow({
+    children,
+    shadow = true,
+    bezel,
+    fade,
+}: FrameProps & { bezel?: boolean; fade?: 'right' | 'bottom' | 'both' }) {
+    return (
+        <div className="lar-device" data-shadow={shadow ? 'float' : undefined}>
+            <div className="lar-app-window" data-bezel={bezel || undefined} data-fade={fade}>
+                <div className="lar-app-window__fade">{children}</div>
+            </div>
+        </div>
+    );
+}
+
+/** A close-up cut from a screenshot, raised on glass above a device to point at one detail. */
+export function Callout({ children, compact, fade }: { children: ReactNode; compact?: boolean; fade?: boolean }) {
+    return (
+        <div className={`lar-callout ${compact ? 'mx-auto max-w-[240px]' : ''}`} data-fade={fade || undefined}>
+            <div className="lar-callout__fade">{children}</div>
+        </div>
+    );
+}
+
+/** A close-up with a smaller detail card overlapping its lower corner. */
+export function CalloutPair({ base, detail }: { base: ReactNode; detail: ReactNode }) {
+    return (
+        <div className="relative pb-[18%]">
+            {base}
+            <div className="absolute right-[-2%] bottom-0 w-[62%] rotate-[1.5deg]">{detail}</div>
+        </div>
+    );
+}
+
+/** Close-ups one under another, for a phone-width column. */
+export function CalloutStack({ children }: { children: ReactNode }) {
+    return <div className="mx-auto flex max-w-[330px] flex-col gap-3">{children}</div>;
+}
+
+/** Media with a short, numbered reading guide floating over a quiet corner of it, on wide screens. */
+export function GuidedMedia({
+    children,
+    guide,
+    label,
+}: {
+    children: ReactNode;
+    guide: readonly string[];
+    label: string;
+}) {
+    return (
+        <div className="relative flex flex-col gap-4">
+            {children}
+            <ol
+                aria-label={label}
+                className="text-base-content md:glass-menu flex flex-col gap-2 text-sm leading-5 md:absolute md:top-[8%] md:right-[4%] md:max-w-[260px] md:rounded-xl md:p-4"
+            >
+                {guide.map((step, index) => (
+                    <li key={step} className="flex gap-2.5">
+                        <span className="bg-primary text-primary-content inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums">
+                            {index + 1}
+                        </span>
+                        {step}
+                    </li>
+                ))}
+            </ol>
+        </div>
+    );
+}

package/src/showcase/FeatureRow.tsx

@@ -0,0 +1,107 @@
+import { CheckIcon } from 'lucide-react';
+import { type ReactNode, useId } from 'react';
+
+import { Eyebrow } from '../layout/PageSection';
+import { Heading, Text } from '../typography/Typography';
+
+interface FeatureRowProps {
+    eyebrow?: string;
+    title: string;
+    children: ReactNode;
+    points?: readonly string[];
+    media: ReactNode;
+    /** Puts the media on the left. */
+    reverse?: boolean;
+    /** Copy in two columns above media that spans the full width, for detailed screenshots. */
+    wide?: boolean;
+    /** A status chip beside the eyebrow. */
+    badge?: ReactNode;
+    /** How wide a wide row's media runs: the whole column, or a centred, readable measure. */
+    mediaWidth?: 'full' | 'measure';
+    /** Gives the media two-thirds of a side-by-side row instead of seven twelfths. */
+    largeMedia?: boolean;
+}
+
+/** A feature told in copy on one side and shown on a device on the other. */
+export function FeatureRow({
+    eyebrow,
+    title,
+    children,
+    points,
+    media,
+    reverse,
+    wide,
+    badge,
+    mediaWidth = 'measure',
+    largeMedia,
+}: FeatureRowProps) {
+    const id = useId();
+
+    if (wide)
+        return (
+            <article aria-labelledby={id} className="flex flex-col gap-12">
+                <div className="grid gap-x-16 gap-y-4 lg:grid-cols-2">
+                    <div className="flex flex-col gap-4">
+                        {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
+                        <Heading id={id} as="h3" variant="feature">
+                            {title}
+                        </Heading>
+                        <Text variant="prose" tone="muted">
+                            {children}
+                        </Text>
+                    </div>
+                    {points?.length ? (
+                        <div className="lg:pt-9">
+                            <PointList points={points} />
+                        </div>
+                    ) : null}
+                </div>
+                <div className={`mx-auto w-full ${mediaWidth === 'full' ? '' : 'max-w-[780px]'}`}>{media}</div>
+            </article>
+        );
+
+    return (
+        <article
+            aria-labelledby={id}
+            className={`grid items-center gap-8 sm:gap-12 lg:gap-16 ${reverse ? (largeMedia ? 'lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]' : 'lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]') : largeMedia ? 'lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]' : 'lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]'}`}
+        >
+            <div className={`flex flex-col gap-4 max-sm:[&>h3]:mb-1 ${reverse ? 'lg:order-2' : ''}`}>
+                {eyebrow ? (
+                    <div className="flex items-center gap-3">
+                        <Eyebrow>{eyebrow}</Eyebrow>
+                        {badge}
+                    </div>
+                ) : null}
+                <Heading id={id} as="h3" variant="feature">
+                    {title}
+                </Heading>
+                <Text variant="prose" tone="muted">
+                    {children}
+                </Text>
+                {points?.length ? <PointList points={points} /> : null}
+            </div>
+            <div className={reverse ? 'lg:order-1' : ''}>{media}</div>
+        </article>
+    );
+}
+
+/** Checked lines under a feature. */
+export function PointList({ points }: { points: readonly string[] }) {
+    return (
+        <ul className="mt-2 flex flex-col gap-2.5">
+            {points.map((point) => (
+                <li key={point} className="text-base-800 flex gap-2.5 text-[15px] leading-6">
+                    <span className="bg-primary/12 text-primary dark:bg-primary/25 mt-[3px] inline-flex size-[18px] shrink-0 items-center justify-center rounded-full dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)] [&>svg]:size-3">
+                        <CheckIcon />
+                    </span>
+                    {point}
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+/** A stack of feature rows with room between them. */
+export function FeatureRows({ children }: { children: ReactNode }) {
+    return <div className="flex flex-col gap-16 sm:gap-24">{children}</div>;
+}

package/src/showcase/Hero.tsx

@@ -0,0 +1,70 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { Heading, Text } from '../typography/Typography';
+import { Backdrop } from './Stage';
+
+interface HeroProps {
+    announcement?: ReactNode;
+    title: ReactNode;
+    lead: ReactNode;
+    actions?: ReactNode;
+    note?: ReactNode;
+    visual?: ReactNode;
+    /** Tints the glow behind the hero with a product hue. */
+    hue?: number;
+}
+
+/** A page's opening: a centred statement over the brand glow, then the product on its devices. */
+export function Hero({ announcement, title, lead, actions, note, visual, hue }: HeroProps) {
+    return (
+        <section className="relative isolate">
+            <Backdrop hue={hue} />
+            <div className="mx-auto flex w-full max-w-[1200px] flex-col items-center px-5 pt-8 text-center sm:px-8 sm:pt-16 lg:pt-16">
+                {announcement ? <Intro delay={0}>{announcement}</Intro> : null}
+                <Intro delay={60}>
+                    <Heading as="h1" variant="display" className="mx-auto mt-5 max-w-[920px] whitespace-pre-line">
+                        {title}
+                    </Heading>
+                </Intro>
+                <Intro delay={140}>
+                    <Text variant="lead" tone="muted" className="mx-auto mt-5 max-w-[640px]">
+                        {lead}
+                    </Text>
+                </Intro>
+                {actions ? (
+                    <Intro delay={220}>
+                        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap max-sm:[&>a]:w-full max-sm:[&>a]:max-w-[320px]">
+                            {actions}
+                        </div>
+                    </Intro>
+                ) : null}
+                {note ? (
+                    <Intro delay={280}>
+                        <Text
+                            variant="body"
+                            tone="muted"
+                            className="mx-auto mt-4 max-w-[560px] text-balance dark:text-[#96969f]"
+                        >
+                            {note}
+                        </Text>
+                    </Intro>
+                ) : null}
+            </div>
+            {visual ? (
+                <div className="mx-auto w-full max-w-[1200px] px-5 pt-7 pb-6 sm:px-8 sm:pt-12 sm:pb-28">
+                    <Intro delay={320}>{visual}</Intro>
+                </div>
+            ) : (
+                <div className="pb-16 sm:pb-24" />
+            )}
+        </section>
+    );
+}
+
+function Intro({ children, delay }: { children: ReactNode; delay: number }) {
+    return (
+        <div className="lar-intro w-full" style={{ '--lar-intro-delay': `${delay}ms` } as CSSProperties}>
+            {children}
+        </div>
+    );
+}

package/src/showcase/PhotoSearchConcept.tsx

@@ -0,0 +1,50 @@
+import { SearchIcon } from 'lucide-react';
+
+export interface ConceptPhoto {
+    src: string;
+    alt: string;
+    /** Whether the photo matches the search shown above the grid. */
+    match: boolean;
+}
+
+/** An illustration, not a screenshot: a search over your own photo library, with the matches lit. Its label says
+ *  it is a concept. */
+export function PhotoSearchConcept({
+    query,
+    photos,
+    label,
+}: {
+    query: string;
+    photos: readonly ConceptPhoto[];
+    label: string;
+}) {
+    return (
+        <figure className="flex flex-col gap-3">
+            <div className="border-base-300 bg-base-100/80 text-base-content dark:bg-base-200/70 [&>svg]:text-base-600 flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm [&>svg]:size-4">
+                <SearchIcon />
+                <span className="truncate">{query}</span>
+            </div>
+            <ul className="grid grid-cols-3 gap-1.5">
+                {photos.map((photo) => (
+                    <li key={photo.src} className="relative overflow-hidden rounded-md">
+                        <img
+                            src={photo.src}
+                            alt={photo.alt}
+                            loading="lazy"
+                            width={320}
+                            height={320}
+                            className={`aspect-square w-full object-cover transition-opacity ${photo.match ? '' : 'opacity-35'}`}
+                        />
+                        {photo.match ? (
+                            <span
+                                aria-hidden="true"
+                                className="absolute inset-0 rounded-md ring-2 ring-white/80 ring-inset"
+                            />
+                        ) : null}
+                    </li>
+                ))}
+            </ul>
+            <figcaption className="text-base-700 text-xs">{label}</figcaption>
+        </figure>
+    );
+}

package/src/showcase/Platforms.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+
+import { type Readiness, StatusPill } from './Status';
+
+export interface Platform {
+    name: string;
+    detail: string;
+    icon: ReactNode;
+    status: Readiness;
+    statusLabel: string;
+}
+
+/** Every screen Lar reaches, each with where it stands: compact rows on phones, cards on wider screens. */
+export function PlatformGrid({ platforms, label }: { platforms: readonly Platform[]; label: string }) {
+    return (
+        <ul
+            aria-label={label}
+            className="divide-base-300/70 border-base-300/80 bg-base-100/60 dark:bg-base-100/40 grid divide-y rounded-2xl border sm:grid-cols-2 sm:gap-3 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent lg:grid-cols-4 sm:dark:bg-transparent"
+        >
+            {platforms.map((platform) => (
+                <li
+                    key={platform.name}
+                    data-status={platform.status}
+                    className="sm:border-base-300/80 sm:bg-base-100/60 sm:dark:bg-base-100/40 flex items-start gap-3 p-4 sm:flex-col sm:items-stretch sm:gap-4 sm:rounded-2xl sm:border sm:p-5 sm:data-[status=planned]:border-dashed sm:data-[status=planned]:bg-transparent"
+                >
+                    <div className="flex shrink-0 items-start justify-between gap-3">
+                        <span className="bg-base-200 text-base-800 ring-base-300/70 dark:bg-base-300/60 inline-flex size-9 items-center justify-center rounded-[0.65rem] ring-1 ring-inset sm:size-10 [&>svg]:size-[18px] sm:[&>svg]:size-5">
+                            {platform.icon}
+                        </span>
+                        <span className="hidden sm:inline-flex">
+                            <StatusPill status={platform.status}>{platform.statusLabel}</StatusPill>
+                        </span>
+                    </div>
+                    <div className="flex min-w-0 flex-1 flex-col gap-0.5 sm:gap-1">
+                        <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                            <span className="text-base-content text-[15px] font-semibold tracking-[-0.01em]">
+                                {platform.name}
+                            </span>
+                            <span className="sm:hidden">
+                                <StatusPill status={platform.status}>{platform.statusLabel}</StatusPill>
+                            </span>
+                        </span>
+                        <span className="text-base-700 text-sm leading-5">{platform.detail}</span>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+}